/* Agen2ic — pelicula-01
   Premium dark mode: black ground, stark white, one grey. No colour, no gradients on type.
   Everything sized in clamp() so the only breakpoint is the viewport itself. */

:root {
  --ink: #f4f4f4;        /* stark white-ish, never pure #fff on black */
  --dim: #8c8c8c;        /* subtle grey for secondary copy */
  --faint: #3a3a3a;      /* rules, bars */
  --bg: #000;
  --sans: "Helvetica Neue", Helvetica, Inter, "SF Pro Display", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --measure: 46ch;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

/* ── loader ────────────────────────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.7s ease 0.1s, visibility 0.7s ease 0.1s;
}
.loader[data-done="true"] { opacity: 0; visibility: hidden; }
.loader__inner { width: min(22rem, 76vw); text-align: left; }
.loader__label {
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dim);
}
.loader__count {
  margin-top: 0.9rem;
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.loader__unit { font-size: 0.3em; color: var(--dim); margin-left: 0.25em; letter-spacing: 0; }
.loader__bar {
  margin-top: 1.4rem;
  height: 1px;
  background: var(--faint);
  overflow: hidden;
}
.loader__bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width 0.25s linear;
}
.loader__hint {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}

/* ── chrome ────────────────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.6vw, 1.9rem) var(--gutter);
  mix-blend-mode: difference;   /* stays legible over any frame */
  pointer-events: none;
}
.brand {
  pointer-events: auto;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.4em;
}
.topbar__meta {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding: 22vh var(--gutter) 12vh;
}
.hero__title { font-size: clamp(2.6rem, 9.2vw, 8.5rem); }
.hero__sub {
  max-width: var(--measure);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--dim);
}
.scrollcue {
  margin-top: clamp(2rem, 8vh, 6rem);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--dim);
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── pinned film stage ─────────────────────────────────────────────────────── */
.film { position: relative; }

.stage {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(0,0,0,0.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 68%, rgba(0,0,0,0.78) 100%),
    /* READING SCRIM. Measured on real frames: body copy sat over orange filaments (frame 075)
       and over the lit blocks (frame 223) and became unreadable while every automated check
       stayed green. The type lives bottom-left, so the scrim is weighted there and fades out
       by mid-frame — the image is never flattened. */
    linear-gradient(100deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.70) 24%, rgba(0,0,0,0.22) 48%, transparent 66%);
}
.stage__frame {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 3vh, 2.2rem);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.captions { position: absolute; inset: 0; pointer-events: none; }
.cap {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(4.5rem, 14vh, 9rem);
  margin: 0;
  max-width: min(34rem, 72vw);
  opacity: 0;                 /* GSAP owns this; 0 by default so nothing flashes */
  transform: translateY(14px);
}
.cap h2 {
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.cap p {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.55;
  /* Brighter than --dim: this grey sits over moving footage, not over black. */
  color: #cfcfcf;
  max-width: 34ch;
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.7);
}
/* Static, readable fallback when motion is off or JS never arrives. */
.captions[data-static="true"] .cap {
  position: relative;
  left: auto;
  bottom: auto;
  opacity: 1;
  transform: none;
  margin: 0 0 2.4rem;
}
.captions[data-static="true"] {
  position: relative;
  padding: 14vh var(--gutter);
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.92));
}

/* ── manifesto ─────────────────────────────────────────────────────────────── */
.manifesto { padding: clamp(6rem, 18vh, 14rem) var(--gutter); }
.manifesto__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--faint);
}
.manifesto__grid {
  margin-top: clamp(2.5rem, 7vh, 5rem);
  display: grid;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.manifesto__grid h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  margin-bottom: 0.8rem;
}
.manifesto__grid p {
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  color: var(--dim);
}

/* ── closing ───────────────────────────────────────────────────────────────── */
.closing {
  min-height: 72svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.8rem;
  padding: clamp(4rem, 12vh, 10rem) var(--gutter);
}
.closing__title { font-size: clamp(2rem, 6.4vw, 5.4rem); }
.closing__note {
  max-width: var(--measure);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dim);
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2.2rem var(--gutter) 3rem;
  border-top: 1px solid var(--faint);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.foot__dim { color: var(--dim); }

.noscript {
  padding: 1.1rem var(--gutter);
  border-top: 1px solid var(--faint);
  color: var(--dim);
  font-size: 0.85rem;
}

/* ── motion preferences ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scrollcue { animation: none; opacity: 0.6; }
  .loader { transition: none; }
}