/* ─────────────────────────────────────────────────────────────
   Projekt Nest — Scroll Animation Library
   ─────────────────────────────────────────────────────────────

   Usage
   ─────
   Add one or more classes to any element. Classes are composable
   and share a single combined transform so mixing them works
   without conflicts.

   Available classes
   ─────────────────
   animation--parallax    Drifts upward as the section scrolls out
   animation--zoom        Zooms in as the section scrolls out
   animation--fade-out    Fades to invisible as the section scrolls out
   animation--tilt        Rotates slightly as the section scrolls out
   animation--drift-left  Slides left as the section scrolls out
   animation--drift-right Slides right as the section scrolls out

   Example
   ───────
   <img class="hero-image animation--parallax animation--zoom" />

   How it works
   ────────────
   JS computes scroll progress (0 → 1) for the element's parent
   section and writes CSS custom properties on the element:
     --anim-ty       translateY value   (parallax, drift-*)
     --anim-tx       translateX value   (drift-*)
     --anim-scale    scale value        (zoom)
     --anim-rotate   rotate value       (tilt)
     --anim-opacity  opacity value      (fade-out)

   The CSS rules below read those properties and compose them into
   a single transform declaration so all effects combine correctly.
   ───────────────────────────────────────────────────────────── */


/* ─── SHARED TRANSFORM ──────────────────────────────────────── */

/*
 * Any element carrying a transform-based animation class gets
 * one combined transform. JS sets the individual custom properties;
 * unused ones default to identity values.
 */
/*
 * [class*="animation--x"] matches both the plain form "animation--x"
 * and the parameterized form "animation--x[120]", so both work in CSS
 * and in JS querySelectorAll without any extra handling.
 */
:is(
  [class*="animation--parallax"],
  [class*="animation--zoom"],
  [class*="animation--tilt"],
  [class*="animation--drift-left"],
  [class*="animation--drift-right"]
) {
  transform:
    translateY(var(--anim-ty,     0px))
    translateX(var(--anim-tx,     0px))
    scale(var(--anim-scale,       1))
    rotate(var(--anim-rotate,     0deg));
  will-change: transform;
}


/* ─── FADE OUT ──────────────────────────────────────────────── */

/* Opacity is a separate property — still composable with transforms */
[class*="animation--fade-out"] {
  opacity: var(--anim-opacity, 1);
  will-change: opacity;
}


/* ─── REDUCED MOTION ────────────────────────────────────────── */

/*
 * Respect the user's motion preference by disabling all
 * scroll-driven transforms and restoring full opacity.
 */
@media (prefers-reduced-motion: reduce) {
  :is(
    [class*="animation--parallax"],
    [class*="animation--zoom"],
    [class*="animation--tilt"],
    [class*="animation--drift-left"],
    [class*="animation--drift-right"]
  ) {
    transform: none !important;
    will-change: auto;
  }

  [class*="animation--fade-out"] {
    opacity: 1 !important;
    will-change: auto;
  }
}