/* =========================================================
   MADE IN HOOD — v2 (minimal content / max effects)
   ========================================================= */
:root{
  --bg:#070806;
  --acid:#c8ff00;
  --ink:#f1f3e8;
  --dim:#7e8473;
  --line:rgba(241,243,232,.10);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* lock the horizontal axis WITHOUT breaking position:sticky.
   `overflow-x:clip` clips sideways overflow but does NOT create a scroll
   container, so the ZOOM tunnel's sticky pin keeps working.
   The 400vw roster track is also clipped at its source (.roster). */
html{overflow-x:clip;overscroll-behavior-x:none}

body{
  background:radial-gradient(ellipse 70% 55% at 50% 0%, #0e1207 0%, var(--bg) 60%);
  background-attachment:fixed;color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  overflow-x:clip;width:100%;max-width:100%;
  -webkit-font-smoothing:antialiased;cursor:none;
}
@media (pointer:coarse){body{cursor:auto}}
a{color:inherit;text-decoration:none}
.acid{color:var(--acid)}
.dim{color:var(--dim)}

/* ===== CANVAS FIELD ===== */
.field{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ===== BACKGROUND LOGO WATERMARK ===== */
.bg-logo{position:fixed;inset:0;z-index:0;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bg-logo::before{content:"";width:min(135vh,1150px);height:min(135vh,1150px);
  background:center/contain no-repeat url("logo-512.png");
  opacity:.05;animation:bgspin 150s linear infinite}
.bg-logo::after{content:"";position:absolute;width:min(150vh,1300px);height:min(150vh,1300px);border-radius:50%;
  border:1px dashed rgba(200,255,0,.06);animation:bgspin 90s linear infinite reverse}
@keyframes bgspin{to{transform:rotate(360deg)}}

/* ===== OVERLAYS ===== */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;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")}
.scanlines{position:fixed;inset:0;z-index:49;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.4) 2px 3px)}

/* ===== CURSOR ===== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%}
.cursor{width:40px;height:40px;border:1px solid var(--acid);transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s;mix-blend-mode:difference}
.cursor-dot{width:5px;height:5px;background:var(--acid);transform:translate(-50%,-50%)}
.cursor.hot{width:78px;height:78px;background:rgba(200,255,0,.14);border-color:transparent}
@media (pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ===== LOADER + 3D LOGO ===== */
.loader{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 42%,#0e1207 0%,var(--bg) 60%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.loader.done{transform:translateY(-101%);transition:transform 1.1s var(--ease)}

.logo-scene{position:relative;width:min(64vw,440px);height:min(64vw,440px);perspective:1300px;display:flex;
  align-items:center;justify-content:center}
.logo3d{position:relative;width:78%;height:78%;transform-style:preserve-3d;will-change:transform}
.logo-layer{position:absolute;inset:0;background:center/contain no-repeat;backface-visibility:visible}
/* front layer glow handled in JS via class */
.logo-layer.front{filter:drop-shadow(0 0 14px rgba(200,255,0,.55)) drop-shadow(0 0 40px rgba(200,255,0,.3))}

/* rotating tech ring behind the logo */
.logo-ring{position:absolute;inset:-4%;border:1px dashed rgba(200,255,0,.25);border-radius:50%;
  animation:ringspin 12s linear infinite}
.logo-ring::before,.logo-ring::after{content:"";position:absolute;border-radius:50%}
.logo-ring::before{inset:8%;border:1px solid rgba(200,255,0,.12)}
.logo-ring::after{inset:-7%;border-top:2px solid var(--acid);border-right:2px solid transparent;
  border-bottom:2px solid transparent;border-left:2px solid transparent;animation:ringspin 5s linear infinite reverse}
@keyframes ringspin{to{transform:rotate(360deg)}}

.loader-meta{display:flex;align-items:center;gap:18px;font-family:"Space Mono"}
.loader-word{font-weight:700;letter-spacing:4px;font-size:clamp(12px,2.6vw,15px);color:var(--dim)}
.loader-count{font-weight:700;letter-spacing:2px;font-size:clamp(13px,2.8vw,16px);color:var(--acid);
  border:1px solid var(--line);padding:5px 12px;min-width:64px;text-align:center}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;justify-content:space-between;align-items:center;
  padding:24px clamp(18px,4vw,46px);mix-blend-mode:difference}
.brand{font-family:"Space Mono";font-weight:700;letter-spacing:1px;font-size:15px;display:flex;align-items:center;gap:8px}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.nav-mail{font-family:"Space Mono";font-size:13px;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:3px}
@media (max-width:620px){.nav-mail{display:none}}

/* ===== SHARED ===== */
.kicker{font-family:"Space Mono";font-size:12px;letter-spacing:3px;color:var(--acid)}
section{position:relative;z-index:2}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:flex-start;
  padding:0 clamp(18px,4vw,46px);overflow:hidden}

/* rotating 3D logo — pushed right, bright glowing "loader" feel */
.hero-logo-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:clamp(0px,3vw,70px);perspective:1400px;z-index:1;pointer-events:none}
.hero-logo-box{position:relative;width:min(56vw,520px);height:min(56vw,520px);display:flex;align-items:center;justify-content:center;perspective:1400px}
#heroLogo3d{position:relative;width:84%;height:84%;transform-style:preserve-3d;opacity:.95;will-change:transform;
  filter:drop-shadow(0 0 28px rgba(200,255,0,.22))}
