/* Shared motion engine styles for The Color of Time.
   Linked by ALL six pages (index, method, lab, about, faq, changelog).
   Pairs with frontend/js/motion.js.

   Design tokens promoted from the hex literals every page already used by convention, so a
   redesign has one real source of truth instead of five copies drifting apart. */

:root {
  --color-bg: #EDE4D2;
  --color-ink: #221D17;
  --color-card: #F7F1E3;
  --color-card-dark: #1B1712;
  --color-accent: #C8453B;
  --color-accent-hover: #b23a31;
  --color-good: #5E7A4E;
  --color-warn: #D7A33C;
  --color-info: #2F5D7C;
  --color-bad: #C8453B;

  /* ---- The easing vocabulary ----
     Four named curves, each with one physical meaning; pick by what the motion IS, never by
     taste-of-the-day, so every page moves like one instrument:
     · presence   things ARRIVING into place: fast approach, long asymptotic settle, no bounce
                  (an object placed by a careful hand). For entrances, stage settles, tilts.
     · mechanical CONTINUOUS machine motion: near-sinusoidal, no perceptible start or stop
                  (a raster scan, a carriage return). For infinite loops that must not "arrive."
     · roll       READOUT advances: brisk mid-flight, soft landing (a flip-board digit,
                  a split-flap letter). For stepped status text and counters.
     · develop    ONE-SHOT reveals that pass through: eager start, sustained middle, long
                  decay (a darkroom development band, a calibration sweep). */
  --motion-ease-presence: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-mechanical: cubic-bezier(.45, .05, .55, .95);
  --motion-ease-roll: cubic-bezier(.3, .1, .3, 1);
  --motion-ease-develop: cubic-bezier(.3, .05, .25, 1);

  --motion-dur-card: 900ms;
  --motion-dur-stage: 1100ms;
  --motion-perspective: 1400px;
  /* Tightened 2026-07-03 (was clamp(120px,22vh,260px)): with the story split into chapter
     pages, each page carries only one or two sections — the old exhibition-hall spacing read
     as empty scroll. Chapter breaks derive from this (half of it), so they tighten too. */
  --section-gap: clamp(64px, 10vh, 128px);
}

/* ---------- reveal-on-scroll (canonical version; page-local duplicates were removed) ---------- */
.js-ready [data-reveal] {
  transform: translateY(20px);
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js-ready [data-reveal][data-shown] { transform: none; }

/* ---------- section "stage" presentation ----------
   Driven by --stage-progress (0..1), written by TCoTMotion.attach() every scroll frame. Custom
   properties inherit, so children (e.g. a flagship depth-layer diagram) can read the same
   --stage-progress straight off their ancestor [data-stage] without any extra JS. */
.js-ready [data-stage] {
  --stage-progress: 0;
  transform:
    perspective(var(--motion-perspective))
    rotateX(calc((1 - var(--stage-progress)) * 10deg))
    translateY(calc((1 - var(--stage-progress)) * 46px))
    translateZ(calc((1 - var(--stage-progress)) * -60px))
    scale(calc(.965 + var(--stage-progress) * .035));
  opacity: calc(.28 + var(--stage-progress) * .72);
  transition: transform var(--motion-dur-stage) var(--motion-ease-presence),
              opacity var(--motion-dur-stage) var(--motion-ease-presence);
  will-change: transform, opacity;
}

/* ---------- card "specimen presentation" ----------
   Driven by --tilt-progress (0..1, ramps once on entry then holds — cards don't re-tilt on
   exit, that motion is reserved for [data-stage] so it stays a rare, legible signal). */
.js-ready [data-tilt] {
  --tilt-progress: 0;
  transform:
    perspective(var(--motion-perspective))
    rotateX(calc((1 - var(--tilt-progress)) * 16deg))
    translateY(calc((1 - var(--tilt-progress)) * 34px))
    translateZ(calc((1 - var(--tilt-progress)) * -70px));
  opacity: calc(.15 + var(--tilt-progress) * .85);
  transition: transform var(--motion-dur-card) var(--motion-ease-presence),
              opacity var(--motion-dur-card) var(--motion-ease-presence);
  will-change: transform, opacity;
}

.js-ready [data-scrub] { --scrub-progress: 0; --scrub-y: 0px; }

/* Chapter break: the breathing room between story sections (Home + Method). */
.chapter-break {
  display: flex; align-items: center; gap: 14px;
  padding: calc(var(--section-gap) / 2) 0;
  max-width: 1240px; margin: 0 auto;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em;
  /* .66 alpha = 4.88:1 on the #EDE4D2 page ground — these are wayfinding labels, AA applies */
  text-transform: uppercase; color: rgba(34,29,23,.66);
}
.chapter-break::after { content: ""; flex: 1; height: 1px; background: rgba(34,29,23,.14); }

/* ---------- glow: instrument warm-up (Lab entrance) ---------- */
@keyframes instrumentWarm {
  0%   { filter: drop-shadow(0 0 0 rgba(200, 69, 59, 0)); opacity: 0; }
  55%  { filter: drop-shadow(0 0 26px rgba(200, 69, 59, .55)); opacity: 1; }
  100% { filter: drop-shadow(0 0 14px rgba(200, 69, 59, .35)); opacity: 1; }
}
.glow-instrument { animation: instrumentWarm 2.2s var(--motion-ease-presence) both; }

@keyframes instrumentFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: .86; }
}
.glow-instrument-flicker { animation: instrumentFlicker 2.6s ease-in-out 2.2s infinite; }

/* ---------- accordion chevron (FAQ) ---------- */
.disclosure-chevron { transition: transform .3s var(--motion-ease-presence); }
details[open] > summary .disclosure-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal],
  .js-ready [data-stage],
  .js-ready [data-tilt] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .js-ready [data-scrub] { --scrub-progress: 1 !important; }
  .glow-instrument, .glow-instrument-flicker { animation: none !important; opacity: 1 !important; filter: none !important; }
  .disclosure-chevron { transition: none !important; }
}