/* ===== ANIMATED ORB BACKGROUND =====
 * GetAdvice v5.7 — Floating gradient orbs + subtle dot grid overlay.
 * File: css/background.css
 */

.bg-canvas {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── v5.1: Subtle dot grid overlay ── */
.bg-canvas::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 1;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.18;
    will-change: transform;
    animation: orbFloat 20s ease-in-out infinite;
}

.bg-orb:nth-child(1) {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: -120px; left: -120px;
    animation-duration: 25s;
}

.bg-orb:nth-child(2) {
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--accent-hot) 0%, transparent 70%);
    bottom: -100px; right: -100px;
    animation-duration: 20s;
    animation-delay: -5s;
}

.bg-orb:nth-child(3) {
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
    top: 40%; left: 60%;
    animation-duration: 30s;
    animation-delay: -10s;
    opacity: 0.1;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(40px, 30px) scale(1.05); }
}