/* File: /public/css/components/ambient-effects.css */
/* Arcade Layer - Ambient Effects Styles */
/* v1.3.0 - Add dust motes + digital glitch effects */
/*
 * CHANGES in v1.3.0:
 * - NEW: 'dust' effect — warm amber dots with slow lazy drift and soft
 *   opacity pulse. Simulates dust floating through lamplight / CRT glow.
 *   Designed for retro/80s themes (WFK basement background).
 * - NEW: 'glitch' effect — digital block chars with RGB channel split,
 *   stepped jitter animation, and rapid opacity flicker.
 * - Added ambient-dust-drift, ambient-dust-pulse keyframes
 * - Added ambient-glitch-jitter, ambient-glitch-flicker keyframes
 * - Both added to reduced-motion section
 *
 * KEY NOTES:
 * - Supports multiple ambient effect types
 * - Effects: dust, glitch, snowfall, leaves, petals, fireflies, embers, stars, bubbles
 * - All colors use CSS variables for white-label theming
 * - Particles use brand colors automatically
 *
 * USAGE:
 * Include this CSS and js/components/ambient-effects.js
 * Configure via window.AMBIENT_CONFIG before script loads
 */

/* =================================================================
   EFFECT CONTAINERS
   ================================================================= */
.ambient-effects,
.ambient-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.ambient-effects {
    z-index: var(--z-fixed, 1000);
}

.ambient-particles {
    z-index: 2;
}

/* =================================================================
   BASE ELEMENT STYLES
   ================================================================= */
.ambient-element {
    position: absolute;
    user-select: none;
    will-change: transform;
}

/* =================================================================
   DUST MOTES EFFECT
   Warm amber specks drifting through lamplight / CRT glow.
   Very slow, lazy movement — feels like sitting in a musty room.
   Colors: warm gold/amber/wheat to match string lights & TV haze.
   ================================================================= */
.ambient-effects[data-effect="dust"] .ambient-element {
    color: #d4a34a;
    text-shadow:
        0 0 4px rgba(212, 163, 74, 0.6),
        0 0 8px rgba(232, 197, 109, 0.3);
    animation: ambient-dust-drift ease-in-out infinite, ambient-dust-pulse ease-in-out infinite;
}

/* Color variation — some motes catch warmer/cooler light */
.ambient-effects[data-effect="dust"] .ambient-element:nth-child(3n) {
    color: #e8c56d;
    text-shadow:
        0 0 5px rgba(232, 197, 109, 0.5),
        0 0 10px rgba(245, 222, 179, 0.2);
}

.ambient-effects[data-effect="dust"] .ambient-element:nth-child(3n+1) {
    color: #f5deb3;
    text-shadow:
        0 0 3px rgba(245, 222, 179, 0.6),
        0 0 7px rgba(255, 240, 210, 0.3);
}

/* Occasional mote catches the CRT screen glow (cool blue-white) */
.ambient-effects[data-effect="dust"] .ambient-element:nth-child(7n) {
    color: #e0d8c8;
    text-shadow:
        0 0 4px rgba(200, 210, 220, 0.5),
        0 0 8px rgba(180, 200, 220, 0.2);
}

/* =================================================================
   DIGITAL GLITCH EFFECT
   RGB channel-split text-shadow, stepped jitter, rapid flicker.
   Uses brand-primary for the green channel; cyan + magenta for split.
   ================================================================= */
