/* about-animations.css — Scroll-triggered entrance animations for the About page.
 * Elements carry [data-animate] attributes; JS adds .is-visible when they enter
 * the viewport. Parallax transforms are applied inline by the same JS.
 */

/* ── Hidden state — all animatable elements start invisible ─────────────── */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay, 0ms);
}

[data-animate="fade-in"] {
    transform: none; /* opacity-only fade for elements inside parallax wrappers */
}

[data-animate="slide-left"] {
    transform: translateX(-36px);
}

[data-animate="slide-right"] {
    transform: translateX(36px);
}

/* ── Visible state ────────────────────────────────────────────────────────── */
[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* ── Reduced motion: skip all animations ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}