/* Animations CSS */

/* 1. Page Load Transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* 2. Audio Spectrum (Fake Visualizer) - REMOVED */


/* 3. Micro-Interactions */

/* Buttons */
.btn,
.mobile-menu-btn,
.back-btn,
.logout {
    transition: transform 0.1s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.mobile-menu-btn:hover,
.back-btn:hover,
.logout:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn:active,
.mobile-menu-btn:active,
.back-btn:active,
.logout:active {
    transform: translateY(1px);
}

/* Cards (Guilds, etc) */
.guild-card,
.container,
.player-container,
.profile-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guild-card:hover {
    /* Existing translateY is usually -5px, let's enhance or standardize */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 4. Pulsing Status Indicator */
.status-indicator {
    /* Base styles usually in main CSS, here we add animation */
    transition: box-shadow 0.3s ease;
}

.status-playing {
    /* Green pulse */
    animation: pulse-green 2s infinite;
}

.status-stopped {
    /* Red/Gray steady or slow pulse */
    animation: none;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(88, 101, 242, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(88, 101, 242, 0);
    }
}