/* MAYAVI CINEMATIC — style.css
   Layers (back→front): grid · glow/particles · content · noise. Animation state lives in js/main.js. */
:root{--bg:#050507;--bg2:#08080c;--ink:#E7E7EC;--dim:#9699A5;--p:#A855F7;--p2:#C084FC;--c:#00F0FF;--line:rgba(255,255,255,.1);
--f-head:'Space Grotesk',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',monospace;--out:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,5vw,72px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
body.nav-open{overflow:hidden}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,h4{font-family:var(--f-head);margin:0;line-height:1}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.tag,.hud,.eyebrow,.navprog,.rail,.stage-hud,.eot,.strip,.lbl{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.tag{display:block;color:var(--p2);font-size:11px;margin-bottom:1.1rem}
.accent .c,.text-gradient-purple .c,.text-gradient-purple{color:var(--p2);text-shadow:0 0 40px rgba(168,85,247,.55)}

/* ---------- overlays ---------- */
.noise{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg-grid{position:fixed;inset:-60px 0 0;z-index:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 15%,transparent 75%);animation:gridMove 14s linear infinite}
@keyframes gridMove{to{background-position:0 64px,64px 0}}
main,.footer{position:relative;z-index:1}
.vr-intro{position:relative;height:360vh;background:#030308;color:var(--ink);z-index:2}
.vr-intro.is-finished{display:none}
.vr-stage{position:relative;top:0;height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(83,44,140,.18),transparent 42%),#030308}
#vr-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.vr-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.5) 100%),linear-gradient(115deg,rgba(0,215,255,.06),transparent 35%,rgba(168,85,247,.1))}
.vr-copy,.vr-hud,.vr-skip,.vr-loader{position:absolute;z-index:3}
.vr-copy{left:var(--pad);bottom:clamp(70px,12vh,140px);max-width:420px;transition:opacity .5s}
.vr-copy h1{font-size:clamp(2.8rem,7vw,6rem);line-height:.9;text-transform:uppercase;letter-spacing:-.05em;margin:.4rem 0 1rem}
.vr-copy h1 strong{color:var(--p2);font-weight:700;text-shadow:0 0 35px rgba(168,85,247,.45)}
.vr-copy p,.vr-hud{font:500 10px var(--f-mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.vr-hud{font-size:10px;line-height:1.7;transition:opacity .5s}.vr-hud span{color:var(--p2)}.vr-hud-tl{top:120px;left:var(--pad)}.vr-hud-br{right:var(--pad);bottom:80px;display:flex;align-items:center;gap:12px}
.vr-scroll-line{width:42px;height:1px;background:var(--p2);box-shadow:0 0 12px var(--p)}
.vr-skip{right:var(--pad);top:110px;border:1px solid var(--line);background:rgba(5,5,7,.55);color:var(--ink);padding:10px 14px;font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.3s;z-index:20}
.vr-skip:hover{border-color:var(--p2);background:rgba(168,85,247,.16)}.vr-skip span{color:var(--p2);margin-left:8px}
.vr-loader{left:50%;bottom:12%;width:min(300px,40vw);transform:translateX(-50%);display:grid;grid-template-columns:1fr auto;gap:8px;font:500 9px var(--f-mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;opacity:calc(.2 + var(--vr-p,0)*1.2);transition:opacity .4s}
.vr-loader i{grid-column:1/-1;height:1px;background:var(--line);overflow:hidden}.vr-loader em{display:block;width:100%;height:100%;background:var(--p2);transform:scaleX(0);transform-origin:left;transition:transform .2s}.vr-loader.is-ready{opacity:0}.vr-loader.is-error{opacity:1;color:#fda4af}.vr-loader.is-error em{background:#fb7185}
.vr-intro.is-entering .vr-copy,.vr-intro.is-entering .vr-hud{opacity:0;transition:opacity .5s}.vr-intro.is-entering .vr-loader{opacity:1}
body.intro-active>header,body.intro-active>nav,body.intro-active>.rail,body.intro-active>main,body.intro-active>footer{visibility:hidden;opacity:0;pointer-events:none}
body.intro-loading{overflow:hidden}
body.intro-loading .vr-copy,body.intro-loading .vr-hud,body.intro-loading .vr-skip{opacity:0;pointer-events:none}
body.intro-loading .vr-loader{opacity:0;pointer-events:none}
body:not(.intro-active)>header,body:not(.intro-active)>nav,body:not(.intro-active)>.rail,body:not(.intro-active)>main,body:not(.intro-active)>footer{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transition:opacity .8s ease}

/* ── Transition overlay: darkness + light tunnel when entering the eye socket ── */
#vr-transition-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 5%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.95) 55%,#000 80%);transition:opacity .1s}
.vr-tunnel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vr-tunnel-ring{position:absolute;border-radius:50%;border:1px solid rgba(168,85,247,.3);animation:vr-tunnel-pulse 2.5s ease-in-out infinite}
.vr-tunnel-ring.r1{width:30vmin;height:30vmin;border-color:rgba(168,85,247,.2);animation-delay:0s}
.vr-tunnel-ring.r2{width:50vmin;height:50vmin;border-color:rgba(0,215,255,.15);animation-delay:.3s}
.vr-tunnel-ring.r3{width:70vmin;height:70vmin;border-color:rgba(168,85,247,.1);animation-delay:.6s}
.vr-tunnel-ring.r4{width:90vmin;height:90vmin;border-color:rgba(0,215,255,.06);animation-delay:.9s}
@keyframes vr-tunnel-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(.85);opacity:1}}

/* ── Flash exit overlay for wormhole burst ── */
#vr-flash-overlay{position:fixed;inset:0;z-index:999998;pointer-events:none;opacity:0;background:radial-gradient(circle at center,#ffffff 0%,rgba(0,240,255,.95) 35%,rgba(168,85,247,.6) 65%,#030308 100%);transition:opacity .25s ease-out}

@media(max-width:700px){.vr-intro{height:300vh}.vr-copy{bottom:70px}.vr-hud-tl{top:95px}.vr-hud-br{bottom:28px}.vr-skip{top:82px}.vr-loader{width:calc(100% - 40px);bottom:28%}}
.cursor-dot,.cursor-ring{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:992px){
 body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
 .cursor-dot,.cursor-ring{display:flex;position:fixed;left:0;top:0;z-index:99999;pointer-events:none;border-radius:50%;align-items:center;justify-content:center}
 .cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--p2);box-shadow:0 0 12px var(--p)}
 .cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(192,132,252,.6);transition:width .35s var(--out),height .35s var(--out),margin .35s var(--out),background .3s,border-color .3s}
 .cursor-ring span{font:500 9px var(--f-mono);letter-spacing:.14em;opacity:0;transition:opacity .25s}
 body.c-label .cursor-ring{width:88px;height:88px;margin:-44px 0 0 -44px;background:rgba(168,85,247,.16);backdrop-filter:blur(4px)}
 body.c-label .cursor-ring span{opacity:1}body.c-label .cursor-dot{opacity:0}
 body.c-link .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--c)}
 body.c-down .cursor-ring{transform:scale(.8)}
}

