/* ==========================================================================
   CLAVES HOUSE — cinema.css
   The continuous scroll cinema: one fixed film layer (one persistent canvas
   surface and bounded chapter decoders), transparent film-chapter scroll spans driving the
   global timeline, sticky copy choreography. Reduced motion / Save-Data /
   low memory / no JS → the stills presentation (chapter posters + copy in
   natural order).
   ========================================================================== */

/* ---------- 1. The film layer ---------- */

.film-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--black);
  overflow: clip;
}
/* Decoders never become the visible surface. Canvas retains decoded pixels. */
.film-decoder { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.film-surface { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.film-surface.is-ready { opacity:1; }
.film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: none;
}
.film-poster.is-gone { opacity: 0; }

/* Directional shade so copy always clears the footage */
.film-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 38%, rgba(8,6,4,.12) 100%),
    linear-gradient(90deg, rgba(8,6,4,.12), transparent 52%, rgba(8,6,4,.10)),
    linear-gradient(to top, rgba(8, 6, 4, 0.38), rgba(8, 6, 4, 0.14) 28%, rgba(8, 6, 4, 0) 52%),
    linear-gradient(to bottom, rgba(8, 6, 4, 0.34), rgba(8, 6, 4, 0) 26%);
}

/* ---------- 2. Film chapters (scroll spans) ---------- */

main { position: relative; z-index: 1; }

.film-chapter {
  position: relative;
  height: var(--film-len, 180svh);
  pointer-events: none;      /* the journey is watched, not blocked… */
}
.film-chapter a { pointer-events: auto; }  /* …but links stay usable */

.film-copy {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + clamp(20px, 4vh, 44px));
  padding-bottom: clamp(56px, 9vh, 110px);
  isolation: isolate;
  /* Gold measures low luminance on its own (#a9823e ≈ 63/255): against any
     background dark enough to clear bright footage, the standard accent
     reads as two dark tones close together rather than real contrast. A
     lighter gold local to copy-over-film cascades into .film-kicker,
     .film-title em and .text-link through var(--accent) without touching
     the accent used elsewhere on the page. */
  --accent: #d9b06a;
}
.film-copy::before { content: none; }
.film-copy .eyebrow { margin-bottom: 18px; }
/* The background gradient alone cannot guarantee contrast against every
   frame (a bright marble table, a gold coin close-up, a cluttered desk) —
   a soft shadow local to each glyph holds legibility regardless of what is
   directly behind it, including the gold emphasis text against gold-toned
   footage where darkening the background alone does not add hue contrast. */
.film-copy .eyebrow,
.film-title,
.film-sub,
.film-kicker,
.film-link,
.scroll-cue {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.film-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 14ch;
  margin: 0;
  text-wrap: balance;
}
.film-title .line { display: block; }
.film-title em { font-style: italic; color: var(--accent); }
.film-title.hero { font-size: clamp(2.6rem, 7.2vw, 6.4rem); max-width: 12ch; }

.film-sub {
  margin-top: 20px;
  max-width: 42ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--text-dark-dim);
}

.film-tag {
  position: absolute;
  top: calc(var(--header-h) + 28px);
  right: var(--gutter);
  text-align: right;
  font-size: 0.68rem;
  font-weight: 520;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239, 231, 216, 0.55);
  z-index: 2;
}
.film-tag span { display: block; margin-top: 6px; color: rgba(239, 231, 216, 0.34); letter-spacing: 0.2em; }

.film-kicker {
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.film-link { margin-top: 26px; }

/* Copy pieces are timeline-driven under JS; visible by default without it */
.cinema-enhanced .film-copy [data-copy] { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }

/* Scroll cue (scene 01) */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.scroll-cue .cue-line {
  width: 46px; height: 1px;
  background: var(--accent);
  position: relative;
  overflow: hidden;
}
.scroll-cue .cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  animation: cue-sweep 2.2s var(--ease-soft) infinite;
}
@keyframes cue-sweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(102%); }
}

/* Editorial sections cover the fixed film layer */
main > section:not(.film-chapter),
main > div:not(.film-chapter) {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .film-tag { display: none; }
  .film-title { max-width: 12ch; }
}

/* ---------- 3. Stills presentation (reduced motion / Save-Data / no JS) ---------- */

@media (prefers-reduced-motion: reduce) {
  .film-layer { display: none; }
}
html.stills .film-layer { display: none; }

