/**
 * Scroll-reveal polish.
 *
 * Layered on top of the theme's own `[data-cc-animate]` system rather than
 * replacing it — same hooks, same class names, smoother motion:
 *
 *   - the theme fades opacity only; this adds a short rise so the reveal reads
 *     as movement instead of a flicker
 *   - easing is expo-out rather than the browser default, so elements decelerate
 *     into place instead of stopping flat
 *   - `--cc-delay` carries the per-element stagger the polish script computes
 *   - everything is inside a `no-preference` query, so a visitor who asks for
 *     reduced motion gets the plain instant render
 */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Lenis drives the scroll position itself. Native smooth behaviour on top of
     that makes the two fight over every anchor jump, so hand it back. */
  html.lenis {
    scroll-behavior: auto;
  }

  /* Lenis disables pointer events on every iframe while smoothing, which would
     make the YouTube player unusable once a facade has been opened. */
  .lenis.lenis-smooth .yt-facade iframe {
    pointer-events: auto;
  }

  /* Elements the theme gives no explicit direction to (all of them on this
     site) rise slightly as they fade. Anything carrying one of the theme's own
     "cc-fade" or "cc-zoom" classes keeps its original motion.
     `:not(.-in)` matters: each :not() adds specificity, so without it this
     selector outranks the reveal rule below and revealed elements stay at
     opacity 0. Excluding the revealed state sidesteps the contest entirely. */
  .cc-animate-enabled
    [data-cc-animate]:not(.-in):not([class*='cc-fade']):not([class*='cc-zoom']),
  [data-cc-animate]:not(.-in):not([class*='cc-fade']):not([class*='cc-zoom']) {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  .cc-animate-enabled [data-cc-animate].-in,
  [data-cc-animate].-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--cc-delay, 0ms);
  }

  /* Hand the compositor the work only while the element is actually moving. */
  [data-cc-animate].cc-polish-armed {
    will-change: opacity, transform;
  }

  /* A transform does not change layout, but it *does* enlarge the scrollable
     overflow area. The page footer is the last element in the document, so
     shifting it down by 24px made the document 24px taller than its own box and
     the browser grew a second scrollbar — which vanished the moment the footer
     revealed and the transform went away.

     The polish script measures which elements sit at the very bottom and marks
     them: they fade without moving, so nothing ever overhangs. */
  [data-cc-animate].cc-no-shift {
    transform: none !important;
  }

  /* Used for one measuring pass at startup to read the document's true height
     with every reveal transform temporarily neutralised. */
  html.cc-polish-measuring [data-cc-animate] {
    transform: none !important;
  }
}

/* Reduced motion, or no JS at all: never leave content invisible. The theme
   skips its reveal below 768px but still applies opacity:0, which strands
   content on mobile — this is the safety net for that. */
@media (prefers-reduced-motion: reduce) {
  .cc-animate-enabled [data-cc-animate],
  [data-cc-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.no-js .cc-animate-enabled [data-cc-animate],
.no-js [data-cc-animate] {
  opacity: 1 !important;
  transform: none !important;
}