/**
 * Websly Extra Background Presets v4
 * High-performance, robust CSS-centric modern effects.
 */

:root {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* Base Container for JS-injected effects */
.websly-fx-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease, filter 0.5s ease;
    will-change: opacity, filter;
    transform: scale(var(--ws-atm-scale, 1.05)); /* Prevent edge bleeding when blurring */
    /* Sub-pixel smoothing force */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Global Grain Overlay - Managed by Atmosphere Engine (inc/themes.php) */
.websly-fx-container::before {
    pointer-events: none;
}

/* 🌊 Animated Brand Gradient (5.4) — 21st.dev-style cycling linear gradient.
   Five-stop linear-gradient on a 400% canvas, position-shifted over 16s.
   Light mode mixes accent toward --bg-base (a light page anchor) → softer/lighter.
   Dark mode mixes accent toward pure black with a higher accent% to keep the
   primary hue dominant (mixing toward --bg-base in dark mode pulls the colour
   into a desaturated near-black which can read off-hue, e.g. purple → blue). */
.bg-grad-animated-primary {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 55%, var(--bg-base));
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 30%, var(--bg-base));
    --ws-anim-opacity: 0.85;
    --ws-anim-blur: 70px;
}
.dark .bg-grad-animated-primary {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 75%, #000);
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 50%, #000);
    --ws-anim-opacity: 0.7;
    --ws-anim-blur: 60px;
}
.bg-grad-animated-primary .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background:
        linear-gradient(135deg,
            var(--theme-accent) 0%,
            var(--ws-anim-mid) 25%,
            var(--ws-anim-low) 50%,
            var(--ws-anim-mid) 75%,
            var(--theme-accent) 100%);
    background-size: 400% 400%;
    opacity: var(--ws-anim-opacity);
    filter: blur(var(--ws-anim-blur));
    animation: websly-anim-grad-primary 16s ease-in-out infinite;
}
@keyframes websly-anim-grad-primary {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-grad-animated-primary .websly-fx-gradient-inner { animation: none; }
}

/* 🌊 Animated Brand Gradient — Soft variant.
   Same engine, wider tonal extremes: lighter in light mode (more white pull,
   dreamier), darker in dark mode (more black pull, moodier). Hue-true. */
.bg-grad-animated-primary-soft {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 35%, #fff);
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 15%, #fff);
    --ws-anim-accent: color-mix(in oklch, var(--theme-accent) 70%, #fff);
    --ws-anim-opacity: 0.9;
    --ws-anim-blur: 80px;
}
.dark .bg-grad-animated-primary-soft {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 55%, #000);
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 28%, #000);
    --ws-anim-accent: color-mix(in oklch, var(--theme-accent) 85%, #000);
    --ws-anim-opacity: 0.75;
    --ws-anim-blur: 65px;
}
.bg-grad-animated-primary-soft .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background:
        linear-gradient(135deg,
            var(--ws-anim-accent) 0%,
            var(--ws-anim-mid) 25%,
            var(--ws-anim-low) 50%,
            var(--ws-anim-mid) 75%,
            var(--ws-anim-accent) 100%);
    background-size: 400% 400%;
    opacity: var(--ws-anim-opacity);
    filter: blur(var(--ws-anim-blur));
    animation: websly-anim-grad-primary 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .bg-grad-animated-primary-soft .websly-fx-gradient-inner { animation: none; }
}

/* 🌊 Animated Brand Gradient — Extreme variant.
   Much lighter in light mode (near-white tint with whispers of primary) and
   much darker in dark mode (deep, almost-black with rich primary cores). */
.bg-grad-animated-primary-extreme {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 15%, #fff);
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 6%, #fff);
    --ws-anim-accent: color-mix(in oklch, var(--theme-accent) 45%, #fff);
    --ws-anim-opacity: 1;
    --ws-anim-blur: 90px;
}
.dark .bg-grad-animated-primary-extreme {
    --ws-anim-mid: color-mix(in oklch, var(--theme-accent) 30%, #000);
    --ws-anim-low: color-mix(in oklch, var(--theme-accent) 12%, #000);
    --ws-anim-accent: color-mix(in oklch, var(--theme-accent) 65%, #000);
    --ws-anim-opacity: 0.9;
    --ws-anim-blur: 75px;
}
.bg-grad-animated-primary-extreme .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background:
        linear-gradient(135deg,
            var(--ws-anim-accent) 0%,
            var(--ws-anim-mid) 25%,
            var(--ws-anim-low) 50%,
            var(--ws-anim-mid) 75%,
            var(--ws-anim-accent) 100%);
    background-size: 400% 400%;
    opacity: var(--ws-anim-opacity);
    filter: blur(var(--ws-anim-blur));
    animation: websly-anim-grad-primary 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .bg-grad-animated-primary-extreme .websly-fx-gradient-inner { animation: none; }
}

/* 💎 Premium Pro Gradients (Smooth & Modern) */

/* bg-pro-metromesh: High-energy brand mesh */
.bg-pro-metromesh .websly-fx-gradient-inner {
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--theme-accent) 60%, transparent) 0, transparent 45%),
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 50%, transparent) 0, transparent 45%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-accent) 30%, transparent) 0, transparent 60%),
        radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 50%, transparent) 0, transparent 45%),
        radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--theme-accent) 60%, transparent) 0, transparent 45%);
    opacity: 0.7;
    filter: blur(140px);
    animation: websly-mesh-drift 25s linear infinite;
}
.dark .bg-pro-metromesh .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-pro-liquid-silk: Ultra-smooth flowing gradient */
.bg-pro-liquid-silk .websly-fx-gradient-inner {
    position: absolute;
    inset: -100%;
    background: radial-gradient(circle at center, var(--theme-accent), var(--theme-secondary, var(--theme-accent)), var(--theme-accent), var(--theme-secondary, var(--theme-accent)));
    background-size: 200% 200%;
    opacity: 0.55;
    filter: blur(160px);
    animation: websly-liquid-flow 45s ease-in-out infinite alternate;
}
@keyframes websly-liquid-flow {
    0% { background-position: 0% 0%; transform: rotate(0deg) scale(1); }
    50% { background-position: 100% 100%; transform: rotate(15deg) scale(1.15); }
    100% { background-position: 0% 100%; transform: rotate(-15deg) scale(1); }
}
.dark .bg-pro-liquid-silk .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-pro-grainy-aura: Modern textured aura */
.bg-pro-grainy-aura .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: 
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--theme-accent) 40%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 40%, transparent) 0%, transparent 50%);
    opacity: 0.8;
    filter: blur(100px);
    animation: websly-drift-slow 20s ease-in-out infinite alternate;
}
.bg-pro-grainy-aura.websly-fx-container::before { content: ""; opacity: 0.4; mix-blend-mode: overlay; }
.dark .bg-pro-grainy-aura .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-pro-glass-vortex: Depth-focused rotating wash */
.bg-pro-glass-vortex .websly-fx-gradient-inner {
    position: absolute;
    inset: -60%;
    background: conic-gradient(from 0deg at 50% 50%, 
        var(--theme-accent) 0%, 
        transparent 25%, 
        var(--theme-secondary, var(--theme-accent)) 50%, 
        transparent 75%, 
        var(--theme-accent) 100%);
    opacity: 0.5;
    filter: blur(150px);
    animation: websly-aurora-spin 35s linear infinite;
}
.dark .bg-pro-glass-vortex .websly-fx-gradient-inner { opacity: 0.35; }

