/* Chain tunnel hero (home page only). Desktop: sticky stage with the WebGL ride; phones: light 2D canvas; reduced motion: still frame. */
.chain-hero{padding-block:0!important;overflow:visible!important;isolation:isolate}
.chain-hero:before{display:none!important}
.chain-track{position:relative}
html.chain-3d .chain-track{height:var(--chain-track,340vh)}
.chain-stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:clip;isolation:isolate;--ct-p:0}
html.chain-3d .chain-stage{position:sticky;top:0;height:100vh}
.chain-scene{position:absolute;inset:0;z-index:-1;background:#030406 url(/_astro/chain-tunnel-still.webp) center/cover no-repeat}
.chain-scene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.chain-scene.is-ready canvas{opacity:1}
.chain-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.18) 70%,#000 100%);pointer-events:none}
html.chain-still .chain-scene:after{background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.55) 75%,#000 100%)}
html.chain-2d .chain-scene:after{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.72) 92%,#000 100%)}
.chain-copy{position:relative;z-index:1;padding-block:clamp(3.5rem,7vw,6rem) clamp(2rem,4vw,3rem)}
html.chain-3d .chain-copy{opacity:calc(1 - var(--ct-p) * 5);transform:translate3d(0,calc(var(--ct-p) * -140px),0);will-change:opacity,transform}
/* The old hero parallax on the copy is replaced by the ride */
.chain-hero .hero-copy{transform:none!important}
.chain-hero .hero-depth-stats,.chain-hero .hero-depth-ticker{transform:none!important}
/* Soft glow on the headline, restrained; the line masks must not clip it */
.chain-hero .hero-line-mask{overflow:visible!important}
.chain-hero h1 .line--white{--glow:0 0 28px rgba(255,255,255,.22),0 0 2px rgba(255,255,255,.35);text-shadow:var(--glow)}
.chain-hero h1 .line--blue{--glow:0 0 32px rgba(56,191,255,.38),0 0 2px rgba(56,191,255,.2);text-shadow:var(--glow)}
.chain-hero h1 .line--amber{--glow:0 0 32px rgba(255,184,0,.32),0 0 2px rgba(255,184,0,.2);text-shadow:var(--glow)}
.chain-hero .lead{text-shadow:0 1px 18px rgba(0,0,0,.8)}
/* Headline reveal on desktop: each letter is a glowing fragment that drifts into place */
html.chain-3d .chain-hero h1.ct-frags .line[data-motion]{opacity:1!important;transform:none!important;transition:none!important}
.ct-frag{display:inline-block;white-space:pre}
html.chain-3d h1.ct-frags .ct-frag{opacity:0;filter:blur(7px) brightness(2.4);text-shadow:0 0 18px currentColor,0 0 46px currentColor;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.72);transition:opacity 1.05s var(--ease-out-premium,cubic-bezier(.16,1,.3,1)),transform 1.15s var(--ease-out-premium,cubic-bezier(.16,1,.3,1)),filter 1.1s ease-out,text-shadow 1.4s ease-out;transition-delay:var(--d)}
html.chain-3d h1.ct-frags.ct-go .ct-frag{opacity:1;filter:blur(0) brightness(1);text-shadow:var(--glow);transform:none}
/* No decorative lines next to the stat labels */
.chain-hero .stat-strip.vertical>div{border-left:0!important;padding-left:0!important}
.chain-hero .stat-strip dd{text-shadow:0 0 18px rgba(56,191,255,.25)}
/* The ride only happens where there is room for it */
@media (max-width:900px){.chain-scene{background-image:url(/_astro/chain-tunnel-still-800.webp)}.chain-stage{min-height:0}.chain-copy{padding-block:clamp(3.5rem,7vw,6rem) 2.5rem}html.chain-3d .chain-track{height:auto}html.chain-3d .chain-stage{position:relative;height:auto}html.chain-3d .chain-copy{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chain-scene canvas{transition:none}}