@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes flash-message-fly-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  10%, 90% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scaleY(0);
  }
}

/* Ensure the flash message expands from the top */
.flash-messages {
  transform-origin: top;
}

/* Keyframes for the falling animations */
@keyframes fall {
  0% { transform: translateY(-10vh) rotate(0deg); }
  100% { transform: translateY(100vh) rotate(360deg); }
}
@keyframes fallreverse {
  0% { transform: translateY(-10vh) rotate(360deg); }
  100% { transform: translateY(100vh) rotate(0deg); }
}

/* Keyframes for the candle flicker effect */
@keyframes candle-flicker {
  0% { opacity: 0.8; filter: blur(2px); }
  10% { opacity: 1; filter: blur(3px); }
  20% { opacity: 0.7; filter: blur(1px); }
  30% { opacity: 1; filter: blur(2px); }
  40% { opacity: 0.9; filter: blur(3px); }
  50% { opacity: 1; filter: blur(2px); }
  60% { opacity: 0.8; filter: blur(1px); }
  70% { opacity: 1; filter: blur(3px); }
  80% { opacity: 0.7; filter: blur(2px); }
  90% { opacity: 1; filter: blur(1px); }
  100% { opacity: 0.8; filter: blur(2px); }
}

/* Keyframes for the twinkling lights effect */
@keyframes twinkle-lights {
  0% { filter: brightness(1); }
  10% { filter: brightness(1.2); }
  20% { filter: brightness(0.8); }
  30% { filter: brightness(1.1); }
  40% { filter: brightness(0.9); }
  50% { filter: brightness(1.2); }
  60% { filter: brightness(0.85); }
  70% { filter: brightness(1.15); }
  80% { filter: brightness(0.95); }
  90% { filter: brightness(1.05); }
  100% { filter: brightness(1); }
}