/* ================================================
   CURVED WAVE GRADIENT ANIMATION
   ================================================ */

/* Wave container positioned at bottom of hero section */
.wave-gradient-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 180px;
    /* Fixed height - Further reduced to be very subtle */
    overflow: visible !important;
    pointer-events: none;
    z-index: 5;
    /* Positioned BEHIND 3D object (3D is z-index 15) */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* SVG wave container - Allow overflow for glow */
.wave-gradient-container svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible !important;
}

/* Wave layers with curved shapes */
.wave-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    mix-blend-mode: screen;
    /* Blend with background for glowing effect */
    filter: blur(12px);
    /* Gaussian blur for dreamy effect */
}

/* Black overlay REMOVED - Using SVG userSpaceOnUse gradient instead */

/* Single wave layer - Ultra Glowing */
.wave-layer-1 {
    animation: waveSlide 12s linear infinite;
    opacity: 1;
    /* Maximum visibility for glow */
    z-index: 3;
}

/* Wave sliding animation */
@keyframes waveSlide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* SOFT fade at top of waves (no hard edge) */
.wave-gradient-container::before {
    content: '';
    position: absolute;
    top: -80px;
    left: -5%;
    right: -5%;
    height: 200px;
    background: radial-gradient(ellipse 80% 100% at 50% 100%,
            rgba(68, 12, 181, 0.4) 0%,
            rgba(68, 12, 181, 0.15) 40%,
            rgba(68, 12, 181, 0) 70%);
    filter: blur(30px);
    z-index: 10;
    animation: glowPulse 4s ease-in-out infinite;
}

/* Ambient glow behind waves */
.wave-gradient-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 100%;
    background: radial-gradient(ellipse 100% 80% at 50% 100%,
            rgba(68, 12, 181, 0.5) 0%,
            rgba(68, 12, 181, 0.2) 40%,
            transparent 70%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;
}



/* Enhanced glow pulse */
@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }
}

/* Bottom glow intense pulse */
@keyframes bottomGlowPulse {

    0%,
    100% {
        opacity: 0.8;
        box-shadow:
            0 0 30px rgba(255, 255, 255, 1),
            0 0 60px rgba(251, 191, 36, 0.9),
            0 0 90px rgba(168, 85, 247, 0.7),
            0 -5px 40px rgba(255, 255, 255, 0.6);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 50px rgba(255, 255, 255, 1),
            0 0 100px rgba(251, 191, 36, 1),
            0 0 150px rgba(168, 85, 247, 0.9),
            0 -10px 80px rgba(255, 255, 255, 0.8);
    }
}

/* ================================
   RESPONSIVE BREAKPOINTS
   ================================ */

/* Small Mobile (phones < 480px) */
@media (max-width: 480px) {
    .wave-gradient-container {
        height: 220px;
        /* Fixed height for small mobile */
        bottom: 0;
    }

    .wave-gradient-container::before {
        height: 50px;
        top: -15px;
        filter: blur(25px);
    }

    .wave-layer-1 {
        animation: waveSlide 10s linear infinite;
        /* Faster on mobile */
    }
}

/* Mobile (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .wave-gradient-container {
        height: 300px;
        /* Fixed height for mobile */
        bottom: 0;
    }

    .wave-gradient-container::before {
        height: 70px;
        top: -20px;
        filter: blur(30px);
    }

    .wave-layer-1 {
        animation: waveSlide 11s linear infinite;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .wave-gradient-container {
        height: 380px;
        /* Fixed height for tablet */
        bottom: 0;
    }

    .wave-gradient-container::before {
        height: 100px;
        top: -30px;
        filter: blur(35px);
    }
}

/* Large Desktop (> 1440px) - Even stronger presence */
@media (min-width: 1441px) {
    .wave-gradient-container {
        height: 220px;
        /* Cap height at 220px for large screens */
        bottom: 0;
    }

    .wave-gradient-container::before {
        height: 200px;
        top: -80px;
        filter: blur(55px);
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
    .wave-gradient-container {
        height: 80px !important;
        /* Compact for landscape phones */
    }

    .wave-gradient-container::before {
        height: 40px;
        top: -10px;
        filter: blur(20px);
    }
}