/* =================================================================
   OPTA VOID BACKGROUND SYSTEM
   Stabilized Void Horizon with focal anchoring
   ================================================================= */

/* -----------------------------------------------------------------
   1. BACKGROUND CONTAINER
   ----------------------------------------------------------------- */

.void-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--void);
}

/* -----------------------------------------------------------------
   2. HORIZON GLOW (Focal Anchor)
   Persistent element to prevent motion sickness
   ----------------------------------------------------------------- */

.horizon-glow {
    position: absolute;
    bottom: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 60%;
    background: radial-gradient(
        ellipse 80% 50% at 50% 100%,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(139, 92, 246, 0.08) 30%,
        rgba(139, 92, 246, 0.03) 50%,
        transparent 70%
    );
    pointer-events: none;
    /* Horizon stays absolutely fixed - never moves */
    will-change: opacity;
}

/* Subtle breathing animation */
.horizon-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 40% at 50% 100%,
        rgba(168, 85, 247, 0.1) 0%,
        transparent 60%
    );
    animation: horizon-breathe 8s ease-in-out infinite;
}

@keyframes horizon-breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* -----------------------------------------------------------------
   3. NEBULA LAYER
   Purple cosmic dust with slow drift
   ----------------------------------------------------------------- */

.nebula-layer {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        /* Primary nebula cloud */
        radial-gradient(
            ellipse 40% 30% at 30% 40%,
            rgba(139, 92, 246, 0.08) 0%,
            transparent 60%
        ),
        /* Secondary nebula */
        radial-gradient(
            ellipse 50% 35% at 70% 60%,
            rgba(168, 85, 247, 0.06) 0%,
            transparent 60%
        ),
        /* Tertiary accent */
        radial-gradient(
            ellipse 30% 25% at 50% 30%,
            rgba(99, 102, 241, 0.05) 0%,
            transparent 50%
        );
    animation: nebula-drift 60s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes nebula-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(-2%, 1%) scale(1.02);
    }
    50% {
        transform: translate(1%, -1%) scale(1);
    }
    75% {
        transform: translate(-1%, -2%) scale(1.01);
    }
}

/* -----------------------------------------------------------------
   4. DUST LAYER
   Ultra-subtle cosmic dust particles
   ----------------------------------------------------------------- */

.dust-layer {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.03) 50%, transparent 50%),
        radial-gradient(1px 1px at 80% 70%, rgba(255, 255, 255, 0.02) 50%, transparent 50%),
        radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.025) 50%, transparent 50%),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.02) 50%, transparent 50%),
        radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.015) 50%, transparent 50%),
        radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.02) 50%, transparent 50%);
    background-size: 200px 200px;
    animation: dust-float 120s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes dust-float {
    0% { background-position: 0 0, 50px 50px, 100px 25px, 150px 75px, 25px 125px, 175px 100px; }
    100% { background-position: 200px 200px, 250px 250px, 300px 225px, 350px 275px, 225px 325px, 375px 300px; }
}

/* -----------------------------------------------------------------
   5. GLINT LAYER
   Occasional star-like sparkles (JS-generated)
   ----------------------------------------------------------------- */

.glint-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.glint {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: glint-sparkle var(--duration, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes glint-sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: var(--max-opacity, 0.4);
        transform: scale(1);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    }
}

/* Larger glints (rare) */
.glint.large {
    width: 3px;
    height: 3px;
}

/* Purple-tinted glints */
.glint.purple {
    background: var(--primary);
}

/* -----------------------------------------------------------------
   6. PARALLAX MOVEMENT (Controlled by JS)
   Heavy parallax - universe barely shifts (1:10 ratio)
   ----------------------------------------------------------------- */

.void-background.parallax-enabled .nebula-layer {
    transform: translate(
        calc(var(--parallax-x, 0) * 0.1),
        calc(var(--parallax-y, 0) * 0.1)
    );
}

.void-background.parallax-enabled .dust-layer {
    transform: translate(
        calc(var(--parallax-x, 0) * 0.05),
        calc(var(--parallax-y, 0) * 0.05)
    );
}

/* Horizon NEVER moves - focal anchor */
.void-background.parallax-enabled .horizon-glow {
    transform: translateX(-50%); /* Always centered, never affected by parallax */
}

/* -----------------------------------------------------------------
   7. INTRO REVEAL STATES
   ----------------------------------------------------------------- */

/* Hidden before intro completes */
.void-background.hidden {
    opacity: 0;
}

/* Iris-open reveal animation */
.void-background.revealing {
    animation: void-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes void-reveal {
    0% {
        opacity: 0;
        clip-path: circle(0% at 50% 50%);
    }
    100% {
        opacity: 1;
        clip-path: circle(150% at 50% 50%);
    }
}

/* -----------------------------------------------------------------
   8. RESPONSIVE ADJUSTMENTS
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
    .horizon-glow {
        height: 50%;
        bottom: -20%;
    }

    .nebula-layer {
        animation-duration: 90s;
    }

    .dust-layer {
        opacity: 0.4;
        background-size: 150px 150px;
    }
}

/* -----------------------------------------------------------------
   9. REDUCED MOTION
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .horizon-glow::before {
        animation: none !important;
    }

    .nebula-layer {
        animation: none !important;
    }

    .dust-layer {
        animation: none !important;
    }

    .glint {
        animation: none !important;
        opacity: 0.2;
    }

    .void-background.revealing {
        animation: fade-in 0.3s ease forwards !important;
    }

    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* -----------------------------------------------------------------
   10. PERFORMANCE OPTIMIZATIONS
   ----------------------------------------------------------------- */

/* Promote layers for GPU acceleration */
.void-background > * {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Disable animations when not visible */
.void-background:not(:visible) * {
    animation-play-state: paused !important;
}