/* ════════════════════════════════════════════════════════════
   A.particles.css — Bulles dorées montantes avec clignotement aléatoire
   Particules générées dynamiquement par JS (bas → haut de page)
════════════════════════════════════════════════════════════ */

/* ── Forme de base d'une particule ── */
.particle {
  position: fixed;
  border-radius: 50%;
  background: #b89a3e;
  pointer-events: none;
  animation: snowRise linear infinite;
  opacity: 0;
}

/* ── Mouvement montant avec dérive horizontale aléatoire ── */
@keyframes snowRise {
  0%   { transform: translateY(0)      translateX(0); }
  100% { transform: translateY(-100vh) translateX(var(--drift)); }
}

/* ── Clignotements aléatoires vers le doré (5 variantes) ── */

@keyframes twinkle1 {
  0%,100% { opacity: 0.70; }
  20%     { opacity: 0.05; }
  45%     { opacity: 0.90; }
  65%     { opacity: 0.10; }
  80%     { opacity: 0.60; }
}

@keyframes twinkle2 {
  0%,100% { opacity: 0.40; }
  15%     { opacity: 0.90; }
  35%     { opacity: 0.05; }
  60%     { opacity: 0.80; }
  80%     { opacity: 0.15; }
}

@keyframes twinkle3 {
  0%,100% { opacity: 0.10; }
  25%     { opacity: 0.85; }
  50%     { opacity: 0.20; }
  70%     { opacity: 1.00; }
  90%     { opacity: 0.05; }
}

@keyframes twinkle4 {
  0%,100% { opacity: 0.60; }
  10%     { opacity: 0.05; }
  30%     { opacity: 0.50; }
  55%     { opacity: 0.90; }
  75%     { opacity: 0.10; }
}

@keyframes twinkle5 {
  0%,100% { opacity: 0.30; }
  18%     { opacity: 0.95; }
  40%     { opacity: 0.10; }
  58%     { opacity: 0.70; }
  85%     { opacity: 0.05; }
}