/* v2 Tokens — extends v1, adds motion + carousel + variant tokens */
@import url('./Tokens.v1.css');

:root {
  /* Hero overlay variants — switched via [data-overlay] on .v2-root */
  --hero-overlay-light: linear-gradient(to bottom, rgba(5,5,7,0.2), rgba(5,5,7,0.1), rgba(5,5,7,0.75));
  --hero-overlay-medium: linear-gradient(to bottom, rgba(5,5,7,0.45), rgba(5,5,7,0.2), rgba(5,5,7,0.92));
  --hero-overlay-heavy: linear-gradient(to bottom, rgba(5,5,7,0.65), rgba(5,5,7,0.4), rgba(5,5,7,0.96));

  /* Carousel card sizes */
  --work-card-w: 360px;
  --work-card-h: 480px;
}

/* Hero overlay swap */
.v2-root[data-overlay="light"] .hero-overlay { background: var(--hero-overlay-light); }
.v2-root[data-overlay="medium"] .hero-overlay { background: var(--hero-overlay-medium); }
.v2-root[data-overlay="heavy"] .hero-overlay { background: var(--hero-overlay-heavy); }

/* Density swap — affects vertical rhythm of every section */
.v2-root[data-density="tight"]      { --density-scale: 0.78; }
.v2-root[data-density="comfortable"] { --density-scale: 1; }
.v2-root[data-density="airy"]        { --density-scale: 1.25; }
.v2-root[data-density="tight"] main section,
.v2-root[data-density="airy"]  main section {
  padding-top:    calc(clamp(80px, 11vw, 140px) * var(--density-scale));
  padding-bottom: calc(clamp(80px, 11vw, 140px) * var(--density-scale));
}
.v2-root[data-density="tight"] .v2-hero,
.v2-root[data-density="airy"]  .v2-hero { padding: 0; }

/* Subtle dot pulse for the hero eyebrow / live indicators */
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: 0.55; }
}

/* ============== Direction tweaks ============== */
/* The v2-root paints its own background so background-tone swaps take effect
   (body uses the :root value, which lives outside this scope). */
.v2-root { background: var(--bg-0); min-height: 100vh; font-family: var(--font-sans); }

/* Type pairing — swaps the sans + serif families for the whole page */
.v2-root[data-type="editorial"] {
  --font-sans: 'Inter Tight', 'Neue Haas Grotesk Display Pro', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Editorial New', 'Times New Roman', serif;
}
.v2-root[data-type="grotesk"] {
  --font-sans: 'Space Grotesk', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', 'Instrument Serif', 'Times New Roman', serif;
}
.v2-root[data-type="geometric"] {
  --font-sans: 'Sora', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Spectral', 'Instrument Serif', 'Times New Roman', serif;
}

/* Background tone — overrides the bg ramp; cards/sections inherit via the ramp */
.v2-root[data-bg="charcoal"] {
  --bg-0: #0a0908; --bg-1: #13110e; --bg-2: #1a1714; --bg-3: #221d18;
}
.v2-root[data-bg="slate"] {
  --bg-0: #06080c; --bg-1: #0d111a; --bg-2: #121826; --bg-3: #1a2233;
}

/* Corner style — drives card/panel radii; buttons squared only on sharp */
.v2-root[data-corners="sharp"] {
  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px;
}
.v2-root[data-corners="round"] {
  --radius-sm: 14px; --radius-md: 22px;
  --radius-lg: 30px; --radius-xl: 40px; --radius-2xl: 52px;
}
.v2-root[data-corners="sharp"] .btn { border-radius: 7px; }
.v2-root[data-corners="sharp"] .v2-hero-bl { border-radius: 12px; }
.v2-root[data-corners="round"] .v2-hero-bl { border-radius: 32px; }

/* Film grain toggle */
.v2-root[data-grain="off"] .grain::before,
.v2-root[data-grain="off"] .v2-hero-grain { display: none; }

/* Accent emphasis swap (changes --accent-emph) */
.v2-root[data-accent="gold"]   { --accent-emph: var(--accent-gold); --accent-emph-soft: rgba(215,181,109,0.14); --accent-emph-border: rgba(215,181,109,0.45); }
.v2-root[data-accent="blue"]   { --accent-emph: var(--accent-blue); --accent-emph-soft: rgba(111,168,255,0.14); --accent-emph-border: rgba(111,168,255,0.45); }
.v2-root[data-accent="violet"] { --accent-emph: var(--accent-violet); --accent-emph-soft: rgba(155,124,255,0.14); --accent-emph-border: rgba(155,124,255,0.45); }
.v2-root[data-accent="emerald"] { --accent-emph: var(--accent-emerald); --accent-emph-soft: rgba(79,209,161,0.14); --accent-emph-border: rgba(79,209,161,0.45); }