/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);transition:padding .5s var(--out),background .5s,border-color .5s;border-bottom:1px solid transparent}
.header.scrolled{padding:10px var(--pad);background:rgba(5,5,7,.78);backdrop-filter:blur(18px) saturate(160%);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px}.brand img{width:38px;height:38px;object-fit:contain;transition:width .5s var(--out),height .5s var(--out)}
.header.scrolled .brand img{width:30px;height:30px}
.brand span{display:flex;flex-direction:column;line-height:1.1}.brand b{font:700 18px var(--f-head);letter-spacing:.04em}
.brand small{font:400 9px var(--f-mono);letter-spacing:.2em;color:var(--dim);margin-top:4px}
.nav{display:flex;gap:6px}.nav a{position:relative;padding:8px 14px;font-size:14px;color:var(--dim);transition:color .3s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--p);box-shadow:0 0 8px var(--p);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.nav a:hover,.nav a.active{color:#fff}.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:30px}
.navprog{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:9px;color:var(--dim);opacity:0;transition:opacity .5s;pointer-events:none}
.header.scrolled .navprog{opacity:1}
.navprog i{display:block;width:180px;height:1px;background:var(--line);position:relative}
.navprog b{position:absolute;left:0;top:-3px;width:7px;height:7px;background:var(--p);box-shadow:0 0 10px var(--p);transform:translateX(calc(var(--p,0)*173px));border-radius:50%}
.navprog span{min-width:3.4em}#np-pct{text-align:right}
@media(max-width:991px){
 .nav{position:fixed;inset:0;background:rgba(5,5,7,.96);flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .4s}
 .nav a{font:600 28px var(--f-head);color:#fff}.nav.open{opacity:1;pointer-events:auto}.nav-toggle{display:block;position:relative;z-index:2}.navprog{display:none}
}

/* ---------- rail ---------- */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:900;display:none;flex-direction:column;gap:14px;font-size:10px}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:rgba(231,231,236,.35);transition:color .4s}
.rail i{width:14px;height:1px;background:currentColor;transition:width .5s var(--out)}
.rail b{font-weight:500;color:var(--p2);opacity:0;transform:translateX(6px);transition:.4s}
.rail a:hover,.rail a.on{color:#fff}.rail a.on i{width:30px;background:var(--p);box-shadow:0 0 8px var(--p)}.rail a:hover b,.rail a.on b{opacity:1;transform:none}
@media(min-width:1100px){.rail{display:flex}}

/* ---------- shared ---------- */
.sec-head{padding:0 var(--pad);max-width:1100px}
.sec-head h2,.exp h2{font-size:clamp(2.6rem,7vw,6rem);font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.sec-head p{color:var(--dim);max-width:62ch;margin:1.2rem 0 0}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.split .c{display:inline-block;will-change:transform}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;font:600 14px var(--f-body);letter-spacing:.04em;border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s,background .4s}
.btn i{transition:transform .4s var(--out)}.btn:hover i{transform:translateX(4px)}
.btn-primary{background:var(--p);border-color:var(--p);color:#fff;box-shadow:0 0 0 rgba(168,85,247,0)}.btn-primary:hover{box-shadow:0 12px 40px -8px rgba(168,85,247,.7)}
.btn-ghost:hover{border-color:var(--p2);background:rgba(168,85,247,.1)}
.actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 80px;overflow:hidden}
#fx,#fx2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px)}
.g1{width:50vw;height:50vw;right:-10vw;top:-10vw;background:rgba(168,85,247,.28)}.g2{width:36vw;height:36vw;left:-12vw;bottom:-14vw;background:rgba(0,240,255,.1)}
.hud{position:absolute;z-index:3;font-size:10px;color:var(--dim);display:flex;flex-direction:column;gap:4px;line-height:1.3}
.hud b{font-weight:500;color:var(--ink)}.hud .ok{color:#4ade80}.hud .ok::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80;margin-right:8px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hud-tl{left:var(--pad);top:104px}.hud-tr{right:var(--pad);top:104px;text-align:right}.hud-bl{left:var(--pad);bottom:28px}.hud-br{right:var(--pad);bottom:28px;text-align:right;align-items:flex-end}
.scrollcue{width:1px;height:34px;background:linear-gradient(var(--p),transparent);animation:cue 2s var(--out) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero-shell{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:3vw;align-items:center;will-change:transform,opacity}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:11px;color:var(--dim);margin:0 0 1.6rem}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(168,85,247,.5);color:var(--p2)}.pill i{width:6px;height:6px;border-radius:50%;background:var(--p);animation:blink 1.6s infinite}
.hero-title{font-size:clamp(2.6rem,6vw,5.8rem);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:.92}
.hero-title .split{display:block}
.hero-desc{max-width:56ch;color:var(--dim);margin:1.8rem 0 2rem}.hero-desc strong{color:#fff;font-weight:500}
.strip{display:flex;flex-wrap:wrap;gap:22px;margin-top:2.6rem;font-size:10px;color:var(--dim)}.strip b{color:var(--p2);margin-right:8px;font-weight:500}
.hero-visual{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.emblem{position:absolute;inset:0;display:grid;place-items:center}
.emblem-logo{width:34%;filter:drop-shadow(0 0 30px rgba(168,85,247,.7))}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(168,85,247,.35)}
.r1{inset:0;border-style:dashed;animation:spin 60s linear infinite}.r2{inset:12%;border-color:rgba(0,240,255,.25);animation:spin 40s linear infinite reverse}.r3{inset:26%;border-color:rgba(192,132,252,.5);box-shadow:0 0 50px rgba(168,85,247,.25) inset;animation:spin 24s linear infinite}
.r1::after,.r3::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--p2);box-shadow:0 0 14px var(--p)}
@keyframes spin{to{transform:rotate(360deg)}}
.mod{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(8,8,12,.75);border:1px solid var(--line);font:500 12px var(--f-mono);letter-spacing:.06em;backdrop-filter:blur(8px)}.mod i{color:var(--p2)}
.m1{left:-4%;top:8%}.m2{right:2%;top:22%}.m3{left:-2%;bottom:14%}.m4{right:6%;bottom:4%}
@media(max-width:991px){.hero{padding-top:130px}.hero-shell{grid-template-columns:1fr}.hero-visual{max-width:340px;margin-top:2rem}.m1{left:-2%}.m2{right:-2%}.hud-tr,.hud-tl{display:none}}

