*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#f4f1ea;--mut:#a9a4b4;--big:'Anton',Impact,'Arial Narrow',sans-serif;--cond:'Barlow Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,sans-serif;--bg:#07060a}
html{background:var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid #ffcf6a;outline-offset:3px}

/* loader */
.loader{display:none}
.js .loader{display:flex;position:fixed;inset:0;z-index:200;background:#07060a;flex-direction:column;justify-content:center;align-items:center;gap:26px;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .9s;padding:24px}
.js .loader.done{transform:translateY(-100%);pointer-events:none}
.rm .loader,.fallback .loader{display:none}
.ld-names{position:relative;height:clamp(64px,14vw,150px);width:100%;text-align:center}
.ld-names span{position:absolute;inset:0;font-family:var(--big);font-size:clamp(46px,11vw,140px);line-height:1;text-transform:uppercase;color:var(--c1);opacity:0;transform:scale(1.15);white-space:nowrap}
.ld-names span.on{opacity:1;transform:none;transition:transform .25s ease-out}
.ld-bar{width:min(420px,80vw);height:3px;background:#ffffff1a;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8202a,#f2c14e,#2f6bff,#7ddc3a,#b85cff)}
.ld-row{width:min(420px,80vw);display:flex;justify-content:space-between;font-family:var(--cond);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--mut)}
.ld-row b{color:var(--ink);font-weight:700}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;padding:16px clamp(16px,4vw,48px);background:linear-gradient(#07060acc,#07060a00)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--big);font-size:1.25rem;letter-spacing:.06em}
.brand em{font-style:normal;font-family:var(--cond);font-weight:600;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-left:6px}
.brand-mark{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#123a8c 0 26%,#c8161f 27% 45%,#eef1f6 46% 66%,#c8161f 67%);box-shadow:0 0 18px #c8161f88}
.dnav{display:flex;gap:20px;margin-left:auto}
.dnav a{text-decoration:none;font-family:var(--cond);font-weight:600;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);transition:color .2s}
.dnav a:hover,.dnav a.on{color:var(--ink)}
.hdr-cta{text-decoration:none;font-family:var(--cond);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;padding:9px 18px;border:1px solid #ffffff40;border-radius:40px;transition:background .2s}
.hdr-cta:hover{background:#ffffff14}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff38;background:#0007;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:1180px){.dnav{display:none}.hdr-cta{margin-left:auto}}
@media (max-width:760px){.hdr-cta{display:none}.burger{display:flex}.brand em{display:none}}

/* mobile menu: fixed, full screen, direct child of body */
.mmenu{position:fixed;inset:0;height:100vh;height:100dvh;z-index:150;background:radial-gradient(circle at 80% 10%,#3a0a10,#07060a 60%);display:flex;flex-direction:column;padding:22px 24px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
.mmenu[hidden]{display:none}
.mm-close{align-self:flex-end;background:none;border:1px solid #ffffff40;color:var(--ink);border-radius:40px;padding:10px 18px;font-family:var(--cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;cursor:pointer}
.mm-eye{margin-top:18px;font-family:var(--cond);letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;color:var(--mut)}
.mm-nav{display:flex;flex-direction:column;margin-top:10px}
.mm-nav a{display:flex;align-items:baseline;gap:14px;text-decoration:none;font-family:var(--big);font-size:clamp(30px,9vw,44px);line-height:1.15;text-transform:uppercase;padding:6px 0;border-bottom:1px solid #ffffff14}
.mm-nav a span{font-family:var(--cond);font-size:.9rem;color:var(--c1);letter-spacing:.1em}
.mm-foot{margin-top:auto;padding-top:20px;font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--mut)}
body.menu-open{overflow:hidden}

/* rail */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .4s}
.rail.show{opacity:1}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;flex-direction:row-reverse}
.rail i{width:10px;height:10px;border-radius:50%;border:2px solid var(--c1);transition:transform .3s,background .3s}
.rail span{font-family:var(--cond);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:.3s}
.rail a.on i{background:var(--c1);transform:scale(1.35)}
.rail a.on span,.rail a:hover span{opacity:1;transform:none}
@media (max-width:900px){.rail{display:none}}

/* intro */
.intro{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:110px 20px 70px;overflow:hidden;isolation:isolate}
.stars{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff9,transparent),radial-gradient(1px 1px at 72% 18%,#fff8,transparent),radial-gradient(1.5px 1.5px at 38% 72%,#fff7,transparent),radial-gradient(1px 1px at 86% 64%,#fff9,transparent),radial-gradient(1px 1px at 22% 88%,#fff6,transparent),radial-gradient(1.5px 1.5px at 58% 40%,#fff8,transparent),radial-gradient(1px 1px at 92% 90%,#fff7,transparent),radial-gradient(1px 1px at 5% 55%,#fff8,transparent);background-size:420px 420px}
.intro-glow{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 35% at 50% 55%,#c8161f55,transparent 70%),conic-gradient(from 0deg at 50% 60%,#e8202a22,#f2c14e22,#2f6bff22,#7ddc3a22,#b85cff22,#e8202a22);filter:blur(30px);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pill{display:inline-block;font-family:var(--cond);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;padding:8px 16px;border:1px solid #ffffff38;border-radius:40px;background:#ffffff0d}
.intro-t{font-family:var(--big);font-weight:400;line-height:.86;margin:22px 0 18px;text-transform:uppercase}
.intro-t>span{display:block}
.it-1{font-size:clamp(74px,19vw,250px);background:linear-gradient(180deg,#fff 0%,#ffd7d7 45%,#e8202a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.it-2{font-size:clamp(34px,8.6vw,114px);letter-spacing:.18em;margin-right:-.18em;color:var(--ink)}
.it-1 .l,.it-2 .l{background:inherit;-webkit-background-clip:text;background-clip:text}
.w{display:inline-block;white-space:nowrap}
.l{display:inline-block}
.js .intro-t .l{opacity:0;transform:translateY(60%) rotate(8deg);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms + .1s)}
.js .ready .intro-t .l,.rm .intro-t .l,.fallback .intro-t .l{opacity:1;transform:none}
.it-1 .l{color:transparent}
.intro-sub{max-width:520px;color:#d7d2de;font-size:1.08rem}
.emblems{list-style:none;display:flex;gap:clamp(8px,2vw,18px);justify-content:center;flex-wrap:wrap;margin-top:34px}
.emblems li{width:clamp(40px,8vw,62px);aspect-ratio:1;border-radius:50%;background:#ffffff0a;border:1px solid #ffffff1f;padding:7px;box-shadow:0 0 0 0 var(--c1);transition:box-shadow .3s,transform .3s}
.emblems li:hover{transform:translateY(-4px);box-shadow:0 0 22px -4px var(--c1)}
.js .emblems li{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--i)*80ms + .8s)}
.js .ready .emblems li,.rm .emblems li,.fallback .emblems li{opacity:1;transform:none}
.cue{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;font-family:var(--cond);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;color:var(--mut)}
.cue i{width:2px;height:46px;background:linear-gradient(#fff,transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* scenes */
.scene{--p:0;--a:1;--r:0;--x:0;position:relative;height:calc(var(--h) * 100vh);height:calc(var(--h) * 100svh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;z-index:-3;background:radial-gradient(70% 60% at 68% 50%,var(--bg1),var(--bg2) 75%)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(35% 35% at 68% 50%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 70%);opacity:calc(.35 + var(--a)*.65)}
.ghost{position:absolute;z-index:-2;top:50%;left:0;white-space:nowrap;font-family:var(--big);font-size:clamp(120px,26vw,420px);line-height:1;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c1) 35%,transparent);transform:translate(calc((.3 - var(--p)) * 60vw),-50%);opacity:.7}
.fx-wrap{position:absolute;inset:0;z-index:-1;transform-origin:68% 50%;transform:scale(calc(1 + var(--x)*var(--x)*1.6));opacity:calc(1 - var(--x)*var(--x)*1.1);filter:blur(calc(var(--x)*8px))}
.stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 68% 50%,color-mix(in srgb,var(--c1) 70%,#fff),var(--bg2) 70%);opacity:calc(var(--x)*var(--x)*.9 + (1 - var(--en,1))*.9)}
.art{position:absolute;left:68%;top:50%;width:min(46vw,72vh);aspect-ratio:1;transform:translate(-50%,-50%)}
.art-svg{width:100%;height:100%;overflow:visible}
.copy{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);width:min(520px,40vw);opacity:calc(1 - var(--x)*1.4)}
.idx{font-family:var(--cond);font-weight:600;letter-spacing:.3em;color:var(--mut);font-size:.9rem}
.idx span{color:var(--c1);font-weight:700}
.name{font-family:var(--big);font-weight:400;text-transform:uppercase;line-height:.9;font-size:clamp(56px,7.4vw,124px);margin:10px 0 18px;color:var(--ink);text-shadow:0 0 40px color-mix(in srgb,var(--c1) 45%,transparent)}
.name .w{overflow:hidden;padding:.06em .02em 0;margin-bottom:-.06em;vertical-align:top}
.name .l{--k:clamp(0,calc(var(--a)*2.2 - var(--i)*.07),1);transform:translateY(calc((1 - var(--k))*110%));opacity:var(--k)}
.name .w:last-child .l:last-child{color:var(--c1)}
.tag{font-size:clamp(1rem,1.25vw,1.2rem);color:#e3dfe8;max-width:430px;opacity:clamp(0,calc(var(--a)*2 - 1),1);transform:translateY(calc((1 - var(--a))*20px))}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;opacity:clamp(0,calc(var(--a)*2 - 1.2),1)}
.chips li{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;padding:6px 12px;border:1px solid color-mix(in srgb,var(--c1) 60%,transparent);border-radius:30px;background:color-mix(in srgb,var(--c1) 12%,transparent)}
.meta{margin-top:18px;font-family:var(--cond);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;color:var(--mut);display:flex;align-items:center;gap:10px;opacity:clamp(0,calc(var(--a)*2 - 1.3),1)}
.meta i{width:22px;height:1px;background:var(--c2)}
.rv-hint{margin-top:16px;font-family:var(--cond);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--c2);opacity:calc(clamp(0,calc(var(--a)*3 - 2),1) * (1 - clamp(0,calc(var(--r)*4),1)))}
.rm .rv-hint,.fallback .rv-hint,html:not(.js) .rv-hint{display:none}

/* svg transform base */
.art-svg g{transform-box:view-box;transform-origin:200px 200px}

/* IRON MAN */
.s-iron{--a2:clamp(0,calc((var(--a) - .25)/.75),1)}
.s-iron .im-shell{transform:scale(calc(.55 + .45*var(--a)));opacity:clamp(0,calc(var(--a)*3),1)}
.s-iron .im-pl{transform:translate(calc((1 - var(--a2))*-180px),calc((1 - var(--a2))*60px)) rotate(calc((1 - var(--a2))*-25deg));opacity:var(--a2)}
.s-iron .im-pr{transform:translate(calc((1 - var(--a2))*180px),calc((1 - var(--a2))*60px)) rotate(calc((1 - var(--a2))*25deg));opacity:var(--a2)}
.s-iron .im-plate{transform:translateY(calc(var(--r)*-70px)) scaleY(calc(1 - var(--r)*.62));transform-origin:200px 40px}
.s-iron .im-eyes{opacity:calc(clamp(0,calc((var(--a) - .85)*7),1) * (1 - var(--r)*.85))}
.s-iron .im-face{opacity:clamp(0,calc(var(--r)*3),1)}
.hud{position:absolute;left:68%;top:50%;width:min(62vw,92vh);aspect-ratio:1;transform:translate(-50%,-50%);font-family:var(--cond);color:#ffcf6a;letter-spacing:.2em;font-size:.78rem;text-transform:uppercase}
.hud svg{width:100%;height:100%;overflow:visible}
.hud-r1{transform-origin:200px 200px;transform:rotate(calc(var(--p)*360deg))}
.hud-r2{transform-origin:200px 200px;transform:rotate(calc(var(--p)*-540deg))}
.hud-tl{position:absolute;left:4%;top:12%;line-height:1.4}.hud-br{position:absolute;right:2%;bottom:12%;text-align:right}
.hud b{font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:.05em}
.hud-br b{font-size:.9rem;color:#9cf0ff}
.reactor{position:absolute;left:68%;top:50%;width:min(80vw,120vh);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.6 + var(--a)*.5));opacity:calc(.12 + var(--a)*.22);filter:blur(2px)}
.scan-line{display:none}

/* SPIDER-MAN + reusable reveal */
.reveal{position:relative;width:100%;height:100%}
.reveal>*{position:absolute;inset:0;width:100%;height:100%}
.reveal-face img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.reveal-mask{clip-path:inset(0 0 calc(var(--r)*101%) 0);filter:drop-shadow(0 18px 30px #0008)}
.reveal-roll{pointer-events:none;opacity:calc(clamp(0,calc(var(--r)*20),1) * clamp(0,calc((1 - var(--r))*8),1))}
.roll-band{transform:translateY(calc((1 - var(--r))*404px - 14px))}
.spidey-art{transform:translate(-50%,-50%) rotate(calc((1 - var(--a))*-38deg));transform-origin:50% -60%}
.thread{position:absolute;left:68%;top:0;width:2px;height:calc(50% - min(23vw,36vh) + 14px);background:linear-gradient(#fff0,#ffffffcc);transform-origin:50% 0;transform:rotate(calc((1 - var(--a))*-38deg));opacity:calc(1 - var(--r))}
.s-spidey .bg{background:radial-gradient(70% 60% at 68% 50%,var(--bg1),var(--bg2) 75%)}
.s-spidey .stage::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.18;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23fff' fill='none' stroke-width='.8'%3E%3Cpath d='M0 0L200 200M200 0L0 200M100 0V200M0 100H200'/%3E%3Cpath d='M30 30Q100 50 170 30Q150 100 170 170Q100 150 30 170Q50 100 30 30Z'/%3E%3Cpath d='M60 60Q100 70 140 60Q130 100 140 140Q100 130 60 140Q70 100 60 60Z'/%3E%3C/g%3E%3C/svg%3E") left top/min(60vw,600px) no-repeat}
.s-spidey .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;z-index:-2;background:linear-gradient(transparent,#02040c),repeating-linear-gradient(90deg,#0b1430 0 38px,#0e1a3d 38px 60px,#091128 60px 96px);clip-path:polygon(0 60%,6% 60%,6% 20%,12% 20%,12% 45%,18% 45%,18% 5%,24% 5%,24% 50%,32% 50%,32% 25%,38% 25%,38% 55%,46% 55%,46% 10%,50% 10%,50% 40%,58% 40%,58% 18%,64% 18%,64% 52%,72% 52%,72% 30%,80% 30%,80% 0,85% 0,85% 45%,92% 45%,92% 22%,100% 22%,100% 100%,0 100%)}

/* CAP */
.cap-art{transform:translate(calc(-50% + (1 - var(--a))*-80vw),-50%) rotate(calc(var(--a)*-720deg + var(--p)*200deg))}
.streak{position:absolute;left:0;top:50%;height:min(46vw,72vh);width:68%;transform:translateY(-50%) scaleX(clamp(0,calc((1 - var(--a))*3),1));transform-origin:right;background:linear-gradient(90deg,transparent,#2f6bff33 50%,#ffffff55);clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);opacity:clamp(0,calc(var(--a)*4),1)}
.s-cap .stage::before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(2px 2px at 10% 20%,#fff6,transparent),radial-gradient(2px 2px at 30% 80%,#fff5,transparent),radial-gradient(2px 2px at 85% 15%,#fff6,transparent),radial-gradient(2px 2px at 55% 65%,#fff4,transparent);background-size:300px 300px}
.s-cap .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;z-index:-2;background:repeating-linear-gradient(90deg,#c8161f 0 60px,#eef1f6 60px 120px)}

/* THOR */
.thor-art{transform:translate(-50%,calc(-50% + (1 - var(--a))*70vh)) rotate(calc((1 - var(--a))*-40deg + var(--p)*12deg))}
.bolt{position:absolute;inset:0;width:100%;height:100%}
.flash{position:absolute;inset:0;background:#cfe8ff;opacity:0;mix-blend-mode:screen;pointer-events:none}
.s-thor .bg{background:radial-gradient(60% 50% at 68% 30%,#2b3b58,var(--bg2) 75%)}
.s-thor .stage::before{content:"";position:absolute;inset:-10% -10% auto;height:55%;z-index:-2;background:radial-gradient(30% 50% at 20% 40%,#3a4a66aa,transparent 70%),radial-gradient(35% 50% at 60% 30%,#2c3a52cc,transparent 70%),radial-gradient(30% 40% at 90% 50%,#3a4a66aa,transparent 70%);filter:blur(12px);transform:translateX(calc(var(--p)*-8%))}

/* HULK */
.s-hulk{--a2:clamp(0,calc((var(--a) - .7)/.3),1)}
.hulk-art{transform:translate(-50%,-50%) scale(calc(.35 + .65*var(--a)))}
.cracks{position:absolute;left:42%;top:0;width:58%;height:100%}
.cracks path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a2));filter:drop-shadow(0 0 6px #7ddc3a)}
.shock{position:absolute;left:68%;top:50%;width:min(46vw,72vh);aspect-ratio:1;border-radius:50%;border:3px solid #b6ff7a;transform:translate(-50%,-50%) scale(calc(.5 + var(--a2)*1.6));opacity:calc(var(--a2)*(1 - var(--a2))*3)}
.s-hulk.smash .stage{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-8px,3px)}40%,60%{transform:translate(8px,-3px)}}
.s-hulk .bg::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 55%,#8a4fd822,transparent 40%)}

/* PANTHER */
.s-panther{--a2:clamp(0,calc((var(--a) - .2)/.8),1)}
.panther-art{transform:translate(-50%,calc(-50% + (1 - var(--a))*8vh));opacity:clamp(0,calc(var(--a)*2),1)}
.panther-art .art-svg{filter:brightness(calc(.3 + var(--a)*.7)) drop-shadow(0 0 calc(var(--a2)*30px) #b85cff88)}
.bp-glow{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a2))}
.sparks{position:absolute;left:68%;top:50%;width:0;height:0}
.sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--c1);box-shadow:0 0 12px var(--c1);transform:rotate(calc(var(--i)*26deg)) translateX(calc(min(18vw,28vh) + var(--a)*min(10vw,16vh))) rotate(calc(var(--p)*240deg)) translateX(20px);opacity:calc(var(--a)*.9)}
.sparks.gold i{background:#ffcf6a;box-shadow:0 0 12px #ffb03a;transform:rotate(calc(var(--i)*20deg + var(--p)*-180deg)) translateX(calc(min(22vw,34vh)*var(--a)))}

/* STRANGE */
.strange-art{transform:translate(-50%,-50%) scale(calc(.1 + .9*var(--a)));opacity:clamp(0,calc(var(--a)*3),1)}
.ds-r1{transform:rotate(calc(var(--p)*240deg))}
.ds-r2{transform:rotate(calc(var(--p)*-300deg))}
.ds-r3{transform:rotate(calc(var(--p)*420deg))}
.ds-eye{transform:scale(clamp(0,calc((var(--a) - .5)*2),1))}

/* roster */
.roster{position:relative;padding:clamp(80px,12vw,150px) clamp(16px,5vw,64px);text-align:center;background:radial-gradient(60% 40% at 50% 0,#2a0a10,var(--bg) 70%)}
.roster-t{font-family:var(--big);font-weight:400;text-transform:uppercase;font-size:clamp(44px,8vw,110px);line-height:.95;margin:18px 0 10px}
.roster-sub{color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px);max-width:1240px;margin:44px auto 0;text-align:left}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:18px;overflow:hidden;background:radial-gradient(80% 70% at 50% 35%,var(--bg1),#09080d);border:1px solid #ffffff17;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--c1);box-shadow:0 20px 50px -20px var(--c1)}
.card-art{aspect-ratio:1;padding:16%;transition:transform .5s}
.card:hover .card-art{transform:scale(1.07)}
.card-txt{padding:0 18px 18px;display:flex;flex-direction:column;gap:2px}
.card-txt b{font-family:var(--big);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2vw,28px);letter-spacing:.02em}
.card-txt span{font-family:var(--cond);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:var(--mut)}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.card-more{justify-content:center;padding:28px;gap:10px;background:repeating-linear-gradient(135deg,#ffffff06 0 12px,transparent 12px 24px),#0c0b12}
.card-more b{font-family:var(--big);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.4vw,34px);line-height:1}
.card-more span{color:var(--mut);font-size:.95rem}
.card-more::after{background:linear-gradient(90deg,#e8202a,#f2c14e,#2f6bff,#7ddc3a,#b85cff)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}

/* footer */
.foot{padding:60px clamp(20px,5vw,64px) calc(40px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid #ffffff14;color:var(--mut);font-size:.92rem;display:flex;flex-direction:column;gap:8px;align-items:center}
.foot-big{font-family:var(--big);font-size:clamp(30px,5vw,56px);color:var(--ink);text-transform:uppercase;line-height:1;margin-bottom:10px}
.foot-by{margin-top:10px;font-family:var(--cond);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.foot-by a{color:#ffcf6a}

/* mobile scene layout (phones and portrait tablets) */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
 .art{left:50%;top:33%;width:min(78vw,40vh)}
 .hud{left:50%;top:33%;width:min(98vw,52vh)}.hud-tl,.hud-br{font-size:.62rem}.hud b{font-size:1.1rem}.hud-br b{font-size:.7rem}
 .reactor{left:50%;top:33%;width:min(130vw,70vh)}
 .thread{left:50%;height:calc(33% - min(39vw,20vh) + 10px)}
 .shock{left:50%;top:33%;width:min(78vw,40vh)}
 .sparks{left:50%;top:33%}
 .sparks i{transform:rotate(calc(var(--i)*26deg)) translateX(calc(min(30vw,16vh) + var(--a)*min(8vw,5vh))) rotate(calc(var(--p)*240deg)) translateX(14px)}
 .sparks.gold i{transform:rotate(calc(var(--i)*20deg + var(--p)*-180deg)) translateX(calc(min(40vw,22vh)*var(--a)))}
 .bg{background:radial-gradient(90% 50% at 50% 33%,var(--bg1),var(--bg2) 80%)}
 .bg::after{background:radial-gradient(45% 30% at 50% 33%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 70%)}
 .copy{left:20px;right:20px;width:auto;top:auto;bottom:calc(26px + env(safe-area-inset-bottom));transform:none}
 .name{font-size:clamp(38px,11.4vw,72px);margin:6px 0 10px}
 .tag{font-size:.98rem}
 .chips{margin-top:12px}.chips li{font-size:.7rem;padding:5px 10px}
 .meta{margin-top:12px;font-size:.75rem}
 .rv-hint{margin-top:10px}
 .ghost{top:33%}
 .streak{top:33%;height:min(78vw,40vh);width:50%}
 .cap-art{transform:translate(calc(-50% + (1 - var(--a))*-110vw),-50%) rotate(calc(var(--a)*-720deg + var(--p)*200deg))}
 .s-spidey .stage::after{height:16%}
}
@media (max-width:760px) and (max-height:640px){.chips{display:none}}

/* static fallback: reduced motion or no JS */
.rm .scene,html:not(.js) .scene,.fallback .scene{height:auto}
.rm .stage,html:not(.js) .stage,.fallback .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
.rm .scene,html:not(.js) .scene,.fallback .scene{--a:1!important;--r:0!important;--x:0!important;--p:.3!important}
.rm *{animation:none!important;transition:none!important}

/* zoom-through + entrance flash */
.scene{--en:clamp(0,calc(var(--a)*2.2),1)}
.s-spidey .stage::after,.s-cap .stage::after{content:none}
.s-strange .fx-wrap{transform:scale(calc(1 + var(--x)*var(--x)*5))}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){.fx-wrap{transform-origin:50% 33%}}

/* spot reveal (cursor circle) */
.reveal-spot{--mx:50%;--my:45%;--rad:0px;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 calc(var(--rad) - 2px),transparent var(--rad));mask-image:radial-gradient(circle at var(--mx) var(--my),#000 calc(var(--rad) - 2px),transparent var(--rad));opacity:clamp(0,calc((var(--r) - .9)*10),1)}
.spot-hint{margin-top:12px;font-family:var(--cond);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:var(--c2);opacity:clamp(0,calc((var(--r) - .9)*10),1)}
@media (hover:none){.spot-hint{display:none}}
.rm .spot-hint,.fallback .spot-hint,html:not(.js) .spot-hint{display:none}

/* horizontal pinned words */
.hscroll{--p:0;position:relative;height:340vh;height:340svh}
.h-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(60% 50% at 50% 50%,#1a0a12,#07060a 75%)}
.h-eye{position:absolute;top:96px;left:clamp(20px,6vw,96px);font-family:var(--cond);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.85rem;color:var(--mut)}
.h-track{display:flex;gap:6vw;padding:0 8vw;width:max-content;transform:translateX(var(--tx,0px));will-change:transform}
.hw{display:flex;flex-direction:column;gap:6px}
.hw b{font-family:var(--big);font-weight:400;font-size:clamp(110px,22vw,340px);line-height:.9;color:var(--c1);text-shadow:0 0 60px color-mix(in srgb,var(--c1) 40%,transparent)}
.hw.out b{color:transparent;-webkit-text-stroke:2px var(--c1);text-shadow:none}
.hw span{font-family:var(--cond);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.85rem;color:var(--mut)}
.h-bar{position:absolute;left:clamp(20px,6vw,96px);right:clamp(20px,6vw,96px);bottom:60px;height:2px;background:#ffffff1a}
.h-bar i{display:block;height:100%;width:calc(var(--p)*100%);background:linear-gradient(90deg,#ff3b30,#2f6bff,#7ddc3a,#b85cff,#ffb03a)}
.rm .hscroll,html:not(.js) .hscroll,.fallback .hscroll{height:auto}
.rm .h-stage,html:not(.js) .h-stage,.fallback .h-stage{position:relative;height:auto;padding:120px 0 80px}
.rm .h-track,html:not(.js) .h-track,.fallback .h-track{width:auto;flex-wrap:wrap;transform:none}
.rm .h-stage .h-bar,html:not(.js) .h-bar,.fallback .h-bar{display:none}

/* manifesto word reveal */
.manifesto{padding:clamp(110px,18vh,200px) clamp(20px,8vw,140px);display:flex;justify-content:center}
.mf{max-width:1100px;font-family:var(--big);font-weight:400;font-size:clamp(30px,4.6vw,68px);line-height:1.12;text-transform:uppercase}
.mf .wd{opacity:.14;transition:opacity .35s,color .35s}
.mf .wd.on{opacity:1}
.mf .wd.hl{color:#ffcf6a}

/* hero index with hover preview */
.index{max-width:1240px;margin:44px auto 0;text-align:left;border-top:1px solid #ffffff1a}
.ix{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:16px;padding:16px 8px;border-bottom:1px solid #ffffff1a;text-decoration:none;transition:padding .35s,background .35s}
.ix span{font-family:var(--cond);font-weight:700;color:var(--c1);letter-spacing:.1em}
.ix b{font-family:var(--big);font-weight:400;text-transform:uppercase;font-size:clamp(34px,5vw,72px);line-height:1;transition:color .3s,transform .4s}
.ix em{font-style:normal;font-family:var(--cond);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-size:.85rem}
.ix:hover{padding-left:28px;background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 14%,transparent),transparent)}
.ix:hover b{color:var(--c1)}
.ix-prev{position:fixed;left:0;top:0;width:260px;height:260px;z-index:40;pointer-events:none;border-radius:20px;background:radial-gradient(circle,#ffffff12,#0000 70%);padding:20px;opacity:0;transform:translate(var(--px,0),var(--py,0)) scale(.6) rotate(-6deg);transition:opacity .3s,transform .25s cubic-bezier(.2,.8,.2,1)}
.ix-prev.on{opacity:1;transform:translate(var(--px,0),var(--py,0)) scale(1) rotate(0)}
@media (hover:none),(max-width:900px){.index,.ix-prev{display:none}}

/* custom cursor + tilt */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
 .js .cursor{display:block;position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:50%;z-index:300;pointer-events:none;mix-blend-mode:difference;transform:translate(var(--cx,-100px),var(--cy,-100px)) scale(var(--cs,1));transition:transform .12s ease-out,width .2s,height .2s}
 .js .cursor.big{--cs:2.2}
}
.card{transform-style:preserve-3d}
.art-tilt{transition:transform .3s ease-out}