/* Custom styles */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Bebas+Neue&display=swap');

body {
    font-family: 'Orbitron', monospace;
}

/* Custom slider styling */
.slider::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    cursor: pointer;
    border: 2px solid #1f2937;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    cursor: pointer;
    border: 2px solid #1f2937;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Animation for dramatic effect */
@keyframes dramaticPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse {
    animation: dramaticPulse 2s infinite;
}

/* AI glow effect */
@keyframes aiGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); }
}

.ai-glow {
    animation: aiGlow 2s infinite;
}

/* Audio waveform animation */
@keyframes waveform {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}

.waveform-bar {
    display: inline-block;
    width: 3px;
    height: 4px;
    background: linear-gradient(45deg, #10b981, #34d399);
    margin: 0 1px;
    animation: waveform 1s infinite;
}

.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }

/* Film grain effect */
.film-grain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 20% 80%, white 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, white 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, white 1px, transparent 1px);
    background-size: 100px 100px, 80px 80px, 60px 60px;
    pointer-events: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

/* Purple scrollbar for AI sections */
.ai-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
}

.ai-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
}

/* Cinematic text shadow for headers */
.cinematic-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.3);
}

/* Audio player custom styling */
audio::-webkit-media-controls-panel {
    background-color: #1f2937;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button {
    background-color: #059669;
    border-radius: 50%;
}

/* Loading animation for AI features */
@keyframes aiProcessing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-processing {
    animation: aiProcessing 2s linear infinite;
}

/* Special styling for comparison sections */
.comparison-grid > div:first-child {
    border-right: 2px solid #374151;
}

.comparison-grid > div:first-child::after {
    content: 'VS';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    background: #1f2937;
    color: #fbbf24;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
}

@media (max-width: 768px) {
    .comparison-grid > div:first-child {
        border-right: none;
        border-bottom: 2px solid #374151;
    }
    
    .comparison-grid > div:first-child::after {
        right: 50%;
        bottom: -15px;
        top: auto;
        transform: translateX(50%);
    }
}