/* ============== WordsPullUp ============== */
.wpu { display: inline; }
.wpu .wpu-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: pre;
}
.wpu.is-in .wpu-word { opacity: 1; transform: translateY(0); }

/* ============== Char scroll reveal ============== */
.char-reveal { display: inline; }
.char-reveal .ch-word { display: inline-block; white-space: nowrap; }
.char-reveal .ch-gap { display: inline; white-space: normal; }
.char-reveal .ch { display: inline-block; opacity: 0.18; transition: opacity 220ms linear; white-space: pre; }

/* ============== Generic fade up on view ============== */
.in-view-up { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.in-view-up.is-in { opacity: 1; transform: translateY(0); }

/* ============== Hero scaffold ============== */
.v2-root section { scroll-margin-top: 96px; }

/* ============== Work carousel ============== */
.carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(50vw - 700px); /* aligns first card with container */
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.carousel-track::-webkit-scrollbar { display: none; }
@media (max-width: 1440px) { .carousel-track { padding: 0 clamp(20px, 5vw, 64px); } }
.carousel-card {
  flex: 0 0 var(--work-card-w);
  width: var(--work-card-w);
  height: var(--work-card-h);
  scroll-snap-align: start;
}
@media (max-width: 520px) {
  :root { --work-card-w: 82vw; --work-card-h: 460px; }
}

/* ============== v2 navbar ============== */
.v2-nav-shell {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 0 clamp(16px, 4vw, 32px);
  pointer-events: none;
}
.v2-nav-shell > * { pointer-events: auto; }
.v2-nav-wordmark {
  color: var(--fg-1); font-size: 15px; font-weight: 500; letter-spacing: -0.015em;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
}
.v2-nav-wordmark sup { font-size: 9px; opacity: 0.5; letter-spacing: 0.1em; }
.v2-nav-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(13,15,20,0.6);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(244,240,232,0.10);
  box-shadow: 0 1px 0 rgba(244,240,232,0.04) inset, 0 12px 40px -12px rgba(0,0,0,0.6);
  max-width: 90vw;
}
.v2-nav-link {
  padding: 8px 12px; border-radius: 999px;
  color: var(--fg-2); font-size: 13px; letter-spacing: -0.005em;
  text-decoration: none; transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
  white-space: nowrap;
}
.v2-nav-link:hover, .v2-nav-link.is-active { color: var(--fg-1); opacity: 1; }
.v2-nav-link.is-active { background: rgba(244,240,232,0.06); }
.v2-nav-cta {
  margin-left: 4px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--fg-1); color: var(--bg-0);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; transition: all 220ms var(--ease-out);
  white-space: nowrap;
}
.v2-nav-cta:hover { background: #fffbf3; opacity: 1; }

.v2-nav-right {
  display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end;
}
.v2-nav-right a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-1); font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; opacity: 0.9;
}
.v2-nav-right a:hover { opacity: 1; }

@media (max-width: 960px) {
  .v2-nav-pill { display: none; }
  .v2-nav-right > a { display: none; }
}

/* backdrop-filter is one of the most memory/GPU-expensive effects on iOS WebKit:
   each instance keeps a blurred backing buffer of everything behind it and
   re-renders it on every scroll/animation frame. The page had ~50 of them — the
   film-thumb labels alone are ~35, many inside the continuously-animating
   showcase marquee — which was a top contributor to the "Can't open this page"
   OOM crash on iPhone (Safari AND Chrome, since iOS Chrome is WebKit too).
   Disable backdrop blur ENTIRELY on phones; the glass chips fall back to a
   slightly more opaque solid background (below), which the dark theme carries
   fine. Desktop keeps the full frosted look. */
@media (max-width: 820px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Without the blur, lift the chip backgrounds toward opaque so text over the
     hero video / busy areas stays crisp. */
  .v2-nav-pill,
  .v2-hero-eyebrow,
  .v2-hero-bl,
  .v2-hero-br,
  .v2-about-sound-btn,
  .v2-about-portrait-tag,
  .v2-film-thumb-label,
  .v2-film-lb-close {
    background-color: rgba(13, 15, 20, 0.86) !important;
  }
}