/* ===========================
   ANIMATIONS
   Modern motion design — respects reduced-motion preferences
   =========================== */

/* ─────────────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────────── */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Opacity-only variant — safe to use on containers with position:fixed children */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleInBounce {
    0%   { opacity: 0; transform: scale(0.82); }
    60%  { opacity: 1; transform: scale(1.04); }
    80%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes tabSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aurora: animated gradient mesh in the header */
@keyframes headerAurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Soft glow pulse for warning/danger badges */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.25); }
}

@keyframes glowPulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
}

/* Floating particles in header */
@keyframes particleFloat {
    0%   { transform: translateY(0)   translateX(0)   scale(1);   opacity: 0.6; }
    33%  { transform: translateY(-18px) translateX(8px)  scale(1.15); opacity: 0.9; }
    66%  { transform: translateY(-8px)  translateX(-6px) scale(0.9);  opacity: 0.7; }
    100% { transform: translateY(0)   translateX(0)   scale(1);   opacity: 0.6; }
}

/* Count-up: just triggers a repaint — real logic in JS */
@keyframes countNumber {
    from { opacity: 0.4; transform: scale(0.9); }
    to   { opacity: 1;   transform: scale(1); }
}

/* Ripple expand */
@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Card entrance for scroll reveal */
@keyframes revealCard {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

/* Toast slide-in (overrides existing if any) */
@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(60px);
    }
}

/* ─────────────────────────────────────────────
   REDUCED-MOTION GUARD
   Every animation block below is wrapped so it
   only fires when the user hasn't opted out.
───────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    body:not(.reduced-motion) header {
        /* Aurora animated gradient */
        background: linear-gradient(
            270deg,
            #1d4ed8 0%,
            #2563eb 20%,
            #4f46e5 40%,
            #6d28d9 60%,
            #2563eb 80%,
            #1d4ed8 100%
        );
        background-size: 300% 300%;
        animation: headerAurora 10s ease infinite;
    }

    /* Header particles */
    body:not(.reduced-motion) header::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        overflow: hidden;
        background-image:
            radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px),
            radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px),
            radial-gradient(circle, rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
        background-size: 80px 80px, 120px 120px, 60px 60px;
        background-position: 0 0, 40px 40px, 20px 60px;
        animation: particleFloat 8s ease-in-out infinite;
    }

    /* Make header position relative so ::after can be positioned */
    body:not(.reduced-motion) header {
        position: relative;
        overflow: hidden;
    }

    /* ── Page-load entrance ── */
    body:not(.reduced-motion) header {
        animation:
            headerAurora 10s ease infinite,
            fadeInDown 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body:not(.reduced-motion) .tabs {
        animation: fadeInUp 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* opacity-only: avoids creating a CSS containing block that would capture
       position:fixed children (e.g. the FAB) during the animation */
    body:not(.reduced-motion) .tab-pane-container {
        animation: fadeIn 0.4s 0.2s ease both;
    }

    /* ── Tab content enter ── */
    /* opacity-only for the same reason — FAB lives inside .tab-content */
    body:not(.reduced-motion) .tab-content.active {
        animation: tabFadeIn 0.3s ease both;
    }

    /* ── Card hover lift ── */
    /* will-change:transform is intentionally omitted here — setting it on the
       base state would permanently promote the card to its own compositing
       layer and act as a containing block for any position:fixed descendants. */
    body:not(.reduced-motion) .card {
        transition:
            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.28s ease;
    }

    body:not(.reduced-motion) .card:hover {
        transform: translateY(-4px) scale(1.005);
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(79, 70, 229, 0.12);
    }

    body.dark-mode:not(.reduced-motion) .card:hover {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.35),
            0 2px 8px rgba(99, 102, 241, 0.2);
    }

    /* ── Dashboard widget hover lift ── */
    body:not(.reduced-motion) .dashboard-widget {
        transition:
            transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.28s ease;
    }

    body:not(.reduced-motion) .dashboard-widget:hover {
        transform: translateY(-3px);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(79, 70, 229, 0.1);
    }

    /* ── Scroll-reveal cards ── */
    body:not(.reduced-motion) .reveal-hidden {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }

    body:not(.reduced-motion) .reveal-visible {
        animation: revealCard 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* ── Stagger children ── */
    body:not(.reduced-motion) .stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(6) { animation-delay: 0.30s; }
    body:not(.reduced-motion) .stagger-children > *:nth-child(n+7) { animation-delay: 0.35s; }

    /* ── Badge pulse ── */
    body:not(.reduced-motion) .badge-danger,
    body:not(.reduced-motion) .status-danger {
        animation: glowPulse 2.4s ease-in-out infinite;
    }

    body:not(.reduced-motion) .badge-warning,
    body:not(.reduced-motion) .status-warning {
        animation: glowPulseWarning 2.4s ease-in-out infinite;
    }

    /* ── Count-up shine ── */
    body:not(.reduced-motion) .count-animating {
        animation: countNumber 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* ── Toast slide ── */
    body:not(.reduced-motion) .toast {
        animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body:not(.reduced-motion) .toast.hiding {
        animation: toastSlideOut 0.3s ease forwards;
    }

    /* ── Button press micro-interaction ── */
    body:not(.reduced-motion) .btn:active,
    body:not(.reduced-motion) .header-btn:active {
        transform: scale(0.95);
    }

    /* ── Ripple container ── */
    body:not(.reduced-motion) .btn,
    body:not(.reduced-motion) .header-btn,
    body:not(.reduced-motion) .tab {
        overflow: hidden;
    }

    body:not(.reduced-motion) .anim-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0);
        animation: rippleExpand 0.55s linear forwards;
        pointer-events: none;
    }

    /* ── Skeleton shimmer ── */
    body:not(.reduced-motion) .skeleton {
        background: linear-gradient(
            90deg,
            var(--border-color) 25%,
            rgba(255, 255, 255, 0.5) 50%,
            var(--border-color) 75%
        );
        background-size: 600px 100%;
        animation: shimmer 1.6s infinite linear;
        border-radius: var(--radius-md, 6px);
        color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

    body.dark-mode:not(.reduced-motion) .skeleton {
        background: linear-gradient(
            90deg,
            rgba(51, 65, 85, 0.8) 25%,
            rgba(100, 116, 139, 0.5) 50%,
            rgba(51, 65, 85, 0.8) 75%
        );
        background-size: 600px 100%;
        animation: shimmer 1.6s infinite linear;
    }

    /* ── Modal entrance ── */
    body:not(.reduced-motion) .modal.active .modal-content,
    body:not(.reduced-motion) .modal[style*="flex"] .modal-content,
    body:not(.reduced-motion) .modal[style*="block"] .modal-content {
        animation: scaleInBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* ── Stat number animation ── */
    body:not(.reduced-motion) .stat-value,
    body:not(.reduced-motion) .stat-number,
    body:not(.reduced-motion) [class*="stat-count"] {
        display: inline-block;
    }
}