/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXTS AND PREFERENCES

   Three contexts, decided once in the head before first paint:

     ctx-cinema   the fixed stage layer runs the story
     ctx-panels   no stage, the stills carry it, one committed enter each
     ctx-still    nothing animates at all

   Plus the four preference queries. Reduced motion means fewer and gentler,
   not zero: opacity and colour survive because they aid comprehension, and
   only movement is removed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════  CONTEXT: CINEMA  ═══════════════════════════
   The text lives in the left half so the stage has the right half to itself.
   Two scenes take the full width instead, which is where the layout variety
   comes from without the protagonist ever jumping sides.
   ═══════════════════════════════════════════════════════════════════════ */

.ctx-cinema {
  /* The stage owns the right half, so display type is sized for a column and
     not for a screen. The cqi cap in chrome.css does the rest. */
  --fs-display: clamp(2.6rem, 5vw, 5rem);
  --fs-h2:      clamp(1.9rem, 3.1vw, 2.9rem);
}

.ctx-cinema .scene { min-height: 112vh; display: flex; align-items: center; }
.ctx-cinema .scene--tall { min-height: 158vh; }
.ctx-cinema .scene--hero { min-height: 100dvh; }
.ctx-cinema .scene--paper { min-height: auto; display: block; }

/* .wrap and .scene__in are the same element, so the auto margins that centre
   the page container would also centre the reading column and walk it straight
   into the stage. The left margin is pinned to where the container would have
   started, and only the right side stays auto. The hard cap keeps the column
   from reaching the stage on very wide screens. */
.ctx-cinema .scene__in {
  max-width: min(46%, 640px);
  margin-inline: max(0px, calc((100% - var(--maxw)) / 2)) auto;
}

/* The hero and the gallery are the two sections that do not use the fixed
   stage: they hold the real clips in the markup. So they opt out of the column
   rules the story scenes need and take the full container instead. */
.ctx-cinema .hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero__copy { max-width: 100% !important; margin-inline: 0 !important; }
.ctx-cinema .scene--gallery .scene__in { max-width: var(--maxw); margin-inline: auto; }
.ctx-cinema .scene--gallery { min-height: auto; display: block; }

/* Two scenes sit low and two sit high, so the eye is not parked at the same
   height for eleven screens running. The protagonist never changes sides. */
.ctx-cinema #s3 { align-items: flex-end; padding-bottom: 14vh; }
.ctx-cinema #s4 { align-items: flex-start; padding-top: 20vh; }
.ctx-cinema #s3 .scene__in,
.ctx-cinema #s4 .scene__in { max-width: min(40%, 560px); }

/* the two that use the whole width: the document and the close */
.ctx-cinema .scene__in--doc,
.ctx-cinema #s10 .scene__in {
  max-width: var(--maxw);
  margin-inline: auto;
}
.ctx-cinema #s10 .h2,
.ctx-cinema #s10 .scene__in > .lead { max-width: min(46%, 640px); }

@media (max-width: 1279px) {
  .ctx-cinema .scene__in { max-width: 48%; }

  .ctx-cinema #s3 .scene__in, .ctx-cinema #s4 .scene__in { max-width: 44%; }
}

/* ═══════════════════════════  CONTEXT: PANELS  ═══════════════════════════
   Phones and short viewports. No pinning anywhere, because a pinned scrub
   fighting the iOS address bar is the single fastest way to make a page feel
   cheap. Each section commits to its end state once, on the way in, and the
   visitor keeps every piece of information the desktop story carries.
   ═══════════════════════════════════════════════════════════════════════ */

.ctx-panels .stage { display: none; }

.ctx-panels .scene { padding-block: clamp(3.5rem, 11vh, 5.5rem); }
.ctx-panels .scene--tall { padding-block: clamp(4rem, 13vh, 6.5rem); }
.ctx-panels body { padding-bottom: 44px; }

.ctx-panels [data-still] {
  opacity: 0;
  transform: translateY(22px);
}
.ctx-panels [data-still].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-scene) var(--ease-out), transform var(--t-scene) var(--ease-out);
}

/* the lattice tiles arrive in groups, never one by one */
.ctx-panels .still--lattice i {
  opacity: 0;
  transform: scale(0.95);
}
.ctx-panels .still--lattice.is-in i {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--g, 0) * var(--stag-tile));
}

/* ═══════════════════════════  CONTEXT: STILL  ═══════════════════════════
   Reduced motion, or no JS at all. Everything is already in its end state,
   so this block mostly has nothing to undo. That is the point of authoring
   the end state as the default.
   ═══════════════════════════════════════════════════════════════════════ */

.ctx-still .stage,
.ctx-still .rail { display: none; }

.ctx-still .scene { padding-block: clamp(3.5rem, 10vh, 5rem); }
.ctx-still .scene--hero { min-height: auto; padding-top: 128px; }

/* telemetry becomes a plain definition list where the schedule scene ends */
.ctx-still .tele {
  position: static;
  width: 100%;
  max-width: 560px;
  opacity: 1;
  transform: none;
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* ═══════════════════════════  PREFERENCES  ═══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Movement goes. Opacity and colour stay, because they carry meaning. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, button.chip:active, .toast button:active, .lang__btn:active { transform: none; }
  /* the one hover flourish left on the page stops travelling */
  .btn--primary::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.is-stuck, .sheet, .toast, .tele {
    background: var(--bg-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ai-tag, .act-stamp {
    background: #101012;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #DCD8CF; --ink-3: #BAB5AC; --line: rgba(255,255,255,0.3); --line-2: rgba(255,255,255,0.5); }
  [data-chapter="paper"] { --ink-2: #2A2823; --ink-3: #3B3830; --line: rgba(10,11,13,0.4); --line-2: rgba(10,11,13,0.62); }
  .nav, .nav.is-stuck, .sheet, .toast, .tele { background: var(--bg); }
  .ai-tag, .act-stamp { background: #000000; }
}

@media print {
  .nav, .sheet, .stage, .rail, .tele, .toast, .skip, .cta, .window { display: none !important; }
  .scene { min-height: auto; padding-block: 1.5rem; page-break-inside: avoid; }
  .scene__in, .ctx-cinema .scene__in { max-width: 100% !important; }
  body { background: #fff; color: #000; }
}