/* ============================================
   Unified Cursor-Responsive Background System
   Premium, minimal, GPU-friendly
   Single implementation for light/dark modes
   ============================================ */

/* ============================================
   Theme Variables (single source of truth)
   ============================================ */
:root {
    /* Cursor position - updated by JS */
    --cursor-x: 50%;
    --cursor-y: 50%;
    --cursor-opacity: 0;
    --glow-size: 600px;

    /* Dark mode colors (default) */
    --bg-base: #020617;
    --bg-gradient-1: rgba(6, 182, 212, 0.03);
    --bg-gradient-2: rgba(59, 130, 246, 0.025);
    --bg-gradient-3: rgba(139, 92, 246, 0.02);

    /* Cursor glow - uses relative luminance */
    --glow-color-inner: rgba(255, 255, 255, 0.06);
    --glow-color-mid: rgba(255, 255, 255, 0.025);
    --glow-color-outer: rgba(255, 255, 255, 0.01);

    /* Noise overlay */
    --noise-opacity: 0.015;

    /* Toggle button */
    --toggle-bg: rgba(255, 255, 255, 0.05);
    --toggle-bg-hover: rgba(255, 255, 255, 0.1);
    --toggle-color: var(--color-slate-400, #94a3b8);
    --toggle-color-hover: var(--color-slate-200, #e2e8f0);
}

/* Light mode overrides - variables only */
html:not(.dark) {
    --bg-base: #f8fafc;
    --bg-gradient-1: rgba(6, 182, 212, 0.04);
    --bg-gradient-2: rgba(59, 130, 246, 0.03);
    --bg-gradient-3: rgba(139, 92, 246, 0.025);

    /* Cursor darkens in light mode (relative luminance) */
    --glow-color-inner: rgba(0, 0, 0, 0.04);
    --glow-color-mid: rgba(0, 0, 0, 0.02);
    --glow-color-outer: rgba(0, 0, 0, 0.008);

    --noise-opacity: 0.02;

    --toggle-bg: rgba(0, 0, 0, 0.05);
    --toggle-bg-hover: rgba(0, 0, 0, 0.08);
    --toggle-color: var(--color-slate-500, #64748b);
    --toggle-color-hover: var(--color-slate-700, #334155);
}

/* ============================================
   Background Layer (unified structure)
   ============================================ */
.global-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;

    /* Single background definition using variables */
    background:
        radial-gradient(ellipse 80% 50% at 20% 20%, var(--bg-gradient-1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, var(--bg-gradient-2) 0%, transparent 45%),
        radial-gradient(ellipse 70% 50% at 50% 80%, var(--bg-gradient-3) 0%, transparent 50%),
        var(--bg-base);

    transition: background 0.3s ease;
}

/* ============================================
   Cursor Glow Layer (unified)
   ============================================ */
.cursor-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: background;
    transition: opacity 0.4s ease-out;
    opacity: var(--cursor-opacity);

    /* Unified radial glow using relative luminance variables */
    background: radial-gradient(var(--glow-size) circle at var(--cursor-x) var(--cursor-y),
            var(--glow-color-inner) 0%,
            var(--glow-color-mid) 35%,
            var(--glow-color-outer) 60%,
            transparent 100%);
}

/* ============================================
   Subtle Noise Texture Overlay
   ============================================ */
.noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--noise-opacity);
    mix-blend-mode: overlay;

    /* Inline SVG noise */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .cursor-glow {
        opacity: 0 !important;
        display: none;
    }

    .global-background {
        background: var(--bg-base);
    }
}

/* ============================================
   Mobile: Disable cursor effect
   ============================================ */
@media (hover: none),
(max-width: 768px) {
    .cursor-glow {
        opacity: 0 !important;
        display: none;
    }
}

/* ============================================
   Background Disabled State
   ============================================ */
.global-background.effects-disabled .cursor-glow,
.global-background.effects-disabled .noise-overlay {
    opacity: 0 !important;
    display: none;
}

/* ============================================
   Effects Toggle Button (unified)
   ============================================ */
.effects-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--toggle-bg);
    color: var(--toggle-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.effects-toggle:hover {
    background: var(--toggle-bg-hover);
    color: var(--toggle-color-hover);
}

.effects-toggle.active {
    color: var(--color-primary-400, #22d3ee);
}

.effects-toggle:focus-visible {
    outline: 2px solid var(--color-primary-400, #22d3ee);
    outline-offset: 2px;
}