/*
 * BG Aurora — premium ambient gradient for non-game pages.
 *
 * Replaces the multi-game-collage tile-grid (which read as "vibecoded
 * AI-generated dark template") with three large brand-colored blobs that
 * slowly drift across the viewport, plus a subtle SVG noise overlay for
 * organic texture.
 *
 * Three blobs use distinct keyframes + offsets so their motion never
 * loops in lockstep. GPU-only (transform + opacity only). Respects
 * prefers-reduced-motion.
 *
 * Loaded conditionally from layout.blade.php (only when $bgMode is auto,
 * collage, or aurora — i.e. anywhere the aurora dispatcher might render).
 *
 * See: docs/cc/background-system-2026-05-09-implementation-plan.md
 *      memory feedback_bg_visual_iteration.md (V4 sweet-spot tuning)
 */

@keyframes bg-aurora-drift-1 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate3d(6%, 4%, 0) scale(1.08);
        opacity: 0.75;
    }
}

@keyframes bg-aurora-drift-2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate3d(-5%, -3%, 0) scale(1.06);
        opacity: 0.65;
    }
}

@keyframes bg-aurora-drift-3 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate3d(4%, -5%, 0) scale(1.1);
        opacity: 0.55;
    }
}

.bg-aurora__blob {
    will-change: transform, opacity;
    /* GPU-promote so animations stay off the main thread */
    transform: translateZ(0);
}

.bg-aurora__blob--1 {
    animation: bg-aurora-drift-1 18s ease-in-out infinite;
}

.bg-aurora__blob--2 {
    animation: bg-aurora-drift-2 22s ease-in-out infinite;
    animation-delay: -4s;
}

.bg-aurora__blob--3 {
    animation: bg-aurora-drift-3 26s ease-in-out infinite;
    animation-delay: -10s;
}

/*
 * Accessibility: kill the motion entirely for users who request it.
 * Blobs stay at their starting opacity (still atmospheric, not invisible).
 */
@media (prefers-reduced-motion: reduce) {
    .bg-aurora__blob--1,
    .bg-aurora__blob--2,
    .bg-aurora__blob--3 {
        animation: none;
    }
}