/**
 * Animation Utilities
 *
 * Schema-driven entry animations with duration and delay modifiers.
 * Animations play on page load.
 */

/* Animation base */
[class*="animate-"] {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade */
.animate-fade {
    animation-name: fade;
}

@keyframes fade {
    to { opacity: 1; }
}

/* Fade up */
.animate-fade-up {
    transform: translateY(20px);
    animation-name: fade-up;
}

@keyframes fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade down */
.animate-fade-down {
    transform: translateY(-20px);
    animation-name: fade-down;
}

@keyframes fade-down {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade left (enters from right) */
.animate-fade-left {
    transform: translateX(20px);
    animation-name: fade-left;
}

@keyframes fade-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade right (enters from left) */
.animate-fade-right {
    transform: translateX(-20px);
    animation-name: fade-right;
}

@keyframes fade-right {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale */
.animate-scale {
    transform: scale(0.95);
    animation-name: scale;
}

@keyframes scale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Duration modifiers */
.duration-fast { animation-duration: 200ms; }
.duration-normal { animation-duration: 400ms; }
.duration-slow { animation-duration: 600ms; }

/* Delay modifiers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    [class*="animate-"] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}