/* ===================================================
   AMBIENT EFFECTS ENGINE — 15 RICH ATMOSPHERE PRESETS
   Hardware-accelerated ambient atmosphere per theme
   =================================================== */
.ambient-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: 0;
    overflow: hidden;
}

/* ── SPEED MODIFIERS ── */
.ambient-effect-container[data-speed="slow"] * { animation-duration: 1.6x !important; }
.ambient-effect-container[data-speed="fast"] * { animation-duration: 0.6x !important; }

/* ── DENSITY MODIFIERS ── */
.ambient-effect-container[data-density="low"] .density-extra { display: none !important; }
.ambient-effect-container[data-density="high"] .density-extra { display: block !important; }

/* ── 1. BATS (Halloween / Mischief) ── */
.ambient-bat {
    position: absolute;
    width: 28px;
    height: 18px;
    opacity: 0.55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='%23ff7700'%3E%3Cpath d='M32,10 C28,2 18,0 12,5 C6,10 2,7 0,16 C8,18 16,14 22,17 C26,19 28,26 32,24 C36,26 38,19 42,17 C48,14 56,18 64,16 C62,7 58,10 52,5 C46,0 36,2 32,10 Z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(255, 119, 0, 0.7));
    animation: flyBat 28s linear infinite;
    will-change: transform;
}
.ambient-bat:nth-child(1) { top: 16%; left: -60px; animation-duration: 26s; animation-delay: 0s; }
.ambient-bat:nth-child(2) { top: 48%; left: -60px; animation-duration: 34s; animation-delay: 8s; filter: drop-shadow(0 0 6px rgba(186, 85, 211, 0.8)); }
.ambient-bat:nth-child(3) { top: 72%; left: -60px; animation-duration: 30s; animation-delay: 16s; }

@keyframes flyBat {
    0% { transform: translate3d(-50px, 0, 0) rotate(5deg); }
    50% { transform: translate3d(55vw, 25px, 0) rotate(-6deg); }
    100% { transform: translate3d(110vw, -10px, 0) rotate(5deg); }
}

/* ── 2. CLOUDS (Cinnamoroll Sanrio Fluffy Sky) ── */
.ambient-cloud {
    position: absolute;
    opacity: 0.35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='white'%3E%3Cpath d='M25,50 C12,50 2,40 2,28 C2,16 12,8 24,8 C27,3 35,0 44,0 C56,0 66,7 70,16 C76,12 84,12 90,16 C102,16 112,24 112,36 C112,48 102,50 90,50 Z' opacity='0.85'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 0 12px rgba(244, 114, 182, 0.45));
    animation: driftCloud linear infinite;
    will-change: transform;
}
.ambient-cloud:nth-child(1) { top: 12%; left: -140px; width: 120px; height: 60px; animation-duration: 45s; animation-delay: 0s; }
.ambient-cloud:nth-child(2) { top: 38%; left: -180px; width: 160px; height: 80px; animation-duration: 62s; animation-delay: 14s; opacity: 0.28; filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.5)); }
.ambient-cloud:nth-child(3) { top: 68%; left: -120px; width: 100px; height: 50px; animation-duration: 50s; animation-delay: 26s; opacity: 0.22; }

@keyframes driftCloud {
    0% { transform: translate3d(-180px, 0, 0); }
    50% { transform: translate3d(55vw, 15px, 0); }
    100% { transform: translate3d(115vw, -5px, 0); }
}

/* ── 3. SNOW (Winter / Christmas) ── */
.ambient-snow {
    position: absolute;
    top: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 40%, rgba(56, 189, 248, 0.6) 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 14px rgba(56, 189, 248, 0.6);
    animation: fallSnow linear infinite;
    will-change: transform;
}
.ambient-snow:nth-child(1) { left: 15%; animation-duration: 12s; animation-delay: 0s; width: 7px; height: 7px; }
.ambient-snow:nth-child(2) { left: 35%; animation-duration: 16s; animation-delay: 3s; width: 9px; height: 9px; }
.ambient-snow:nth-child(3) { left: 60%; animation-duration: 14s; animation-delay: 6s; width: 6px; height: 6px; }
.ambient-snow:nth-child(4) { left: 80%; animation-duration: 18s; animation-delay: 1s; width: 8px; height: 8px; }
.ambient-snow:nth-child(5) { left: 45%; animation-duration: 20s; animation-delay: 8s; width: 10px; height: 10px; }

