/* ═══════════════════════════════════════════════════════════════════════════
   ROA Credit — cinema.css  (v3 "El Árbol")

   The film layer. roa.css/red.css still own typography, buttons and the
   design tokens; this file owns the relationship between the living scene
   and the words.

   THE CONTRAST CONTRACT (unchanged from the thesis, now enforced over a
   moving image): words never sit directly on busy scene. Dense text rides
   on .plate — solid paper, hairline border, no blur (blur is a GPU tax on
   the very phones this page serves). Where text does sit directly on the
   scene (hero, raíces, cierre), the scene there is calm and the pairings
   are measured: bark on dawn paper ≈ 13:1 · paper on underground ≈ 16:1 ·
   bark on golden-hour sky ≈ 8:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the scene layers ─────────────────────────────────────────────────────── */
#gl, #frames {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
#gl { opacity: 0; transition: opacity 1.4s var(--ease); }
#gl.live { opacity: 1; }
#frames { background: var(--paper); }
#frames img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
#frames img.on { opacity: 1; }

main { position: relative; z-index: 1; }
.topbar { z-index: 20; }
.foot, .dock { position: relative; z-index: 2; }
.foot { background: var(--paper); }   /* the film ends; the paperwork is paper */

/* ── chapters as scenes ───────────────────────────────────────────────────── */
[data-cam] { position: relative; }
.scene {
  display: flex; align-items: center;
  padding-inline: var(--gutter);
}
.scene__h { min-height: 100vh; }
[data-cam="hero"]    { min-height: 100vh; }
[data-cam="raices"]  { min-height: 260vh; align-items: flex-start; }
[data-cam="tres"]    { min-height: 205vh; }
[data-cam="proceso"] { min-height: 205vh; }
[data-cam="pedimos"] { min-height: 185vh; }
[data-cam="banda"]   { min-height: 92vh; }
[data-cam="cierre"]  { min-height: 132vh; text-align: center; }

/* the pinned growth film */
[data-cam="cine"] { min-height: 380vh; }
.cine__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
}

/* sticky chapters: the content rides along while the world moves */
.pin {
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  width: 100%;
}