.ambient-effects[data-effect="glitch"] .ambient-element {
    color: var(--brand-primary, #39ff14);
    font-family: var(--font-mono, 'Courier New', monospace);
    text-shadow:
        2px 0 #ff00ff,
        -2px 0 #00ffff;
    animation: ambient-glitch-jitter steps(1) infinite, ambient-glitch-flicker steps(1) infinite;
}

/* Vary the RGB split offset per element for a more organic/broken feel */
.ambient-effects[data-effect="glitch"] .ambient-element:nth-child(3n) {
    text-shadow:
        -1px 1px #ff00ff,
        1px -1px #00ffff;
}

.ambient-effects[data-effect="glitch"] .ambient-element:nth-child(3n+1) {
    text-shadow:
        3px 1px #ff00ff,
        -3px -1px #00ffff;
}

.ambient-effects[data-effect="glitch"] .ambient-element:nth-child(5n) {
    color: #00ffff;
    text-shadow:
        2px 0 var(--brand-primary, #39ff14),
        -2px 0 #ff00ff;
}

.ambient-effects[data-effect="glitch"] .ambient-element:nth-child(7n) {
    color: #ff00ff;
    text-shadow:
        1px 0 #00ffff,
        -1px 0 var(--brand-primary, #39ff14);
}

/* =================================================================
   SNOWFALL EFFECT
   ================================================================= */
.ambient-effects[data-effect="snowfall"] .ambient-element {
    top: -30px;
    color: #ccffcc;
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8), 
        0 0 10px var(--brand-primary, #39ff14);
    animation: ambient-fall linear infinite, ambient-sway ease-in-out infinite;
}

/* =================================================================
   FALLING LEAVES EFFECT
   ================================================================= */
.ambient-effects[data-effect="leaves"] .ambient-element {
    top: -40px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    animation: ambient-fall linear infinite, ambient-sway-heavy ease-in-out infinite;
}

/* =================================================================
   CHERRY BLOSSOM / PETALS EFFECT
   ================================================================= */
.ambient-effects[data-effect="petals"] .ambient-element {
    top: -30px;
    filter: drop-shadow(0 1px 2px rgba(255,182,193,0.5));
    animation: ambient-fall linear infinite, ambient-flutter ease-in-out infinite;
}

/* =================================================================
   FIREFLIES EFFECT
   ================================================================= */
.ambient-effects[data-effect="fireflies"] .ambient-element {
    color: #ffff00;
    text-shadow: 
        0 0 10px #ffff00,
        0 0 20px #ffea00,
        0 0 30px #ffd700;
    animation: ambient-float ease-in-out infinite, ambient-glow ease-in-out infinite;
}

/* =================================================================
   EMBERS EFFECT
   ================================================================= */
.ambient-effects[data-effect="embers"] .ambient-element {
    bottom: -20px;
    top: auto;
    color: #ff4500;
    text-shadow: 
        0 0 8px #ff4500,
        0 0 15px #ff6600;
    animation: ambient-rise linear infinite, ambient-sway-light ease-in-out infinite;
}

/* =================================================================
   TWINKLING STARS EFFECT
   ================================================================= */
.ambient-effects[data-effect="stars"] .ambient-element {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: ambient-twinkle ease-in-out infinite;
}

/* =================================================================
   BUBBLES EFFECT
   ================================================================= */
.ambient-effects[data-effect="bubbles"] .ambient-element {
    bottom: -30px;
    top: auto;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    animation: ambient-rise linear infinite, ambient-wobble ease-in-out infinite;
}

/* =================================================================
   DUST ANIMATIONS
   Very slow, lazy drift with gentle direction changes.
   ease-in-out keeps it smooth — no jarring movement.
   ================================================================= */

/* Drift: slow wandering path, subtle enough to feel natural */
@keyframes ambient-dust-drift {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(12px, -18px);
    }
    40% {
        transform: translate(-8px, -10px);
    }
    60% {
        transform: translate(15px, 8px);
    }
    80% {
        transform: translate(-5px, -14px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Pulse: soft glow in/out, like catching and losing the light */
@keyframes ambient-dust-pulse {
    0%, 100% {
        opacity: 0.2;
    }
    30% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    70% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.25;
    }
}

/* =================================================================
   GLITCH ANIMATIONS
   steps(1) = no interpolation = instant jumps between keyframes.
   This is what gives it the broken/digital feel vs smooth motion.
   ================================================================= */

/* Jitter: random-feeling position jumps */
@keyframes ambient-glitch-jitter {
    0%  { transform: translate(0, 0) skewX(0deg); }
    10% { transform: translate(-3px, 2px) skewX(0deg); }
    20% { transform: translate(4px, -1px) skewX(-2deg); }
    30% { transform: translate(0, 0) skewX(0deg); }
    40% { transform: translate(2px, 3px) skewX(1deg); }
    50% { transform: translate(-2px, -2px) skewX(0deg); }
    60% { transform: translate(0, 0) skewX(0deg); }
    65% { transform: translate(5px, 1px) skewX(-3deg); }
    70% { transform: translate(0, 0) skewX(0deg); }
    80% { transform: translate(-1px, 3px) skewX(0deg); }
    85% { transform: translate(3px, -2px) skewX(2deg); }
    90% { transform: translate(0, 0) skewX(0deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}

/* Flicker: rapid opacity changes with brief bright flashes */
@keyframes ambient-glitch-flicker {
    0%, 100% { opacity: 0.4; }
    5%  { opacity: 0; }
    6%  { opacity: 0.7; }
    10% { opacity: 0.4; }
    30% { opacity: 0.5; }
    31% { opacity: 0; }
    32% { opacity: 0.9; }
    33% { opacity: 0.4; }
    55% { opacity: 0.5; }
    56% { opacity: 0; }
    57% { opacity: 0.6; }
    70% { opacity: 0.4; }
    75% { opacity: 0.8; }
    76% { opacity: 0.1; }
    77% { opacity: 0.5; }
    90% { opacity: 0.4; }
    92% { opacity: 0; }
    93% { opacity: 0.7; }
    95% { opacity: 0.4; }
}

/* =================================================================
   FALLING ANIMATIONS
   ================================================================= */
@keyframes ambient-fall {
    0% { 
        transform: translateY(-10vh) rotate(0deg); 
    }
    100% { 
        transform: translateY(100vh) rotate(360deg); 
    }
}

@keyframes ambient-sway {
    0%, 100% { margin-left: 0; }
    25% { margin-left: 15px; }
    75% { margin-left: -15px; }
}

@keyframes ambient-sway-heavy {
    0%, 100% { margin-left: 0; transform: rotate(0deg); }
    25% { margin-left: 30px; transform: rotate(15deg); }
    50% { margin-left: -10px; transform: rotate(-10deg); }
    75% { margin-left: -25px; transform: rotate(20deg); }
}

@keyframes ambient-sway-light {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 10px; }
}

@keyframes ambient-flutter {
    0%, 100% { 
        margin-left: 0; 
        transform: rotateY(0deg) rotateZ(0deg); 
    }
    25% { 
        margin-left: 20px; 
        transform: rotateY(90deg) rotateZ(10deg); 
    }
    50% { 
        margin-left: -15px; 
        transform: rotateY(180deg) rotateZ(-5deg); 
    }
    75% { 
        margin-left: 25px; 
        transform: rotateY(270deg) rotateZ(15deg); 
    }
}

/* =================================================================
   RISING ANIMATIONS
   ================================================================= */
@keyframes ambient-rise {
    0% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.8;
    }
    100% { 
        transform: translateY(-100vh) rotate(180deg);
        opacity: 0;
    }
}

@keyframes ambient-wobble {
    0%, 100% { margin-left: 0; }
    25% { margin-left: 8px; }
    75% { margin-left: -8px; }
}

/* =================================================================
   FLOATING ANIMATIONS
   ================================================================= */
@keyframes ambient-float {
    0%, 100% { 
        transform: translate(0, 0);
    }
    25% { 
        transform: translate(30px, -40px);
    }
    50% { 
        transform: translate(-20px, -20px);
    }
    75% { 
        transform: translate(40px, -60px);
    }
}

@keyframes ambient-glow {
    0%, 100% { 
        opacity: 0.3;
        text-shadow: 0 0 5px currentColor;
    }
    50% { 
        opacity: 1;
        text-shadow: 
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 30px currentColor;
    }
}

/* =================================================================
   STATIC ANIMATIONS (Stars)
   ================================================================= */
@keyframes ambient-twinkle {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

/* =================================================================
   FLOATING PARTICLES (Mystical Orbs)
   Brand-colored, used with all effects
   ================================================================= */
.ambient-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--brand-primary, #39ff14);
    border-radius: 50%;
    opacity: 0.4;
    animation: ambient-particle-float 20s ease-in-out infinite;
    box-shadow: 
        0 0 10px var(--brand-primary, #39ff14), 
        0 0 20px var(--brand-primary, #39ff14);
}

@keyframes ambient-particle-float {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% { 
        transform: translate(50px, -100px) scale(1.2);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-30px, -200px) scale(0.8);
        opacity: 0.4;
    }
    75% { 
        transform: translate(40px, -150px) scale(1.1);
        opacity: 0.5;
    }
}

/* =================================================================
   REDUCED MOTION
   Respect user preferences
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .ambient-element,
    .ambient-particle {
        animation: none !important;
        opacity: 0.3;
    }
    
    /* Static placement for reduced motion */
    .ambient-effects[data-effect="snowfall"] .ambient-element,
    .ambient-effects[data-effect="leaves"] .ambient-element,
    .ambient-effects[data-effect="petals"] .ambient-element {
        top: 50%;
        transform: translateY(-50%);
    }
    
    .ambient-effects[data-effect="stars"] .ambient-element {
        animation: none;
        opacity: 0.5;
    }

    /* Dust: just show static specks, no drift */
    .ambient-effects[data-effect="dust"] .ambient-element {
        animation: none;
        opacity: 0.3;
    }

    /* Glitch: show static chars with subtle RGB split, no motion */
    .ambient-effects[data-effect="glitch"] .ambient-element {
        animation: none;
        opacity: 0.3;
    }
}

/* =================================================================
   OPTIONAL: Disable effects
   Add data-no-ambient to body to hide
   ================================================================= */
body[data-no-ambient] .ambient-effects,
body[data-no-ambient] .ambient-particles {
    display: none;
}

/* =================================================================
   PERFORMANCE: Pause ambient animations while batch modal is open
   Uses CSS :has() — zero JS required. Supported in all modern browsers.
   Pausing ~36 animating DOM elements significantly reduces GPU load
   on mobile while the card grid is being rendered and interacted with.
   Particles fade out smoothly rather than snapping to a frozen position.
   ================================================================= */
body:has(.batch-results-overlay) .ambient-element,
body:has(.batch-results-overlay) .ambient-particle {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* =================================================================
   DENSITY VARIATIONS (applied via JS inline styles)
   These are fallback nth-child rules for variety
   ================================================================= */

/* Vary animation timing for natural look */
.ambient-element:nth-child(3n) { animation-delay: 0.5s; }
.ambient-element:nth-child(3n+1) { animation-delay: 1.2s; }
.ambient-element:nth-child(3n+2) { animation-delay: 2.1s; }

.ambient-element:nth-child(5n) { opacity: 0.5; }
.ambient-element:nth-child(7n) { font-size: 1.2rem; }
.ambient-element:nth-child(11n) { font-size: 0.7rem; opacity: 0.6; }