/* =============================================
   Days of Success — animations.css
   ============================================= */

/* --- View Transitions --- */
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes viewFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.view-enter {
  animation: viewFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Number Entrance — clean fade-up, no bounce scale === */
@keyframes numberPop {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.number-pop {
  animation: numberPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Message Fade In --- */
@keyframes messageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message-fade {
  animation: messageFadeIn 0.6s ease 0.3s both;
}

/* --- Badge Pop (unlock celebration) --- */
@keyframes badgePop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.2); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.badge-pop {
  animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Badge Shimmer (earned badges) --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-earned::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  pointer-events: none;
}

/* --- Pulse (progress bar fill) --- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

.pulse {
  animation: pulse 2s ease infinite;
}

/* --- Gentle Float (streak number idle) --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

/* --- Slide Up (modal) --- */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.slide-up {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Confetti burst overlay flash --- */
@keyframes flashOverlay {
  0%   { opacity: 0.12; }
  100% { opacity: 0; }
}

.flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 220, 100, 0.15);
  pointer-events: none;
  animation: flashOverlay 0.5s ease forwards;
}

/* --- Milestone countdown pulse --- */
@keyframes countdownPulse {
  0%, 100% { color: var(--clr-text-secondary); }
  50%       { color: var(--clr-accent); }
}

.countdown-pulse {
  animation: countdownPulse 2s ease infinite;
}

/* --- Star sparkle (near milestone) --- */
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%       { transform: scale(1.3) rotate(20deg); opacity: 0.8; }
}

.sparkle {
  display: inline-block;
  animation: sparkle 1.5s ease infinite;
}

/* --- Skeleton loading --- */
@keyframes skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--radius-sm);
}