/* ============================================
   OUDIFY — Animations & Keyframes
   ============================================ */

/* --- Glow Pulse (tuner active state) --- */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(212, 165, 116, 0.1),
            0 0 40px rgba(212, 165, 116, 0.05);
    }

    50% {
        box-shadow:
            0 0 30px rgba(212, 165, 116, 0.2),
            0 0 60px rgba(212, 165, 116, 0.1);
    }
}

.animate-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

/* --- Fade In --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 400ms ease-out forwards;
}

/* --- Fade In Up (page entrance) --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Scale In (modal, dropdown) --- */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.animate-scale-in {
    animation: scaleIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Staggered Card Entrance --- */
.stagger-enter>* {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeInUp 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

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

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

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

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

/* --- Needle Sweep (tuner gauge) --- */
@keyframes needleSweep {
    from {
        transform: rotate(var(--needle-from, -135deg));
    }

    to {
        transform: rotate(var(--needle-to, 0deg));
    }
}

/* --- Spin (loading) --- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* --- Ring Pulse (in-tune indicator) --- */
@keyframes ringPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);
    }
}

.animate-ring-pulse {
    animation: ringPulse 1.5s ease-in-out infinite;
}

/* --- Shimmer (loading skeleton) --- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.animate-shimmer {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
}

/* --- Page Transition --- */
.page-enter {
    opacity: 0;
    transform: translateY(12px);
}

.page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.page-exit {
    opacity: 1;
    transform: translateY(0);
}

.page-exit-active {
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 200ms ease-in,
        transform 200ms ease-in;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}