/* ============================================
   Retro Arcade Background Component
   Optimized pixel-art animation
   ============================================ */

/* ========== Base Container ========== */
.arcade-bg {
    position: fixed;
    inset: 0;
    z-index: -2; /* Ensure it stays behind grid (-1) and content */
    overflow: hidden;
    pointer-events: none;
    background: transparent; /* Main bg color is handled by body */
}

/* Shared pixel style */
.arcade-pixel {
    position: absolute;
    width: 6px;
    height: 6px;
    opacity: 0.12;
    background: var(--color-secondary); /* neon cyan default */
    image-rendering: pixelated;
    animation: drift 12s linear infinite;
    border-radius: 1px;
    transform: translateZ(0); /* Force GPU acceleration */
    will-change: transform;
}

/* Slight variation */
.arcade-pixel.alt {
    background: var(--color-primary); /* neon magenta alt */
    opacity: 0.10;
    animation-duration: 16s;
}

/* Centipede style clusters */
.arcade-segment {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary-light);
    opacity: 0.08;
    image-rendering: pixelated;
    animation: crawl 18s linear infinite;
    transform: translateZ(0); /* Force GPU acceleration */
    border-radius: 2px;
    will-change: transform;
}

/* Dark mode behavior */
html[data-theme="dark"] .arcade-bg {
    /* Transparent to show through to main background color */
    background: transparent;
}

/* Light mode overrides */
html[data-theme="light"] .arcade-pixel {
    opacity: 0.15;
    background: var(--color-secondary-dark); /* darker teal for contrast */
}

html[data-theme="light"] .arcade-pixel.alt {
    opacity: 0.15;
    background: var(--color-primary-dark); /* darker red for contrast */
}

html[data-theme="light"] .arcade-segment {
    opacity: 0.12;
    background: #636e72; /* subtle gray for light mode */
}

/* Pause state */
.arcade-paused .arcade-pixel,
.arcade-paused .arcade-segment {
    animation-play-state: paused;
}

/* ========== Animations ========== */

/* Classic vertical drift (Space Invaders feel) */
@keyframes drift {
    0% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(110vh);
    }
}

/* Diagonal slow "centipede" crawl */
@keyframes crawl {
    0% {
        transform: translate(-10vw, -10vh);
    }
    100% {
        transform: translate(110vw, 110vh);
    }
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    .arcade-pixel,
    .arcade-segment {
        animation-duration: 120s;
    }
}