/* ── the plate: measured contrast over a living scene ────────────────────── */
.plate {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 18px 44px rgba(59,42,22,.10);
  max-width: 40ch;
}
.plate--wide { max-width: 62ch; }
.plate--dark {
  background: #1D150C;
  border-color: #3A2C1A;
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.42);
}
.plate--dark .lead, .plate--dark .prose { color: #EFE6D4; }
.plate--dark .muted { color: #B8A888; }

/* ── hero: words directly on the calm dawn — with a quiet scrim ────────────
   The film must never eat the words: a soft paper scrim keeps bark text at
   its measured contrast no matter what the scene does behind it. */
.hero__copy {
  max-width: 44ch;
  background: rgba(255, 252, 247, 0.86);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 18px 44px rgba(59,42,22,.10);
}
.hero .display { margin-block: .35em .3em; }
.hero__lead { max-width: 34ch; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-block: 1.6rem 1.2rem; }
.hero__note {
  border-left: 2px solid var(--gold);
  padding-left: .9rem;
  font-size: var(--t-small);
  color: var(--bark-mid);
  max-width: 36ch;
}

/* ── raíces: dark chapter, light words, the list lights with the roots ────── */
[data-cam="raices"] { color: var(--paper); }
[data-cam="raices"] .h2 { color: var(--paper); }
[data-cam="raices"] .lead { color: #EFE6D4; }
[data-cam="raices"] .eyebrow { color: var(--gold-light); }
.roots__list { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
.roots__item {
  background: rgba(29,21,12,.88);
  border: 1px solid #3A2C1A;
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  display: grid; gap: .3rem;
}
.roots__no { color: var(--gold-light); font-weight: 700; font-size: var(--t-small); letter-spacing: .02em; }
.roots__yes { color: #EFE6D4; font-size: var(--t-body); line-height: 1.55; }
.roots__yes b { color: var(--paper); }
.roots__num { display: none; }  /* the numbers were noise; the glow counts now */

/* ── tres / proceso / pedimos: plates over the bright world ──────────────── */
.stack { display: grid; gap: 1.2rem; max-width: 44ch; }
.chapter-head {
  max-width: 46ch; margin-bottom: 2rem;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 14px 34px rgba(59,42,22,.09);
}
/* dark chapter heads ride bare — paper text on the underground is ~16:1 */
[data-cam="raices"] .chapter-head {
  background: none; border: 0; box-shadow: none; padding: 0;
}
.mw-30 { max-width: 30ch; } .mw-32 { max-width: 32ch; } .mw-34 { max-width: 34ch; }

.card { /* red.css look, lifted onto a plate */
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 14px 34px rgba(59,42,22,.09);
}
.card__mark { color: var(--gold-dark); }
.card__mark svg { width: 34px; height: 34px; }
.card__title { font-family: var(--font-display); font-size: var(--t-h3); margin: .6rem 0 .4rem; }
.card__body { color: var(--bark-mid); line-height: 1.6; font-size: var(--t-body); }
.card__meta { margin-top: .8rem; font-size: var(--t-small); color: var(--gold-dark); font-weight: 600; }
.card__meta a { color: inherit; }

.steps { display: grid; gap: 1.2rem; max-width: 42ch; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 14px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 14px 34px rgba(59,42,22,.09);
}
.step__n {
  grid-row: span 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold);
  color: var(--gold-dark); font-family: var(--font-roman); font-size: 1.15rem;
}
.step__t { font-family: var(--font-display); font-size: 1.25rem; align-self: center; }
.step__b { color: var(--bark-mid); line-height: 1.55; font-size: var(--t-body); }

.reqs { display: grid; gap: 1rem; max-width: 46ch; }
.req {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 6px rgba(59,42,22,.05), 0 10px 26px rgba(59,42,22,.08);
}
.req__leaf { color: var(--gold-dark); flex: none; margin-top: .15rem; }
.req__leaf svg { width: 20px; height: 20px; }
.req__t { font-weight: 700; color: var(--bark); }
.req__b { color: var(--bark-mid); font-size: var(--t-small); line-height: 1.5; margin-top: .1rem; }

/* ── cine beats: film title cards ─────────────────────────────────────────── */
.cine__beats { position: relative; width: 100%; }
.beat {
  position: absolute; left: var(--gutter); top: 50%;
  translate: 0 -50%;
  max-width: 38ch;
  opacity: 0; visibility: hidden;
  will-change: opacity, transform;
}
.beat__inner {
  background: var(--paper); border: 1px solid var(--hair); border-radius: 14px;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
  box-shadow: 0 2px 6px rgba(59,42,22,.07), 0 18px 44px rgba(59,42,22,.11);
}
.beat__n { font-size: var(--t-eyebrow); color: var(--gold-dark); letter-spacing: .14em; text-transform: uppercase; }

/* the rail */
.rail {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 7vh;
  height: 40px;
}
.rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 18px;
  height: 1px; background: var(--hair);
}
.rail__fill {
  position: absolute; left: 0; top: 18px; height: 1px; width: 100%;
  background: var(--gold); transform-origin: left; transform: scaleX(0);
}
.rail__tick {
  position: absolute; top: 15px; width: 7px; height: 7px;
  background: var(--paper); border: 1px solid var(--gold-dark);
  rotate: 45deg; translate: -50% 0;
}
.rail__lab {
  position: absolute; top: 30px; translate: -50% 0;
  font-size: var(--t-eyebrow); color: var(--bark-mid); letter-spacing: .08em;
}
.rail__tick.lit { background: var(--gold); }
.rail__lab.lit { color: var(--bark); font-weight: 700; }
.rail__tick[data-tick="0"] { left: 6.25%; }  .rail__lab[data-tick="0"] { left: 6.25%; }
.rail__tick[data-tick="1"] { left: 37.5%; }  .rail__lab[data-tick="1"] { left: 37.5%; }
.rail__tick[data-tick="2"] { left: 62.5%; }  .rail__lab[data-tick="2"] { left: 62.5%; }
.rail__tick[data-tick="3"] { left: 93.75%; } .rail__lab[data-tick="3"] { left: 93.75%; }

/* ── banda: the quiet interlude ───────────────────────────────────────────── */
.band__row {
  display: flex; gap: 1.2rem; align-items: center;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 14px;
  padding: 1.3rem 1.6rem; max-width: 62ch; margin-inline: auto;
  box-shadow: 0 2px 6px rgba(59,42,22,.06), 0 14px 34px rgba(59,42,22,.09);
}
.band__icon { color: var(--gold-dark); flex: none; }
.band__icon svg { width: 30px; height: 30px; }
.band__text { margin: 0; color: var(--bark-mid); line-height: 1.6; }
.band__text strong { color: var(--bark); }

/* ── cierre: bark words on the golden sky, one gold object on the page ────── */
[data-cam="cierre"] .display { color: var(--bark); }
[data-cam="cierre"] .eyebrow { color: var(--gold-dark); }
.cierre__inner {
  max-width: 52ch; margin-inline: auto;
  background: rgba(255, 252, 247, 0.82);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 2px 6px rgba(59,42,22,.07), 0 20px 50px rgba(59,42,22,.12);
}
.cierre__inner .btn { margin-top: 1.8rem; }
.cierre__note { margin-top: 1.4rem; color: var(--bark-mid); max-width: 44ch; margin-inline: auto; }

/* ── footer: the medallion, not a second billboard ────────────────────────── */
.foot__mark { width: 54px; height: 54px; border-radius: 50%; }

/* ── reveals ──────────────────────────────────────────────────────────────── */
[data-reveal], [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in, [data-reveal-stagger].in > * { opacity: 1; transform: none; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: .24s; }

/* ── fallback & reduced motion: the film as photographs, content first ────── */
.no-gl [data-cam] { min-height: 100vh; }
.no-gl [data-cam="cine"] { min-height: 0; }
.no-gl .cine__pin, .no-gl .pin { position: relative; height: auto; min-height: 0; padding-block: var(--bay); }
.no-gl .beat {
  position: relative; left: auto; top: auto; translate: none;
  opacity: 1; visibility: visible; transform: none !important;
  margin-bottom: 1.4rem;
}
.no-gl .rail { display: none; }
.no-gl [data-reveal], .no-gl [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
.no-gl .scene { padding-block: var(--bay); }

@media (prefers-reduced-motion: reduce) {
  #gl { display: none; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none; }
  .beat { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* bake mode: chrome hidden so stills are pure scene */
.baking .topbar, .baking main, .baking .foot, .baking .dock, .baking .skip, .baking #frames { display: none !important; }
.baking #gl { opacity: 1; }

/* ── small screens ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  [data-cam="raices"]  { min-height: 230vh; }
  [data-cam="tres"]    { min-height: 190vh; }
  [data-cam="proceso"] { min-height: 195vh; }
  [data-cam="pedimos"] { min-height: 175vh; }
  [data-cam="cine"]    { min-height: 400vh; }
  .beat { left: 5vw; right: 5vw; max-width: none; }
  .plate, .card, .step, .req { box-shadow: 0 2px 5px rgba(59,42,22,.07), 0 10px 26px rgba(59,42,22,.10); }
  .hero__copy { max-width: none; }
  .rail__lab { font-size: .72rem; }
}