/* Fade-in animation helpers */
.animate-fade {
    --fade-duration: 320ms;
    --fade-delay: 0ms;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease;
    transition-delay: var(--fade-delay);
}

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

/* Slide-in from left */
.animate-fade-left {
    --fade-duration: 320ms;
    --fade-delay: 0ms;
    opacity: 0;
    transform: translate(-24px, 0);
    transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease;
    transition-delay: var(--fade-delay);
}

.animate-fade-left.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Slide-in from right */
.animate-fade-right {
    --fade-duration: 320ms;
    --fade-delay: 0ms;
    opacity: 0;
    transform: translate(24px, 0);
    transition: opacity var(--fade-duration) ease, transform var(--fade-duration) ease;
    transition-delay: var(--fade-delay);
}

.animate-fade-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade,
    .animate-fade-left,
    .animate-fade-right {
        transition: none;
        transform: none;
        opacity: 1;
    }
}