/**
 * Wave Background Effect
 * 
 * Creates a subtle, performant wave-like background using CSS gradients.
 * Uses signal color for subtle accents. Mobile-optimized.
 * 
 * @package THE_ARCHITECT
 */

/* Base Wave Container - Applied to main content wrapper */
.mm-wave-bg {
    position: relative;
    background: transparent;
}

/* Main Wave Layer - Full page subtle gradient */
.mm-wave-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background:
        /* Subtle top-left signal glow */
        radial-gradient(ellipse 80% 50% at 10% 20%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
            transparent 60%),
        /* Mid-right signal wave */
        radial-gradient(ellipse 60% 40% at 90% 50%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.05) 0%,
            transparent 50%),
        /* Bottom-center larger wave */
        radial-gradient(ellipse 100% 60% at 50% 100%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
            transparent 40%),
        /* Base background color */
        var(--c-bg, #0a0908);
}

/* Animated subtle pulse - Only for users who prefer motion */
@media (prefers-reduced-motion: no-preference) {
    .mm-wave-bg::before {
        animation: waveShift 30s ease-in-out infinite;
    }
}

@keyframes waveShift {

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

    50% {
        background-position: 5% 5%, 95% 45%, 55% 95%;
    }
}

/* Light Mode Adjustments */
.light-mode .mm-wave-bg::before,
[data-theme="light"] .mm-wave-bg::before {
    background:
        radial-gradient(ellipse 80% 50% at 10% 20%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.12) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 50%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
            transparent 50%),
        radial-gradient(ellipse 100% 60% at 50% 100%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.1) 0%,
            transparent 40%),
        var(--c-bg, #faf9f7);
}

/* Section Wave Accents - Individual section subtle accents */
.mm-section-wave {
    position: relative;
    background: transparent !important;
    isolation: isolate;
}

.mm-section-wave::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.02) 50%,
            transparent 100%);
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {

    /* Simpler gradients on mobile */
    .mm-wave-bg::before {
        background:
            radial-gradient(ellipse 100% 50% at 50% 0%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
                transparent 50%),
            radial-gradient(ellipse 100% 50% at 50% 100%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.04) 0%,
                transparent 50%),
            var(--c-bg, #0a0908);
        /* Disable animation on mobile for performance */
        animation: none !important;
    }

    .light-mode .mm-wave-bg::before,
    [data-theme="light"] .mm-wave-bg::before {
        background:
            radial-gradient(ellipse 100% 50% at 50% 0%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
                transparent 50%),
            radial-gradient(ellipse 100% 50% at 50% 100%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
                transparent 50%),
            var(--c-bg, #faf9f7);
    }
}

/* Ensure transparent sections */
section[data-tomv3],
.mm-section:not(.mm-testimonials) {
    background: transparent !important;
}

/* Remove any potential solid backgrounds from frontpage sections */
#hero,
#benefits,
#portfolio,
#pakete,
#faq,
#about,
#blog,
#kontakt {
    background: transparent !important;
}

/* Testimonials has its own wave background - don't override */
#testimonials.mm-testimonials {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Wave Dividers (Section Separators)
   Uses SVG masks to inherit the dynamic signal color.
-------------------------------------------------------------------------- */
.mm-section-divider {
    height: 80px;
    width: 100%;
    position: relative;
    opacity: 1;
    margin-top: -40px;
    margin-bottom: -40px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

/* Primary Wave Line */
.mm-section-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-signal);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,80 350,0 600,50 C850,100 1150,0 1440,50' stroke='black' stroke-width='2' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,80 350,0 600,50 C850,100 1150,0 1440,50' stroke='black' stroke-width='2' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.4;
    filter: drop-shadow(0 0 8px var(--color-signal));
}

/* Secondary Wave Line (Offset & Fainter) */
.mm-section-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-signal);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C200,20 500,90 900,40 C1200,10 1350,60 1440,50' stroke='black' stroke-width='1.5' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C200,20 500,90 900,40 C1200,10 1350,60 1440,50' stroke='black' stroke-width='1.5' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.2;
}

/* Light Mode Overrides for Dividers */
.light-mode .mm-section-divider::before,
[data-theme="light"] .mm-section-divider::before {
    opacity: 0.6;
}

.light-mode .mm-section-divider::after,
[data-theme="light"] .mm-section-divider::after {
    opacity: 0.3;
}