/* 💎 Premium Static Silks (Smooth & Clean) */

/* bg-pro-silk-static: Same dark level as Liquid Silk, but static */
.bg-pro-silk-static .websly-fx-gradient-inner {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at center, var(--theme-accent), var(--theme-secondary, var(--theme-accent)), var(--theme-accent));
    opacity: 0.55;
    filter: blur(160px);
}
.dark .bg-pro-silk-static .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-pro-silk-obsidian: Slightly darker silk */
.bg-pro-silk-obsidian .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 35% 35%, var(--theme-accent), transparent 70%),
                radial-gradient(circle at 65% 65%, var(--theme-secondary, var(--theme-accent)), transparent 70%);
    opacity: 0.45;
    filter: blur(140px);
}
.dark .bg-pro-silk-obsidian .websly-fx-gradient-inner { opacity: 0.25; }

/* bg-pro-silk-deep: Even darker/moodier silk */
.bg-pro-silk-deep .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--theme-accent) 60%, black), transparent 85%);
    opacity: 0.35;
    filter: blur(120px);
}
.dark .bg-pro-silk-deep .websly-fx-gradient-inner { opacity: 0.15; }

/* 💎 Ultra-Smooth: Ethereal Blob Engine (2026) */
.websly-fx-blobs {
    position: absolute;
    inset: -50%;
    filter: blur(120px);
    overflow: hidden;
    pointer-events: none;
}
.websly-fx-blob {
    position: absolute;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    animation: websly-blob-float 40s ease-in-out infinite alternate;
    opacity: 0.8;
}
.dark .websly-fx-blob { opacity: 0.5; }

@keyframes websly-blob-float {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(15%, 10%) scale(1.2) rotate(120deg); }
    66% { transform: translate(-10%, 20%) scale(0.9) rotate(240deg); }
    100% { transform: translate(5%, -5%) scale(1.1) rotate(360deg); }
}

/* Base Blob Assignments */
.bg-ultra-fluidity .blob-1 { top: 0%; left: 0%; background: radial-gradient(circle, var(--theme-accent) 0%, transparent 70%); animation-delay: 0s; }
.bg-ultra-fluidity .blob-2 { top: 0%; right: 0%; background: radial-gradient(circle, var(--theme-secondary, var(--theme-accent)) 0%, transparent 70%); animation-delay: -10s; }
.bg-ultra-fluidity .blob-3 { bottom: 0%; left: 0%; background: radial-gradient(circle, var(--theme-accent-weak, var(--theme-accent)) 0%, transparent 70%); animation-delay: -20s; }
.bg-ultra-fluidity .blob-4 { bottom: 0%; right: 0%; background: radial-gradient(circle, var(--theme-secondary, var(--theme-accent)) 0%, transparent 70%); animation-delay: -30s; }

