/* ============================================================
   AWARD LAYER — advanced art direction + motion
   Additive only. Loads after the base <style>, degrades to the
   base site if GSAP/Lenis are blocked. Respects reduced-motion.
   ============================================================ */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out-cubic: cubic-bezier(.65,0,.35,1);
  --coral: #ff4a3d;
  --coral-glow: rgba(255,73,49,.55);
}

::selection{ background: var(--coral); color:#fff; }

/* ---- Lenis smooth scroll plumbing ---- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ============================================================
   FILM GRAIN — filmic texture over the whole page
   ============================================================ */
.grain{
  position:fixed; top:-150%; left:-75%; width:250%; height:400%;
  z-index:9990; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform; animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 20%{transform:translate(-8%,2%)}
  30%{transform:translate(3%,-8%)} 40%{transform:translate(-2%,6%)} 50%{transform:translate(-8%,3%)}
  60%{transform:translate(4%,-2%)} 70%{transform:translate(-3%,7%)} 80%{transform:translate(6%,4%)}
  90%{transform:translate(-4%,-3%)} 100%{transform:translate(0,0)}
}

/* ============================================================
   CUSTOM CURSOR — coral ring + dot, magnetic feel
   Only on fine-pointer devices.
   ============================================================ */
.cursor-ring, .cursor-dot{ display:none; }
@media (hover:hover) and (pointer:fine){
  html.award-cursor, html.award-cursor a, html.award-cursor button,
  html.award-cursor .btn-primary, html.award-cursor .btn-ghost, html.award-cursor [role="button"]{ cursor:none; }
  .cursor-ring{
    display:block; position:fixed; top:0; left:0; width:36px; height:36px; margin:-18px 0 0 -18px;
    border:1.5px solid var(--coral); border-radius:50%; z-index:9999; pointer-events:none;
    transition:width .28s var(--ease-out-expo), height .28s var(--ease-out-expo),
               margin .28s var(--ease-out-expo), background-color .28s var(--ease-out-expo),
               opacity .3s ease, border-color .28s ease;
    will-change:transform;
  }
  .cursor-dot{
    display:block; position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px;
    background:var(--coral); border-radius:50%; z-index:10000; pointer-events:none; will-change:transform;
  }
  .cursor-ring.is-hover{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(255,73,49,.12); }
  .cursor-ring.is-down{ width:26px; height:26px; margin:-13px 0 0 -13px; }
  .cursor-ring.is-hidden, .cursor-dot.is-hidden{ opacity:0; }
}

/* ============================================================
   PAGE INTRO — a coral wipe that lifts on load
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:9995; background:#0f0f0f; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
html.gsap-ready .intro{ display:flex; }
.intro__word{
  font-family:var(--font-display); font-weight:700; color:#fff; letter-spacing:.24em;
  font-size:clamp(28px,6vw,64px); text-transform:uppercase; overflow:hidden; display:flex;
}
.intro__word span{ display:inline-block; transform:translateY(110%); }
.intro__bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--coral); }
html.intro-done .intro{ display:none; }

/* ============================================================
   KINETIC TYPE — line mask reveals
   ============================================================ */
.reveal-line{ overflow:hidden; display:block; }
.reveal-line > span{ display:block; will-change:transform; }
/* Hidden/reveal states are set by GSAP in award.js (gsap.set + .to), so there are
   no CSS-class transforms here to fight GSAP's inline transforms. The intro overlay
   covers the hero during load, so there is no flash before GSAP arms the states. */

/* ============================================================
   AURORA — drifting gradient mesh for dark sections
   ============================================================ */
.aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.aurora i{
  position:absolute; display:block; width:52vmax; height:52vmax; border-radius:50%;
  filter:blur(70px); opacity:.32; mix-blend-mode:screen; will-change:transform;
}
.aurora i:nth-child(1){ background:radial-gradient(circle at 30% 30%, #ff4a3d, transparent 60%); top:-14vmax; left:-8vmax; animation:drift1 26s ease-in-out infinite; }
.aurora i:nth-child(2){ background:radial-gradient(circle at 50% 50%, #ff8a3d, transparent 60%); bottom:-18vmax; right:-6vmax; animation:drift2 32s ease-in-out infinite; }
.aurora i:nth-child(3){ background:radial-gradient(circle at 50% 50%, #d63a2a, transparent 62%); top:20%; left:38%; opacity:.22; animation:drift3 38s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(10vmax,6vmax) scale(1.15)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-8vmax,-10vmax) scale(1.2)} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6vmax,8vmax) scale(.9)} }

/* Keep hero content above the aurora */
.hero{ position:relative; }
.hero > .hero-content, .hero > .hero-fx, .hero > .hero-wordmark{ position:relative; z-index:1; }
.hero > .aurora{ z-index:0; }
.cta-section{ position:relative; overflow:hidden; }
.cta-section .container{ position:relative; z-index:1; }

/* ============================================================
   MAGNETIC BUTTONS + refined interactions
   ============================================================ */
.magnetic{ will-change:transform; }
.btn-primary, .btn-ghost{ transition:transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo), background-color .25s ease, color .25s ease; }
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 45%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.btn-primary:hover::after{ opacity:1; }

/* ============================================================
   3D TILT CARDS
   ============================================================ */
.tilt{ transform-style:preserve-3d; transition:transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo); will-change:transform; }
.tilt > *{ transform:translateZ(0); }
.tilt.is-tilting{ transition:box-shadow .4s var(--ease-out-expo); }

/* ============================================================
   FUNNEL — scroll-scrubbed activation
   A batch travels the funnel as you scroll; each gate lights in turn.
   ============================================================ */
html.gsap-ready .funnel .fgate{ transition:transform .5s var(--ease-out-expo), opacity .5s var(--ease-out-expo), background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.funnel .fgate.scrub-on{ background:rgba(255,106,90,.14) !important; border-color:rgba(255,138,122,.6) !important; box-shadow:0 10px 30px rgba(255,73,49,.14); }
.funnel .fgate.is-model.scrub-on{ box-shadow:0 0 34px 8px rgba(255,106,90,.5) !important; }
.funnel-scrub-dot{
  position:absolute; left:50%; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#ff8a7a; box-shadow:0 0 20px 6px var(--coral-glow); z-index:5; pointer-events:none; opacity:0;
}
/* When GSAP drives the funnel by scroll, silence the base infinite loop */
html.gsap-ready .funnel-batch{ display:none; }
html.gsap-ready .funnel .fgate:nth-child(-n+8),
html.gsap-ready .funnel .fgate.is-model{ animation:none !important; }

/* ============================================================
   SECTION HEADINGS — oversized editorial accent
   ============================================================ */
.section-h2{ text-wrap:balance; }
html.gsap-ready .split-word{ display:inline-block; will-change:transform,opacity; }

/* Marquee credibility strip: a touch more life on hover pause handled in base */

/* ============================================================
   KINETIC MARQUEE — oversized outlined type, velocity-reactive
   ============================================================ */
.kmarquee{
  overflow:hidden; background:#0f0f0f; padding:34px 0 40px;
  border-top:1px solid rgba(255,255,255,.06); user-select:none;
}
.kmarquee-track{
  display:flex; white-space:nowrap; width:max-content; will-change:transform;
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(44px,8.5vw,120px); line-height:1;
}
.kmarquee-track span{
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.34);
}
.kmarquee-track span.km-solid{ color:var(--coral); -webkit-text-stroke:0; }
/* No-JS / no-GSAP fallback: slow CSS loop so it never sits frozen */
@keyframes km-loop{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
html:not(.gsap-ready) .kmarquee-track{ animation:km-loop 28s linear infinite; }

/* ============================================================
   EDITORIAL SECTION INDEX — giant ghost numerals
   ============================================================ */
.section-title-center{ position:relative; }
.sec-index{
  position:absolute; top:-0.42em; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(110px,20vw,240px); color:transparent;
  -webkit-text-stroke:1px rgba(15,15,15,.07); pointer-events:none; z-index:-1;
}
[data-theme-dark] .sec-index{ -webkit-text-stroke:1px rgba(255,255,255,.08); }

/* ============================================================
   CINEMATIC IMAGE REVEALS — screenshots unmask on scroll
   (initial state set by GSAP; this only supplies polish)
   ============================================================ */
figure.shot{ will-change:clip-path, transform; }
figure.shot img, figure.shot .uimock{ transform-origin:center 30%; }

/* Hero headline: two masked lines (built by award.js) */
.hero h1 .reveal-line{ display:block; }
.hero h1 .reveal-line + .reveal-line{ margin-top:0.04em; }

/* ============================================================
   INTRO COUNTER — 0 → 100 in the corner while the wipe plays
   ============================================================ */
.intro__count{
  position:absolute; right:5vw; bottom:6vh; font-family:var(--font-display);
  font-weight:700; font-size:clamp(40px,7vw,88px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.4);
}

/* ============================================================
   STATEMENT — full-viewport pinned scrub text-fill
   ============================================================ */
.statement{ background:#0f0f0f; padding:26vh 0; position:relative; overflow:hidden; }
.statement__text{
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(34px,5.6vw,76px); line-height:1.14; max-width:20ch; margin:0 auto;
  text-align:center; color:rgba(255,255,255,.16); text-wrap:balance;
}
.statement__text em{ font-style:normal; }
.statement__text .st-word{ transition:none; }
html:not(.gsap-ready) .statement__text{ color:#fff; }             /* fallback: readable */
html:not(.gsap-ready) .statement__text em{ color:var(--coral); }

/* ============================================================
   HORIZONTAL DETECTION STACK (desktop + gsap only)
   ============================================================ */
@media (min-width:901px){
  html.gsap-ready .det-bento.det-h{
    display:flex; flex-wrap:nowrap; gap:18px; width:max-content; will-change:transform;
  }
  html.gsap-ready .det-bento.det-h .det-tile{ width:380px; flex-shrink:0; }
  html.gsap-ready .det-bento.det-h .det-tile.is-hero{ width:560px; }
  html.gsap-ready #detection.det-pin{ overflow:hidden; }
}

/* ============================================================
   CURSOR LABEL — contextual "View" / "Scroll" inside the ring
   ============================================================ */
.cursor-ring .cursor-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:1.6px;
  text-transform:uppercase; color:#fff; opacity:0; transition:opacity .2s ease;
}
.cursor-ring.is-label{
  width:76px; height:76px; margin:-38px 0 0 -38px;
  background:rgba(15,15,15,.82); border-color:rgba(255,73,49,.8);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cursor-ring.is-label .cursor-label{ opacity:1; }

/* ============================================================
   MEGA CTA — the finale earns big type
   ============================================================ */
.cta-section .cta-inner h2{
  font-size:clamp(40px,7vw,96px); line-height:1.02; letter-spacing:-0.025em;
}
.cta-section .cta-inner > p{ font-size:clamp(16px,2vw,20px); max-width:56ch; margin-left:auto; margin-right:auto; }
.cta-section .btn-primary{
  font-size:clamp(16px,1.8vw,19px); padding:20px 44px;
}

/* ============================================================
   PAGE TRANSITIONS — coral-edged curtain between pages
   ============================================================ */
.page-wipe{
  position:fixed; inset:0; z-index:9996; background:#0f0f0f;
  border-top:3px solid var(--coral);
  transform:translateY(101%); pointer-events:none; will-change:transform;
}

/* ============================================================
   PAGE-HERO ENTRANCE (subpages) — states armed by GSAP
   ============================================================ */
.page-hero h1 .reveal-line{ display:block; }
/* Pre-paint arming (subpage head script adds .ph-arm; award.js removes it
   once GSAP owns the states; a 4s failsafe removes it if GSAP never loads) */
html.ph-arm .page-hero h1,
html.ph-arm .page-hero .monogram,
html.ph-arm .page-hero .red-label,
html.ph-arm .page-hero .role,
html.ph-arm .page-hero .lead,
html.ph-arm .page-hero .page-actions{ visibility:hidden; }

/* ============================================================
   MEGA FOOTER WORDMARK — the closing moment on every page
   ============================================================ */
.footer-mega{
  overflow:hidden; padding:56px 0 0; text-align:center; user-select:none;
}
.footer-mega span{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(72px,16vw,240px); line-height:.86; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,73,49,.4);
  transition:color .45s var(--ease-out-expo), -webkit-text-stroke-color .45s ease;
  will-change:transform;
}
.footer-mega:hover span{ color:var(--coral); -webkit-text-stroke-color:var(--coral); }

/* ============================================================
   REDUCED MOTION — turn the theatrics off, keep it legible
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
  .aurora i{ animation:none; }
  .cursor-ring, .cursor-dot{ display:none !important; }
  html.award-cursor, html.award-cursor *{ cursor:auto !important; }
  html.gsap-ready .reveal-line > span,
  html.gsap-ready [data-rise]{ transform:none !important; opacity:1 !important; }
  .intro{ display:none !important; }
  .kmarquee-track{ animation:none !important; }
}