/* real WebGL 3D logo (lazy-upgraded over the CSS one) */
.logo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 30px rgba(200,255,0,.28))}

.hero-title{position:relative;z-index:2;font-family:"Anton";font-weight:400;line-height:.82;text-transform:uppercase;
  font-size:clamp(64px,16vw,280px);letter-spacing:-1px}
.ht-line{display:block;will-change:transform,opacity}
.ht-out{color:transparent;-webkit-text-stroke:4px var(--acid)}

/* HUD frame */
.hud{position:absolute;z-index:3;font-family:"Space Mono";font-size:11px;letter-spacing:2px;color:var(--dim)}
.hud-tl{top:clamp(86px,13vh,120px);left:clamp(18px,4vw,46px)}
.hud-tr{top:clamp(86px,13vh,120px);right:clamp(18px,4vw,46px);text-align:right}
.hud-bl{bottom:clamp(92px,16vh,124px);left:clamp(18px,4vw,46px)}
.hud-br{bottom:clamp(92px,16vh,124px);right:clamp(18px,4vw,46px);display:flex;align-items:center;gap:8px}
.live{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);animation:pulse 1.4s infinite}
.brk{position:absolute;z-index:3;width:26px;height:26px;border:2px solid var(--acid);opacity:.45}
.brk-tl{top:clamp(74px,11vh,100px);left:clamp(14px,3.4vw,38px);border-right:0;border-bottom:0}
.brk-tr{top:clamp(74px,11vh,100px);right:clamp(14px,3.4vw,38px);border-left:0;border-bottom:0}
.brk-bl{bottom:clamp(76px,12vh,100px);left:clamp(14px,3.4vw,38px);border-right:0;border-top:0}
.brk-br{bottom:clamp(76px,12vh,100px);right:clamp(14px,3.4vw,38px);border-left:0;border-top:0}

