/* A continuous 10.8-second overture, driven by the same clock as the 3D model. */
@property --intro-reveal{syntax:"<number>";inherits:false;initial-value:0}
.intro{--intro-eye-open:0;--intro-solid:0;--intro-departure:0;--intro-glow:0;--intro-time:0}
.intro:before,.intro-horizon{--intro-reveal:inherit}
.intro-skip{display:none;position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:100;align-items:center;gap:8px;padding:10px 12px;min-height:44px;border:1px solid #ffffff18;border-radius:8px;background:#08080875;color:#aaaeb1;font:11px Archivo,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(8px);transition:color .2s,background .2s,border-color .2s}.intro-skip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}.is-entering .intro-skip:not([hidden]){display:flex}.intro-skip:hover,.intro-skip:focus-visible{color:#fff;background:#181818;border-color:#ffffff55;outline-offset:4px}
.intro{display:none;animation:none;opacity:1;visibility:visible;background:transparent;overflow:hidden;mask-image:none}
.intro:before{content:'';position:absolute;inset:0;background:#050505;mask-image:radial-gradient(ellipse at 74% 53%,transparent calc(var(--intro-reveal)*120%),#000 calc(var(--intro-reveal)*120% + 19%))}
.is-entering .intro{display:block}.is-entering .world-stage{z-index:72}.is-entering .scene-fallback{opacity:0}
.intro-character{position:absolute;z-index:2;left:50%;top:50%;width:min(58vmin,570px);height:min(58vmin,570px);animation:none;transform:translate(calc(-50% + var(--intro-departure)*24vw),calc(-50% + var(--intro-departure)*3vh)) scale(calc(1 - var(--intro-departure)*.66));opacity:calc(1 - max(0,(var(--intro-departure) - .85)/.15))}
.intro-eye{left:35%;top:42%;width:30%;height:18%;animation:none;opacity:calc(1 - var(--intro-solid));transform:none;filter:drop-shadow(0 0 20px #edd07344)}
.intro-body{animation:none;opacity:var(--intro-solid);clip-path:inset(calc((1 - var(--intro-solid))*100%) 0 0);filter:drop-shadow(0 0 calc(var(--intro-glow)*25px) #efb44c88);transform:none}
.intro-body svg>g:nth-of-type(2){transform-origin:180px 210px;animation:intro-legs .9s ease-in-out infinite alternate}
.intro-flare{animation:none;opacity:var(--intro-glow);transform:scale(calc(1 + var(--intro-glow)*1.7)) rotate(calc(var(--intro-time)*14deg));filter:blur(20px)}
#intro-fallback-particles{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
[data-intro-renderer=webgl] .intro-character,[data-intro-renderer=webgl] #intro-fallback-particles{visibility:hidden}
.intro-horizon{position:absolute;left:74%;top:53%;width:100vmax;height:100vmax;transform:translate(-50%,-50%) scale(calc(.025 + var(--intro-reveal)*1.8));opacity:calc(var(--intro-reveal)*(1 - var(--intro-reveal))*2.8);border-radius:50%;background:conic-gradient(from 10deg,#ffffff00,#c7d5e222 12%,#e7ba5e33 15%,#0b0b0b 23%,#ffffff07 38%,#fff3 45%,#ea503126 51%,#090909 60%,#ffffff20 75%,transparent 90%);filter:blur(15px);box-shadow:inset 0 0 70px #000,0 0 60px #ffffff10;animation:event-horizon 9s linear infinite}
.intro-horizon i{position:absolute;inset:7%;border:1px solid #fff3;border-radius:50%;transform:rotateX(55deg) rotate(-25deg);box-shadow:0 0 25px #ffffff28}.intro-horizon i:nth-child(2){inset:12%;transform:rotateX(70deg) rotate(35deg);border-color:#ed8a4844}.intro-horizon i:nth-child(3){inset:2%;transform:rotateY(60deg) rotate(-40deg)}
.is-entering .hero-copy,.is-entering .header-shell{animation:none;opacity:var(--intro-reveal);filter:blur(calc((1 - var(--intro-reveal))*15px));transform:translateY(calc((1 - var(--intro-reveal))*35px)) scale(calc(.9 + var(--intro-reveal)*.1));transform-origin:100% 50%}
.is-entering .hero{clip-path:circle(calc(var(--intro-reveal)*var(--intro-radius,150vmax)) at 74vw 53vh);filter:blur(calc((1 - var(--intro-reveal))*6px));transform:scale(calc(.965 + var(--intro-reveal)*.035));transform-origin:74vw 53vh}
.is-entering .scroll-rail{opacity:var(--intro-reveal)}
.built-for img[src$="solana-color.svg"]{opacity:1}
@keyframes event-horizon{to{rotate:360deg}}@keyframes intro-legs{to{transform:rotate(-3deg)}}
@media(max-width:700px){.intro-character{width:90vw;height:90vw;transform:translate(calc(-50% + var(--intro-departure)*7vw),calc(-50% + var(--intro-departure)*23vh)) scale(calc(1 - var(--intro-departure)*.58))}.intro:before{mask-image:radial-gradient(ellipse at 57% 73%,transparent calc(var(--intro-reveal)*120%),#000 calc(var(--intro-reveal)*120% + 19%))}.intro-horizon{left:57%;top:73%}.is-entering .hero{clip-path:circle(calc(var(--intro-reveal)*var(--intro-radius,170vmax)) at 57vw 73vh);transform-origin:57vw 73vh}}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}.is-entering .hero{clip-path:none;filter:none;transform:none}.is-entering .hero-copy,.is-entering .header-shell,.is-entering .scroll-rail{opacity:1}.is-entering .world-stage{z-index:0}}

/* The locked intro only exposes the hero. Keep its blur/transform surface local. */
.hero{transition:filter .2s}.is-entering .hero{will-change:transform,filter}