.bg-ultra-aurora .blob-1 { top: -20%; left: 10%; width: 30%; height: 120%; background: radial-gradient(ellipse at center, var(--theme-accent) 0%, transparent 80%); animation: websly-blob-sway 25s ease-in-out infinite alternate; }
.bg-ultra-aurora .blob-2 { top: -10%; left: 40%; width: 25%; height: 110%; background: radial-gradient(ellipse at center, var(--theme-secondary, var(--theme-accent)) 0%, transparent 80%); animation: websly-blob-sway 30s ease-in-out infinite alternate; animation-delay: -5s; }
.bg-ultra-aurora .blob-3 { top: -20%; left: 70%; width: 30%; height: 120%; background: radial-gradient(ellipse at center, var(--theme-accent) 0%, transparent 80%); animation: websly-blob-sway 28s ease-in-out infinite alternate; animation-delay: -12s; }
.bg-ultra-aurora .blob-4, .bg-ultra-aurora .blob-5 { display: none; }

@keyframes websly-blob-sway {
    0% { transform: translateX(-10%) rotate(-5deg); }
    100% { transform: translateX(10%) rotate(5deg); }
}

.bg-ultra-midnight .blob-1 { top: 20%; left: 20%; background: radial-gradient(circle, var(--theme-accent) 0%, transparent 60%); animation-duration: 50s; }
.bg-ultra-midnight .blob-2 { bottom: 20%; right: 20%; background: radial-gradient(circle, var(--theme-secondary, var(--theme-accent)) 0%, transparent 60%); animation-delay: -25s; animation-duration: 45s; }
.bg-ultra-midnight .blob-3, .bg-ultra-midnight .blob-4, .bg-ultra-midnight .blob-5 { display: none; }

