/* Waveform Animation Styles */
.waveform-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.waveform-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* opacity: 0.4; */
}

/* Make the first section relative for proper positioning */
.hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    /* Removed background gradient that was creating the transparent box */
}

/* Ensure main container is transparent when hero section is present */
main.transparent-bg {
    background: transparent !important;
}

/* Force transparency on the hero section itself - this is the culprit! */
body > main > div.px-4.py-5.my-5.hero-section,
div.px-4.py-5.my-5.hero-section,
.px-4.py-5.my-5.hero-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove any backgrounds from Bootstrap containers and columns in hero section */
.hero-section .container-fluid,
.hero-section .row,
.hero-section .col-lg-8,
.hero-section .col-xl-8,
.hero-section .hero-content,
.hero-section .text-center,
.hero-section .text-lg-start {
    background: transparent !important;
    background-color: transparent !important;
}

/* Additional overrides for potential Bootstrap dark theme backgrounds */
.hero-section *:not(canvas):not(.waveform-container):not(.waveform-container::before) {
    background: transparent !important;
    background-color: transparent !important;
}

/* Specific overrides for common Bootstrap background classes */
.hero-section .bg-dark,
.hero-section .bg-primary,
.hero-section .bg-secondary,
.hero-section .bg-body,
.hero-section .bg-body-secondary,
.hero-section .bg-body-tertiary {
    background: transparent !important;
    background-color: transparent !important;
}

/* Additional styling for better visual integration */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Gradient overlay for better text readability and depth - now full screen */
.waveform-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, 
        rgba(13, 110, 253, 0.08) 0%, 
        rgba(13, 110, 253, 0.04) 40%, 
        rgba(220, 53, 69, 0.06) 70%, 
        transparent 100%);
    z-index: 1;
}

Dark theme optimizations
[data-bs-theme="dark"] .waveform-canvas {
    opacity: 0.6;
}

/* Removed dark theme hero-section background gradient */

[data-bs-theme="dark"] .waveform-container::before {
    background: radial-gradient(ellipse at center, 
        rgba(13, 110, 253, 0.12) 0%, 
        rgba(13, 110, 253, 0.06) 40%, 
        rgba(220, 53, 69, 0.08) 70%, 
        transparent 100%);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-section {
        min-height: 60vh;
    }
    
    .waveform-canvas {
        width: 100vw;
        height: 100vh;
        opacity: 0.35;
    }
}

@media (max-width: 768px) {
    .waveform-canvas {
        width: 100vw;
        height: 100vh;
        opacity: 0.3;
    }
    
    .hero-section {
        min-height: 50vh;
    }
}

@media (max-width: 576px) {
    .waveform-canvas {
        width: 100vw;
        height: 100vh;
        opacity: 0.25;
    }
    
    .hero-section {
        min-height: 45vh;
    }
}

/* Performance optimizations */
.waveform-canvas {
    will-change: transform;
    backface-visibility: hidden;
}

/* Enhance text readability over the waveform */
.hero-content h1,
.hero-content .lead {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Subtle pulse animation for the brand name */
@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 2px 8px rgba(220, 53, 69, 0.4), 
                     0 4px 16px rgba(220, 53, 69, 0.2);
    }
}

.hero-content h1 {
    animation: pulse-glow 4s ease-in-out infinite;
}