@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;1,700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --accent:#e53935;
  --accent-glow:rgba(229,57,53,0.45);
  --ease:cubic-bezier(.76,0,.24,1);
  --easeOut:cubic-bezier(.16,1,.3,1);
  --dark:#141f33;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--dark);font-family:'Rajdhani',sans-serif;cursor:none;}

#cur{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 14px var(--accent);transition:background .3s,box-shadow .3s;}
#curR{position:fixed;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:.7;transition:border-color .3s;}
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;}
#scanlines{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.01;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#000 2px,#000 4px);}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.56) 100%);}
#card{position:fixed;inset:0;display:flex;z-index:5;overflow:hidden;}

#leftPanel{
  position:relative;width:40%;flex-shrink:0;
  background:#f6f6f4;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 52px 40px;overflow:hidden;z-index:2;
}
#leftPanel::after{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg,transparent,var(--accent) 25%,var(--accent) 75%,transparent);
  transition:background .5s;z-index:1;
}
.l-bottom-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent 60%);transition:background .5s;}
.panel-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size:44px 44px;}
#ghost{
  position:absolute;left:-16px;top:26%;
  font-family:'Bebas Neue',cursive;font-size:clamp(90px,12vw,150px);
  color:rgba(0,0,0,.03);line-height:1;pointer-events:none;user-select:none;white-space:nowrap;
  letter-spacing:-3px;transition:color .6s;
}
.l-top,.l-mid,.l-bot{position:relative;z-index:2;}
.l-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;}
.marvel-logo{font-family:'Bebas Neue',cursive;font-size:1.55rem;letter-spacing:7px;color:var(--accent);line-height:1;transition:color .4s;display:inline-block;}
.breadcrumb{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:3px;color:rgba(0,0,0,.28);text-transform:uppercase;margin-top:7px;}
.breadcrumb span{color:rgba(0,0,0,.55);}
.role-badge{display:inline-flex;align-items:center;gap:9px;font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:rgba(0,0,0,.38);}
.role-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;transition:background .4s;box-shadow:0 0 8px var(--accent-glow);animation:pdot 2.4s ease-in-out infinite;}
@keyframes pdot{0%,100%{box-shadow:0 0 4px var(--accent-glow);}50%{box-shadow:0 0 14px var(--accent-glow);}}
.accent-line{width:0;height:2px;background:var(--accent);transition:background .4s,width .9s var(--easeOut);}
.accent-line.vis{width:56px;}
.hero-name{font-family:'Bebas Neue',cursive;font-size:clamp(4.4rem,8vw,8.4rem);line-height:.82;letter-spacing:5px;overflow:visible;perspective:700px;margin-bottom:4px;}
.hero-name-inner{display:block;position:relative;color:var(--accent);text-shadow:0 2px 0 rgba(0,0,0,.18),0 0 40px var(--accent-glow),0 0 80px var(--accent-glow);transition:color .5s,text-shadow .5s;}
.hero-name-inner::before,.hero-name-inner::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font-family:'Bebas Neue',cursive;font-size:inherit;letter-spacing:inherit;line-height:inherit;pointer-events:none;opacity:0;overflow:hidden;}
.hero-name-inner::before{color:#ff2d2d;text-shadow:none;animation:glitchR 4.2s linear infinite;animation-delay:1.1s;}
.hero-name-inner::after{color:#00e5ff;text-shadow:none;animation:glitchC 4.2s linear infinite;animation-delay:1.4s;}
.hero-name-inner.glitch-burst{animation:nameFlicker .7s linear forwards;}
.hero-name-inner.glitch-burst::before{animation:glitchBurstR .7s linear forwards !important;}
.hero-name-inner.glitch-burst::after{animation:glitchBurstC .7s linear forwards !important;}
@keyframes nameFlicker{0%,100%{filter:none;}6%,16%,26%{filter:brightness(2.2) saturate(1.6);}11%,21%,31%{filter:brightness(1);}38%,52%,66%{filter:brightness(1.9) saturate(1.4);}43%,57%,70%{filter:brightness(1);}80%{filter:brightness(1.5);}88%{filter:brightness(1);}}
@keyframes glitchBurstR{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}5%{opacity:1;clip-path:inset(4% 0 72% 0);transform:translateX(-14px) skewX(-7deg);}9%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}15%{opacity:1;clip-path:inset(52% 0 12% 0);transform:translateX(-18px) skewX(-10deg);}18%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}24%{opacity:1;clip-path:inset(22% 0 48% 0);transform:translateX(-11px) skewX(6deg);}26%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}33%{opacity:1;clip-path:inset(68% 0 8% 0);transform:translateX(-20px) skewX(-12deg);}36%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}42%{opacity:1;clip-path:inset(36% 0 30% 0);transform:translateX(-9px);}44%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}50%{opacity:1;clip-path:inset(12% 0 60% 0);transform:translateX(-16px) skewX(-7deg);}52%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}60%{opacity:1;clip-path:inset(56% 0 16% 0);transform:translateX(-22px) skewX(-14deg);}62%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}70%{opacity:.6;clip-path:inset(28% 0 40% 0);transform:translateX(-7px);}72%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}82%{opacity:.35;clip-path:inset(76% 0 5% 0);transform:translateX(-5px) skewX(3deg);}84%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}}
@keyframes glitchBurstC{0%,5%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}8%{opacity:1;clip-path:inset(20% 0 52% 0);transform:translateX(16px) skewX(8deg);}12%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}19%{opacity:1;clip-path:inset(64% 0 10% 0);transform:translateX(20px) skewX(10deg);}22%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}29%{opacity:1;clip-path:inset(8% 0 66% 0);transform:translateX(13px) skewX(-6deg);}31%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}38%{opacity:1;clip-path:inset(44% 0 22% 0);transform:translateX(18px) skewX(9deg);}40%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}47%{opacity:1;clip-path:inset(74% 0 6% 0);transform:translateX(24px) skewX(13deg);}49%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}56%{opacity:1;clip-path:inset(30% 0 42% 0);transform:translateX(11px);}58%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}66%{opacity:.7;clip-path:inset(58% 0 14% 0);transform:translateX(17px) skewX(11deg);}68%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}77%{opacity:.4;clip-path:inset(15% 0 58% 0);transform:translateX(9px) skewX(-5deg);}79%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}}
@keyframes glitchR{0%,88%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}89%{opacity:.9;clip-path:inset(6% 0 68% 0);transform:translateX(-5px) skewX(-2deg);}90%{opacity:.9;clip-path:inset(48% 0 14% 0);transform:translateX(-7px) skewX(-4deg);}91%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}92%{opacity:.7;clip-path:inset(28% 0 42% 0);transform:translateX(-4px);}93%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}95%{opacity:.6;clip-path:inset(62% 0 10% 0);transform:translateX(-6px) skewX(3deg);}96%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}}
@keyframes glitchC{0%,88%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}89%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}90%{opacity:.8;clip-path:inset(16% 0 58% 0);transform:translateX(6px) skewX(2deg);}91%{opacity:.8;clip-path:inset(68% 0 6% 0);transform:translateX(8px) skewX(4deg);}92%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}94%{opacity:.65;clip-path:inset(38% 0 32% 0);transform:translateX(5px);}95%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}97%{opacity:.5;clip-path:inset(78% 0 4% 0);transform:translateX(7px) skewX(-3deg);}98%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0);}}
.hero-desc{font-size:.87rem;line-height:1.82;color:rgba(0,0,0,.52);max-width:330px;border-left:2px solid rgba(0,0,0,.06);padding-left:13px;}
.abilities{display:flex;flex-direction:column;gap:7px;}
.ability{display:flex;align-items:center;gap:11px;font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(0,0,0,.38);transition:color .2s;opacity:0;transform:translateX(-18px);animation:abilityIn .45s var(--easeOut) forwards;}
.ability:hover{color:rgba(0,0,0,.7);}
.ability-pip{width:22px;height:1.5px;background:var(--accent);transition:background .4s,width .25s var(--easeOut);}
.ability:hover .ability-pip{width:34px;}
@keyframes abilityIn{to{opacity:1;transform:translateX(0);}}
.stats-row{display:flex;gap:22px;padding-top:14px;border-top:1px solid rgba(0,0,0,.06);}
.stat{display:flex;flex-direction:column;gap:3px;}
.stat-label{font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.28);}
.stat-val{font-family:'Bebas Neue',cursive;font-size:1.55rem;line-height:1;letter-spacing:2px;transition:color .4s;opacity:0;transform:translateY(14px);animation:statIn .5s var(--easeOut) forwards;}
@keyframes statIn{to{opacity:1;transform:translateY(0);}}
.cta-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 26px;border:1.5px solid #111;font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:#111;cursor:none;transition:all .3s var(--easeOut);position:relative;overflow:hidden;margin-bottom:18px;background:transparent;}
.cta-btn::before{content:'';position:absolute;inset:0;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--easeOut);}
.cta-btn:hover{color:#fff;}
.cta-btn:hover::before{transform:scaleX(1);}
.cta-btn span,.cta-btn svg{position:relative;z-index:1;}
.cta-btn svg{width:13px;height:13px;transition:transform .3s;}
.cta-btn:hover svg{transform:translateX(4px);}
.socials{display:flex;gap:14px;align-items:center;}
.social-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:none;opacity:.22;transition:opacity .2s,transform .2s;}
.social-icon:hover{opacity:.65;transform:translateY(-2px);}
.social-icon svg{width:14px;height:14px;fill:#111;}

#rightPanel{position:relative;flex:1;overflow:hidden;background:#141f33;}
#colorBg{position:absolute;inset:0;z-index:0;transition:background 1s var(--ease);}
#accentBlock{position:absolute;right:0;top:0;width:52%;height:100%;background:var(--accent);clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%);transition:background .9s var(--ease);z-index:2;opacity:0.07;mix-blend-mode:color-dodge;}
#bgLines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.035;background:repeating-linear-gradient(-52deg,transparent,transparent 24px,rgba(255,255,255,.5) 24px,rgba(255,255,255,.5) 25px);}
#auraRing{position:absolute;bottom:-8%;left:50%;transform:translateX(-50%);width:65%;padding-bottom:28%;border-radius:50%;z-index:6;background:radial-gradient(ellipse at center,var(--accent-glow) 0%,transparent 70%);transition:background .9s;pointer-events:none;animation:auraP 3.5s ease-in-out infinite;}
@keyframes auraP{0%,100%{opacity:.45;transform:translateX(-50%) scale(1);}50%{opacity:.8;transform:translateX(-50%) scale(1.12);}}
#groundShadow{position:absolute;bottom:0;left:0;right:0;height:140px;z-index:7;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,0.2) 0%,transparent 100%);}
#particleCanvas{position:absolute;inset:0;z-index:9;pointer-events:none;}
#heroWrap{position:absolute;bottom:0;left:50%;transform:translateX(-52%);height:100%;width:90%;z-index:10;pointer-events:none;display:flex;align-items:flex-end;transform-style:preserve-3d;will-change:transform;transition:transform .08s linear;isolation:isolate;}
.hero-slot{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:100%;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0s;}
.hero-slot.active{opacity:1;transition:opacity .55s ease;pointer-events:all;}
.hero-slot.active img{cursor:pointer;}
.hero-slot img{height:92%;width:auto;max-width:95%;object-fit:contain;object-position:bottom center;display:block;image-rendering:-webkit-optimize-contrast;filter:drop-shadow(0 0 60px var(--accent-glow)) drop-shadow(0 30px 50px rgba(0,0,0,.6));transition:filter .85s;}
.hero-slot.active:not(.pop) img{animation:heroFloat 6s ease-in-out infinite;}
@keyframes heroFloat{0%,100%{transform:translateY(0px) scaleX(1);}30%{transform:translateY(-20px) scaleX(1.005);}65%{transform:translateY(-9px) scaleX(1.002);}}
@keyframes heroPopIn{0%{transform:translateY(120px) scaleX(.88) scaleY(.82);opacity:0;filter:brightness(2.5) drop-shadow(0 0 0px var(--accent-glow));}18%{transform:translateY(-22px) scaleX(1.04) scaleY(1.06);opacity:1;filter:brightness(1.8) drop-shadow(0 0 60px var(--accent-glow));}34%{transform:translateY(10px) scaleX(.98) scaleY(.97);filter:brightness(1.3) drop-shadow(0 0 40px var(--accent-glow));}50%{transform:translateY(-7px) scaleX(1.01) scaleY(1.02);filter:brightness(1.1) drop-shadow(0 0 30px var(--accent-glow));}65%{transform:translateY(3px) scaleX(1) scaleY(1);filter:brightness(1) drop-shadow(0 0 80px var(--accent-glow));}100%{transform:translateY(0) scaleX(1) scaleY(1);opacity:1;filter:drop-shadow(0 0 80px var(--accent-glow)) drop-shadow(0 50px 70px rgba(0,0,0,.3));}}
.hero-slot.active.pop img{animation:heroPopIn 0.75s cubic-bezier(.22,.68,0,1.4) forwards !important;}
#bgHeroWrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-hero-slot{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.bg-hero-slot.active{opacity:1;}
.bg-hero-slot img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:blur(3px) brightness(.68) saturate(1.15);transform:scale(1.05);transition:opacity 1s ease;}
.bg-hero-slot.active img{animation:bgDrift 16s ease-in-out infinite;}
@keyframes bgDrift{0%,100%{transform:scale(1.05) translate(0px,0px);}40%{transform:scale(1.09) translate(-10px,-16px);}70%{transform:scale(1.07) translate(4px,-8px);}}
.bg-hero-slot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,16,30,.93) 0%,rgba(10,16,30,.62) 28%,rgba(10,16,30,.1) 58%,transparent 80%),linear-gradient(0deg,rgba(10,16,30,.88) 0%,rgba(10,16,30,.2) 35%,transparent 60%),linear-gradient(180deg,rgba(10,16,30,.55) 0%,transparent 30%);}
.bg-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:brightness(.45) saturate(1.2) contrast(1.1);transition:opacity 1s ease;z-index:0;}
@supports (aspect-ratio:1){.bg-hero-video{min-width:100%;min-height:100%;}}

