/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Celebration animations */
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out;
}

/* Toast animations */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out forwards;
}

.animate-slide-out {
  animation: slide-out 0.3s ease-out forwards;
}

/* Progress bar shimmer effect */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* Lantern glow animation */
@keyframes lantern-glow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.5)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.5));
  }
}

.animate-lantern-glow {
  animation: lantern-glow 2.5s ease-in-out infinite;
}

/* Sparkle twinkle animation */
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  20%       { opacity: 1; transform: scale(1.3); }
  40%       { opacity: 0; transform: scale(0); }
}

.sparkle {
  display: inline-block;
  transform-origin: center center;
}

/* Negative delays = animation already running at a different point on page load.
   Different durations = phases drift permanently and never re-sync. */
.sparkle-1 { animation: sparkle-twinkle  7.5s ease-in-out infinite -1.2s; }
.sparkle-2 { animation: sparkle-twinkle  9.1s ease-in-out infinite -4.3s; }
.sparkle-3 { animation: sparkle-twinkle 11.3s ease-in-out infinite -2.7s; }
.sparkle-4 { animation: sparkle-twinkle  8.4s ease-in-out infinite -6.1s; }
.sparkle-5 { animation: sparkle-twinkle 10.2s ease-in-out infinite -3.8s; }