/* ============================================================
   animations.css — Micro-animations and transitions
   ============================================================ */

/* ── Page fade-in ─────────────────────────────────────────── */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-slow) both;
}

/* ── Slide in from left ───────────────────────────────────── */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft var(--transition-normal) both;
}

/* ── Pop in (scale) ───────────────────────────────────────── */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    60% {
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in {
    animation: popIn 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ── Pulse (critical badge) ───────────────────────────────── */
@keyframes pulseBadge {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(192, 57, 90, 0.35);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(192, 57, 90, 0);
    }
}

.pulse-critical {
    animation: pulseBadge 1.8s ease infinite;
}

/* ── Shimmer loading skeleton ─────────────────────────────── */
@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            var(--gray-light) 25%,
            #ece8e2 50%,
            var(--gray-light) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite ease-in-out;
    border-radius: var(--radius-sm);
}

/* ── Card hover lift ──────────────────────────────────────── */
.card-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* ── Stagger children on load ─────────────────────────────── */
.stagger>* {
    opacity: 0;
    animation: fadeIn var(--transition-slow) both;
}

.stagger>*:nth-child(1) {
    animation-delay: 0ms;
}

.stagger>*:nth-child(2) {
    animation-delay: 50ms;
}

.stagger>*:nth-child(3) {
    animation-delay: 100ms;
}

.stagger>*:nth-child(4) {
    animation-delay: 150ms;
}

.stagger>*:nth-child(5) {
    animation-delay: 200ms;
}

.stagger>*:nth-child(6) {
    animation-delay: 250ms;
}

.stagger>*:nth-child(7) {
    animation-delay: 300ms;
}

.stagger>*:nth-child(8) {
    animation-delay: 350ms;
}

.stagger>*:nth-child(n+9) {
    animation-delay: 400ms;
}