.bg-ultra-vibrant .blob-1 { top: 10%; left: 10%; background: radial-gradient(circle, #ff0080 0%, transparent 70%); }
.bg-ultra-vibrant .blob-2 { top: 10%; right: 10%; background: radial-gradient(circle, #00d2ff 0%, transparent 70%); }
.bg-ultra-vibrant .blob-3 { bottom: 10%; left: 10%; background: radial-gradient(circle, #ffcc00 0%, transparent 70%); }
.bg-ultra-vibrant .blob-4 { bottom: 10%; right: 10%; background: radial-gradient(circle, #7d2ae8 0%, transparent 70%); }
.bg-ultra-vibrant .blob-5 { top: 50%; left: 50%; width: 40%; height: 40%; background: radial-gradient(circle, var(--theme-accent) 0%, transparent 70%); transform: translate(-50%, -50%); }

.bg-ultra-minimal .blob-1 { top: 50%; left: 50%; width: 80%; height: 80%; background: radial-gradient(circle, var(--theme-accent) 0%, transparent 70%); transform: translate(-50%, -50%); animation: websly-blob-orbit 60s linear infinite; }
.bg-ultra-minimal .blob-2, .bg-ultra-minimal .blob-3, .bg-ultra-minimal .blob-4, .bg-ultra-minimal .blob-5 { display: none; }

@keyframes websly-blob-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(10%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(10%) rotate(-360deg); }
}

/* Scoped effects */
.websly-fx-container.websly-fx-scoped {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5;
}

[data-bg-effect] {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

[data-bg-effect]>*:not(.websly-fx-container) {
    position: relative;
    z-index: 20;
}

[data-bg-effect] .absolute.inset-0.z-0 {
    z-index: 1 !important;
}

#websly-page-wrapper {
    position: relative;
    z-index: 1;
}

#websly-page-wrapper > *, .websly-page-content > * {
    position: relative;
    z-index: 2;
}

#navbar-island-wrapper, #mobile-nav {
    z-index: 100 !important;
}

.websly-fx-container.active {
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════ */
/* 0. TEST BACKGROUND */
/* ════════════════════════════════════════════════════════════════════════ */
.bg-test .websly-fx-test-inner {
    position: absolute;
    inset: 0;
    background-color: red !important;
    opacity: 1 !important;
}
html.dark .bg-test .websly-fx-test-inner {
    background-color: navy !important;
}

/* 1. MIDNIGHT MESH FLUX (Preserved Original) */
/* ════════════════════════════════════════════════════════════════════════ */
.midnight-mesh-flux .websly-fx-mesh-inner,
.websly-bg-midnight-mesh-flux .websly-fx-mesh-inner {
    position: absolute;
    top: -75%;
    left: -75%;
    width: 250%;
    height: 250%;
    opacity: 0.5;
    filter: blur(200px) saturate(1.2);
    background:
        radial-gradient(circle at 50% 50%, var(--theme-accent) 0%, transparent 70%),
        radial-gradient(circle at 20% 40%, var(--theme-surface) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, var(--theme-accent) 0%, transparent 70%);
    background-blend-mode: screen;
    transform: translate(0, 0);
    animation: websly-mesh-drift 32s linear infinite;
    will-change: transform;
}

@keyframes websly-mesh-drift {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(0, 0) rotate(360deg); }
}

html:not(.dark) .midnight-mesh-flux .websly-fx-mesh-inner {
    opacity: 0.45;
    background-blend-mode: overlay;
    filter: blur(120px);
}

.dark .midnight-mesh-flux .websly-fx-mesh-inner {
    opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 2. GRADIENTS */
/* ════════════════════════════════════════════════════════════════════════ */

/* bg-gradient-subtle */
.bg-gradient-subtle .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at top right, var(--theme-accent) 0%, transparent 60%),
                radial-gradient(ellipse at bottom left, var(--theme-secondary, var(--theme-accent)) 0%, transparent 60%);
    opacity: 0.45;
    filter: blur(100px);
}

.dark .bg-gradient-subtle .websly-fx-gradient-inner {
    opacity: 0.15;
}

/* bg-gradient-dynamic */
.bg-gradient-dynamic .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 80%, var(--theme-accent) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, var(--theme-secondary, var(--theme-accent)) 0%, transparent 50%);
    opacity: 0.5;
    filter: blur(120px);
    animation: websly-drift-slow 20s ease-in-out infinite alternate;
}

.dark .bg-gradient-dynamic .websly-fx-gradient-inner {
    opacity: 0.25;
}

@keyframes websly-drift-slow {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(2%, 4%); }
}

/* bg-gradient-extreme: Maximum Fluidity Engineering */
.bg-gradient-extreme .websly-fx-gradient-inner {
    position: absolute;
    inset: -50%;
    background: linear-gradient(135deg, 
        #FFFFFF 0%, 
        color-mix(in srgb, var(--theme-surface) 20%, #FFF) 10%,
        var(--theme-surface) 35%, 
        color-mix(in srgb, var(--theme-surface) 50%, var(--theme-accent)) 55%,
        var(--theme-accent) 80%,
        color-mix(in srgb, var(--theme-accent) 70%, #000) 95%,
        #000 100%);
    opacity: 0.6;
    filter: blur(140px); /* Quadrupled blur for perfect smoothness */
}

.dark .bg-gradient-extreme .websly-fx-gradient-inner {
    background: linear-gradient(135deg, 
        #000000 0%, 
        color-mix(in srgb, var(--theme-bg) 15%, #000) 10%,
        var(--theme-bg) 40%, 
        color-mix(in srgb, var(--theme-bg) 60%, var(--theme-accent)) 65%,
        var(--theme-accent) 85%,
        color-mix(in srgb, var(--theme-accent) 85%, #000) 100%);
    opacity: 0.8;
    filter: blur(180px); /* Massive diffusion to kill banding */
}

/* bg-gradient-sunset */
.bg-gradient-sunset .websly-fx-gradient-inner {
    background: linear-gradient(to right, var(--theme-accent), var(--theme-secondary, var(--theme-accent)), var(--theme-tertiary, var(--theme-accent)));
    opacity: 0.55;
    filter: blur(100px);
}
.dark .bg-gradient-sunset .websly-fx-gradient-inner { opacity: 0.25; }

/* bg-gradient-ocean */
.bg-gradient-ocean .websly-fx-gradient-inner {
    background: linear-gradient(to bottom, #7DD3FC, #0EA5E9, #0369A1);
    opacity: 0.45;
    filter: blur(120px);
}
.dark .bg-gradient-ocean .websly-fx-gradient-inner { opacity: 0.22; }

/* bg-gradient-forest */
.bg-gradient-forest .websly-fx-gradient-inner {
    background: linear-gradient(135deg, #86EFAC, #22C55E, #15803D);
    opacity: 0.45;
    filter: blur(100px);
}
.dark .bg-gradient-forest .websly-fx-gradient-inner { opacity: 0.2; }

/* bg-gradient-royal */
.bg-gradient-royal .websly-fx-gradient-inner {
    background: linear-gradient(to right, #D8B4FE, #A855F7, #7E22CE);
    opacity: 0.5;
    filter: blur(110px);
}
.dark .bg-gradient-royal .websly-fx-gradient-inner { opacity: 0.25; }

/* bg-gradient-midnight */
.bg-gradient-midnight .websly-fx-gradient-inner {
    background: linear-gradient(to top, #1E293B, #0F172A);
    opacity: 0.6;
    filter: blur(80px);
}
.dark .bg-gradient-midnight .websly-fx-gradient-inner { opacity: 0.7; }

/* bg-gradient-cyber */
.bg-gradient-cyber .websly-fx-gradient-inner {
    background: linear-gradient(45deg, var(--theme-accent), #0F172A);
    opacity: 0.5;
    filter: blur(90px);
}
.dark .bg-gradient-cyber .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-gradient-nebula */
.bg-gradient-nebula .websly-fx-gradient-inner {
    background: linear-gradient(135deg, var(--theme-secondary, var(--theme-accent)), var(--theme-tertiary, var(--theme-accent)));
    opacity: 0.55;
    filter: blur(130px);
}
.dark .bg-gradient-nebula .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-gradient-rising: Bottom-Up Flow */
.bg-gradient-rising .websly-fx-gradient-inner {
    background: linear-gradient(to top, var(--theme-accent) 0%, transparent 80%);
    opacity: 0.45;
    filter: blur(80px);
}
.dark .bg-gradient-rising .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-gradient-falling: Top-Down Descent */
.bg-gradient-falling .websly-fx-gradient-inner {
    background: linear-gradient(to bottom, var(--theme-accent) 0%, transparent 80%);
    opacity: 0.45;
    filter: blur(80px);
}
.dark .bg-gradient-falling .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-gradient-diagonal: Angular Impact (135deg) */
.bg-gradient-diagonal .websly-fx-gradient-inner {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-secondary, var(--theme-accent)) 100%);
    opacity: 0.4;
    filter: blur(100px);
}
.dark .bg-gradient-diagonal .websly-fx-gradient-inner { opacity: 0.45; }

/* bg-gradient-beam: Center Zenith Beam */
.bg-gradient-beam .websly-fx-gradient-inner {
    background: radial-gradient(ellipse at top center, var(--theme-accent) 0%, transparent 70%);
    opacity: 0.55;
    filter: blur(90px);
}
.dark .bg-gradient-beam .websly-fx-gradient-inner { opacity: 0.6; }

/* bg-gradient-mellow: Mellow Secondary Wash */
.bg-gradient-mellow .websly-fx-gradient-inner {
    background: linear-gradient(to right, var(--theme-secondary, var(--theme-accent)) 0%, transparent 100%);
    opacity: 0.45;
    filter: blur(120px);
}
.dark .bg-gradient-mellow .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-gradient-triple: Tri-Color Harmony */
.bg-gradient-triple .websly-fx-gradient-inner {
    background: linear-gradient(to right, var(--theme-accent), var(--theme-secondary, var(--theme-accent)), var(--theme-tertiary, var(--theme-accent)));
    opacity: 0.5;
    filter: blur(110px);
}
.dark .bg-gradient-triple .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-gradient-auric: Auric Soft Glow (Radial Pulse) */
.bg-gradient-auric .websly-fx-gradient-inner {
    background: radial-gradient(circle at center, var(--theme-accent) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(130px);
}
.dark .bg-gradient-auric .websly-fx-gradient-inner { opacity: 0.6; }

/* 🌟 Collection 5.2: Stunning Simple Gradients */

/* bg-gradient-mesh-aura: Soft, ethereal mesh using brand palette */
.bg-gradient-mesh-aura .websly-fx-gradient-inner {
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--theme-accent) 40%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 35%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-surface) 20%, transparent) 0%, transparent 80%);
    opacity: 0.45;
    filter: blur(140px);
    animation: websly-mesh-drift 40s linear infinite;
}
.dark .bg-gradient-mesh-aura .websly-fx-gradient-inner { opacity: 0.3; }

/* bg-gradient-indigo-flux: Deep indigo-to-accent flux transition */
.bg-gradient-indigo-flux .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: 
        radial-gradient(circle at 0% 0%, #4F46E5 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, var(--theme-accent) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #1E1B4B 0%, transparent 100%);
    opacity: 0.35;
    filter: blur(120px) saturate(1.2);
    animation: websly-drift-slow 25s ease-in-out infinite alternate;
}
.dark .bg-gradient-indigo-flux .websly-fx-gradient-inner { opacity: 0.45; }

/* bg-gradient-frosted-glass: Clean, high-contrast atmospheric glow */
.bg-gradient-frosted-glass .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: 
        linear-gradient(135deg, 
            color-mix(in srgb, var(--theme-accent) 15%, transparent) 0%, 
            transparent 50%, 
            color-mix(in srgb, var(--theme-surface) 10%, transparent) 100%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(90px);
}
.dark .bg-gradient-frosted-glass .websly-fx-gradient-inner { 
    opacity: 0.3;
    background: 
        linear-gradient(135deg, 
            color-mix(in srgb, var(--theme-accent) 10%, transparent) 0%, 
            transparent 50%, 
            rgba(0,0,0,0.2) 100%);
}

/* bg-gradient-magic-night: Deep mesh with vibrant orbital nodes */
.bg-gradient-magic-night .websly-fx-gradient-inner {
    position: absolute;
    inset: -40%;
    background: 
        radial-gradient(circle at 20% 20%, #4F46E5 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, #7C3AED 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, #0F172A 0%, transparent 100%);
    opacity: 0.6;
    filter: blur(140px);
    animation: websly-aurora-spin 60s linear infinite;
}
.dark .bg-gradient-magic-night .websly-fx-gradient-inner { opacity: 0.8; }

/* bg-gradient-cyberpunk-neon: High-energy pink and cyan flux */
.bg-gradient-cyberpunk-neon .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: 
        radial-gradient(circle at 10% 90%, #FF007F 0%, transparent 50%),
        radial-gradient(circle at 90% 10%, #00F3FF 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #121212 0%, transparent 100%);
    opacity: 0.25;
    filter: blur(100px) saturate(1.5);
    animation: websly-drift-slow 20s ease-in-out infinite alternate;
}
.dark .bg-gradient-cyberpunk-neon .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-gradient-pastel-dream: Soft, creamy aura for light-mode elegance */
.bg-gradient-pastel-dream .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: 
        radial-gradient(circle at 30% 30%, #FFEDD5 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, #CCFBF1 0%, transparent 60%),
        radial-gradient(circle at 50% 90%, #FDF2F8 0%, transparent 60%);
    opacity: 0.8;
    filter: blur(120px);
}
.dark .bg-gradient-pastel-dream .websly-fx-gradient-inner {
    opacity: 0.2;
    background: 
        radial-gradient(circle at 30% 30%, #431407 0%, transparent 60%),
        radial-gradient(circle at 70% 60%, #064E3B 0%, transparent 60%);
}

/* bg-gradient-magic-nebula: Vibrant cosmic mesh with high-blur nodes */
.bg-gradient-magic-nebula .websly-fx-gradient-inner {
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 20% 40%, #7E22CE 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, #2DD4BF 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, #4F46E5 0%, transparent 50%);
    opacity: 0.35;
    filter: blur(130px);
    animation: websly-aurora-spin 45s linear infinite;
}
.dark .bg-gradient-magic-nebula .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-gradient-golden-hour: Cinematic solar wash with gold and amber nodes */
.bg-gradient-golden-hour .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background: 
        radial-gradient(ellipse at top right, #FDE68A 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, #F59E0B 0%, transparent 50%),
        radial-gradient(circle at center, #FEF3C7 0%, transparent 80%);
    opacity: 0.4;
    filter: blur(100px);
}
.dark .bg-gradient-golden-hour .websly-fx-gradient-inner { 
    opacity: 0.2;
    background: radial-gradient(circle at center, #92400E 0%, transparent 90%);
}

/* bg-gradient-emerald-sea: Deep oceanic mesh with emerald and deep cyan tones */
.bg-gradient-emerald-sea .websly-fx-gradient-inner {
    position: absolute;
    inset: -40%;
    background: 
        radial-gradient(circle at 10% 20%, #059669 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, #0891B2 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, #065F46 0%, transparent 50%);
    opacity: 0.45;
    filter: blur(120px);
    animation: websly-drift-slow 35s ease-in-out infinite alternate;
}
.dark .bg-gradient-emerald-sea .websly-fx-gradient-inner { opacity: 0.3; }

/* 🌟 Collection 5.3: Advanced Brand-Adaptive Atmosphere */

/* bg-grad-cosmic-drift: Animated primary/secondary mesh */
.bg-grad-cosmic-drift .websly-fx-gradient-inner {
    position: absolute;
    inset: -50%;
    background: 
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--theme-accent) 35%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 30%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--theme-accent) 20%, transparent) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(130px);
    animation: websly-mesh-drift 45s linear infinite;
}
.dark .bg-grad-cosmic-drift .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-grad-auric-spotlight: Cinematic top-center brand glow */
.bg-grad-auric-spotlight .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--theme-accent) 45%, transparent) 0%, transparent 80%);
    opacity: 0.6;
    filter: blur(100px);
}
.dark .bg-grad-auric-spotlight .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-grad-oceanic-mist: Soft branding wash from bottom */
.bg-grad-oceanic-mist .websly-fx-gradient-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(80px);
}
.dark .bg-grad-oceanic-mist .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-grad-geometric-clash: Linear brand-color division */
.bg-grad-geometric-clash .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-accent) 20%, transparent) 0%, 
        transparent 50%, 
        color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 15%, transparent) 100%);
    opacity: 0.4;
    filter: blur(110px);
}
.dark .bg-grad-geometric-clash .websly-fx-gradient-inner { opacity: 0.3; }

/* bg-grad-radial-brand: Pulsing center branding circle */
.bg-grad-radial-brand .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--theme-accent) 40%, transparent) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(120px);
    animation: websly-drift-slow 15s ease-in-out infinite alternate;
}
.dark .bg-grad-radial-brand .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-grad-horizon-bloom: Cinematic horizontal brand wash */
.bg-grad-horizon-bloom .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--theme-accent) 30%, transparent) 0%, transparent 100%);
    transform: scaleX(2.5);
    opacity: 0.5;
    filter: blur(100px);
}
.dark .bg-grad-horizon-bloom .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-grad-split-complement: Tri-color brand harmony */
.bg-grad-split-complement .websly-fx-gradient-inner {
    position: absolute;
    inset: -40%;
    background: 
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 20%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-tertiary, var(--theme-accent)) 15%, transparent) 0%, transparent 80%);
    opacity: 0.5;
    filter: blur(140px);
    animation: websly-mesh-drift 50s linear infinite reverse;
}
.dark .bg-grad-split-complement .websly-fx-gradient-inner { opacity: 0.3; }

