/**
 * animations.css — Keyframes and animation utility classes
 * @agent Style Architect (Agent 4)
 *
 * Classes: .animate-fade-in-up, .animate-fade-in-down,
 *          .animate-fade-in-right, .animate-fade-in,
 *          .animate-pop-in, .animate-shimmer
 */

/* ── Keyframes ── */

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-right {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes pop-in {
    0% { transform: scale(0.9); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Utility Classes ── */

.animate-fade-in-up {
    animation: fade-in-up var(--duration-slow, 600ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.animate-fade-in-down {
    animation: fade-in-down var(--duration-slow, 600ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.animate-fade-in-right {
    animation: fade-in-right var(--duration-slow, 600ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}

.animate-fade-in {
    animation: fade-in 0.4s ease-out forwards;
}

.animate-pop-in {
    animation: pop-in var(--duration-default, 300ms) var(--ease-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275)) forwards;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

/* ── Stagger Helpers ── */

.stagger-item { opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }