/* ============================================================
   Nunzio Lella — v5 AWARD LAYER
   Intro loader · global WebGL fluid · kinetic typography ·
   scroll choreography · mega CTA · cursor labels · side rails
   Loaded after styles.css + pages.css. Pure CSS, no build step.
   ============================================================ */

/* ============================================================ INTRO LOADER */
.intro-loader {
  position: fixed; inset: 0; z-index: 10010;
  background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
.intro-loader .il-wipe {
  position: absolute; inset: 0; z-index: 2;
  background: var(--accent);
  transform: scaleY(0); transform-origin: bottom;
}
.intro-loader .il-core {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.il-mark {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(96px, 17vw, 210px); line-height: .9;
  color: var(--text-hi); letter-spacing: -.04em;
}
.il-mark span { color: transparent; -webkit-text-stroke: 2.5px var(--accent); }
.il-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  width: min(430px, 72vw);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--muted);
}
.il-count { color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; }
.il-bar { width: min(430px, 72vw); height: 2px; background: rgba(244,241,235,.12); overflow: hidden; }
.il-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
html.intro-lock, html.intro-lock body { overflow: hidden; }

/* ============================================================ SCROLL PROGRESS */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10005;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(255,42,0,.55);
}

/* ============================================================ GLOBAL FLUID CANVAS */
.bg-fluid {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ============================================================ SIDE RAILS */
.side-rail {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 60;
  display: none; flex-direction: column; align-items: center; gap: 16px;
  pointer-events: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted-2);
}
.side-rail span { writing-mode: vertical-rl; white-space: nowrap; }
.side-rail::before, .side-rail::after {
  content: ""; width: 1px; height: 54px;
  background: linear-gradient(var(--accent), transparent);
}
.side-rail::after { background: linear-gradient(transparent, var(--accent)); }
.rail-l { left: 22px; }
.rail-r { right: 22px; }
@media (min-width: 1280px) { .side-rail { display: flex; } }

/* ============================================================ NAV — hide on scroll down */
.nav { transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s, transform .5s var(--ease); }
.nav.nav-hidden { transform: translateY(-100%); }

/* ============================================================ CURSOR — contextual label */
.cur-ring { display: grid; place-items: center; }
.cur-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; color: #fff; opacity: 0; transition: opacity .2s;
  text-transform: uppercase; transform: translateX(.1em);
}
html.cur-labeled .cur-ring {
  width: 84px; height: 84px;
  background: var(--accent); border-color: var(--accent);
  mix-blend-mode: normal;
}
html.cur-labeled .cur-label { opacity: 1; }
html.cur-labeled .cur-dot { width: 0; height: 0; }

/* ============================================================ HERO v5 (kinetic chars, gsap only) */
html.gsap-on .hero h1 .ln:nth-child(1) span {
  background: none; animation: none;
  color: var(--text-hi); -webkit-text-fill-color: var(--text-hi);
}
html.gsap-on .hero h1 .ln:nth-child(2) span {
  color: transparent; -webkit-text-stroke: 2px var(--text-hi);
}
html.gsap-on .hero.loaded h1 { animation: none !important; }
.hero h1 .ln span.ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .ln span.ch-i { display: inline-block; will-change: transform; }
.hero h1.ch-live .ch { overflow: visible; }
.hero h1.ch-live .ch-i { transition: transform .45s var(--ease); }

/* rotating orbit badge on portrait */
.orbit-badge {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  width: 118px; height: 118px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.orbit-badge svg { width: 100%; height: 100%; overflow: visible; animation: obspin 18s linear infinite; }
.orbit-badge text {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .2em; fill: var(--text-hi); text-transform: uppercase;
}
.orbit-badge .ob-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 17px;
}
@keyframes obspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit-badge svg { animation: none; } }

/* ============================================================ KINETIC MARQUEE STRIP (home) */
.kin-strip {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.km-track { display: flex; width: max-content; will-change: transform; animation: kmscroll 60s linear infinite; }
.km-track span {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(56px, 9vw, 150px); line-height: 1.05; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,241,235,.22);
  padding-right: .4em;
}
.km-track span b { color: transparent; -webkit-text-stroke: 1.5px rgba(255,42,0,.6); font-weight: 900; }
@keyframes kmscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .km-track { animation: none; } }
/* when GSAP drives marquees, kill the CSS animation */
html.gsap-on .km-track, html.gsap-on .bm-track { animation: none; }

