/* ========== FUN LAB — STARFIELD + LIVELY BACKGROUNDS ========== */

/* Starfield canvas — sits behind everything */
#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Override blog-page suppressions — lab needs its full space background */
.lab-page.blog-page .gradient-orbs .orb {
    opacity: 0.2 !important;
    filter: blur(80px) !important;
}

.lab-page.blog-page .grid-bg {
    opacity: 0.04 !important;
}

/* Orbs: softer so they blend with stars like nebulae */
.orb {
    opacity: 0.2;
    filter: blur(80px);
}

.orb-cyan  { animation-duration: 14s; }
.orb-pink  { animation-duration: 16s; }
.orb-purple { animation-duration: 12s; }
.orb-gold  { animation-duration: 18s; }
.orb-teal  { animation-duration: 13s; }

/* Wilder drift paths for lab */
@keyframes orb-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(180px, 120px) scale(1.2); }
    40% { transform: translate(-80px, -100px) scale(0.85); }
    60% { transform: translate(100px, -50px) scale(1.15); }
    80% { transform: translate(-120px, 80px) scale(0.9); }
}

@keyframes orb-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-150px, -120px) scale(1.15); }
    40% { transform: translate(100px, 90px) scale(0.88); }
    60% { transform: translate(-70px, 60px) scale(1.2); }
    80% { transform: translate(130px, -80px) scale(0.92); }
}

@keyframes orb-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(140px, -90px) scale(1.18); }
    40% { transform: translate(-110px, 50px) scale(0.82); }
    60% { transform: translate(60px, 100px) scale(1.1); }
    80% { transform: translate(-80px, -70px) scale(0.95); }
}

@keyframes orb-drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(100px, -140px) scale(1.12); }
    40% { transform: translate(-90px, 70px) scale(0.9); }
    60% { transform: translate(150px, 50px) scale(1.2); }
    80% { transform: translate(-50px, -100px) scale(0.85); }
}

@keyframes orb-drift-5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(-120px, 100px) scale(1.15); }
    40% { transform: translate(80px, -110px) scale(0.88); }
    60% { transform: translate(-60px, -60px) scale(1.1); }
    80% { transform: translate(110px, 70px) scale(0.92); }
}

/* Grid: dim so stars shine through */
.grid-bg {
    opacity: 0.04;
}

/* No light theme — Fun Lab is always dark (space) */

/* Glass-transparent cards — see the stars through them */
.lab-page .neon-card,
.lab-page .algo-info,
.lab-page .pong-hud,
.lab-page .canvas-wrap {
    background: rgba(10, 10, 20, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.06);
}

.lab-page .neon-card:hover {
    background: rgba(10, 10, 20, 0.35);
    border-color: rgba(0, 240, 255, 0.2);
}

/* Nav and header also transparent */
.lab-page header {
    background: transparent;
}

.lab-page header.scrolled {
    background: rgba(10, 10, 20, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Reduced motion: tone it all down */
@media (prefers-reduced-motion: reduce) {
    .orb {
        animation-duration: 60s;
        opacity: 0.1;
    }
}