/**
 * Wave Background Effect
 *
 * Creates an immersive, premium wave-like background using CSS gradients.
 * Combines signal color with complementary blue/cyan tones for depth.
 * Inspired by aurora/nebula aesthetics. Mobile-optimized.
 *
 * @package THE_ARCHITECT
 */

/* ==========================================================================
   CSS VARIABLES FOR WAVE EFFECTS
   ========================================================================== */
:root {
    /* Ambient light colors - blue/cyan spectrum for depth */
    --wave-blue-deep: 15, 52, 96;
    --wave-cyan: 6, 182, 212;
    --wave-blue-light: 56, 189, 248;
    --wave-indigo: 99, 102, 241;
    --wave-purple: 139, 92, 246;

    /* Intensity controls */
    --wave-intensity: 1;
    --wave-signal-strength: 0.12;
    --wave-ambient-strength: 0.08;
}

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

/* Main Wave Layer - Full page immersive gradient */
.mm-wave-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    /* Intensity controlled via CSS variable (0-1.5) */
    opacity: var(--wave-intensity, 1);
    background:
        /* Primary signal glow - top left aurora */
        radial-gradient(ellipse 90% 60% at 5% 15%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.14) 0%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.05) 30%,
            transparent 60%),
        /* Blue ambient wave - bottom right flowing up */
        radial-gradient(ellipse 80% 70% at 95% 85%,
            rgba(var(--wave-cyan, 6, 182, 212), 0.12) 0%,
            rgba(var(--wave-blue-deep, 15, 52, 96), 0.08) 40%,
            transparent 70%),
        /* Deep indigo nebula - center bottom */
        radial-gradient(ellipse 120% 50% at 50% 105%,
            rgba(var(--wave-indigo, 99, 102, 241), 0.10) 0%,
            rgba(var(--wave-blue-deep, 15, 52, 96), 0.06) 30%,
            transparent 50%),
        /* Secondary signal accent - mid right */
        radial-gradient(ellipse 50% 45% at 85% 40%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
            transparent 50%),
        /* Subtle blue mist - top right */
        radial-gradient(ellipse 60% 40% at 90% 10%,
            rgba(var(--wave-blue-light, 56, 189, 248), 0.06) 0%,
            transparent 50%),
        /* Deep purple undertone - bottom left */
        radial-gradient(ellipse 70% 50% at 10% 90%,
            rgba(var(--wave-purple, 139, 92, 246), 0.05) 0%,
            rgba(var(--wave-indigo, 99, 102, 241), 0.03) 40%,
            transparent 60%),
        /* Base background color */
        var(--c-bg, #0a0908);
}

/* Base background always visible regardless of wave intensity */
.mm-wave-bg {
    background-color: var(--c-bg, #0a0908);
}

/* Secondary ambient layer for extra depth */
.mm-wave-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    opacity: 0.7;
    mix-blend-mode: screen;
    background:
        /* Floating light particles effect */
        radial-gradient(circle 300px at 20% 30%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.04) 0%,
            transparent 70%),
        radial-gradient(circle 400px at 80% 70%,
            rgba(var(--wave-cyan), 0.05) 0%,
            transparent 70%),
        radial-gradient(circle 250px at 60% 20%,
            rgba(var(--wave-blue-light), 0.03) 0%,
            transparent 70%);
}

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

    .mm-wave-bg::after {
        animation: ambientFloat 30s ease-in-out infinite reverse;
    }
}

@keyframes waveShift {
    0%, 100% {
        background-position:
            5% 15%,
            95% 85%,
            50% 105%,
            85% 40%,
            90% 10%,
            10% 90%,
            center;
        filter: brightness(1) saturate(1);
    }
    25% {
        background-position:
            8% 20%,
            90% 80%,
            55% 100%,
            80% 45%,
            85% 15%,
            15% 85%,
            center;
        filter: brightness(1.02) saturate(1.05);
    }
    50% {
        background-position:
            3% 12%,
            92% 88%,
            48% 108%,
            88% 38%,
            92% 8%,
            8% 92%,
            center;
        filter: brightness(1.04) saturate(1.1);
    }
    75% {
        background-position:
            6% 18%,
            88% 82%,
            52% 102%,
            82% 42%,
            88% 12%,
            12% 88%,
            center;
        filter: brightness(1.02) saturate(1.05);
    }
}

