/* ═══════════════════════════════════════════════════════════
   🎵 Cyle Music — Animations
   ═══════════════════════════════════════════════════════════ */

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

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

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes loadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 229, 255, 0.4), 0 0 60px rgba(123, 47, 255, 0.2);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ─── Utility Classes ───────────────────────────────────── */
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.3s ease-out; }
.fade-in-up { animation: fadeInUp 0.4s ease-out; }
.fade-in-scale { animation: fadeInScale 0.3s ease-out; }

/* ─── Screen Transitions ──────────────────────────────── */
.screen-content-enter {
    animation: fadeInUp 0.3s ease-out;
}

/* ─── Playing indicator (equalizer bars) ─────────────── */
.playing-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.playing-indicator .bar {
    width: 3px;
    background: var(--accent);
    border-radius: 1px;
    animation: eqBar 0.8s ease-in-out infinite;
}

.playing-indicator .bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.playing-indicator .bar:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.playing-indicator .bar:nth-child(3) { height: 50%; animation-delay: 0.3s; }
.playing-indicator .bar:nth-child(4) { height: 90%; animation-delay: 0.1s; }

@keyframes eqBar {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/* ─── Toast notifications ───────────────────────────────── */
.toast {
    position: fixed;
    bottom: calc(80px + var(--safe-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 0.8rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 0.85rem;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}