/**
 * Animation system - reusable for any element
 *
 * Usage:
 *   data-animate="fade-in" | "slide-up" | "slide-in-left" | "slide-in-right" | "scale-in"
 *   data-animate-on="viewport"  - trigger on scroll in/out (optional)
 *   data-animate-delay="100"    - stagger delay in ms (optional)
 *
 * Triggers: viewport scroll, accordion open, tab switch
 * Variables: see variables.css --animate-*
 */

/* Base - transitions use design tokens */
[data-animate] {
    transition: opacity var(--animate-duration) var(--animate-easing),
                transform var(--animate-duration) var(--animate-easing);
}

/* Accordion & tab content - ease-in-out when switching */
.accordion__panel [data-animate],
.accordion__box-panel [data-animate] {
    transition-timing-function: var(--animate-ease-in-out);
}

/* Title & tabs - faster outro when closing */
.accordion__box-title[data-animate].is-out,
.accordion__box-tabs[data-animate].is-out {
    transition-duration: 0.2s;
}
html.js-anim-ready [data-animate]:not(.is-visible) {
    opacity: 0;
    transform: translateY(0.75rem);
}

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

[data-animate].is-out {
    opacity: 0;
    transform: translateY(0.75rem);
}

/* Outro variants - match intro direction reversed */
[data-animate="fade-in"].is-out {
    transform: none;
}
[data-animate="slide-up"].is-out {
    transform: translateY(1rem);
}
[data-animate="slide-in-left"].is-out {
    transform: translateX(-1rem);
}
[data-animate="slide-in-right"].is-out {
    transform: translateX(1rem);
}
[data-animate="scale-in"].is-out {
    transform: scale(0.96);
}

/* Variants */
[data-animate="fade-in"] {
    transform: none;
}

[data-animate="fade-in"].is-visible {
    transform: none;
}

[data-animate="slide-up"] {
    transform: translateY(1rem);
}

[data-animate="slide-up"].is-visible {
    transform: translateY(0);
}

[data-animate="slide-in-left"] {
    transform: translateX(-1rem);
}

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

[data-animate="slide-in-right"] {
    transform: translateX(1rem);
}

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

[data-animate="scale-in"] {
    transform: scale(0.96);
}

[data-animate="scale-in"].is-visible {
    transform: scale(1);
}

/* Stagger children */
[data-animate-stagger] > [data-animate] {
    transition-delay: calc(var(--stagger-index, 0) * var(--animate-stagger));
}