/**
 * Home sticky slides: the experimental half.
 *
 * `@container scroll-state()` and `animation-timeline: view()` are not yet
 * understood by Turbopack's CSS parser, so this file is served from /public and
 * linked directly instead of being imported. Importing it from app/ makes
 * `next dev` fail with "Parsing CSS source code failed". Keep it out of the
 * bundler until Turbopack understands both features.
 *
 * Structural slide layout (sticky, min-height, backgrounds, fallbacks) lives in
 * app/globals.css. Slide content is always visible; only the backdrop drift is
 * decorative here. Theme tokens resolve against the :root values globals.css
 * defines.
 *
 * Motion runs by default (Lite mode off). Ambient motion is gated on
 * `html[data-lite="on"]` rather than `prefers-reduced-motion`, so it plays
 * unless the visitor explicitly turns Lite mode on.
 */

/* The sticky panel is a scroll-state container for the view() timeline. */
.home-slide {
  container-type: scroll-state;
  container-name: home-slide;
}

/* Drift the backdrop with the slide's view progress (Chrome + Safari). */
@supports (animation-timeline: view()) {
  html:where(:not([data-lite="on"])) .home-slide__backdrop {
    animation: home-slide-drift 1ms linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    will-change: translate;
  }

  @keyframes home-slide-drift {
    from {
      translate: 0 -7%;
    }
    to {
      translate: 0 7%;
    }
  }
}

/* Small screens: no query container, no drift. */
@media (max-width: 767px) {
  .home-slide {
    container-type: normal;
  }
  .home-slide__backdrop {
    animation: none;
  }
}

/* Lite mode: no query container, no hidden content, no drift. */
html[data-lite="on"] .home-slide {
  container-type: normal;
}
html[data-lite="on"] .home-slide__backdrop {
  animation: none;
  translate: 0 0;
}