/* ============================================================ EXPLORE — perspective + mouse spotlight */
#explore .home-nav { perspective: 1200px; }
.nav-card::after {
  background: radial-gradient(320px circle at var(--mx, 85%) var(--my, 0%), rgba(255,42,0,.14), transparent 65%);
}
.proof-card::after, .value::after, .panel::after, .post-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,42,0,.10), transparent 65%);
}
.proof-card:hover::after, .value:hover::after, .panel:hover::after, .post-card:hover::after { opacity: 1; }

/* ============================================================ STATS — editorial giant numbers */
.stat-strip { background: transparent; border: none; border-top: 2px solid var(--line); gap: 0; }
.stat-strip .stat { background: transparent; border-right: 1px solid var(--line-soft); padding: 48px 24px 42px; }
.stat-strip .stat:hover { background: rgba(255,42,0,.03); }
.stat-strip .s-num { font-size: clamp(48px, 5vw, 88px); }
.stat-strip .s-label { margin-top: 20px; }
@media (min-width: 1081px) {
  .stat-strip { grid-template-columns: 1.3fr 1fr .9fr .9fr; }
  .stat-strip .stat:last-child { border-right: none; }
}
@media (max-width: 1080px) { .stat-strip .stat:nth-child(2n) { border-right: none; } }
@media (max-width: 560px) { .stat-strip .stat { border-right: none; border-bottom: 1px solid var(--line-soft); } }

/* ============================================================ PROOF — pinned horizontal scroll (gsap desktop) */
html.h-scroll .proof-track {
  display: flex; gap: 22px; width: max-content;
}
html.h-scroll .proof-track .proof-card {
  width: min(46vw, 620px); flex: none;
  min-height: 420px; padding: 46px 44px 40px;
  justify-content: flex-start;
}
html.h-scroll .proof-track .pr-num { font-size: clamp(70px, 7.4vw, 120px); margin-top: 6px; }
html.h-scroll .proof-track .pr-desc { font-size: 16px; max-width: 52ch; }
html.h-scroll .proof-track .pr-link { margin-top: auto; }

/* ============================================================ MEGA CTA — giant LET'S TALK */
.cta-band { padding-block: clamp(70px, 9vw, 140px); }
.mega-inner { position: relative; }
.mg-eyebrow {
  display: block;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--accent-2); margin-bottom: 10px;
}
.mg-link {
  display: inline-flex; align-items: center;
  gap: clamp(18px, 3vw, 46px);
  margin: 14px 0 6px;
}
.mg-word {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(54px, 11.5vw, 190px); line-height: .92; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 2px var(--text-hi);
  transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
}
.mg-ar {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 7vw, 120px); line-height: 1;
  color: var(--accent);
  transition: transform .5s var(--ease);
}
.mg-link:hover .mg-word { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.mg-link:hover .mg-ar { transform: translateX(.25em) rotate(-45deg); }
.mg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 30px; flex-wrap: wrap;
  margin-top: clamp(26px, 4vw, 46px); padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.mg-note { color: var(--muted); font-size: 15px; max-width: 46ch; }
@media (max-width: 640px) { .mg-word { -webkit-text-stroke-width: 1.4px; } }

/* ============================================================ TIMELINE — scroll-drawn progress line */
.tl-progress {
  position: absolute; left: 206px; top: 10px; bottom: 50px;
  width: 2px; margin-left: -.5px; pointer-events: none; z-index: 1;
}
.tl-progress span {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(var(--accent), var(--accent-2));
  transform: scaleY(0); transform-origin: top;
  box-shadow: 0 0 16px rgba(255,42,0,.5);
}
@media (max-width: 760px) { .tl-progress { left: 5px; } }

/* ============================================================ SPLIT-TEXT WORD MASKS */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w-i { display: inline-block; will-change: transform; }

/* ============================================================ PAGE CURTAIN — signal red wipe */
.page-curtain { background: var(--accent); }
.page-curtain .pc-mark { background: var(--bg); color: var(--text-hi); }