/* =============================================================
   ANIMATION STYLES
   ─────────────────────────────────────────────────────────────
   Architecture:
     All scroll-triggered animations are CSS-only state machines.
     JavaScript (animations.js) simply adds the .active class via
     IntersectionObserver — it does not set transform values directly.

   How it works:
     1. Every animated element gets class .reveal-item in HTML/JS.
     2. A data-animation attribute sets the starting transform offset.
     3. AnimationObserver (animations.js) adds .active when the element
        enters the viewport.
     4. The CSS transition fires, smoothly moving from start → end state.
   ============================================================= */


/* ─────────────────────────────────────────────
   1. BASE — Hidden state (all reveal-items start invisible)
   ───────────────────────────────────────────── */

.reveal-item {
    opacity: 0;
    transition:
        opacity 0.75s cubic-bezier(0.5, 0, 0, 1),
        transform 0.75s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}


/* ─────────────────────────────────────────────
   2. ACTIVE STATE — Visible, at natural position
   Added by AnimationObserver in animations.js
   ───────────────────────────────────────────── */

.reveal-item.active {
    opacity: 1;
    /* !important overrides any data-animation start transform */
    transform: translate(0, 0) !important;
}


/* ─────────────────────────────────────────────
   3. ANIMATION TYPES — Starting offset positions
   Each sets a spatial offset; the .active transition
   returns everything to translate(0,0).
   ───────────────────────────────────────────── */

/*
  slide-up: element rises from below — most common.
  Used for cards, section bodies, feature lists.
*/
[data-animation="slide-up"] {
    transform: translateY(52px);
}

/*
  fade-in: no movement, pure opacity.
  Best for full-width elements where movement would feel odd
  (hero subtitles, CTA blocks, section headers).
*/
[data-animation="fade-in"] {
    transform: translateY(0);
    /* Uses a faster, gentler timing for atmospheric fades */
    transition:
        opacity 0.9s ease;
}

/*
  slide-left: element enters from the left side.
  Used for left-positioned content columns.
*/
[data-animation="slide-left"] {
    transform: translateX(-52px);
}

/*
  slide-right: element enters from the right side.
  Used for right-positioned content columns.
*/
[data-animation="slide-right"] {
    transform: translateX(52px);
}

/*
  slide-down: element drops from above.
  Used sparingly — primarily for modals or top-anchored reveals.
*/
[data-animation="slide-down"] {
    transform: translateY(-32px);
}


/* ─────────────────────────────────────────────
   4. STAGGER DELAYS — Grid / list children
   Each child in a grid animates after the previous,
   creating a cascade wave effect.

   Usage: add .reveal-item to each grid child.
   The Observer picks them all up and each fires at
   its own delayed time, giving the impression of
   items arriving in sequence.
   ───────────────────────────────────────────── */

/* Base delay offset for cards */
.reveal-item:nth-child(1) {
    transition-delay: 0.05s;
}

.reveal-item:nth-child(2) {
    transition-delay: 0.12s;
}

.reveal-item:nth-child(3) {
    transition-delay: 0.19s;
}

.reveal-item:nth-child(4) {
    transition-delay: 0.26s;
}

.reveal-item:nth-child(5) {
    transition-delay: 0.33s;
}

.reveal-item:nth-child(6) {
    transition-delay: 0.40s;
}

/* Additional items animate immediately (no delay) */


/* ─────────────────────────────────────────────
   5. ACCESSIBILITY — Reduced motion
   When the user has requested less motion in their OS
   settings, we immediately show all content with no
   delays, transforms, or transition effects.
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    /* Show all reveal-items immediately, skip animation */
    .reveal-item {
        opacity: 1;
        transform: none !important;
        transition: none !important;
    }

    /* Kill lingering CSS animations site-wide */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}