/* The vector dragon rig. Every part fills the same 1536×1024 frame, so transform
   origins below are the joints, measured in that frame:
   neck 1118,322 · shoulder 1160,480 · tail tip 190,650 · haunch 1150,950. */
.b-coil-creature{clip-path:none;container-type:size}
/* Once the dragon is clear, the halves fall away rather than fading over it. */
.b-growth .b-shell-bottom{translate:calc(var(--shell-fade,0)*28px) calc(var(--shell-fade,0)*70px)}
.b-growth .b-shell-top{translate:calc(var(--shell-fade,0)*60px) calc(var(--shell-fade,0)*-30px)}
/* The dragon climbs out of the lower shell, which stays opaque until it is clear. */
.b-hero-coil .b-coil-creature{transform:translateY(calc((1 - var(--coil-rise,1))*55px)) scale(calc(.42 + var(--coil-grow,0)*.58))}
/* On phones the halves part sideways, so the dragon starts inside the lower shell
   (down and to the left of its resting place) and climbs up into position. */
@media(max-width:700px){.b-hero-coil .b-coil-creature{transform:translate(calc((1 - var(--coil-climb,1))*-85px),calc((1 - var(--coil-climb,1))*125px)) scale(calc(.45 + var(--coil-grow,0)*.55))}}
.b-rig{position:absolute;left:50%;top:50%;width:min(100cqw,150cqh);height:min(100cqh,66.667cqw);transform:translate(-50%,-50%)}
.b-rig-breath,.b-rig-part,.b-rig-idle{position:absolute;inset:0}
.b-rig-art{position:absolute;display:block;max-width:none}
.b-rig-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-rig-breath{transform-origin:74.87% 92.77%}
.b-rig-head,.b-rig-head>.b-rig-idle{transform-origin:72.786% 31.445%}
.b-rig-wing,.b-rig-wing>.b-rig-idle{transform-origin:75.521% 46.875%}
.b-rig-tip,.b-rig-tip>.b-rig-idle{transform-origin:12.37% 63.477%}
.b-rig-head{transform:rotate(calc(var(--rig-head,0)*1deg))}
.b-rig-wing{transform:rotate(calc(var(--rig-wing-rot,0)*1deg)) scaleX(var(--rig-wing,1))}
.b-rig-tip{opacity:var(--rig-tip-o,1);transform:rotate(calc((1 - var(--rig-tip,1))*-28deg)) scale(calc(.82 + var(--rig-tip,1)*.18))}
.b-rig-head,.b-rig-wing,.b-rig-tip{will-change:transform}

/* The blink lid closes downward from the upper lid line. */
.b-rig-lid g{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}

/* Once the reveal has finished the dragon keeps breathing: slow, offset cycles,
   so the parts never line up into a visible loop. */
.b-growth[data-sequence=complete] .b-rig-breath{animation:b-rig-breath 5.2s ease-in-out infinite}
.b-growth[data-sequence=complete] .b-rig-head>.b-rig-idle{animation:b-rig-head 7.4s ease-in-out infinite}
.b-growth[data-sequence=complete] .b-rig-wing>.b-rig-idle{animation:b-rig-wing 6.1s ease-in-out -1.3s infinite}
.b-growth[data-sequence=complete] .b-rig-tip>.b-rig-idle{animation:b-rig-tip 4.6s ease-in-out -.8s infinite}
.b-growth[data-sequence=complete] .b-rig-lid g{animation:b-rig-blink 6.8s linear 1.4s infinite}
@keyframes b-rig-breath{0%,100%{transform:none}50%{transform:scale(1.004,1.009)}}
@keyframes b-rig-head{0%,100%{transform:none}35%{transform:rotate(-1.3deg)}70%{transform:rotate(.7deg)}}
@keyframes b-rig-wing{0%,100%{transform:none}50%{transform:rotate(-.9deg) scaleX(.978)}}
@keyframes b-rig-tip{0%,100%{transform:none}50%{transform:rotate(5deg)}}
@keyframes b-rig-blink{0%,93%,100%{transform:scaleY(0)}95.5%{transform:scaleY(1)}}
body.paused .b-rig *,body.paused .b-rig-breath{animation-play-state:paused!important}

/* Cracks spread outward from the seam instead of fading in everywhere at once.
   The seam sits at 43.3% of the egg's height. */
.b-growth-art .b-crack-layer{--crack-reach:calc(var(--cracks,0)*62%);opacity:clamp(0,calc(var(--cracks,0)*4),1);-webkit-mask-image:linear-gradient(180deg,transparent calc(43.3% - var(--crack-reach)),#000 calc(43.3% - var(--crack-reach) + 7%),#000 calc(43.3% + var(--crack-reach) - 7%),transparent calc(43.3% + var(--crack-reach)));mask-image:linear-gradient(180deg,transparent calc(43.3% - var(--crack-reach)),#000 calc(43.3% - var(--crack-reach) + 7%),#000 calc(43.3% + var(--crack-reach) - 7%),transparent calc(43.3% + var(--crack-reach)))}

@media(prefers-reduced-motion:reduce){
 .b-rig *,.b-rig-breath{animation:none!important}
 .b-rig-head,.b-rig-wing,.b-rig-tip{will-change:auto}
}

/* Feathered joints (head on neck, body and tip on tail) use CSS masks. WebKit tiles SVG-masked images and leaves hairline seams. */
.b-rig-head-art{-webkit-mask-image:linear-gradient(173.49deg,#000 84.65%,transparent 90.49%);mask-image:linear-gradient(173.49deg,#000 84.65%,transparent 90.49%)}
.b-rig-tailtip-art{-webkit-mask-image:linear-gradient(175.66deg,#000 91.80%,transparent 95.02%);mask-image:linear-gradient(175.66deg,#000 91.80%,transparent 95.02%)}
.b-rig-tail-art,.b-rig-tail-reveal{-webkit-mask-image:linear-gradient(-4.49deg,#000 91.34%,transparent 95.10%);mask-image:linear-gradient(-4.49deg,#000 91.34%,transparent 95.10%)}
.b-rig-body-art{-webkit-mask-image:linear-gradient(-90.00deg,#000 95.07%,transparent 99.65%);mask-image:linear-gradient(-90.00deg,#000 95.07%,transparent 99.65%)}