/* Estado inicial que se asigna con JS */
.opacity-0 {
    opacity: 0;
}
.translate-y-5 {
    transform: translateY(1.25rem); /* ~20px hacia abajo */
}

/* Animación activa al entrar en viewport */
.animate-fade-in-up-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Retrasos para escalonar la animación (ya usados en tus divs) */
.animate-delay-0   { transition-delay: 0s; }
.animate-delay-100 { transition-delay: 0.1s; }
.animate-delay-200 { transition-delay: 0.2s; }
.animate-delay-300 { transition-delay: 0.3s; }
.animate-delay-400 { transition-delay: 0.4s; }
.animate-delay-500 { transition-delay: 0.5s; }
.animate-delay-600 { transition-delay: 0.6s; }
.animate-delay-700 { transition-delay: 0.7s; }
.animate-delay-800 { transition-delay: 0.8s; }
.animate-delay-900 { transition-delay: 0.9s; }
.animate-delay-1000 { transition-delay: 1s; }
.animate-delay-1100 { transition-delay: 1.1s; }
.animate-delay-1200 { transition-delay: 1.2s; }
.animate-delay-1300 { transition-delay: 1.3s; }

/* ============================= */
/* Rating cups micro-animation  */
/* ============================= */

@keyframes cup-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes cup-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
  100% { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
}

.cup-btn.pop {
  animation: cup-pop .22s ease-out;
}

.cup-btn.pulse {
  animation: cup-pulse .4s ease-out;
  border-radius: 9999px;
}

/* ============================= */
/* Tag selection micro-feedback */
/* ============================= */

@keyframes tag-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.tag-chip-active {
  background-color: rgb(37 99 235); /* blue-600 */
  color: white;
  border-color: rgb(37 99 235);
}

.tag-chip-pop {
  animation: tag-pop .18s ease-out;
}

/* ============================= */
/* Draft saved feedback          */
/* ============================= */

.draft-saved-visible {
  opacity: 1 !important;
}

/* ============================= */
/* Submit loading state          */
/* ============================= */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 0.9s linear infinite;
}