/**
 * Moontheme Animation System
 * Scroll-driven reveals, stagger, line-draw, and hover micro-interactions.
 * Strictly uses --mv-* design tokens — no hardcoded brand colors.
 *
 * Attributes / classes:
 *   [data-animate]              → fade-up (opacity 0 + translateY → visible)
 *   [data-animate="fade"]       → opacity only, no translate
 *   [data-animate="stagger"]    → container; children use [data-animate-child]
 *   [data-animate="line"]       → width: 0 → 100% (for <hr> dividers)
 *   [data-animate="slide-left"] → slides in from left
 *   [data-animate="slide-right"]→ slides in from right
 *   [data-counter="VALUE"]      → JS count-up; pair with data-counter-suffix, data-counter-float
 *   .is-visible                 → applied by scroll-animations.js when element enters viewport
 */

/* ===================================================================
   BASE — default fade-up reveal
   =================================================================== */

[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================================================
   FADE — opacity only, no translate
   =================================================================== */

[data-animate="fade"] {
    opacity: 0;
    transform: none;
    transition: opacity 0.7s ease;
}

[data-animate="fade"].is-visible {
    opacity: 1;
}

/* ===================================================================
   STAGGER — parent stays visible; children reveal sequentially
   =================================================================== */

[data-animate="stagger"] {
    opacity: 1;
    transform: none;
    transition: none;
}

[data-animate="stagger"] [data-animate-child] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="stagger"].is-visible [data-animate-child]:nth-child(1) { transition-delay:   0ms; }
[data-animate="stagger"].is-visible [data-animate-child]:nth-child(2) { transition-delay:  90ms; }
[data-animate="stagger"].is-visible [data-animate-child]:nth-child(3) { transition-delay: 180ms; }
[data-animate="stagger"].is-visible [data-animate-child]:nth-child(4) { transition-delay: 270ms; }
[data-animate="stagger"].is-visible [data-animate-child]:nth-child(5) { transition-delay: 360ms; }
[data-animate="stagger"].is-visible [data-animate-child]:nth-child(6) { transition-delay: 450ms; }

[data-animate="stagger"].is-visible [data-animate-child] {
    opacity: 1;
    transform: translateY(0);
}

/* ===================================================================
   LINE DRAW — for animated <hr> dividers
   =================================================================== */

[data-animate="line"] {
    width: 0 !important;
    opacity: 1;
    transform: none;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="line"].is-visible {
    width: 100% !important;
}

/* ===================================================================
   SLIDE LEFT / RIGHT — for two-column asymmetric sections
   =================================================================== */

[data-animate="slide-left"] {
    opacity: 0;
    transform: translateX(-28px);
    transition:
        opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="slide-right"] {
    opacity: 0;
    transform: translateX(28px);
    transition:
        opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="slide-left"].is-visible,
[data-animate="slide-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===================================================================
   CARD HOVER LIFT — system-wide; extends existing border-color transition
   Uses design tokens only so it works across both light and dark themes.
   =================================================================== */

.mv-card {
    transition:
        border-color 0.2s ease,
        transform    0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow   0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px var(--mv-text-20);
}

/* ===================================================================
   REDUCED MOTION — collapse all animation to instant / no movement
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate="fade"],
    [data-animate="slide-left"],
    [data-animate="slide-right"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    [data-animate="line"] {
        width: 100% !important;
        transition: none !important;
    }

    [data-animate="stagger"] [data-animate-child] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mv-card:hover {
        transform: none;
        box-shadow: none;
    }
}