#navArrows{position:absolute;bottom:34px;right:34px;z-index:20;display:flex;gap:2px;}
.nav-btn{width:52px;height:42px;display:flex;align-items:center;justify-content:center;cursor:none;border:none;outline:none;font-size:1.05rem;transition:all .22s var(--easeOut);font-family:'Bebas Neue',cursive;letter-spacing:1px;}
#btnPrev{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.12);}
#btnPrev:hover{background:rgba(255,255,255,.18);color:#fff;}
#btnNext{background:#111;color:#fff;}
#btnNext:hover{background:var(--accent);color:#fff;box-shadow:0 0 22px var(--accent-glow);}
#slideCounter{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:6px;align-items:center;}
.sc-pip{width:2px;height:16px;background:rgba(255,255,255,.15);border-radius:1px;transition:background .4s,height .4s;}
.sc-pip.on{background:rgba(255,255,255,.85);height:30px;}
#dots{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:7px;align-items:center;}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);cursor:none;transition:all .38s var(--easeOut);}
.dot.on{background:#fff;width:24px;border-radius:3px;box-shadow:0 0 8px rgba(255,255,255,.4);}
#heroIndex{position:absolute;bottom:34px;left:34px;z-index:20;font-family:'Bebas Neue',cursive;color:rgba(255,255,255,.12);font-size:3.2rem;line-height:1;letter-spacing:3px;}
#heroIndex em{font-style:normal;color:rgba(255,255,255,.5);}
#cornerTag{position:absolute;top:34px;right:48px;z-index:20;font-family:'Barlow Condensed',sans-serif;font-size:.58rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.3);}
#overlay{position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--dark);clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .5s var(--ease);}
#overlay.in{clip-path:polygon(0 0,105% 0,105% 100%,0 100%);}
#overlay.out{clip-path:polygon(105% 0,105% 0,105% 100%,105% 100%);transition:clip-path .45s var(--ease);}
#shockRing{position:fixed;z-index:48;pointer-events:none;border-radius:50%;background:transparent;border:2px solid var(--accent);top:50%;left:60%;width:0;height:0;transform:translate(-50%,-50%);opacity:0;}
#shockRing.burst{animation:shockBurst .7s cubic-bezier(.2,.6,.4,1) forwards;}
@keyframes shockBurst{0%{width:0;height:0;opacity:.9;border-width:3px;}100%{width:140vmax;height:140vmax;opacity:0;border-width:.5px;}}
.char{display:inline-block;opacity:0;transform:translateY(-90px) scaleY(2.2) rotateX(80deg);filter:blur(14px);animation:charIn .65s cubic-bezier(.22,.68,0,1.3) forwards;will-change:transform,opacity,filter;}
@keyframes charIn{0%{opacity:0;transform:translateY(-90px) scaleY(2.2) rotateX(80deg);filter:blur(14px);}45%{opacity:1;filter:blur(0px);}62%{transform:translateY(8px) scaleY(.90) rotateX(-10deg);filter:blur(0px);}78%{transform:translateY(-4px) scaleY(1.04) rotateX(4deg);}90%{transform:translateY(2px) scaleY(.98) rotateX(-1deg);}100%{opacity:1;transform:translateY(0) scaleY(1) rotateX(0deg);filter:blur(0px);}}
#leftPanel.panel-switch::after{animation:panelFlash .5s ease forwards;}
@keyframes panelFlash{0%{opacity:0;background:var(--accent);}30%{opacity:.25;}100%{opacity:1;background:linear-gradient(180deg,transparent,var(--accent) 25%,var(--accent) 75%,transparent);}}
#progressBar{position:absolute;bottom:0;left:0;height:3px;background:var(--accent);z-index:21;transition:width .7s var(--easeOut),background .5s;box-shadow:0 0 12px var(--accent-glow);}
.cur-trail{position:fixed;border-radius:50%;pointer-events:none;z-index:9990;background:var(--accent);opacity:0;transform:translate(-50%,-50%);animation:trailFade .6s ease forwards;}
@keyframes trailFade{0%{opacity:.45;width:8px;height:8px;}100%{opacity:0;width:2px;height:2px;}}
#flash{position:fixed;inset:0;z-index:49;pointer-events:none;background:#fff;opacity:0;transition:opacity .08s;}
#flash.on{opacity:0.06;}
/* ===== NETFLIX-STYLE INTRO ===== */
#nfxIntro{position:fixed;inset:0;z-index:300;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#nfxParticles{position:absolute;inset:0;z-index:0;}
.nfx-bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:10;}
.nfx-bar-top{top:0;}
.nfx-bar-bot{bottom:0;}
.nfx-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(229,57,53,.35) 0%,rgba(180,30,30,.15) 30%,transparent 65%);filter:blur(60px);z-index:1;opacity:0;pointer-events:none;}
.nfx-logo-wrap{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px;}
.nfx-logo{display:flex;gap:0;overflow:hidden;}
.nfx-letter{font-family:'Bebas Neue',cursive;font-size:clamp(5rem,12vw,11rem);color:#e53935;line-height:1;letter-spacing:8px;display:inline-block;text-shadow:0 0 40px rgba(229,57,53,.5),0 0 100px rgba(229,57,53,.2);opacity:0;will-change:transform,opacity,filter;}
.nfx-sub{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.25);opacity:0;}
.nfx-sweep{position:absolute;top:0;left:-20%;width:10%;height:100%;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.18),rgba(255,255,255,.08),transparent);filter:blur(6px);opacity:0;}
.nfx-flash{position:absolute;inset:0;z-index:8;background:rgba(229,57,53,.15);opacity:0;pointer-events:none;}
.nfx-line{position:absolute;z-index:7;pointer-events:none;}
.nfx-line-h{left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(229,57,53,.6),transparent);transform:scaleX(0);}
.nfx-line-v{top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(229,57,53,.5),transparent);transform:scaleY(0);}
/* === TOUCH DEVICE: hide custom cursor === */
@media(hover:none),(pointer:coarse){
  #cur,#curR,.cur-trail{display:none !important;}
  html,body,.nav-btn,.cta-btn,.dot,.social-icon,.hero-slot.active img{cursor:auto !important;}
}