.hero-foot{position:absolute;z-index:3;left:clamp(18px,4vw,46px);right:clamp(18px,4vw,46px);bottom:clamp(26px,4.5vh,44px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero-slogan{font-family:"Space Mono";font-weight:700;letter-spacing:1px;font-size:clamp(13px,1.8vw,20px);color:var(--ink)}
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:"Space Mono";font-size:11px;letter-spacing:2px;color:var(--dim)}
.scroll-hint i{width:1px;height:50px;background:linear-gradient(var(--acid),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--acid);animation:sd 1.7s infinite}
@keyframes sd{0%{top:-50%}100%{top:100%}}

/* ===== DEPTH ZOOM TUNNEL ===== */
.zoom{height:420vh}
.zoom-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zoom-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}
.zoom-layer span{font-family:"Anton";font-size:clamp(80px,18vw,300px);text-transform:uppercase;line-height:.8;
  color:var(--ink);letter-spacing:-2px;white-space:nowrap}
/* alternate solid <-> outline (stroke width scaled in JS so it stays crisp) */
.zoom-layer[data-depth="1"] span{color:transparent;-webkit-text-stroke-color:var(--ink)}
.zoom-layer[data-depth="3"] span{color:transparent;-webkit-text-stroke-color:var(--acid)}
.zoom-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;opacity:0;will-change:opacity,transform;padding:0 24px}
.zoom-final p{font-family:"Space Mono";letter-spacing:3px;color:var(--acid);font-size:13px;margin-bottom:18px}
.zoom-final h2{font-family:"Anton";font-size:clamp(40px,9vw,140px);line-height:.92;text-transform:uppercase;letter-spacing:-1px}

/* ===== ROSTER (horizontal pinned) ===== */
.roster{position:relative;overflow:hidden}
.roster-head{position:absolute;top:0;left:0;width:100%;z-index:5;padding:clamp(50px,8vh,90px) clamp(18px,4vw,46px) 0;
  display:flex;justify-content:space-between;align-items:baseline;mix-blend-mode:difference;pointer-events:none}
.roster-head h2{font-family:"Anton";font-size:clamp(40px,7vw,110px);text-transform:uppercase;line-height:.9;letter-spacing:-1px}
.roster-track{display:flex;width:max-content;height:100svh;align-items:center}
.panel{width:100vw;height:100svh;flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(18px,6vw,90px);position:relative;border-left:1px solid var(--line)}
.panel-no{font-family:"Space Mono";font-size:clamp(16px,2vw,22px);color:var(--acid);margin-bottom:10px}
.panel-name{font-family:"Anton";font-size:clamp(90px,26vw,420px);line-height:.82;text-transform:uppercase;letter-spacing:-3px;
  color:var(--ink);transition:color .4s}
.panel:nth-child(even) .panel-name{color:var(--acid)}
.panel-genre{font-family:"Space Mono";font-size:clamp(13px,1.6vw,18px);letter-spacing:3px;color:var(--dim);margin-top:18px}
.panel::after{content:attr(data-i);position:absolute;right:clamp(18px,6vw,90px);bottom:clamp(40px,8vh,80px);
  font-family:"Anton";font-size:clamp(120px,30vw,500px);color:var(--line);z-index:-1;line-height:.7}

/* ===== MARQUEE ===== */
.marquee{padding:clamp(40px,7vh,90px) 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-track{display:flex;white-space:nowrap;font-family:"Anton";font-size:clamp(44px,9vw,140px);text-transform:uppercase;
  color:var(--ink);will-change:transform}
.marquee-track em{color:var(--acid);font-style:normal;margin:0 .3em}

/* ===== CONTACT ===== */
.contact{min-height:90svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(80px,12vh,160px) clamp(18px,4vw,46px);gap:30px}
.contact-mail{font-family:"Anton";font-size:clamp(34px,8.5vw,150px);text-transform:none;line-height:.95;letter-spacing:-1px;
  word-break:break-word;transition:color .4s}
.contact-mail:hover{color:var(--acid)}
.contact-sub{font-family:"Space Mono";letter-spacing:2px;color:var(--dim);font-size:clamp(12px,1.5vw,16px)}

/* ===== FOOTER ===== */
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding:30px clamp(18px,4vw,46px);border-top:1px solid var(--line);
  font-family:"Space Mono";font-size:12px;letter-spacing:1px;color:var(--dim)}