@keyframes fallSnow {
    0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.85; }
    80% { opacity: 0.85; }
    100% { transform: translate3d(40px, 105vh, 0) rotate(360deg); opacity: 0; }
}

/* ── 4. HEARTS (Valentine Romance) ── */
.ambient-heart {
    position: absolute;
    bottom: -30px;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4899'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.7));
    animation: riseHeart linear infinite;
    will-change: transform;
}
.ambient-heart:nth-child(1) { left: 20%; animation-duration: 18s; animation-delay: 0s; }
.ambient-heart:nth-child(2) { left: 45%; animation-duration: 22s; animation-delay: 5s; width: 18px; height: 18px; }
.ambient-heart:nth-child(3) { left: 75%; animation-duration: 20s; animation-delay: 2s; width: 24px; height: 24px; }
.ambient-heart:nth-child(4) { left: 60%; animation-duration: 25s; animation-delay: 9s; width: 20px; height: 20px; }

@keyframes riseHeart {
    0% { transform: translate3d(0, 20px, 0) scale(0.6); opacity: 0; }
    20% { opacity: 0.75; }
    80% { opacity: 0.75; }
    100% { transform: translate3d(30px, -105vh, 0) scale(1.1); opacity: 0; }
}

/* ── 5. PETALS (Tết Sakura / Spring) ── */
.ambient-petal {
    position: absolute;
    top: -20px;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #ff80bf, #f43f5e);
    border-radius: 14px 0 14px 0;
    opacity: 0.7;
    filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.6));
    animation: fallPetal linear infinite;
    will-change: transform;
}
.ambient-petal:nth-child(1) { left: 10%; animation-duration: 14s; animation-delay: 0s; }
.ambient-petal:nth-child(2) { left: 30%; animation-duration: 18s; animation-delay: 4s; width: 16px; height: 16px; }
.ambient-petal:nth-child(3) { left: 55%; animation-duration: 16s; animation-delay: 7s; width: 12px; height: 12px; }
.ambient-petal:nth-child(4) { left: 82%; animation-duration: 20s; animation-delay: 2s; width: 15px; height: 15px; }

@keyframes fallPetal {
    0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.75; }
    80% { opacity: 0.75; }
    100% { transform: translate3d(60px, 105vh, 0) rotate(420deg); opacity: 0; }
}

/* ── 6. FIREFLIES (Summer Magic / Enigmatic) ── */
.ambient-firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a3e635;
    box-shadow: 0 0 10px #a3e635, 0 0 20px #84cc16;
    animation: flyFirefly linear infinite, pulseGlow 2.5s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
.ambient-firefly:nth-child(1) { top: 60%; left: 15%; animation-duration: 24s, 2s; }
.ambient-firefly:nth-child(2) { top: 40%; left: 50%; animation-duration: 28s, 2.8s; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.ambient-firefly:nth-child(3) { top: 75%; left: 80%; animation-duration: 22s, 1.8s; }
.ambient-firefly:nth-child(4) { top: 25%; left: 70%; animation-duration: 32s, 3s; background: #facc15; box-shadow: 0 0 10px #facc15; }

@keyframes flyFirefly {
    0% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(40px, -30px, 0); }
    66% { transform: translate3d(-30px, -60px, 0); }
    100% { transform: translate3d(20px, -90px, 0); }
}
@keyframes pulseGlow {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 0.95; transform: scale(1.3); }
}

/* ── 7. STARDUST (Cosmic Stars Twinkle) ── */
.ambient-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffffff, 0 0 16px #c084fc;
    animation: twinkleStar 3s ease-in-out infinite alternate;
    will-change: opacity, transform;
}
.ambient-star:nth-child(1) { top: 15%; left: 25%; animation-duration: 2.2s; }
.ambient-star:nth-child(2) { top: 35%; left: 70%; animation-duration: 3.5s; }
.ambient-star:nth-child(3) { top: 55%; left: 40%; animation-duration: 2.8s; }
.ambient-star:nth-child(4) { top: 80%; left: 85%; animation-duration: 4s; }
.ambient-star:nth-child(5) { top: 70%; left: 15%; animation-duration: 3.1s; }