.film-chapter {
  --poster: none;
}
@media (prefers-reduced-motion: reduce) {
  .film-chapter {
    height: auto !important;
    min-height: 82svh;
    background: var(--black);
  }
  .film-copy { position: relative; height: auto; min-height: 82svh; }
  .film-chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--poster) center / cover no-repeat;
    opacity: 0.85;
  }
  .film-chapter::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(12, 9, 7, 0.9), rgba(12, 9, 7, 0.25) 55%),
      linear-gradient(to bottom, rgba(12, 9, 7, 0.6), rgba(12, 9, 7, 0) 30%);
  }
  .film-copy > * { position: relative; z-index: 2; }
  .film-copy [data-copy] { opacity: 1 !important; transform: none !important; }
}
html.stills .film-chapter {
  height: auto !important;
  min-height: 82svh;
  background: var(--black);
}
html.stills .film-copy { position: relative; height: auto; min-height: 82svh; }
html.stills .film-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--poster) center / cover no-repeat;
  opacity: 0.85;
}
html.stills .film-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 9, 7, 0.9), rgba(12, 9, 7, 0.25) 55%),
    linear-gradient(to bottom, rgba(12, 9, 7, 0.6), rgba(12, 9, 7, 0) 30%);
}
html.stills .film-copy > * { position: relative; z-index: 2; }
html.stills .film-copy [data-copy] { opacity: 1 !important; transform: none !important; }
html.stills .journey-progress { display: none !important; }

/* No-JS: identical stills presentation (the .js gate never applies) */
html:not(.cinema-enhanced) .film-chapter {
  height: auto;
  min-height: 82svh;
  background: var(--black);
}
html:not(.cinema-enhanced) .film-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--poster) center / cover no-repeat;
  opacity: 0.85;
}
html:not(.cinema-enhanced) .film-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 9, 7, 0.9), rgba(12, 9, 7, 0.25) 55%),
    linear-gradient(to bottom, rgba(12, 9, 7, 0.6), rgba(12, 9, 7, 0) 30%);
}
html:not(.cinema-enhanced) .film-copy { position: relative; height: auto; min-height: 82svh; }
html:not(.cinema-enhanced) .film-copy > * { position: relative; z-index: 2; }

/* Journey progress hairline (JS-driven, inert without JS) */
.journey-progress {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 99;
  width: 2px;
  background: transparent;
  pointer-events: none;
  display: none;
}
.js .journey-progress { display: block; }
.journey-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--gold), rgba(169, 130, 62, 0.25));
  transform: scaleY(0);
  transform-origin: top;
}

/* Respect content visibility even if the cinema script fails to load. */
.cinema-enhanced .film-copy [data-copy][data-film-hidden] { visibility:hidden; pointer-events:none; }
.film-copy [data-copy] { transition:none; }
@media (prefers-reduced-motion:reduce) { .scroll-cue .cue-line::after { animation:none; } }
html.stills .film-copy [data-copy] { visibility:visible !important; pointer-events:auto !important; }
html.stills .film-copy::before { display:none; }
@media (max-height:500px) and (min-width:600px) {
  .film-copy { padding-top:calc(var(--header-h) + 12px); padding-bottom:24px; }
  .film-title { font-size:clamp(1.8rem,5vh,2.6rem); max-width:24ch; }
  .film-sub { margin-top:10px; max-width:64ch; font-size:.9rem; }
  .film-link { margin-top:14px; }
}

html:not(.cinema-enhanced) .film-layer { display:none; }

/* Chapter 02 alone is right anchored; copy timing and film geometry stay locked. */
@media (min-width: 1024px) {
 [data-film-chapter="02"] .film-copy { align-items:flex-end; padding-right:9vw; text-align:right; }
 [data-film-chapter="02"] .film-title { max-width:14ch; }
}
.claves-signature { position:absolute; inset:0; pointer-events:none; z-index:0; }
.signature-surface { position:sticky; top:0; height:100svh; display:grid; place-items:center; background:#080706; opacity:0; }
.signature-metal { position:relative; width:min(54vw,540px); opacity:0; }
.signature-metal img { width:100%; height:auto; filter:brightness(.32) saturate(.35); }
.signature-metal .signature-edge { position:absolute; inset:0; filter:brightness(.8) saturate(.55); mask-image:linear-gradient(108deg,transparent 42%,#000 49%,transparent 56%); mask-size:300% 100%; mask-position:var(--signature-light,100%) 0; }
[data-film-chapter="05"] .film-copy { z-index:1; }
html.stills .claves-signature,html:not(.cinema-enhanced) .claves-signature { display:none; }
@media (prefers-reduced-motion:reduce) { .claves-signature { display:none; } }