@keyframes ambientFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-2%) scale(1.02);
        opacity: 0.8;
    }
    66% {
        transform: translateY(1%) scale(0.98);
        opacity: 0.6;
    }
}

/* ==========================================================================
   ENHANCED GLOW EFFECTS
   ========================================================================== */

/* Intense glow variant for hero sections */
.mm-wave-bg--intense::before {
    --wave-signal-strength: 0.18;
    --wave-ambient-strength: 0.12;
    background:
        radial-gradient(ellipse 90% 60% at 5% 15%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.18) 0%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 30%,
            transparent 60%),
        radial-gradient(ellipse 80% 70% at 95% 85%,
            rgba(var(--wave-cyan), 0.16) 0%,
            rgba(var(--wave-blue-deep), 0.10) 40%,
            transparent 70%),
        radial-gradient(ellipse 120% 50% at 50% 105%,
            rgba(var(--wave-indigo), 0.14) 0%,
            rgba(var(--wave-blue-deep), 0.08) 30%,
            transparent 50%),
        radial-gradient(ellipse 50% 45% at 85% 40%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.12) 0%,
            transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 10%,
            rgba(var(--wave-blue-light), 0.10) 0%,
            transparent 50%),
        radial-gradient(ellipse 70% 50% at 10% 90%,
            rgba(var(--wave-purple), 0.08) 0%,
            rgba(var(--wave-indigo), 0.05) 40%,
            transparent 60%),
        var(--c-bg, #0a0908);
}

