.hatch-stage#hatch-stage {
  position:relative;isolation:isolate;width:min(100%,490px);height:360px;
  display:grid;place-items:center;overflow:visible;margin:12px auto 0;
}
.hatch-art{
  position:relative;width:min(94%,430px);height:335px;display:grid;place-items:center;
  z-index:3;transform-origin:50% 78%;will-change:transform;
}
.hatch-stage#hatch-stage .hatch-layer {
  position:absolute;inset:0;display:block;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;
  object-fit:contain;object-position:center center;
  opacity:0;transform:translateY(4px) scale(.965);
  transition:opacity .38s ease,transform .6s cubic-bezier(.18,.82,.2,1);
  animation:none!important;filter:drop-shadow(0 13px 8px #183e521b);
}
.hatch-stage#hatch-stage .hatch-layer.is-active {opacity:1;transform:translateY(0) scale(1)}
.hatch-glow{position:absolute;width:min(330px,78%);aspect-ratio:1;border-radius:50%;z-index:0;background:radial-gradient(circle,#bcebe687 0%,#fff6d080 50%,transparent 70%);opacity:.6;transform:scale(.76);transition:opacity .65s,transform .65s}
.hatch-stage[data-phase="born"] .hatch-glow,.hatch-stage[data-phase="break"] .hatch-glow{opacity:1;transform:scale(1.32)}
.hatch-stage#hatch-stage .hatch-ground{z-index:1;position:absolute;bottom:14px;width:190px;opacity:.7;transition:width .7s ease,opacity .7s ease}
.hatch-stage[data-phase="wobble"] .hatch-art{animation:eggGentleWobble 1s ease-in-out both}
.hatch-stage[data-phase="crack"] .hatch-art{animation:eggCrackShiver 1.08s ease-in-out both}
.hatch-stage[data-phase="break"] .hatch-art{animation:eggOpenBounce 1.18s cubic-bezier(.2,1,.2,1) both}
.hatch-stage[data-phase="born"] .hatch-art{animation:eggBabyBounce 1.28s cubic-bezier(.15,.85,.25,1) both}
.hatch-stage[data-phase="born"] .hatch-ground{width:225px;opacity:.5}
.hatch-spark{position:absolute;z-index:4;opacity:0;font-size:1.4rem;color:#efb949;pointer-events:none}
.spark-one{left:16%;top:21%}.spark-two{right:11%;top:28%;color:#27a6a0}.spark-three{right:24%;bottom:18%;color:#ee756b}
.hatch-stage[data-phase="break"] .hatch-spark,.hatch-stage[data-phase="born"] .hatch-spark{animation:hatchSparkUp 1.25s cubic-bezier(.15,.7,.2,1) both}
.hatch-stage[data-phase="break"] .spark-two,.hatch-stage[data-phase="born"] .spark-two{animation-delay:.12s}
.hatch-stage[data-phase="break"] .spark-three,.hatch-stage[data-phase="born"] .spark-three{animation-delay:.2s}
.hatch-shard{position:absolute;z-index:2;opacity:0;pointer-events:none;top:45%;width:13px;height:20px;background:#f9e6b8;border:2px solid #183e52;border-radius:3px 4px 7px 2px;transform:rotate(-15deg)}
.shard-one{left:19%}.shard-two{right:17%}
.hatch-stage[data-phase="break"] .shard-one{animation:shardFlyLeft 1s ease-out both}
.hatch-stage[data-phase="break"] .shard-two{animation:shardFlyRight 1s ease-out both}
@keyframes eggGentleWobble{0%,100%{transform:rotate(0) scale(1)}16%{transform:rotate(-7deg) scale(1.03,.96)}35%{transform:rotate(8deg) scale(.98,1.03)}54%{transform:rotate(-5deg)}72%{transform:rotate(3deg)}}
@keyframes eggCrackShiver{0%,100%{transform:translateX(0) rotate(0)}12%{transform:translateX(-4px) rotate(-3deg)}22%{transform:translateX(5px) rotate(4deg)}33%{transform:translateX(-6px) rotate(-3deg)}46%{transform:translateX(6px) rotate(3deg)}65%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateY(-4px) scale(1.035)}}
@keyframes eggOpenBounce{0%{transform:translateY(16px) scale(.93,.87)}20%{transform:translateY(-24px) scale(1.04,1.13)}52%{transform:translateY(5px) scale(1.06,.92)}74%{transform:translateY(-7px) scale(.98,1.045)}100%{transform:translateY(0) scale(1)}}
@keyframes eggBabyBounce{0%{transform:translateY(14px) scale(.90,.86)}22%{transform:translateY(-19px) scale(1.08,1.08)}47%{transform:translateY(4px) scale(1.08,.94)}71%{transform:translateY(-9px) scale(.99,1.035)}100%{transform:translateY(0) scale(1)}}
@keyframes hatchSparkUp{0%{opacity:0;transform:translateY(18px) scale(.5) rotate(0)}23%,70%{opacity:1}100%{opacity:0;transform:translateY(-38px) scale(1.28) rotate(38deg)}}
@keyframes shardFlyLeft{0%{opacity:0;transform:translate(0,0) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translate(-72px,-45px) rotate(-100deg)}}
@keyframes shardFlyRight{0%{opacity:0;transform:translate(0,0) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translate(72px,-45px) rotate(90deg)}}
@media(max-width:650px){
 .hatch-stage#hatch-stage{height:315px;width:min(100%,370px)}
 .hatch-art{height:290px;width:min(100%,370px)}
 .hatch-stage#hatch-stage .hatch-layer{width:100%!important;height:100%!important}
}
@media(prefers-reduced-motion:reduce){
 .hatch-art,.hatch-layer,.hatch-glow,.hatch-spark,.hatch-shard{animation:none!important;transition:none!important}
 .hatch-stage#hatch-stage .hatch-layer:not(.is-active){opacity:0!important}
}

.hatch-stage#hatch-stage{display:flex!important;align-items:center!important;justify-content:center!important}
.hatch-stage#hatch-stage .hatch-art{flex:0 0 100%;width:100%!important;max-width:430px;min-width:0}
@media(max-width:650px){.hatch-stage#hatch-stage .hatch-art{max-width:370px}}