.footer span{display:flex;align-items:center;gap:8px}

/* ===== RESPONSIVE — MOBILE-FIRST POLISH ===== */
@media (max-width:760px){
  /* safe-area aware gutters so it breathes on notched phones */
  .nav{padding:max(18px,env(safe-area-inset-top)) clamp(16px,5vw,28px) 18px}
  .brand{font-size:13px}

  /* ---- HERO: centered emblem behind a fully-readable title ---- */
  .hero{justify-content:center;align-items:center;text-align:center;min-height:100svh}
  .hero-logo-scene{justify-content:center;align-items:center;padding:0;top:-4vh}
  .hero-logo-box{width:min(82vw,360px);height:min(82vw,360px)}
  #heroLogo3d{opacity:.28;filter:drop-shadow(0 0 34px rgba(200,255,0,.3))}
  .hero-logo-box .logo-canvas{opacity:.42}   /* hero: dim backdrop behind title */

  .hero-title{text-align:center;line-height:.86;font-size:clamp(60px,20vw,150px);
    text-shadow:0 2px 30px rgba(7,8,6,.85);letter-spacing:-1px}
  .ht-out{-webkit-text-stroke-width:3px}

  /* HUD: keep only the two top brackets for a clean frame */
  .hud-tr,.hud-bl,.hud-br{display:none}
  .brk{width:16px;height:16px;border-width:2px;opacity:.55}

  .hero-foot{flex-direction:column;align-items:center;text-align:center;gap:14px;
    bottom:max(26px,env(safe-area-inset-bottom));left:24px;right:24px}
  .hero-slogan{font-size:clamp(12px,3.4vw,16px)}
  .scroll-hint{flex-direction:row;align-items:center;gap:12px}
  .scroll-hint i{width:46px;height:1px;background:linear-gradient(90deg,var(--acid),transparent)}
  .scroll-hint i::after{display:none}

  /* ---- ZOOM tunnel: shorter scroll, fits small screens ---- */
  .zoom{height:300vh}
  .zoom-final h2{font-size:clamp(44px,13vw,90px)}

  /* ---- ROSTER: tighter panels, number fits ---- */
  .panel{padding:0 28px}
  .panel-name{letter-spacing:-1px;font-size:clamp(82px,30vw,200px)}
  .panel-genre{margin-top:12px}
  .panel::after{font-size:clamp(140px,42vw,300px)}
  .roster-head{padding-top:clamp(74px,11vh,96px)}
  .roster-head h2{font-size:clamp(44px,11vw,90px)}

  /* ---- MARQUEE ---- */
  .marquee{padding:clamp(34px,6vh,60px) 0}

  /* ---- CONTACT ---- */
  .contact{min-height:80svh;gap:24px;padding:clamp(70px,10vh,120px) 22px}
  .contact-mail{font-size:clamp(30px,9vw,68px)}

  /* ---- FOOTER stacks cleanly ---- */
  .footer{flex-direction:column;align-items:flex-start;gap:10px;
    padding-bottom:max(30px,env(safe-area-inset-bottom))}

  /* loader logo a touch smaller so % counter never clips */
  .logo-scene{width:min(72vw,340px);height:min(72vw,340px)}
}

@media (max-width:420px){
  .hero-title{font-size:clamp(54px,21vw,110px)}
  .hero-logo-box{width:min(88vw,320px);height:min(88vw,320px)}
  .loader-meta{gap:12px}
  .contact-mail{font-size:clamp(26px,8.6vw,52px)}
}

/* phones in landscape — don't let the pinned sections feel cramped */
@media (max-height:520px) and (orientation:landscape){
  .hero-logo-box{width:min(40vh,260px);height:min(40vh,260px)}
  .hero-title{font-size:clamp(44px,11vh,90px)}
  .hero-foot{bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  #heroLogo3d,#logo3d{transform:none!important}
}