@layer utilities {
    .glass-panel {
        @apply backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl shadow-xl;
    }
    .glass-button {
        @apply backdrop-blur-md bg-white/10 border border-white/20 rounded-xl transition-all duration-300 ease-out flex items-center justify-between px-4 py-3 text-white hover:bg-white/20;
    }
    
    /* Platform Specific Glows */
    .glow-spotify:hover {
        box-shadow: 0 0 20px rgba(29, 185, 84, 0.4);
        border-color: rgba(29, 185, 84, 0.5);
    }
    .glow-apple:hover {
        box-shadow: 0 0 20px rgba(250, 36, 60, 0.4);
        border-color: rgba(250, 36, 60, 0.5);
    }
    .glow-amazon:hover {
        box-shadow: 0 0 20px rgba(0, 168, 225, 0.4);
        border-color: rgba(0, 168, 225, 0.5);
    }
    .glow-youtube:hover {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
        border-color: rgba(255, 0, 0, 0.5);
    }
    
    /* Animation Cascade delays */
    .delay-100 { animation-delay: 100ms; }
    .delay-200 { animation-delay: 200ms; }
    .delay-300 { animation-delay: 300ms; }
    .delay-400 { animation-delay: 400ms; }
    .delay-500 { animation-delay: 500ms; }
}

@layer base {
    body {
        /* Default dark theme background */
        @apply bg-neutral-950 text-neutral-100 overflow-x-hidden;
    }
    
    /* Static animated background element */
    .bg-animated-blob {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background: radial-gradient(circle at 50% 15%, rgba(139, 92, 246, 0.15) 0%, rgba(0, 0, 0, 1) 70%);
        pointer-events: none;
    }
    
    .animate-fade-in {
        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
        transform: translateY(15px);
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}