/* The original egg opens into a dragon framing the reveal. Scoped to the hero. */
.b-hero-coil{position:absolute;left:50%;top:calc(var(--nav-h) + 12px);width:min(1020px,96vw);height:calc(var(--hero-stage) - var(--nav-h) - 24px);transform:translateX(-50%);z-index:4;pointer-events:none;opacity:var(--coil-emerge,0)}
.b-coil-creature{width:100%;height:100%;transform-origin:78% 72%;transform:translateY(calc((1 - var(--coil-emerge,0))*65px)) scale(calc(.42 + var(--coil-grow,0)*.58));clip-path:inset(0 0 0 calc((1 - var(--coil-unfurl,0))*61%));will-change:transform,clip-path}
.b-coil-creature img{display:block;width:100%;height:100%;object-fit:contain}
.b-growth .b-shell{opacity:calc(1 - var(--shell-fade,0))!important}
.b-legendary .b-growth-end{left:22%;right:auto;top:calc(var(--hero-center) - 28px);width:34%;max-width:390px;text-align:left;font-size:clamp(42px,5.2vw,76px);line-height:1.02;transform:translateY(-50%)}
.b-legendary .b-growth-end .b-hero-reveal-label{font-size:13px!important;max-width:295px;letter-spacing:.065em;margin-top:18px}
.b-growth .b-local-fire{display:none!important}
@media(min-width:1500px){.b-hero-coil{width:1170px}.b-legendary .b-growth-end{left:calc(50% - 300px);width:400px;font-size:70px}}
@media(max-width:700px){
 .b-hero-coil{top:calc(var(--nav-h) + 125px);width:100%;height:auto;aspect-ratio:1.5}
 .b-coil-creature{transform-origin:75% 75%;transform:translateY(calc((1 - var(--coil-emerge,0))*105px)) scale(calc(.45 + var(--coil-grow,0)*.55))}
 .b-legendary .b-growth-end{top:calc(var(--nav-h) + 168px);left:17%;width:44%;max-width:none;transform:none;font-size:clamp(26px,7vw,43px);text-align:left}
 .b-legendary .b-growth-end>span br{display:initial}
 .b-legendary .b-growth-end .b-hero-reveal-label{position:absolute;top:235px;left:-25%;width:190%;max-width:none;text-align:center;font-size:12px!important;margin:0;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){.b-coil-creature{will-change:auto}}

/* The hoard appears only after the dragon has finished emerging and coiling. */
.b-coil-media{position:absolute;left:10%;bottom:8%;width:80%;height:auto;z-index:0;opacity:var(--media-reveal,0);transform:translateY(calc((1 - var(--media-reveal,0))*24px));mask-image:linear-gradient(0deg,transparent,#000 9%,#000 90%,transparent);pointer-events:none}
.b-coil-creature{position:relative;z-index:1}
@media(max-width:700px){.b-coil-media{left:2%;width:96%;bottom:4%}}

@media(min-width:701px){.b-coil-media{left:16%;width:72%}}

/* Smoke uses the same canvas and fit as the dragon so the nostril stays aligned. */
.b-hero-nose-smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--media-reveal,0);overflow:visible;filter:blur(.7px)}
.b-hero-nose-smoke path{stroke-width:4;transform-origin:895px 161px;animation:hero-nose-wisp 5s ease-in-out infinite}
.b-hero-nose-smoke path:nth-child(2){animation-delay:-1.7s;stroke-width:3}
.b-hero-nose-smoke path:nth-child(3){animation-delay:-3.4s;stroke-width:5}
@keyframes hero-nose-wisp{0%{opacity:0;transform:scale(.7,.65)}30%{opacity:.85}70%{opacity:.5}100%{opacity:0;transform:scale(1.15,1.08) skewX(5deg)}}
body.paused .b-hero-nose-smoke{display:none}
@media(prefers-reduced-motion:reduce){.b-hero-nose-smoke{display:none}}