/* ---------- manga/anime cut between chapters ---------- */
.cut{position:relative;height:30vh;display:grid;place-items:center;overflow:hidden;background:#000;border-block:1px solid var(--line)}
.cut::before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.14) 0 .4deg,transparent .4deg 3.2deg);-webkit-mask-image:radial-gradient(circle,transparent 18%,#000 70%);mask-image:radial-gradient(circle,transparent 18%,#000 70%)}
.streak{position:absolute;left:0;top:50%;width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--p),#fff,var(--c),transparent);box-shadow:0 0 24px 2px rgba(168,85,247,.7);will-change:transform}
.jp{position:absolute;left:var(--pad);font:700 clamp(3rem,10vw,9rem)/1 'Noto Sans JP',sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.lbl{position:relative;font-size:11px;color:var(--ink);padding:10px 20px;background:#000;border:1px solid var(--p)}

/* ---------- wings (mobile first: vertical) ---------- */
.wings{padding:90px 0 60px;position:relative}
.stage{position:relative;margin-top:2.5rem;padding:0 var(--pad);display:grid;gap:28px}
.scene{display:grid;border:1px solid var(--line);background:var(--bg2);overflow:hidden}
.scene-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.scene-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,var(--bg2));pointer-events:none}
.scene-body{padding:clamp(1.4rem,3vw,3.2rem);display:flex;flex-direction:column;gap:1rem;position:relative}
.num{font:700 clamp(4rem,9vw,8rem)/.8 var(--f-head);color:transparent;-webkit-text-stroke:1px rgba(168,85,247,.55)}
.cat{font:500 11px var(--f-mono);letter-spacing:.14em;color:var(--c)}
.scene h3{font-size:clamp(2rem,3.8vw,3.8rem);letter-spacing:-.03em}
.scene p{color:var(--dim);margin:0;max-width:60ch}
.scene ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.scene li{font:400 11px var(--f-mono);padding:6px 12px;border:1px solid var(--line);color:var(--dim)}
.stage-hud{display:none}
@media(min-width:992px){
 .wings.is-pinned{padding:96px 0 28px}
 .wings.is-pinned .sec-head h2,.tools.is-pinned .sec-head h2{font-size:clamp(2rem,4.2vw,3.6rem)}
 .wings.is-pinned .sec-head .tag,.tools.is-pinned .sec-head .tag{margin-bottom:.5rem}
 .wings.is-pinned .sec-head p{font-size:.85rem;margin-top:.7rem}
 .wings.is-pinned .stage{display:block;height:calc(100svh - 320px);min-height:340px;margin-top:1.2rem}
 .wings.is-pinned .scene{position:absolute;inset:0 var(--pad) 0;grid-template-columns:1.35fr 1fr;height:100%;will-change:clip-path}
 .wings.is-pinned .scene-media{aspect-ratio:auto;height:100%}
 .wings.is-pinned .shade{background:linear-gradient(90deg,transparent 60%,var(--bg2))}
 .wings.is-pinned .stage-hud{display:flex;position:absolute;left:var(--pad);bottom:-28px;z-index:10;align-items:center;gap:16px;font-size:10px;color:var(--dim)}
 .stage-hud i{display:block;width:130px;height:2px;background:var(--line);position:relative;overflow:hidden}.stage-hud b{position:absolute;inset:0;background:var(--p);box-shadow:0 0 10px var(--p);transform:scaleX(var(--p,0));transform-origin:left}
}

/* ---------- tools ---------- */
.tools{padding:90px 0 60px;position:relative}
.track{display:grid;gap:20px;padding:2.5rem var(--pad) 0}
.tool{border:1px solid var(--line);background:var(--bg2);padding:1.8rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden}
.tool-top{display:flex;justify-content:space-between;align-items:center}.tool-top i{font-size:28px;color:var(--p2)}
.tool-top span{font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);padding:5px 10px}
.tool-n{font:700 clamp(3rem,7vw,6rem)/.9 var(--f-head);color:transparent;-webkit-text-stroke:1px rgba(168,85,247,.5)}
.tool h3{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.03em}.tool p{color:var(--dim);margin:0}
.tool::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--p),var(--c));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--out)}
.tool:hover::after,.tool.on::after{transform:scaleX(1)}
@media(min-width:640px) and (max-width:991px){.track{grid-template-columns:1fr 1fr}}
@media(min-width:992px){
 .tools.is-pinned{padding:96px 0 28px}
 .tools.is-pinned .sec-head p{font-size:.85rem;margin-top:.7rem}
 .tools.is-pinned .track{display:flex;width:max-content;gap:2.5rem;padding:2.5rem 12vw 0 8vw;align-items:center}
 .tools.is-pinned .tool{flex:0 0 min(420px,32vw);min-height:min(52svh,430px);transform:scale(var(--s,.86));opacity:var(--o,.45);transform-origin:center}
}

