/* ================================================================
   motion.css — cinematic hero film + scroll-reveal + count-up UI
   Linked after ffh.css; does NOT break no-JS (noscript in layout
   already forces [data-reveal]{opacity:1}).
   ================================================================ */

/* ─── Hero film ──────────────────────────────────────────────── */
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right; /* subject/light on right, dark space on left */
  z-index: 0;
  pointer-events: none;
}

/* Gradient scrim — darker on the left where text sits, fades right */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(30, 36, 43, 0.92) 0%,
    rgba(30, 36, 43, 0.80) 32%,
    rgba(30, 36, 43, 0.48) 60%,
    rgba(30, 36, 43, 0.18) 100%
  );
}

/* On mobile the film's bright area is centred — use a near-full dark overlay */
@media (max-width: 760px) {
  .hero-scrim {
    background: rgba(30, 36, 43, 0.86);
  }
}

/* Hero content when film is active: single-column, sits above scrim */
.hero-text {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

/* Pull scroll-cue above the scrim layer */
.hero .scroll-cue {
  position: relative;
  z-index: 2;
}

/* ─── Scroll reveals — gated on html.motion-ready ────────────── */
/*
  NOTE: ffh.css already has an ungated [data-reveal]{opacity:0} rule
  backed by the noscript fallback in the layout. These gated rules are
  layered on top and behave consistently with the existing approach.
*/
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
html.motion-ready [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal].in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}