/**
 * SPD Motion Design — Scroll Reveal System
 * ==========================================
 * Subtle, premium scroll-reveal animations for the homepage sections.
 *
 * Progressive enhancement:
 *   - Without JS: the `spd-motion-js` class is never added to <html>,
 *     so `.spd-reveal` / `.spd-stagger-item` have NO hidden state —
 *     all content is immediately visible (no-JS fallback).
 *   - With JS: a tiny inline script in <head> adds `spd-motion-js`
 *     before first paint (no FOUC), then home-motion.js uses
 *     IntersectionObserver to add `--visible` classes as sections
 *     enter the viewport.
 *
 * Performance:
 *   - Only `opacity` and `transform` are animated (no layout shift).
 *   - `will-change` is set only on hidden elements and removed once
 *     visible (the `--visible` class drops it).
 *   - No scroll listener — IntersectionObserver only.
 *
 * Accessibility:
 *   - `prefers-reduced-motion: reduce` disables all reveal motion;
 *     content is shown immediately at full opacity.
 *
 * @package SPD_Child
 * @since   2.1.0
 */

/* ============================================================
   1. Motion tokens
   ============================================================ */
:root {
	/* Core reveal — opacity + translateY, 600ms ease-out. */
	--spd-motion-duration: 600ms;
	--spd-motion-ease: cubic-bezier(0.16, 1, 0.3, 1); /* "ease-out" quintic, smooth and premium */
	--spd-motion-distance: 24px;

	/* Stagger — 70ms per item (light cascade, never excessive). */
	--spd-motion-stagger: 70ms;
}

/* ============================================================
   2. Single-element reveal (.spd-reveal)
   ============================================================ */

/*
 * Initial hidden state — ONLY applied when JS is active
 * (html.spd-motion-js). Without JS the element is fully visible.
 */
html.spd-motion-js .spd-reveal {
	opacity: 0;
	transform: translateY(var(--spd-motion-distance));
	transition:
		opacity var(--spd-motion-duration) var(--spd-motion-ease),
		transform var(--spd-motion-duration) var(--spd-motion-ease);
	will-change: opacity, transform;
}

html.spd-motion-js .spd-reveal--visible {
	opacity: 1;
	transform: translateY(0);
	/* Drop will-change after the transition to free GPU memory. */
	will-change: auto;
}

/* ============================================================
   3. Staggered card reveal (.spd-stagger-item)
   ============================================================ */

/*
 * Same reveal as .spd-reveal but with a per-item delay driven by
 * the `--spd-stagger-index` custom property (set inline in PHP).
 * The delay is `index * 70ms`, producing a light cascade.
 */
html.spd-motion-js .spd-stagger-item {
	opacity: 0;
	transform: translateY(var(--spd-motion-distance));
	transition:
		opacity var(--spd-motion-duration) var(--spd-motion-ease),
		transform var(--spd-motion-duration) var(--spd-motion-ease);
	transition-delay: calc(var(--spd-stagger-index, 0) * var(--spd-motion-stagger));
	will-change: opacity, transform;
}

html.spd-motion-js .spd-stagger-item--visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

/* ============================================================
   4. Reduced motion — disable all reveal motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html.spd-motion-js .spd-reveal,
	html.spd-motion-js .spd-stagger-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}