/* === LARGE DESKTOP (1440px+) === */
@media(min-width:1440px){
  .bg-hero-video{object-position:center 30%;filter:brightness(.42) saturate(1.25) contrast(1.12);}
  #leftPanel{padding:56px 64px 48px;}
  .hero-desc{max-width:380px;}
}

/* === LAPTOP / SMALL DESKTOP (1024px - 1279px) === */
@media(max-width:1280px){
  #leftPanel{width:42%;padding:40px 38px 34px;}
  .hero-name{font-size:clamp(3.6rem,7vw,7rem);}
  .hero-desc{max-width:280px;font-size:.82rem;}
  #ghost{font-size:clamp(70px,10vw,120px);}
  .bg-hero-video{object-position:center 22%;}
}

/* === TABLET LANDSCAPE (768px - 1024px) === */
@media(max-width:1024px){
  #leftPanel{width:44%;padding:32px 28px 28px;}
  .hero-name{font-size:clamp(2.8rem,6.5vw,5.5rem);letter-spacing:3px;}
  .hero-desc{max-width:260px;font-size:.78rem;line-height:1.7;}
  #ghost{font-size:clamp(60px,9vw,100px);}
  .stats-row{gap:16px;}
  .stat-val{font-size:1.3rem;}
  .cta-btn{padding:8px 20px;font-size:.62rem;}
  #heroWrap{width:95%;}
  #navArrows{bottom:26px;right:26px;}
  #heroIndex{font-size:2.6rem;bottom:26px;left:26px;}
  #dots{bottom:34px;}
  #cornerTag{top:26px;right:32px;font-size:.52rem;}
  .bg-hero-video{object-position:center 20%;}
  .breadcrumb{font-size:.58rem;}
  .ability{font-size:.6rem;}
}