/* bg-grad-duo-flow: Side-to-side animated wave blend */
.bg-grad-duo-flow .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background: linear-gradient(to right, 
        color-mix(in srgb, var(--theme-accent) 30%, transparent), 
        color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 30%, transparent));
    opacity: 0.4;
    filter: blur(120px);
    background-size: 200% 200%;
    animation: websly-aurora-spin 40s linear infinite;
}
.dark .bg-grad-duo-flow .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-grad-corner-flare: Intense branding glow from top-left */
.bg-grad-corner-flare .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-accent) 50%, transparent) 0%, transparent 70%);
    opacity: 0.6;
    filter: blur(90px);
}
.dark .bg-grad-corner-flare .websly-fx-gradient-inner { opacity: 0.5; }

/* bg-grad-soft-wash: Ultra-minimal brand haze */
.bg-grad-soft-wash .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--theme-accent) 15%, transparent) 0%, transparent 100%);
    opacity: 0.7;
    filter: blur(150px);
}
.dark .bg-grad-soft-wash .websly-fx-gradient-inner { opacity: 0.3; }
均衡,StartLine:378,TargetContent:

/* ════════════════════════════════════════════════════════════════════════ */
/* 2B. SEMANTIC THEME-ADAPTIVE GRADIENTS (5.1)                           */
/* ════════════════════════════════════════════════════════════════════════ */

