/* base.css: tokens, reset, layout and the styles the effect catalogue relies on.
   Brand work happens in the :root tokens and in site.css; keep this file generic. */

:root {
  /* colour tokens: replace from the brief / client pack */
  --bg: #0f0f0e;
  --surface: #1a1a18;
  --ink: #f2efe8;
  --muted: #9c978c;
  --line: rgba(242, 239, 232, 0.14);
  --accent: #d97757;

  /* type: one display face, one UI face */
  --font-display: "Display", Georgia, "Times New Roman", serif;
  --font-ui: "UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
  --step-4: clamp(3rem, 2rem + 5.5vw, 7.5rem);

  --gutter: clamp(1rem, 0.5rem + 3vw, 4rem);
  --max: 1320px;
  --radius: 14px;
  --section: clamp(5rem, 3rem + 8vw, 11rem);
  --ease-gsap: power4.out;
  --ease-css: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; text-wrap: balance; }
p { margin: 0 0 1em; max-width: 62ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.eyebrow { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.h-display { font-size: var(--step-4); }
.h-1 { font-size: var(--step-3); }
.h-2 { font-size: var(--step-2); }
.lede { font-size: var(--step-1); color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.5em; border-radius: 999px;
  background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 600; border: 0; cursor: pointer;
  transition: filter 0.3s var(--ease-css);
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; }
.hero__stage { position: absolute; inset: 0; }
.hero__stage svg, .hero__stage canvas { width: 100%; height: 100%; }
.hero__copy { position: relative; z-index: 2; align-self: end; padding: var(--gutter); padding-bottom: clamp(3rem, 8vh, 6rem); }
/* render mode (MP4 export): hero.js hides everything but the hero */
.is-render .hero { min-height: 100vh; height: 100vh; }

/* ---------- film ---------- */
.film { position: relative; height: 100svh; overflow: hidden; }
.film canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ---------- effects the catalogue relies on ---------- */
[data-hscroll] { overflow: hidden; }
.hs-track { display: flex; gap: clamp(1rem, 2vw, 2rem); width: max-content; padding-inline: var(--gutter); }
@media (max-width: 767px) {
  [data-hscroll] { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .hs-track > * { scroll-snap-align: start; }
}

.stack-card { position: sticky; transform-origin: 50% 0; will-change: auto; }

[data-story] { display: grid; gap: var(--gutter); }
.story-media { position: relative; }
.story-media [data-media] { margin: 0; }
.story-media [data-media] + [data-media] { position: absolute; inset: 0; }
[data-step] { opacity: 0.35; transition: opacity 0.5s var(--ease-css); padding-block: 30vh; }
[data-step].is-active { opacity: 1; }
@media (min-width: 900px) {
  [data-story] { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .story-media { position: sticky; top: 12vh; }
}
@media (max-width: 899px) { [data-step] { opacity: 1; padding-block: 2rem; } }

[data-marquee] { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: 3rem; white-space: nowrap; }

[data-ba] { position: relative; overflow: hidden; --pos: 50%; }
[data-ba] img { width: 100%; }
[data-ba] .ba-after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--pos)); }
[data-ba]::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--ink); transform: translateX(-1px); pointer-events: none; }
[data-ba] .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

[data-progress] { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 100; transform: scaleX(0); transform-origin: left; }
[data-smart-header] { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }

.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000; border-radius: 50%; translate: -50% -50%; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring { width: 36px; height: 36px; border: 1px solid var(--ink); opacity: 0.5; transition: width 0.3s var(--ease-css), height 0.3s var(--ease-css), opacity 0.3s; }
.cursor-ring.is-grow { width: 64px; height: 64px; opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}