/* === TABLET PORTRAIT / LARGE PHONE (700px and below) === */
@media(max-width:700px){
  html,body{overflow-x:hidden;overflow-y:hidden;}
  #card{flex-direction:column;}
  #leftPanel{
    width:100%;padding:20px 22px 16px;
    min-height:auto;max-height:50vh;flex-shrink:0;
    order:2;
  }
  #leftPanel::after{width:100%;height:3px;top:0;left:0;background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--accent) 75%,transparent);}
  .l-bottom-line{display:none;}
  #rightPanel{min-height:50vh;flex:1;order:1;}
  #accentBlock{width:72%;clip-path:polygon(14% 0%,100% 0%,100% 100%,0% 100%);}
  .hero-name{font-size:clamp(2.2rem,9vw,3.2rem);letter-spacing:2px;}
  .hero-desc{max-width:100%;font-size:.78rem;line-height:1.65;-webkit-line-clamp:3;line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;padding-left:10px;}
  #ghost{font-size:clamp(50px,14vw,80px);top:auto;bottom:10%;left:-10px;}
  .panel-grid{display:none;}
  .l-mid{gap:10px;}
  .marvel-logo{font-size:1.2rem;letter-spacing:5px;}
  .breadcrumb{font-size:.55rem;margin-top:4px;}
  .role-badge{font-size:.55rem;letter-spacing:3px;}
  .accent-line.vis{width:40px;}
  .abilities{flex-direction:row;flex-wrap:wrap;gap:4px 12px;}
  .ability{font-size:.55rem;letter-spacing:2px;}
  .stats-row{gap:14px;padding-top:10px;}
  .stat-val{font-size:1.2rem;}
  .stat-label{font-size:.5rem;}
  .l-bot{display:flex;align-items:center;gap:14px;}
  .cta-btn{padding:8px 18px;font-size:.6rem;letter-spacing:2px;margin-bottom:0;}
  .socials{gap:10px;}
  #heroWrap{transform:translateX(-50%);width:80%;}
  .hero-slot img{height:85%;}
  #heroIndex{display:none;}
  #cornerTag{display:none;}
  #slideCounter{display:none;}
  #navArrows{bottom:16px;right:16px;}
  .nav-btn{width:44px;height:36px;font-size:.9rem;}
  #dots{bottom:22px;}
  .dot{width:4px;height:4px;}
  .dot.on{width:18px;}
  .bg-hero-video{object-position:center 15%;filter:brightness(.4) saturate(1.1) contrast(1.05);}
  #auraRing{bottom:-5%;width:80%;}
  #progressBar{height:2px;}
}