@keyframes twinkleStar {
    0% { opacity: 0.15; transform: scale(0.6); }
    100% { opacity: 0.95; transform: scale(1.4); }
}

/* ── 8. SAKURA (Anime Cherry Blossom) ── */
.ambient-sakura {
    position: absolute;
    top: -25px;
    width: 16px;
    height: 12px;
    background: radial-gradient(ellipse at center, #ffd1dc 30%, #ff85a2 90%);
    border-radius: 50% 50% 50% 0;
    opacity: 0.65;
    filter: drop-shadow(0 0 5px rgba(255, 133, 162, 0.5));
    animation: fallSakura linear infinite;
    will-change: transform;
}
.ambient-sakura:nth-child(1) { left: 18%; animation-duration: 16s; animation-delay: 0s; }
.ambient-sakura:nth-child(2) { left: 42%; animation-duration: 22s; animation-delay: 5s; width: 14px; height: 10px; }
.ambient-sakura:nth-child(3) { left: 68%; animation-duration: 19s; animation-delay: 2s; width: 18px; height: 14px; }
.ambient-sakura:nth-child(4) { left: 88%; animation-duration: 24s; animation-delay: 8s; }

@keyframes fallSakura {
    0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.7; }
    80% { opacity: 0.7; }
    100% { transform: translate3d(80px, 105vh, 0) rotate(540deg); opacity: 0; }
}

/* ── 9. AUTUMN LEAVES (Cozy Maple) ── */
.ambient-leaf {
    position: absolute;
    top: -30px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dd6e42'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 0 6px rgba(221, 110, 66, 0.6));
    animation: fallLeaf linear infinite;
    will-change: transform;
}
.ambient-leaf:nth-child(1) { left: 22%; animation-duration: 17s; animation-delay: 0s; }
.ambient-leaf:nth-child(2) { left: 52%; animation-duration: 24s; animation-delay: 6s; filter: drop-shadow(0 0 6px rgba(232, 197, 71, 0.6)); }
.ambient-leaf:nth-child(3) { left: 78%; animation-duration: 20s; animation-delay: 3s; }

@keyframes fallLeaf {
    0% { transform: translate3d(0, -25px, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.75; }
    80% { opacity: 0.75; }
    100% { transform: translate3d(70px, 105vh, 0) rotate(360deg); opacity: 0; }
}

/* ── 10. BUBBLES (Pastel Y2K) ── */
.ambient-bubble {
    position: absolute;
    bottom: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8), rgba(160, 196, 255, 0.25) 40%, rgba(255, 198, 255, 0.4) 80%, rgba(189, 178, 255, 0.6) 100%);
    box-shadow: 0 0 10px rgba(255, 198, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.6);
    animation: riseBubble linear infinite;
    will-change: transform;
}
.ambient-bubble:nth-child(1) { left: 16%; width: 26px; height: 26px; animation-duration: 19s; animation-delay: 0s; }
.ambient-bubble:nth-child(2) { left: 48%; width: 34px; height: 34px; animation-duration: 25s; animation-delay: 7s; }
.ambient-bubble:nth-child(3) { left: 82%; width: 22px; height: 22px; animation-duration: 21s; animation-delay: 3s; }

@keyframes riseBubble {
    0% { transform: translate3d(0, 30px, 0) scale(0.6); opacity: 0; }
    20% { opacity: 0.65; }
    80% { opacity: 0.65; }
    100% { transform: translate3d(-35px, -105vh, 0) scale(1.1); opacity: 0; }
}

