/**
 * 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: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
}

/* 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.35;
    filter: blur(200px) saturate(1.1);
    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.25;
    background-blend-mode: overlay;
    filter: blur(120px);
}

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

/* ════════════════════════════════════════════════════════════════════════ */
/* 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-surface) 0%, transparent 60%);
    opacity: 0.15;
    filter: blur(100px);
}

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

/* 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.2;
    filter: blur(120px);
    animation: websly-drift-slow 20s ease-in-out infinite alternate;
}

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

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

/* bg-gradient-extreme */
.bg-gradient-extreme .websly-fx-gradient-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FFFFFF 0%, var(--theme-surface) 50%, var(--theme-accent) 100%);
    opacity: 0.6;
}

.dark .bg-gradient-extreme .websly-fx-gradient-inner {
    background: linear-gradient(135deg, #000000 0%, var(--theme-bg) 50%, var(--theme-accent) 100%);
    opacity: 0.8;
}

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

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

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

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

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

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

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

/* ════════════════════════════════════════════════════════════════════════ */
/* 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;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* 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 */
}