/*
 * 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.
 */

/* Flash label animation for card state changes */
@keyframes flash-label {
  0% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

.animate-flash-label {
  animation: flash-label 0.8s ease-out forwards;
}

/* Subtle pulse on the card itself */
@keyframes flash-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.animate-flash-have,
.animate-flash-extra,
.animate-flash-reset {
  animation: flash-pulse 0.4s ease-out;
}

/* Celebration overlay and confetti */
.celebration-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
}

.celebration-badge {
  margin-top: 64px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #22c55e;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.35);
  animation: celebration-pulse 0.6s ease-in-out 3;
}

@keyframes celebration-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); }
}

.celebration-confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confetti-fall 1.2s ease-out forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* Screen reader only - for accessibility announcements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Bounce-in animation for celebration modal */
@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-bounce-in {
  animation: bounce-in 0.6s ease-out;
}