/* bg-gradient-accent-wash: Soft diagonal accent glow — breathes brand colour */
.bg-gradient-accent-wash .websly-fx-gradient-inner {
    position: absolute;
    inset: -15%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%,
        transparent 45%,
        color-mix(in srgb, var(--theme-accent) 15%, transparent) 100%);
    opacity: 0.5;
    filter: blur(80px);
}
.dark .bg-gradient-accent-wash .websly-fx-gradient-inner { opacity: 0.35; }

/* bg-gradient-brand-duo: Primary→Secondary horizontal blend */
.bg-gradient-brand-duo .websly-fx-gradient-inner {
    position: absolute;
    inset: -20%;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--theme-accent) 30%, transparent) 0%,
        transparent 40%,
        color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 25%, transparent) 100%);
    opacity: 0.45;
    filter: blur(100px);
    animation: websly-drift-slow 25s ease-in-out infinite alternate;
}
.dark .bg-gradient-brand-duo .websly-fx-gradient-inner { opacity: 0.3; }

/* bg-gradient-radiant: Radial accent pulse from center — cinematic spotlight */
.bg-gradient-radiant .websly-fx-gradient-inner {
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at 50% 40%,
        color-mix(in srgb, var(--theme-accent) 35%, transparent) 0%,
        color-mix(in srgb, var(--theme-accent) 10%, transparent) 40%,
        transparent 70%);
    opacity: 0.5;
    filter: blur(60px);
}
.dark .bg-gradient-radiant .websly-fx-gradient-inner { opacity: 0.4; }

