/* ============================================
   INFINITY OS - GLOBAL BACKGROUND SYSTEM
   Dimensional layered background host
   ============================================ */

.infinity-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* True black base — glow pockets float above pure void */
    background-color: #000000;
    background:
        radial-gradient(circle at 18% 18%, rgba(0, 240, 255, 0.06) 0%, transparent 38%),
        radial-gradient(circle at 82% 14%, rgba(255, 0, 170, 0.04) 0%, transparent 34%),
        linear-gradient(180deg, rgba(4, 4, 8, 0.97) 0%, #000000 100%);
}

.infinity-background::before,
.infinity-background::after {
    content: '';
    position: absolute;
    inset: -12%;
}

.infinity-background > .ambient-particles,
.infinity-background > .ambient-haze {
    position: absolute;
    inset: -15%;
    pointer-events: none;
}

.infinity-background::before {
    background:
        radial-gradient(circle at 22% 30%, rgba(0, 240, 255, 0.10) 0%, transparent 22%),
        radial-gradient(circle at 72% 26%, rgba(187, 0, 255, 0.07) 0%, transparent 24%),
        radial-gradient(circle at 58% 78%, rgba(34, 211, 238, 0.05) 0%, transparent 26%);
    filter: blur(36px);
    opacity: 0.46;
    animation: infinityBackgroundDrift 28s ease-in-out infinite alternate;
}

.infinity-background::after {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 32%, transparent 68%, rgba(255, 255, 255, 0.018) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 28px),
        radial-gradient(circle at center, transparent 45%, rgba(10, 10, 15, 0.32) 100%);
    opacity: 0.22;
    mix-blend-mode: screen;
    animation: infinityBackgroundPulse 18s ease-in-out infinite;
}

.infinity-background > .ambient-haze {
    background:
        radial-gradient(circle at 12% 78%, rgba(0, 240, 255, 0.08), transparent 38%),
        radial-gradient(circle at 86% 72%, rgba(255, 0, 170, 0.06), transparent 35%);
    filter: blur(44px);
    opacity: 0.32;
    animation: infinityHazeDrift 38s ease-in-out infinite alternate;
}

.infinity-background > .ambient-particles {
    background-image:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.36) 0 1px, transparent 1px),
        radial-gradient(circle at 42% 68%, rgba(0, 240, 255, 0.26) 0 1px, transparent 1px),
        radial-gradient(circle at 78% 34%, rgba(255, 0, 170, 0.22) 0 1px, transparent 1px),
        radial-gradient(circle at 68% 82%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px);
    background-size: 220px 220px, 260px 260px, 300px 300px, 340px 340px;
    opacity: 0.16;
    animation: infinityParticleDrift 52s linear infinite;
}

@keyframes infinityBackgroundDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(-2.5%, 1.5%, 0) scale(1.04);
    }
}

@keyframes infinityBackgroundPulse {
    0%,
    100% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.28;
    }
}

@keyframes infinityHazeDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(2.2%, -1.4%, 0);
    }
}

@keyframes infinityParticleDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-6%, -4%, 0);
    }
}

@media (max-width: 768px) {
    .infinity-background {
        background:
            radial-gradient(circle at 16% 14%, rgba(0, 240, 255, 0.05) 0%, transparent 34%),
            linear-gradient(180deg, rgba(18, 18, 26, 0.92) 0%, rgba(10, 10, 15, 0.98) 100%);
    }

    .infinity-background::before {
        filter: blur(42px);
        opacity: 0.42;
    }

    .infinity-background::after {
        opacity: 0.12;
    }

    .infinity-background > .ambient-particles {
        opacity: 0.1;
        background-size: 280px 280px, 320px 320px, 360px 360px, 420px 420px;
    }

    .infinity-background > .ambient-haze {
        opacity: 0.22;
    }
}

@media (prefers-reduced-motion: reduce) {
    .infinity-background::before,
    .infinity-background::after,
    .infinity-background > .ambient-particles,
    .infinity-background > .ambient-haze,
    .infinity-background > .ambient-particles-2 {
        animation: none;
        transform: none;
    }
}
/* ============================================
   AMBIENT PARTICLE LAYER 2
   Larger, slower glowing orbs — increases
   dimensional depth without canvas overhead
   ============================================ */

/* GPU acceleration hint for all animated layers */
.infinity-background::before,
.infinity-background::after,
.infinity-background > .ambient-particles,
.infinity-background > .ambient-haze,
.infinity-background > .ambient-particles-2 {
    will-change: transform;
}

.infinity-background > .ambient-particles-2 {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 52%, rgba(0, 240, 255, 0.26) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 65% 22%, rgba(255, 0, 170, 0.22) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 84% 66%, rgba(0, 255, 136, 0.20) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 34% 84%, rgba(0, 240, 255, 0.18) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 54% 44%, rgba(187, 0, 255, 0.20) 0 1.5px, transparent 1.5px),
        radial-gradient(circle at 8% 72%, rgba(255, 255, 255, 0.22) 0 1.5px, transparent 1.5px);
    background-size: 380px 380px, 440px 440px, 360px 360px, 500px 500px, 420px 420px, 290px 290px;
    opacity: 0.16;
    filter: blur(0.5px);
    animation: infinityParticleDriftSlow 74s linear infinite;
}

@keyframes infinityParticleDriftSlow {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(4%, 3%, 0); }
}

@media (max-width: 768px) {
    .infinity-background > .ambient-particles-2 {
        opacity: 0.09;
        background-size: 440px 440px, 520px 520px, 440px 440px, 580px 580px, 500px 500px, 360px 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .infinity-background > .ambient-particles-2 {
        animation: none;
        transform: none;
    }
}