/* ==========================================================================
   Hero Section Background Pattern: Waves
   ========================================================================== */

.hero {
    /* Animated wave gradients as background layers */
    background-image:
        linear-gradient(135deg,
            transparent 0%,
            var(--wave-color-1, rgba(138, 180, 248, 0.08)) 15%,
            transparent 30%,
            var(--wave-color-2, rgba(138, 180, 248, 0.05)) 45%,
            transparent 60%,
            var(--wave-color-1, rgba(138, 180, 248, 0.08)) 75%,
            transparent 90%),
        linear-gradient(225deg,
            transparent 0%,
            var(--wave-color-2, rgba(138, 180, 248, 0.05)) 20%,
            transparent 40%,
            var(--wave-color-1, rgba(138, 180, 248, 0.08)) 60%,
            transparent 80%);
    background-size: 400% 400%, 400% 400%;
    animation: wave-flow 15s ease-in-out infinite;
}

@keyframes wave-flow {
    0% {
        background-position: 0% 50%, 100% 50%;
    }

    50% {
        background-position: 100% 50%, 0% 50%;
    }

    100% {
        background-position: 0% 50%, 100% 50%;
    }
}

/* Theme-specific wave colors */
[data-style-mode="md"] .hero {
    --wave-color-1: rgba(138, 180, 248, 0.1);
    --wave-color-2: rgba(25, 103, 210, 0.06);
}

[data-style-mode="md3"] .hero {
    --wave-color-1: rgba(233, 179, 255, 0.1);
    --wave-color-2: rgba(124, 58, 237, 0.06);
}

[data-style-mode="oled"] .hero {
    --wave-color-1: rgba(255, 255, 255, 0.04);
    --wave-color-2: rgba(255, 255, 255, 0.02);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero {
        animation: none;
    }
}