/* ============================================================
   The Annum — Cinematic layer  (sitewide)
   Progressive enhancement, gated on `html.cin` (added pre-paint by
   a tiny inline head script; re-affirmed by js/cinematic.js). Every
   rule lives inside prefers-reduced-motion:no-preference, so reduced
   motion falls back to the base reveal system in site.css. Masked
   image reveals are JS-driven (.cin-fx / .cin-vis) so nothing can
   get stuck if scripts fail — the classes are simply never added.
   Revert = remove the cinematic <link>/<script>/inline tags.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Homepage image hero — parallax exit ---------- */
  html.cin .cover-inner {
    transform: translateY(calc(var(--hero-p, 0) * -6vh));
    opacity: calc(1 - var(--hero-p, 0) * 1.05);
    will-change: transform, opacity;
  }
  html.cin .scroll-cue { opacity: calc(1 - var(--hero-p, 0) * 3); }
  /* (Hero background motion now lives on .cover-media as a continuous
     "breath" in site.css — no scroll-parallax override here.) */

  /* ---------- Text heroes (inner pages) — a settled entrance ---------- */
  html.cin .page-hero .eyebrow,
  html.cin .page-hero h1.display,
  html.cin .page-hero .lead {
    animation: cinHeroRise 1.05s cubic-bezier(.2, .6, .2, 1) both;
  }
  html.cin .page-hero h1.display { animation-delay: .06s; }
  html.cin .page-hero .lead { animation-delay: .14s; }
  @keyframes cinHeroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Photographs "develop" behind a lifting mask ---------- */
  html.cin .cin-fx {
    clip-path: inset(0 0 14% 0);
    transform: scale(1.075);
    transition: clip-path 1.7s cubic-bezier(.19, .6, .16, 1),
                transform  1.9s cubic-bezier(.19, .6, .16, 1);
    will-change: clip-path, transform;
  }
  html.cin .cin-fx.cin-vis {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }

  /* ---------- Text reveals travel a touch further, for a filmic settle ---------- */
  html.cin .reveal { transform: translateY(22px); }
  html.cin .reveal.in { transform: none; }
}