/* bg-gradient-twilight: Dark base fading to accent horizon — moody depth */
.bg-gradient-twilight .websly-fx-gradient-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--theme-accent) 20%, var(--bg-base, #0D0D12)) 0%,
        transparent 60%),
        linear-gradient(to bottom,
        color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 10%, transparent) 0%,
        transparent 40%);
    opacity: 0.6;
}
.dark .bg-gradient-twilight .websly-fx-gradient-inner { opacity: 0.8; }

/* bg-gradient-prismatic: Animated tri-colour sweep — vibrant and alive */
.bg-gradient-prismatic .websly-fx-gradient-inner {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--theme-accent) 30%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 25%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--theme-tertiary, var(--theme-accent)) 15%, transparent) 0%, transparent 60%);
    opacity: 0.5;
    filter: blur(100px);
    animation: websly-aurora-spin 35s linear infinite;
}
.dark .bg-gradient-prismatic .websly-fx-gradient-inner { opacity: 0.35; }

/* ════════════════════════════════════════════════════════════════════════ */
/* 3. AURORAS */
/* ════════════════════════════════════════════════════════════════════════ */

/* bg-aurora-soft */
.bg-aurora-soft .websly-fx-aurora-inner {
    position: absolute;
    inset: -30%;
    background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, var(--theme-accent) 90deg, transparent 180deg);
    opacity: 0.15;
    filter: blur(140px);
    animation: websly-aurora-spin 40s linear infinite;
    border-radius: 50%;
}

.dark .bg-aurora-soft .websly-fx-aurora-inner {
    opacity: 0.25;
}

/* bg-aurora-vibrant */
.bg-aurora-vibrant .websly-fx-aurora-inner {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 50%, var(--theme-accent) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, var(--theme-secondary, var(--theme-accent)) 0%, transparent 50%);
    opacity: 0.3;
    filter: blur(100px);
    animation: websly-aurora-spin 25s linear infinite reverse;
}

.dark .bg-aurora-vibrant .websly-fx-aurora-inner {
    opacity: 0.45;
}

@keyframes websly-aurora-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 4. INTERACTIVE */
/* ════════════════════════════════════════════════════════════════════════ */

/* bg-interactive-glow */
.bg-interactive-glow .websly-fx-interactive-inner {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        var(--theme-accent) 0%,
        transparent 80%
    );
    opacity: 0.12;
    transition: background 0.1s ease-out;
}

.dark .bg-interactive-glow .websly-fx-interactive-inner {
    opacity: 0.2;
}

/* bg-interactive-mesh */
.bg-interactive-mesh .websly-fx-interactive-inner {
    position: absolute;
    inset: -20%;
    background: 
        radial-gradient(
            800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            var(--theme-accent) 0%,
            transparent 70%
        ),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 11px);
    opacity: 0.25;
    filter: blur(2px);
    transition: background 0.15s ease-out;
}

.dark .bg-interactive-mesh .websly-fx-interactive-inner {
    background: 
        radial-gradient(
            800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            var(--theme-accent) 0%,
            transparent 70%
        ),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 11px);
    opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 5. GRADIENT FAMILY (4.0 Unified Architecture) */
/* ════════════════════════════════════════════════════════════════════════ */
.bg-gradient-family .websly-fx-gradient-inner {
    position: absolute;
    inset: 0;
    
    /* Variable Mapping (Default to Light) */
    --ws-grad-c1: var(--ws-grad-c1-light, transparent);
    --ws-grad-c2: var(--ws-grad-c2-light, transparent);
    --ws-grad-c3: var(--ws-grad-c3-light, transparent);
    --ws-grad-c4: var(--ws-grad-c4-light, transparent);
    --ws-grad-c5: var(--ws-grad-c5-light, transparent);
    --ws-grad-s1: var(--ws-grad-s1-light, 0%);
    --ws-grad-s2: var(--ws-grad-s2-light, 50%);
    --ws-grad-s3: var(--ws-grad-s3-light, 100%);
    --ws-grad-s4: var(--ws-grad-s4-light, 100%);
    --ws-grad-s5: var(--ws-grad-s5-light, 100%);

    /* Universal 5-stop engine */
    background: linear-gradient(
        var(--ws-grad-dir, 135deg),
        var(--ws-grad-c1) var(--ws-grad-s1),
        var(--ws-grad-c2) var(--ws-grad-s2),
        var(--ws-grad-c3) var(--ws-grad-s3),
        var(--ws-grad-c4) var(--ws-grad-s4),
        var(--ws-grad-c5) var(--ws-grad-s5)
    );
    opacity: 0.6;
    transition: opacity 0.3s ease, background 0.5s ease;
}

