/* ======================================================
   PARTICLES — Fireflies, Embers, Magic, Dust, Snow
   FIXED:
   ✔ Snow horizontal drift
   ✔ Embers random spread
   ✔ Smoothed animations
   ✔ Better glow & depth
====================================================== */

.fx-particles,
.fx-snow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

/* BASE */
.particle,
.snow-flake {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* =========== FIRELIES =========== */
.firefly {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 150, 0.95);
    box-shadow: 0 0 14px rgba(255,255,180,1);
    animation: fireflyFloat 8s ease-in-out infinite;
}

@keyframes fireflyFloat {
    0%,100% { transform: translate(0,0); opacity: 0.6; }
    50%     { transform: translate(12px,-40px); opacity: 1; }
}


/* =========== EMBERS =========== */
.ember {
    width: 4px;
    height: 4px;
    background: #ff6a00;
    box-shadow: 0 0 10px #ff3b00;
    animation: emberRise 7s linear infinite;
}

@keyframes emberRise {
    from { transform: translate(0,0); opacity: 1; }
    to   { transform: translate(10px,-140vh); opacity: 0; }
}


/* =========== MAGIC =========== */
.magic {
    width: 5px;
    height: 5px;
    background: #c8b6ff;
    box-shadow: 0 0 10px #e7dfff;
    animation: magicGlow 3.5s ease-in-out infinite;
}

@keyframes magicGlow {
    0%,100% { transform: scale(0.6); opacity: .2; }
    50%     { transform: scale(1.5); opacity: 1; }
}


/* =========== DUST =========== */
.dust {
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,.28);
    filter: blur(1px);
    animation: dustFloat 16s linear infinite;
}

@keyframes dustFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-140vh); }
}


/* =========== SNOW =========== */
.snow-flake {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.9);
    opacity: 0.7;
    filter: blur(1px);
    animation: snowFall var(--speed,6s) linear infinite;
}

@keyframes snowFall {
    0%   { transform: translateX(0) translateY(0); }
    100% { transform: translateX(var(--drift,20px)) translateY(130vh); }
}