/* === SMALL PHONE (480px and below) === */
@media(max-width:480px){
  #leftPanel{padding:16px 16px 12px;max-height:48vh;}
  .hero-name{font-size:clamp(1.8rem,8.5vw,2.6rem);letter-spacing:1px;}
  .hero-desc{font-size:.72rem;line-height:1.55;-webkit-line-clamp:2;line-clamp:2;}
  #ghost{font-size:clamp(40px,13vw,65px);}
  .marvel-logo{font-size:1rem;letter-spacing:4px;}
  .breadcrumb{font-size:.5rem;letter-spacing:2px;}
  .role-badge{font-size:.5rem;letter-spacing:2.5px;}
  .abilities{gap:3px 8px;}
  .ability{font-size:.5rem;}
  .ability-pip{width:16px;}
  .stats-row{gap:10px;flex-wrap:wrap;}
  .stat-val{font-size:1rem;}
  .stat-label{font-size:.45rem;letter-spacing:2px;}
  .cta-btn{padding:7px 14px;font-size:.55rem;letter-spacing:2px;}
  .social-icon{width:24px;height:24px;}
  .social-icon svg{width:12px;height:12px;}
  #heroWrap{width:90%;}
  .hero-slot img{height:80%;}
  #navArrows{bottom:12px;right:12px;}
  .nav-btn{width:38px;height:32px;font-size:.8rem;}
  #dots{bottom:18px;gap:5px;}
  .bg-hero-video{object-position:center 10%;}
}