/* ── 11. CYBER RAIN (Synthwave Matrix) ── */
.ambient-rain {
    position: absolute;
    top: -60px;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0, 240, 255, 0), rgba(0, 240, 255, 0.85));
    box-shadow: 0 0 8px #00f0ff;
    animation: fallRain linear infinite;
    will-change: transform;
}
.ambient-rain:nth-child(1) { left: 20%; animation-duration: 3.5s; animation-delay: 0s; }
.ambient-rain:nth-child(2) { left: 40%; animation-duration: 4.2s; animation-delay: 1.5s; height: 55px; background: linear-gradient(to bottom, transparent, #f72585); box-shadow: 0 0 8px #f72585; }
.ambient-rain:nth-child(3) { left: 65%; animation-duration: 3.8s; animation-delay: 0.8s; }
.ambient-rain:nth-child(4) { left: 85%; animation-duration: 4.5s; animation-delay: 2.2s; }

@keyframes fallRain {
    0% { transform: translate3d(0, -60px, 0) skewX(-15deg); opacity: 0; }
    20% { opacity: 0.7; }
    80% { opacity: 0.7; }
    100% { transform: translate3d(-40px, 105vh, 0) skewX(-15deg); opacity: 0; }
}

/* ── 12. CONFETTI (Celebration Festivity) ── */
.ambient-confetti {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    opacity: 0.7;
    animation: fallConfetti linear infinite;
    will-change: transform;
}
.ambient-confetti:nth-child(1) { left: 15%; background: #fbbf24; animation-duration: 11s; animation-delay: 0s; }
.ambient-confetti:nth-child(2) { left: 38%; background: #ec4899; animation-duration: 14s; animation-delay: 3s; transform: rotate(45deg); }
.ambient-confetti:nth-child(3) { left: 62%; background: #38bdf8; animation-duration: 12s; animation-delay: 5s; }
.ambient-confetti:nth-child(4) { left: 85%; background: #a855f7; animation-duration: 16s; animation-delay: 1s; }

@keyframes fallConfetti {
    0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate3d(50px, 105vh, 0) rotate(720deg); opacity: 0; }
}

/* ── 13. LANTERNS (Festive Tet / Mid-Autumn) ── */
.ambient-lantern {
    position: absolute;
    bottom: -60px;
    width: 24px;
    height: 32px;
    background: radial-gradient(circle at center, #f59e0b, #dc2626);
    border-radius: 8px 8px 12px 12px;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.8), 0 0 30px rgba(220, 38, 38, 0.5);
    opacity: 0.75;
    animation: riseLantern linear infinite, swingLantern 3s ease-in-out infinite alternate;
    will-change: transform;
}
.ambient-lantern:nth-child(1) { left: 25%; animation-duration: 26s, 3s; animation-delay: 0s; }
.ambient-lantern:nth-child(2) { left: 65%; animation-duration: 32s, 3.5s; animation-delay: 8s; width: 28px; height: 38px; }
.ambient-lantern:nth-child(3) { left: 85%; animation-duration: 28s, 2.8s; animation-delay: 4s; }

@keyframes riseLantern {
    0% { transform: translate3d(0, 40px, 0); opacity: 0; }
    20% { opacity: 0.85; }
    80% { opacity: 0.85; }
    100% { transform: translate3d(40px, -110vh, 0); opacity: 0; }
}
@keyframes swingLantern {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* ── 14. EMBERS (Magma Fire Sparks) ── */
.ambient-ember {
    position: absolute;
    bottom: -20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff5500;
    box-shadow: 0 0 8px #ff7700, 0 0 16px #ff2200;
    animation: riseEmber linear infinite;
    will-change: transform;
}
.ambient-ember:nth-child(1) { left: 30%; animation-duration: 9s; animation-delay: 0s; }
.ambient-ember:nth-child(2) { left: 55%; animation-duration: 12s; animation-delay: 2s; width: 6px; height: 6px; }
.ambient-ember:nth-child(3) { left: 75%; animation-duration: 10s; animation-delay: 4s; }

@keyframes riseEmber {
    0% { transform: translate3d(0, 20px, 0); opacity: 0; }
    20% { opacity: 0.9; }
    80% { opacity: 0.9; }
    100% { transform: translate3d(35px, -105vh, 0) scale(0.5); opacity: 0; }
}