/* ═══════════════════════════════════════════
   SCROLL REVEAL — Core Animation System
   Redesigned per SCROLL_REVEAL_PROMPT spec:
   • Only transform + opacity (GPU-friendly, no layout/paint props)
   • ease-out-quart cubic-bezier(0.165, 0.84, 0.44, 1), 600ms
   • initial: opacity 0 + translateY(22px) → in: opacity 1 + none
   • stagger via [data-d] (1–4 → 80/160/240/320ms) and .reveal-delay-* / .delay-*
   • threshold 0.14, play once (JS unobserves)
   • prefers-reduced-motion: opacity 200ms only, no transform
   Zero dependencies, WCAG AA.
   ═══════════════════════════════════════════ */

:root {
  /* MD-mandated easing token (exact value) */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* legacy aliases kept for any other code referencing them */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* MD-mandated stagger step — single source to tune all reveal cadence */
  --reveal-step: 80ms;
}

/* Base reveal (MD spec) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease-out-quart),
              transform 600ms var(--ease-out-quart);
  will-change: opacity, transform;
}

/* Shown state — supports both MD's `.in` and the legacy `.revealed` */
.reveal.in,
.reveal.revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* All reveal--* variants are unified to the single MD fade-up.
   (Only transform + opacity are animated; filters / clip-path are dropped
   to stay GPU-friendly and consistent across every page.) */
.reveal--fade-up,
.reveal--fade-up-slow,
.reveal--fade-in,
.reveal--slide-left,
.reveal--slide-right,
.reveal--scale,
.reveal--clip,
.reveal--blur,
.reveal--fade-down,
.reveal--rotate,
.reveal--depth-rise,
.reveal--glow,
.reveal--stretch,
.reveal--drop-spring {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease-out-quart),
              transform 600ms var(--ease-out-quart);
}

.reveal--fade-up.in, .reveal--fade-up.revealed,
.reveal--fade-up-slow.in, .reveal--fade-up-slow.revealed,
.reveal--fade-in.in, .reveal--fade-in.revealed,
.reveal--slide-left.in, .reveal--slide-left.revealed,
.reveal--slide-right.in, .reveal--slide-right.revealed,
.reveal--scale.in, .reveal--scale.revealed,
.reveal--clip.in, .reveal--clip.revealed,
.reveal--blur.in, .reveal--blur.revealed,
.reveal--fade-down.in, .reveal--fade-down.revealed,
.reveal--rotate.in, .reveal--rotate.revealed,
.reveal--depth-rise.in, .reveal--depth-rise.revealed,
.reveal--glow.in, .reveal--glow.revealed,
.reveal--stretch.in, .reveal--stretch.revealed,
.reveal--drop-spring.in, .reveal--drop-spring.revealed {
  opacity: 1;
  transform: none;
}

/* ── Stagger delays ──
   MD [data-d] 1–4 → 80/160/240/320ms (wave entrance, cycles 1–4).
   Legacy .reveal-delay-1..8 and .delay-1..6 kept at the same 80ms step
   so existing pages (which use class-based delays) keep working.
   All delays now derive from --reveal-step (set in :root) for central tuning. */
[data-d="1"] { transition-delay: calc(var(--reveal-step) * 1); }
[data-d="2"] { transition-delay: calc(var(--reveal-step) * 2); }
[data-d="3"] { transition-delay: calc(var(--reveal-step) * 3); }
[data-d="4"] { transition-delay: calc(var(--reveal-step) * 4); }

.reveal-delay-1, .delay-1 { transition-delay: calc(var(--reveal-step) * 1); }
.reveal-delay-2, .delay-2 { transition-delay: calc(var(--reveal-step) * 2); }
.reveal-delay-3, .delay-3 { transition-delay: calc(var(--reveal-step) * 3); }
.reveal-delay-4, .delay-4 { transition-delay: calc(var(--reveal-step) * 4); }
.reveal-delay-5, .delay-5 { transition-delay: calc(var(--reveal-step) * 5); }
.reveal-delay-6, .delay-6 { transition-delay: calc(var(--reveal-step) * 6); }
.reveal-delay-7 { transition-delay: calc(var(--reveal-step) * 7); }
.reveal-delay-8 { transition-delay: calc(var(--reveal-step) * 8); }

/* Auto cascade for JS-applied .reveal-group (dynamically revealed content blocks) */
.reveal-group > .reveal:nth-child(1) { transition-delay: calc(var(--reveal-step) * 1); }
.reveal-group > .reveal:nth-child(2) { transition-delay: calc(var(--reveal-step) * 2); }
.reveal-group > .reveal:nth-child(3) { transition-delay: calc(var(--reveal-step) * 3); }
.reveal-group > .reveal:nth-child(4) { transition-delay: calc(var(--reveal-step) * 4); }
.reveal-group > .reveal:nth-child(5) { transition-delay: calc(var(--reveal-step) * 5); }
.reveal-group > .reveal:nth-child(6) { transition-delay: calc(var(--reveal-step) * 6); }
.reveal-group > .reveal:nth-child(7) { transition-delay: calc(var(--reveal-step) * 7); }
.reveal-group > .reveal:nth-child(8) { transition-delay: calc(var(--reveal-step) * 8); }

/* ── Accessibility: reduced motion ──
   Stop the transform; keep a short opacity fade only. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  .reveal.revealed,
  [class*="reveal--"] {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 200ms ease !important;
    filter: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }
}