.js [data-animate] {
    opacity: 0;
    transition:
        opacity var(--motion-duration, 700ms) var(--motion-easing, ease-out),
        transform var(--motion-duration, 700ms) var(--motion-easing, ease-out),
        filter var(--motion-duration, 700ms) var(--motion-easing, ease-out);
    transition-delay: var(--motion-delay, 0ms);
}

.js [data-animate="fade-up"] {
    transform: translateY(16px);
}

.js [data-animate="fade-down"] {
    transform: translateY(-16px);
}

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

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

.js [data-animate="gentle-zoom"] {
    transform: scale(0.975);
}

.js [data-animate="soft-blur-reveal"] {
    filter: blur(8px);
}

.js [data-animate="line-reveal"],
.js [data-animate="typewriter"] {
    clip-path: inset(0 100% 0 0);
}

.js [data-animate="staggered-heading"] {
    letter-spacing: 0.08em;
    transform: translateY(12px);
}

.js [data-animate].is-visible {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    letter-spacing: normal;
    transform: none;
}

.js [data-animate="word-reveal"] .motion-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em);
    transition:
        opacity var(--motion-duration, 700ms) var(--motion-easing, ease-out),
        transform var(--motion-duration, 700ms) var(--motion-easing, ease-out);
    transition-delay: calc(var(--motion-delay, 0ms) + (var(--word-index) * var(--motion-stagger, 55ms)));
}

.js [data-animate="word-reveal"].is-visible .motion-word {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    .js [data-animate],
    .js [data-animate="word-reveal"] .motion-word {
        opacity: 1;
        filter: none;
        transform: none;
    }
}