/* File: /public/css/components/ambient-effects.css */
/* Wryon's Games - Ambient Effects Styles */
/* v1.0.0 - Multi-effect support for white-label theming */
/*
 * KEY NOTES:
 * - Supports multiple ambient effect types
 * - Effects: 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;
}

/* =================================================================
   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;
}

/* =================================================================
   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;
    }
}

/* =================================================================
   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;
}

/* =================================================================
   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; }