/* Light Mode Adjustments */
.light-mode .mm-wave-bg::before,
[data-theme="light"] .mm-wave-bg::before {
    background:
        radial-gradient(ellipse 90% 60% at 5% 15%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse 80% 70% at 95% 85%,
            rgba(var(--wave-cyan), 0.06) 0%,
            transparent 70%),
        radial-gradient(ellipse 120% 50% at 50% 105%,
            rgba(var(--wave-indigo), 0.05) 0%,
            transparent 50%),
        radial-gradient(ellipse 50% 45% at 85% 40%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
            transparent 50%),
        var(--c-bg, #faf9f7);
}

.light-mode .mm-wave-bg::after,
[data-theme="light"] .mm-wave-bg::after {
    opacity: 0.4;
}

/* 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 but still colorful gradients on mobile */
    .mm-wave-bg::before {
        background:
            /* Signal glow top */
            radial-gradient(ellipse 100% 50% at 30% 0%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.10) 0%,
                transparent 50%),
            /* Cyan wave bottom */
            radial-gradient(ellipse 100% 60% at 70% 100%,
                rgba(var(--wave-cyan), 0.10) 0%,
                rgba(var(--wave-blue-deep), 0.06) 30%,
                transparent 50%),
            /* Subtle indigo center */
            radial-gradient(ellipse 80% 40% at 50% 50%,
                rgba(var(--wave-indigo), 0.04) 0%,
                transparent 60%),
            var(--c-bg, #0a0908);
        /* Disable animation on mobile for performance */
        animation: none !important;
    }

    .mm-wave-bg::after {
        display: none;
    }

    .light-mode .mm-wave-bg::before,
    [data-theme="light"] .mm-wave-bg::before {
        background:
            radial-gradient(ellipse 100% 50% at 30% 0%,
                rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
                transparent 50%),
            radial-gradient(ellipse 100% 60% at 70% 100%,
                rgba(var(--wave-cyan), 0.05) 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;
}

/* ==========================================================================
   WAVE BACKGROUND VARIANTS
   Utility classes for different color schemes and intensities
   ========================================================================== */

/* Minimal variant - very subtle, professional */
.mm-wave-bg--minimal::before {
    background:
        radial-gradient(ellipse 80% 50% at 10% 20%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 80%,
            rgba(var(--wave-cyan), 0.05) 0%,
            transparent 60%),
        var(--c-bg, #0a0908);
}

.mm-wave-bg--minimal::after {
    display: none;
}

/* Cyan-focused variant */
.mm-wave-bg--cyan::before {
    background:
        radial-gradient(ellipse 100% 60% at 20% 10%,
            rgba(var(--wave-cyan), 0.15) 0%,
            rgba(var(--wave-blue-deep), 0.08) 40%,
            transparent 70%),
        radial-gradient(ellipse 80% 70% at 80% 90%,
            rgba(var(--wave-blue-light), 0.12) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 40% at 60% 40%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.06) 0%,
            transparent 50%),
        var(--c-bg, #0a0908);
}

/* Purple/indigo focused variant */
.mm-wave-bg--purple::before {
    background:
        radial-gradient(ellipse 90% 60% at 10% 20%,
            rgba(var(--wave-purple), 0.14) 0%,
            rgba(var(--wave-indigo), 0.08) 40%,
            transparent 60%),
        radial-gradient(ellipse 70% 60% at 90% 80%,
            rgba(var(--wave-indigo), 0.12) 0%,
            transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.05) 0%,
            transparent 50%),
        var(--c-bg, #0a0908);
}

/* ==========================================================================
   AURORA OVERLAY EFFECT
   Can be added to any element for extra visual depth
   ========================================================================== */

.mm-aurora-overlay {
    position: relative;
}

.mm-aurora-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 30% 20%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.08) 0%,
            transparent 50%),
        radial-gradient(ellipse 50% 50% at 70% 80%,
            rgba(var(--wave-cyan), 0.08) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.mm-aurora-overlay:hover::before {
    opacity: 1;
}

/* ==========================================================================
   GLOW ACCENTS FOR CARDS & ELEMENTS
   Reusable glow effects using the wave color palette
   ========================================================================== */

.mm-glow-signal {
    box-shadow:
        0 0 12px rgba(var(--color-signal-rgb, 207, 160, 98), 0.12),
        0 0 32px rgba(var(--color-signal-rgb, 207, 160, 98), 0.06);
}

.mm-glow-cyan {
    box-shadow:
        0 0 12px rgba(var(--wave-cyan), 0.12),
        0 0 32px rgba(var(--wave-cyan), 0.06);
}

.mm-glow-mixed {
    box-shadow:
        0 0 12px rgba(var(--color-signal-rgb, 207, 160, 98), 0.1),
        0 0 24px rgba(var(--wave-cyan), 0.06),
        0 0 32px rgba(var(--wave-indigo), 0.04);
}

/* Animated glow pulse */
@media (prefers-reduced-motion: no-preference) {
    .mm-glow-pulse {
        animation: glowPulse 4s ease-in-out infinite;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow:
            0 0 12px rgba(var(--color-signal-rgb, 207, 160, 98), 0.1),
            0 0 24px rgba(var(--wave-cyan), 0.05);
    }
    50% {
        box-shadow:
            0 0 18px rgba(var(--color-signal-rgb, 207, 160, 98), 0.14),
            0 0 36px rgba(var(--wave-cyan), 0.08);
    }
}

/* ==========================================================================
   GRADIENT BORDER UTILITY
   Creates a glowing gradient border effect
   ========================================================================== */

.mm-gradient-border {
    position: relative;
    background: var(--c-bg, #0a0908);
    border-radius: var(--radius-lg, 12px);
}

.mm-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(var(--color-signal-rgb, 207, 160, 98), 0.5) 0%,
        rgba(var(--wave-cyan), 0.3) 50%,
        rgba(var(--wave-indigo), 0.2) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Animated gradient border */
@media (prefers-reduced-motion: no-preference) {
    .mm-gradient-border--animated::before {
        background: linear-gradient(
            var(--gradient-angle, 135deg),
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.6) 0%,
            rgba(var(--wave-cyan), 0.4) 33%,
            rgba(var(--wave-indigo), 0.3) 66%,
            rgba(var(--color-signal-rgb, 207, 160, 98), 0.6) 100%
        );
        animation: borderRotate 8s linear infinite;
    }
}

@keyframes borderRotate {
    0% { --gradient-angle: 0deg; }
    100% { --gradient-angle: 360deg; }
}

/* Register custom property for animation */
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 135deg;
    inherits: false;
}