/**
 * SP4DJS Custom Visuals and Animations
 */

@layer utilities {
    /* Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #0b0d17;
    }
    ::-webkit-scrollbar-thumb {
        background: #2b304c;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #00f2fe;
    }
}

/* Glassmorphism & Glow helpers */
.glass-panel {
    background: rgba(21, 24, 40, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(43, 48, 76, 0.8);
}

.neon-border-cyan {
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

.neon-border-purple {
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
}

/* Animated waveform simulation bars */
.wave-bar {
    display: inline-block;
    width: 3px;
    background: #00f2fe;
    border-radius: 2px;
    animation: waveAnimation 1.2s ease-in-out infinite alternate;
}

@keyframes waveAnimation {
    0% { height: 4px; }
    100% { height: 24px; }
}