/* BOOM_EGG_HATCH_ANIMATION_V2 */

.boom-hatch-cinematic{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(67,255,198,.14),transparent 30%),
    rgba(2,8,14,.94);
  backdrop-filter:blur(10px);
}

.boom-hatch-cinematic.is-shiny{
  background:
    radial-gradient(circle at 50% 46%,rgba(255,218,72,.22),transparent 32%),
    rgba(4,7,12,.96);
}

.boom-hatch-scene{
  position:relative;
  width:min(720px,94vw);
  height:min(680px,88vh);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.boom-hatch-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(70,255,202,.25),rgba(70,255,202,.04) 48%,transparent 70%);
  filter:blur(8px);
  opacity:.8;
}

.is-shiny .boom-hatch-glow{
  background:radial-gradient(circle,rgba(255,217,72,.38),rgba(255,180,30,.08) 50%,transparent 72%);
}

.boom-hatch-egg{
  position:relative;
  width:150px;
  height:190px;
  border-radius:52% 52% 46% 46% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 34% 28%,#effff7 0 8%,transparent 9%),
    radial-gradient(circle at 68% 38%,#75e4c1 0 9%,transparent 10%),
    radial-gradient(circle at 43% 68%,#5dd6b1 0 8%,transparent 9%),
    linear-gradient(145deg,#f7fff9,#bfe4d8);
  border:3px solid rgba(78,255,194,.72);
  box-shadow:
    0 0 30px rgba(67,255,198,.5),
    0 0 90px rgba(67,255,198,.16);
  z-index:4;
}

.boom-hatch-cinematic.is-start .boom-hatch-egg{
  animation:boomEggWobble .72s ease-in-out infinite;
}

.boom-hatch-cinematic.is-crack-2 .boom-hatch-egg{
  animation:boomEggHardWobble .22s ease-in-out infinite;
}

.boom-hatch-crack{
  position:absolute;
  width:4px;
  height:0;
  background:#17262b;
  transform-origin:top;
  opacity:0;
  z-index:5;
}

.boom-hatch-crack.c1{
  left:72px;
  top:48px;
  transform:rotate(24deg);
}

.boom-hatch-crack.c2{
  left:89px;
  top:78px;
  transform:rotate(-36deg);
}

.boom-hatch-crack.c3{
  left:55px;
  top:97px;
  transform:rotate(48deg);
}

.is-crack-1 .boom-hatch-crack.c1,
.is-crack-1 .boom-hatch-crack.c2,
.is-crack-2 .boom-hatch-crack{
  height:45px;
  opacity:1;
}

.boom-hatch-flash{
  position:absolute;
  inset:-100vh -100vw;
  background:white;
  opacity:0;
  pointer-events:none;
  z-index:20;
}

.is-burst .boom-hatch-flash{
  animation:boomHatchFlash .75s ease-out forwards;
}

.boom-hatch-shell{
  position:absolute;
  width:42px;
  height:30px;
  border-radius:50% 50% 30% 30%;
  background:#d9f5e9;
  border:2px solid rgba(71,255,194,.65);
  opacity:0;
  z-index:7;
}

.is-burst .boom-hatch-shell{
  animation:boomShellFly 1.05s ease-out forwards;
}

.boom-hatch-shell.s1{--x:-150px;--y:-110px;transform:rotate(-25deg)}
.boom-hatch-shell.s2{--x:155px;--y:-95px;transform:rotate(25deg)}
.boom-hatch-shell.s3{--x:-180px;--y:45px;transform:rotate(-55deg)}
.boom-hatch-shell.s4{--x:185px;--y:55px;transform:rotate(58deg)}

.boom-hatch-pokemon{
  position:absolute;
  z-index:10;
  width:min(260px,45vw);
  height:min(260px,45vw);
  object-fit:contain;
  opacity:0;
  transform:scale(.25);
  filter:brightness(5) blur(8px);
}

.is-reveal .boom-hatch-pokemon{
  animation:boomPokemonReveal .85s cubic-bezier(.2,.8,.2,1) forwards;
}

.boom-hatch-copy{
  position:absolute;
  top:76%;
  z-index:12;
  opacity:0;
  transform:translateY(18px);
}

.is-reveal .boom-hatch-copy{
  animation:boomCopyReveal .55s .55s ease-out forwards;
}

.boom-hatch-copy small{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.22em;
  font-weight:900;
  color:#69ffd1;
}

.is-shiny .boom-hatch-copy small{
  color:#ffd94d;
}

.boom-hatch-copy strong{
  display:block;
  font-size:clamp(34px,6vw,64px);
  line-height:.95;
  color:#fff;
  text-transform:uppercase;
}

.boom-hatch-copy span{
  display:block;
  margin-top:10px;
  color:#99aeb7;
  font-weight:800;
  letter-spacing:.12em;
}

.boom-hatch-continue{
  margin-top:20px;
  padding:13px 30px;
  border:1px solid #59f8c7;
  border-radius:12px;
  background:rgba(16,45,45,.8);
  color:#fff;
  font-weight:900;
  letter-spacing:.12em;
  cursor:pointer;
}

.boom-hatch-continue:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(83,255,203,.25);
}

.boom-hatch-spark{
  position:absolute;
  z-index:9;
  width:8px;
  height:8px;
  background:#fff;
  transform:rotate(45deg);
  opacity:0;
}

.is-reveal .boom-hatch-spark{
  animation:boomSpark 1.2s ease-out infinite;
}

.is-shiny .boom-hatch-spark{
  background:#ffe05c;
  box-shadow:0 0 14px #ffd84c;
}

@keyframes boomEggWobble{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-7deg)}
  75%{transform:rotate(7deg)}
}

@keyframes boomEggHardWobble{
  0%,100%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-7px) rotate(-10deg)}
  75%{transform:translateX(7px) rotate(10deg)}
}

@keyframes boomHatchFlash{
  0%{opacity:0}
  25%{opacity:1}
  100%{opacity:0}
}

@keyframes boomShellFly{
  0%{opacity:1;translate:0 0;scale:1}
  100%{opacity:0;translate:var(--x) var(--y);scale:.6}
}

@keyframes boomPokemonReveal{
  0%{opacity:0;transform:scale(.25);filter:brightness(6) blur(9px)}
  55%{opacity:1;transform:scale(1.18);filter:brightness(2) blur(1px)}
  100%{opacity:1;transform:scale(1);filter:none}
}

@keyframes boomCopyReveal{
  to{opacity:1;transform:translateY(0)}
}

@keyframes boomSpark{
  0%{opacity:0;transform:rotate(45deg) scale(.2)}
  35%{opacity:1}
  100%{opacity:0;transform:rotate(225deg) scale(1.7)}
}

@media(max-width:600px){
  .boom-hatch-scene{height:82vh}
  .boom-hatch-egg{width:120px;height:155px}
  .boom-hatch-copy{top:72%}
}