/**
 * Mesh Gradient System
 *
 * Layered radial-gradient presets with optional CSS animation.
 * Applied to .bg-layers__base (mesh IS the background, not an overlay).
 * Animation uses transform on oversized ::before pseudo-element.
 */

/* ==========================================================================
   Mesh Base — oversized pseudo for transform animation
   ========================================================================== */

[data-bg-mesh] > .bg-layers__base {
    overflow: hidden;
}

[data-bg-mesh] > .bg-layers__base::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    will-change: transform;
}

/* ==========================================================================
   Aurora — flowing brand colors
   ========================================================================== */

[data-bg-mesh="aurora"] > .bg-layers__base::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, color-mix(in oklch, var(--color-primary) 60%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 20%, color-mix(in oklch, var(--color-secondary) 50%, transparent), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 80%, color-mix(in oklch, var(--color-accent) 40%, transparent), transparent 70%),
        radial-gradient(ellipse 90% 90% at 50% 50%, color-mix(in oklch, var(--color-base-100) 100%, transparent), transparent);
    animation: mesh-drift var(--mesh-speed, 15s) ease-in-out infinite alternate;
}

/* ==========================================================================
   Lava — warm reds/oranges
   ========================================================================== */

[data-bg-mesh="lava"] > .bg-layers__base::before {
    background:
        radial-gradient(ellipse 70% 60% at 25% 35%, rgba(239, 68, 68, 0.6), transparent 70%),
        radial-gradient(ellipse 60% 70% at 75% 25%, rgba(249, 115, 22, 0.5), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 75%, rgba(234, 179, 8, 0.4), transparent 70%),
        radial-gradient(ellipse 90% 90% at 50% 50%, rgba(30, 10, 5, 1), transparent);
    animation: mesh-drift var(--mesh-speed, 10s) ease-in-out infinite alternate;
}

/* ==========================================================================
   Ocean — deep blues/teals
   ========================================================================== */

[data-bg-mesh="ocean"] > .bg-layers__base::before {
    background:
        radial-gradient(ellipse 80% 60% at 30% 40%, rgba(6, 182, 212, 0.5), transparent 70%),
        radial-gradient(ellipse 60% 80% at 70% 20%, rgba(59, 130, 246, 0.5), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 80%, rgba(16, 185, 129, 0.3), transparent 70%),
        radial-gradient(ellipse 90% 90% at 50% 50%, rgba(5, 15, 40, 1), transparent);
    animation: mesh-drift var(--mesh-speed, 20s) ease-in-out infinite alternate;
}

/* ==========================================================================
   Custom — user-defined colors via CSS variables
   ========================================================================== */

[data-bg-mesh="custom"] > .bg-layers__base::before {
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, var(--mesh-color-1, color-mix(in oklch, var(--color-primary) 60%, transparent)), transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 20%, var(--mesh-color-2, color-mix(in oklch, var(--color-secondary) 50%, transparent)), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 80%, var(--mesh-color-3, color-mix(in oklch, var(--color-accent) 40%, transparent)), transparent 70%),
        radial-gradient(ellipse 90% 90% at 50% 50%, var(--mesh-color-4, color-mix(in oklch, var(--color-base-100) 100%, transparent)), transparent);
    animation: mesh-drift var(--mesh-speed, 15s) ease-in-out infinite alternate;
}

/* ==========================================================================
   Speed Modifiers
   ========================================================================== */

[data-bg-mesh-speed="slow"]   { --mesh-speed: 15s; }
[data-bg-mesh-speed="medium"] { --mesh-speed: 10s; }
[data-bg-mesh-speed="fast"]   { --mesh-speed: 6s; }
[data-bg-mesh-speed="none"] > .bg-layers__base::before { animation: none; }

/* ==========================================================================
   Drift Animation
   ========================================================================== */

@keyframes mesh-drift {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(5%, -3%) scale(1.02) rotate(1deg);
    }
    66% {
        transform: translate(-3%, 5%) scale(0.98) rotate(-1deg);
    }
    100% {
        transform: translate(2%, 2%) scale(1.01) rotate(0.5deg);
    }
}

/* ==========================================================================
   Mobile — simplify to 2 gradient layers
   ========================================================================== */

@media (max-width: 767px) {
    [data-bg-mesh="aurora"] > .bg-layers__base::before {
        background:
            radial-gradient(ellipse 80% 60% at 30% 40%, color-mix(in oklch, var(--color-primary) 60%, transparent), transparent 70%),
            radial-gradient(ellipse 90% 90% at 50% 50%, color-mix(in oklch, var(--color-base-100) 100%, transparent), transparent);
    }

    [data-bg-mesh="lava"] > .bg-layers__base::before {
        background:
            radial-gradient(ellipse 80% 60% at 30% 40%, rgba(239, 68, 68, 0.6), transparent 70%),
            radial-gradient(ellipse 90% 90% at 50% 50%, rgba(30, 10, 5, 1), transparent);
    }

    [data-bg-mesh="ocean"] > .bg-layers__base::before {
        background:
            radial-gradient(ellipse 80% 60% at 30% 40%, rgba(6, 182, 212, 0.5), transparent 70%),
            radial-gradient(ellipse 90% 90% at 50% 50%, rgba(5, 15, 40, 1), transparent);
    }

    [data-bg-mesh="custom"] > .bg-layers__base::before {
        background:
            radial-gradient(ellipse 80% 60% at 30% 40%, var(--mesh-color-1, color-mix(in oklch, var(--color-primary) 60%, transparent)), transparent 70%),
            radial-gradient(ellipse 90% 90% at 50% 50%, var(--mesh-color-4, color-mix(in oklch, var(--color-base-100) 100%, transparent)), transparent);
    }
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-bg-mesh] > .bg-layers__base::before {
        animation: none;
    }
}

@media print {
    [data-bg-mesh] > .bg-layers__base::before {
        animation: none;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}