/* =========================================================================
   Zenon Karaoke · base.css — tokens, type, primitives, motion vocabulary.
   Brand fonts (from the brand book, not to be changed): Italiana · Cormorant
   ========================================================================= */

/* ---------- tokens ---------------------------------------------------- */
:root {
  --bg: #151312;
  --bg-2: #1C1A19;
  --bg-3: #222120;          /* brand black */
  --ink: #EDEBE9;           /* Soft Sand */
  --ink-2: #BAB4AC;
  --ink-3: #948D84;
  --navy: #003366;          /* Dark Blue · Pantone 2955C */
  --navy-2: #0B2748;
  --accent: #8FB3E8;
  --bronze: #B08D5B;        /* from the sculpture / bar shelving */
  --ember: #B3372C;         /* the red light in the room, used sparingly */
  --line: rgba(237, 235, 233, .16);
  --line-soft: rgba(237, 235, 233, .09);

  --font-display: 'Italiana', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-text: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);

  --gutter: clamp(20px, 4.5vw, 64px);
  --wrap: 1360px;
  --nav-h: 76px;

  --p: 0;                   /* scroll progress, written by motion.js */
  --scroll: 0;              /* page progress 0..1 */

  color-scheme: dark;
}

/* ---------- reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-motion="off"] { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--navy); color: var(--ink); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- layout ---------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), 1600px); margin-inline: auto; }
.sec { position: relative; }

/* ---------- typography ------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.02;
}
.display em, .italic { font-family: var(--font-text); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; }   /* an italic phrase never splits across lines */
.eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 16px;
}
.eyebrow .num { color: var(--accent); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent); opacity: .7; }
.eyebrow.bare::before { display: none; }
.lede { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.small { font-size: 14.5px; letter-spacing: .04em; color: var(--ink-3); }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- buttons --------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 14px 36px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-text); font-weight: 600; font-size: 13.5px; letter-spacing: .3em; text-transform: uppercase;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--ease-expo);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid::before { background: var(--bg); transform: scaleY(0); }
.btn-solid:hover { color: var(--ink); }
.btn-ghost { border-color: rgba(237, 235, 233, .36); }
.btn svg { flex: none; }
.link-line { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: 0 50%; transition: transform .5s var(--ease-expo); }
.link-line:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }

/* =========================================================================
   MOTION VOCABULARY
   Each primitive maps either the reveal class .in (entering viewport) or
   the scroll variable --p (0..1, inherited from the tracked wrapper).
   ========================================================================= */

/* --- helpers for sub-ranges in CSS -------------------------------------
   usage:  --p1: clamp(0, (var(--p) - .2) / .4, 1);   // 0.2 → 0.6
   smoothstep: calc(var(--p1) * var(--p1) * (3 - 2 * var(--p1)))              */

/* --- 1. Reveal: fade/rise on enter ------------------------------------- */
.rv { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); }
.rv.in { opacity: 1; transform: none; }
.rv-fade { opacity: 0; transition: opacity 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); }
.rv-fade.in { opacity: 1; }

/* --- 2. Image unveil: clip + settle -------------------------------------
   NOTE: IntersectionObserver reports zero intersection for an element whose
   own clip-path hides it, so the clip lives on the child, the wrapper is observed. */
.unveil { position: relative; overflow: hidden; }
.unveil > img, .unveil > video, .unveil > picture { clip-path: inset(0 0 100% 0); transform: scale(1.14); transition: clip-path 1.4s var(--ease-expo), transform 1.8s var(--ease-expo); transition-delay: var(--d, 0ms); }
.unveil.in > img, .unveil.in > video, .unveil.in > picture { clip-path: inset(0 0 0 0); transform: scale(1); }
.unveil-x > img, .unveil-x > video, .unveil-x > picture { clip-path: inset(0 100% 0 0); }

/* --- 3. Split text: words rise with stagger ----------------------------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split] .wi { display: inline-block; transform: translate3d(0, 110%, 0) rotate(.6deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-expo); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); }
[data-split].in .wi { transform: none; }
[data-split="chars"] .ch { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1s var(--ease-expo); transition-delay: calc((var(--i, 0) * var(--cn, 1) + var(--c, 0)) * 28ms + var(--d, 0ms)); }
[data-split="chars"] .wi { transform: none; }
[data-split="chars"].in .ch { transform: none; }

/* --- 4. Scrub text: words light up as --p advances ---------------------- */
[data-scrub-text] .w { display: inline; }
[data-scrub-text] .wi { display: inline; color: var(--ink); opacity: calc(.14 + .86 * clamp(0, var(--p) * (var(--n) + 2) - var(--i), 1)); transition: none; }

/* --- 5. Pin: tall wrapper + sticky stage -------------------------------- */
.pin { position: relative; height: calc(var(--pin, 2) * 100vh); height: calc(var(--pin, 2) * 100svh); }
.pin-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }   /* clip: not a scroll container, so focus() cannot scroll the stage */

/* --- 6. Parallax layer: translate by (--p - .5) ------------------------- */
.par { --amt: 60px; }
.par > .par-in, .par-in { transform: translate3d(0, calc((.5 - var(--p)) * var(--amt)), 0); will-change: transform; }
.par-img > img, .par-img > picture { height: 120%; width: 100%; object-fit: cover; transform: translate3d(0, calc(-10% + (var(--p) - .5) * -12%), 0); will-change: transform; }

/* --- 7. Drift wordmark: giant type sliding with scroll ------------------ */
.drift-word { white-space: nowrap; font-family: var(--font-display); text-transform: uppercase; line-height: .9; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(237, 235, 233, .22); pointer-events: none; user-select: none; }
.drift-word-in { display: inline-block; transform: translate3d(calc(var(--from, 10%) + (var(--to, -30%) - var(--from, 10%)) * var(--p)), 0, 0); will-change: transform; }

/* --- 8. Scale-settle: media that shrinks/grows with --p ----------------- */
.settle { transform: scale(calc(var(--from, 1.15) + (var(--to, 1) - var(--from, 1.15)) * var(--p))); will-change: transform; }

/* --- 9. Line draw (SVG): dashoffset driven by --p ----------------------- */
.draw path, .draw line, .draw circle, .draw polyline { stroke-dasharray: var(--len, 1000); stroke-dashoffset: calc(var(--len, 1000) * (1 - var(--p))); }

/* --- 10. Counter --------------------------------------------------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* --- reduced motion: everything visible, nothing moves ------------------ */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-fade, .unveil, [data-split] .wi, [data-split="chars"] .ch { opacity: 1; transform: none; clip-path: none; transition: none; }
  .unveil > img, .unveil > video, .unveil > picture img { transform: none; transition: none; }
  [data-scrub-text] .wi { opacity: 1; }
  .par-in, .par-img > img, .settle, .drift-word-in { transform: none; }
  .pin { height: auto; }
  .pin-stage { position: relative; height: auto; overflow: visible; }
}