.dark .bg-gradient-family .websly-fx-gradient-inner {
    /* Variable Mapping (Dark overrides) */
    --ws-grad-c1: var(--ws-grad-c1-dark, transparent);
    --ws-grad-c2: var(--ws-grad-c2-dark, transparent);
    --ws-grad-c3: var(--ws-grad-c3-dark, transparent);
    --ws-grad-c4: var(--ws-grad-c4-dark, transparent);
    --ws-grad-c5: var(--ws-grad-c5-dark, transparent);
    --ws-grad-s1: var(--ws-grad-s1-dark, 0%);
    --ws-grad-s2: var(--ws-grad-s2-dark, 50%);
    --ws-grad-s3: var(--ws-grad-s3-dark, 100%);
    --ws-grad-s4: var(--ws-grad-s4-dark, 100%);
    --ws-grad-s5: var(--ws-grad-s5-dark, 100%);

    opacity: 0.8;
}

/* Smooth Mode (primary) — 3-stop linear. Overrides the 5-stop classic base above
   when body.ws-grad-mode-smooth is set (higher specificity via the extra class). */
.ws-grad-mode-smooth .bg-gradient-family .websly-fx-gradient-inner {
    background: linear-gradient(
        var(--ws-grad-dir, 135deg),
        var(--ws-grad-c1) var(--ws-grad-s1),
        var(--ws-grad-c2) var(--ws-grad-s2),
        var(--ws-grad-c3) var(--ws-grad-s3)
    );
    opacity: 0.95;
}
.dark .ws-grad-mode-smooth .bg-gradient-family .websly-fx-gradient-inner {
    opacity: 0.95;
}

/* Smooth Mode + Radial — body.ws-grad-radial only emits when mode is Smooth. */
.ws-grad-mode-smooth.ws-grad-radial .bg-gradient-family .websly-fx-gradient-inner {
    background: radial-gradient(
        circle at center,
        var(--ws-grad-c1) var(--ws-grad-s1),
        var(--ws-grad-c2) var(--ws-grad-s2),
        var(--ws-grad-c3) var(--ws-grad-s3)
    );
}

/* Noise overlay — body.ws-grad-noise injects an SVG turbulence layer over the gradient.
   The SVG is base64-encoded so it works without an HTTP request. Intensity is driven by
   --ws-grad-noise-opacity (computed in header.php from the 0–200 slider). */
.ws-grad-noise.bg-gradient-family .websly-fx-gradient-inner::after,
.ws-grad-noise .bg-gradient-family .websly-fx-gradient-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: var(--ws-grad-noise-opacity, 0);
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 6. VIRTUAL ICON BEHAVIORS */
/* ════════════════════════════════════════════════════════════════════════ */

/* ws-icon-bounce: Magnetic bounce on hover */
.ws-icon-bounce {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group:hover .ws-icon-bounce,
.ws-icon-bounce:hover {
    transform: translateY(-15%) scale(1.1);
}

/* ws-icon-color-shift: Semantic color swap on hover */
.ws-icon-color-shift {
    transition: filter 0.4s ease;
}
.group:hover .ws-icon-color-shift,
.ws-icon-color-shift:hover {
    filter: invert(0.2) sepia(1) saturate(5) hue-rotate(180deg); /* Crude but effective virtual shift */
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 7. SOLID / PROFESSIONAL BACKGROUNDS (v5.1)                             */
/* ════════════════════════════════════════════════════════════════════════ */

/* bg-solid-paper: Pure, high-contrast professional canvas */
.bg-solid-paper .websly-fx-paper-inner {
    position: absolute;
    inset: 0;
    background-color: #FDFBF7;
    opacity: 1;
}
html.dark .bg-solid-paper .websly-fx-paper-inner {
    background-color: #0D0D12;
}

/* bg-solid-slate: Sophisticated neutral dark for corporate depth */
.bg-solid-slate .websly-fx-slate-inner {
    position: absolute;
    inset: 0;
    background-color: #1E293B;
    opacity: 1;
}
html.dark .bg-solid-slate .websly-fx-slate-inner {
    background-color: #0F172A;
}

/* bg-solid-theme-primary: Dynamic brand-matched solid flood */
.bg-solid-theme-primary .websly-fx-primary-inner {
    position: absolute;
    inset: 0;
    background-color: var(--theme-accent);
    opacity: 1;
}

/* bg-solid-theme-secondary: Dynamic secondary brand flood */
.bg-solid-theme-secondary .websly-fx-secondary-inner {
    position: absolute;
    inset: 0;
    background-color: var(--theme-secondary, var(--theme-accent));
    opacity: 1;
}

/* bg-effect-accent-wash: Soft, cinematic branding glow */
.bg-effect-accent-wash .websly-fx-wash-inner {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 70% 30%, 
        color-mix(in srgb, var(--theme-accent) 25%, transparent) 0%, 
        transparent 60%),
        radial-gradient(circle at 20% 80%, 
        color-mix(in srgb, var(--theme-secondary, var(--theme-accent)) 15%, transparent) 0%, 
        transparent 60%);
    opacity: 0.6;
    filter: blur(120px);
    animation: websly-drift-slow 30s ease-in-out infinite alternate;
}
html.dark .bg-effect-accent-wash .websly-fx-wash-inner {
    opacity: 0.35;
}