/* =================================================================
   SPATIAL ORBS SYSTEM
   Ambient floating elements for depth and parallax scale
   ================================================================= */

.spatial-orbs-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: -1;
    /* Behind content but part of the 3D scene */
}

.spatial-orb {
    position: absolute;
    /* Use 'will-change' to promote to compositor layer for smooth 60fps */
    will-change: transform;
    transform-style: preserve-3d;
    pointer-events: none;
    /* Center transform origin for symmetrical scaling */
    transform-origin: center center;
}

.orb-inner {
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(40px);
    opacity: 0.4;
    will-change: transform, opacity;
    transform-origin: center center;
    backface-visibility: hidden;
}

/* 
   Animation: Breathing 
   Independent from spatial movement to avoid layout thrashing
*/
@keyframes orb-breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
}

/* --- Drift Variations --- */

/* 1. Vertical Rise/Fall (Bubbles) */
@keyframes drift-vertical {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(20px, -60px, 0);
    }

    100% {
        transform: translate3d(-20px, 0, 0);
    }
}

/* 2. Wide Orbit (Circular) */
@keyframes drift-orbit {
    0% {
        transform: translate3d(50px, 0, 0) rotate(0deg);
    }

    25% {
        transform: translate3d(0, 50px, 0) rotate(90deg);
    }

    50% {
        transform: translate3d(-50px, 0, 0) rotate(180deg);
    }

    75% {
        transform: translate3d(0, -50px, 0) rotate(270deg);
    }

    100% {
        transform: translate3d(50px, 0, 0) rotate(360deg);
    }
}

/* 3. Wander (Perlin-ish) */
@keyframes drift-wander {
    0% {
        transform: translate3d(0, 0, 0);
    }

    33% {
        transform: translate3d(40px, -30px, 0);
    }

    66% {
        transform: translate3d(-20px, 40px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 4. Figure-Eight */
@keyframes drift-figure8 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(40px, 30px, 0);
    }

    50% {
        transform: translate3d(0, 60px, 0);
    }

    75% {
        transform: translate3d(-40px, 30px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Warp Effect during Navigation */
.spatial-orb.warping {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
    /* Note: We multiply scaleZ to simulate speed lines */
    transform: scaleZ(4) scaleX(0.5) !important;
    opacity: 0.8;
    filter: blur(60px);
    /* Enhance motion blur feel */
}

/* Color variations */
.orb-violet {
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.8), transparent 70%);
}

.orb-blue {
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.8), transparent 70%);
}

.orb-mint {
    background: radial-gradient(circle at 30% 30%, rgba(45, 212, 191, 0.6), transparent 70%);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .spatial-orb {
        animation: none !important;
    }
}