/* motion.css — Cinematic Gym motion layer styles.
   Everything here is scoped under html.motion-on or is a custom property.
   No rule may hide content: the page is complete with this file deleted. */

:root {
  --focus-blur: 0px;
}

/* Focus-pull: composes the structure agent's own colour-grade filter (captured
   into --focus-base-filter by motion.js) with the animated blur, so grading is
   preserved and only blur moves. */
html.motion-on #hero-img {
  filter: var(--focus-base-filter, ) blur(var(--focus-blur, 0px));
}

/* Fallback path if the browser can't compose filter + var(): the blur goes on
   the wrapper instead, stacking on top of the image's own filter. */
html.motion-on #hero-photo.motion-blur-fallback {
  filter: blur(var(--focus-blur, 0px));
}

/* The depth layers answer the pointer for as long as the hero is on screen, so
   the promise of a layer is standing. Everything else promises one only for the
   length of its own tween and withdraws it on the way out (see motion.js): a
   page-wide will-change is a page-wide cost. */
html.motion-on [data-depth] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  /* The blur is motion; the colour grade is not. Dropping the filter outright
     would take the warm grade off the opening frame as well, so the grade the
     structure layer set is handed straight back. */
  html.motion-on #hero-img {
    filter: var(--focus-base-filter, none);
  }
  html.motion-on #hero-photo.motion-blur-fallback {
    filter: none;
  }

  html.motion-on [data-depth] {
    transform: none;
    will-change: auto;
  }

  html.motion-on [data-reveal] {
    opacity: 1;
    clip-path: none;
    transform: none;
    will-change: auto;
  }
}