/* ---------- experience ---------- */
.exp{padding:100px var(--pad);position:relative}
.exp-grid{display:grid;gap:3rem;max-width:1360px;margin:0 auto}
.exp-frame{position:relative;aspect-ratio:4/5;max-height:78svh;overflow:hidden;border:1px solid var(--line)}
.exp-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.exp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,5,7,.92));pointer-events:none}
.corner{position:absolute;width:22px;height:22px;border:solid var(--p2);z-index:2}.tl{left:12px;top:12px;border-width:1px 0 0 1px}.tr{right:12px;top:12px;border-width:1px 1px 0 0}.bl{left:12px;bottom:12px;border-width:0 0 1px 1px}.br{right:12px;bottom:12px;border-width:0 1px 1px 0}
.badge{position:absolute;z-index:2;display:flex;gap:10px;align-items:center;padding:10px 14px;background:rgba(5,5,7,.75);border:1px solid var(--line);font:400 10px var(--f-mono);letter-spacing:.1em;backdrop-filter:blur(8px)}
.badge i{color:var(--p2);font-size:18px}.badge span{display:flex;flex-direction:column}.badge b{color:#fff;font-weight:500}.b1{left:18px;top:18px}.b2{right:18px;top:78px}
.exp-hud{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:4px;font:400 10px var(--f-mono);letter-spacing:.14em;color:var(--dim)}.exp-hud b{font:600 clamp(1.2rem,2vw,1.7rem) var(--f-head);color:#fff;letter-spacing:.02em}
.lead{font-size:1.1rem;margin:1.6rem 0 1rem}.sublead{color:var(--dim);margin:0 0 2rem}
.caps{display:grid;gap:14px}
.cap{display:flex;gap:1.4rem;padding:1.5rem 0 1.5rem 1.4rem;border-left:1px solid var(--line);opacity:.35;transition:opacity .6s var(--out),border-color .6s,box-shadow .6s}
.cap.on{opacity:1;border-color:var(--p);box-shadow:-3px 0 0 var(--p),-30px 0 50px -30px rgba(168,85,247,.6)}
.cap-n{font:500 12px var(--f-mono);color:var(--p2);padding-top:.35rem}.cap h4{font-size:1.5rem;display:flex;gap:12px;align-items:center;margin-bottom:.7rem}.cap h4 i{color:var(--p2);font-size:1.2rem}.cap p{margin:0;color:var(--dim);max-width:58ch}
@media(min-width:992px){
 .exp-grid{grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:start}
 .exp-visual{position:sticky;top:12svh}
 .cap{min-height:34svh;align-items:flex-start}
}
@media(max-width:991px){.cap{opacity:1}}

/* ---------- join ---------- */
.join{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:120px var(--pad);background:#000;text-align:center}
.join-glow{position:absolute;left:50%;top:50%;width:80vmin;height:80vmin;margin:-40vmin 0 0 -40vmin;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.55),rgba(168,85,247,.12) 45%,transparent 68%);filter:blur(20px);opacity:0;pointer-events:none}
.join-inner{position:relative;z-index:2;max-width:1000px}
.join-title{font-size:clamp(2.8rem,8vw,7.5rem);letter-spacing:-.04em;font-weight:700;text-transform:uppercase;line-height:.95}
.join-sub{color:var(--dim);max-width:60ch;margin:1.8rem auto 2.2rem}.join .actions{justify-content:center}
.eot{margin:3.5rem 0 1rem;font-size:11px;color:rgba(231,231,236,.5);letter-spacing:.4em}
.eot::before{content:"";display:inline-block;width:7px;height:7px;margin-right:12px;background:var(--p);box-shadow:0 0 10px var(--p);animation:blink 1.4s steps(2) infinite}
.replay{font:400 11px var(--f-mono);letter-spacing:.14em;color:var(--dim)}.replay:hover{color:#fff}
.btn-primary.pulse{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 36px 4px rgba(168,85,247,.55)}}

/* ---------- footer ---------- */
.footer{padding:70px var(--pad) 28px;background:var(--bg);border-top:1px solid var(--line)}
.foot-top{display:grid;gap:2.5rem;grid-template-columns:1.5fr 1fr 1fr;max-width:1360px;margin:0 auto}
.footer h3{font-size:1.8rem;margin-bottom:1rem}.footer h4{font:500 11px var(--f-mono);letter-spacing:.16em;color:var(--p2);text-transform:uppercase;margin-bottom:1rem}
.footer p{color:var(--dim);max-width:44ch;font-size:.92rem}.foot-top a{display:block;color:var(--dim);padding:3px 0;transition:color .3s}.foot-top a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:1.2rem}.social a{display:grid!important;place-items:center;width:40px;height:40px;border:1px solid var(--line);padding:0!important}.social a:hover{border-color:var(--p);color:var(--p2)!important}
.foot-bot{max-width:1360px;margin:3rem auto 0;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font:400 11px var(--f-mono);letter-spacing:.1em;color:var(--dim)}
.foot-bot a:hover{color:var(--p2)}
.btn-admin-portal{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.35);color:#c084fc;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .3s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 12px rgba(168,85,247,0.15)}
.btn-admin-portal:hover{background:rgba(168,85,247,0.28);border-color:#a855f7;color:#fff!important;box-shadow:0 0 20px rgba(168,85,247,0.45);transform:translateY(-1px)}
@media(max-width:767px){.foot-top{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}.bg-grid{animation:none}}
.sweep{position:absolute;z-index:6;left:0;top:50%;width:45%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--p),#fff,var(--c),transparent);box-shadow:0 0 26px 2px rgba(168,85,247,.7);opacity:0}
html{overflow-x:clip}.tools{overflow:hidden}