/* === VERY SMALL PHONE (360px and below) === */
@media(max-width:360px){
  #leftPanel{padding:12px 12px 10px;max-height:46vh;}
  .hero-name{font-size:clamp(1.5rem,8vw,2.2rem);}
  .hero-desc{font-size:.68rem;-webkit-line-clamp:2;line-clamp:2;}
  .l-mid{gap:6px;}
  .l-bot{flex-direction:column;align-items:flex-start;gap:8px;}
  .stats-row{gap:8px;}
  .stat-val{font-size:.9rem;}
  .abilities{display:none;}
}

/* === LANDSCAPE MODE ON PHONES === */
@media(max-height:500px) and (orientation:landscape){
  #card{flex-direction:row;}
  #leftPanel{width:38%;order:1;padding:14px 16px 10px;max-height:100vh;min-height:100vh;overflow-y:auto;}
  #rightPanel{flex:1;order:2;min-height:100vh;}
  .hero-name{font-size:clamp(1.6rem,4vw,2.4rem);}
  .hero-desc{font-size:.7rem;-webkit-line-clamp:2;line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
  .l-mid{gap:6px;}
  .abilities{display:none;}
  .stats-row{gap:10px;padding-top:6px;}
  .stat-val{font-size:.9rem;}
  #ghost{display:none;}
  .panel-grid{display:none;}
  .marvel-logo{font-size:1rem;}
  .breadcrumb{margin-top:2px;}
  .l-bot{display:flex;align-items:center;gap:10px;}
  .cta-btn{padding:6px 12px;font-size:.5rem;margin-bottom:0;}
  .socials{gap:8px;}
  .social-icon{width:22px;height:22px;}
  #heroWrap{width:85%;}
  .hero-slot img{height:90%;}
  #navArrows{bottom:10px;right:10px;}
  .nav-btn{width:36px;height:30px;}
}

/* === ZOOM MODAL RESPONSIVE === */
@media(max-width:900px){
  #zmContent{left:32px;width:min(360px,42vw);gap:16px;}
  .zm-name{font-size:clamp(2.5rem,5vw,5rem);}
  .zm-stats{gap:16px;}
  .zm-stat-val{font-size:1.6rem;}
  #zmHeroImg{right:2%;max-width:48%;}
  #zmClose{top:20px;right:24px;}
}
@media(max-width:700px){
  /* Full-screen mobile modal: hero top, content bottom */
  #zoomModal{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #zmHeroImg{
    position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    transform:none !important;display:block;margin:0 auto;
    height:38vh;max-height:38vh;width:auto;max-width:85%;
    object-fit:contain;object-position:bottom center;
    flex-shrink:0;z-index:10;
  }
  #zmSlowZoomImg,#zmGlitchClone{
    position:absolute !important;left:50% !important;right:auto !important;
    top:0 !important;bottom:auto !important;
    transform:translateX(-50%) !important;height:38vh;max-width:85%;
  }
  #zmContent{
    position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    transform:none !important;width:100% !important;
    padding:20px 20px 32px;flex-shrink:0;z-index:30;
    max-height:none;overflow:visible;
    background:linear-gradient(to top,rgba(8,12,24,.98) 0%,rgba(8,12,24,.92) 60%,rgba(8,12,24,.75) 85%,transparent 100%);
  }
  #zmGlowOrb{display:none;}
  .zm-name{font-size:clamp(1.8rem,8vw,3rem);letter-spacing:3px;}
  .zm-name-ch{text-shadow:0 0 30px var(--zm-glow,rgba(229,57,53,.4)) !important;}
  .zm-divider{height:1.5px;}
  .zm-section-lbl{font-size:.5rem;letter-spacing:4px;margin-bottom:4px;}
  /* Compact ability cards for mobile */
  .zm-ability{padding:8px 0;gap:10px;}
  .zm-ability-icon{width:26px;height:26px;border-radius:4px;}
  .zm-ability-icon span{font-size:.62rem;}
  .zm-ability-name{font-size:.62rem;letter-spacing:2px;}
  .zm-bar-wrap{height:3px;margin-top:4px;border-radius:2px;}
  .zm-bar{height:100%;border-radius:2px;}
  .zm-stats{gap:0;justify-content:space-between;}
  .zm-stat{flex:1;align-items:center;text-align:center;padding:8px 4px;border-right:1px solid rgba(255,255,255,.06);}
  .zm-stat:last-child{border-right:none;}
  .zm-stat-lbl{font-size:.48rem;letter-spacing:2.5px;}
  .zm-stat-val{font-size:1.4rem;}
  /* Close button: bigger tap target on mobile */
  #zmClose{
    top:10px;right:12px;z-index:70;
    padding:10px 14px;border-radius:6px;
    background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  #zmClose kbd{font-size:.5rem;padding:2px 6px;}
  #zmGlowBar{display:none;}
  #zmVignette{display:none;}
}
@media(max-width:480px){
  #zmHeroImg{height:34vh;max-height:34vh;max-width:90%;}
  #zmSlowZoomImg,#zmGlitchClone{height:34vh;max-width:90%;}
  #zmContent{padding:16px 16px 28px;}
  .zm-name{font-size:clamp(1.5rem,7.5vw,2.4rem);letter-spacing:2px;}
  .zm-ability{padding:6px 0;gap:8px;}
  .zm-ability-icon{width:22px;height:22px;}
  .zm-ability-icon span{font-size:.55rem;}
  .zm-ability-name{font-size:.55rem;letter-spacing:1.5px;}
  .zm-stat-val{font-size:1.15rem;}
  .zm-stat-lbl{font-size:.42rem;letter-spacing:2px;}
  .zm-stats{background:rgba(255,255,255,.03);border-radius:6px;padding:4px 0;}
  #zmClose{top:8px;right:8px;padding:8px 10px;}
}
@media(max-width:360px){
  #zmHeroImg{height:30vh;max-height:30vh;}
  #zmSlowZoomImg,#zmGlitchClone{height:30vh;}
  .zm-name{font-size:clamp(1.3rem,7vw,2rem);}
  .zm-ability-icon{display:none;}
  .zm-stats{flex-wrap:wrap;}
  .zm-stat{min-width:33%;}
}

/* === NFX INTRO RESPONSIVE === */
@media(max-width:700px){
  .nfx-letter{font-size:clamp(3rem,10vw,6rem);letter-spacing:4px;}
  .nfx-sub{font-size:.55rem;letter-spacing:3px;}
}
@media(max-width:480px){
  .nfx-letter{font-size:clamp(2.2rem,9vw,4rem);letter-spacing:3px;}
  .nfx-sub{font-size:.45rem;letter-spacing:2px;}
}