/**
 * Florida Predictor — Animations v3.1 (F2+F3)
 * Only purposeful animations — no decorative noise
 * 
 * CHANGELOG v3.1:
 * - numberFlash: value update feedback on lottery balls
 * - ballEntrance: staggered ball pop-in on data load
 * - Scroll reveal: IntersectionObserver-based .reveal system
 * - Heatmap cells: refined stagger with fade+scale
 * - Card entrance: gentle fade-up on viewport entry
 */

/* ============================================================================
   KEYFRAMES
   ============================================================================ */

/* Status dot pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Countdown separator blink */
@keyframes blink-sep {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Countdown urgent pulse */
@keyframes pulse-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.15); }
}

/* Shimmer for progress bar */
@keyframes shimmer-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Fade in up — used for scroll reveal */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide in (for match badge) */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Number flash — lottery ball value update (F2) */
@keyframes numberFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Ball entrance — staggered pop-in (F2) */
@keyframes ballEntrance {
  0% { opacity: 0; transform: scale(0.5) translateY(10px); }
  60% { opacity: 1; transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Heatmap cell appear — fade + scale (F3) */
@keyframes cellAppear {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* Number flip â€" countdown digit change (F6) */
@keyframes numberFlip {
  0% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(-30%); opacity: 0; }
  60% { transform: translateY(30%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Applied: countdown digit flip */
.time-value.flip {
  animation: numberFlip 0.3s var(--ease-swift);
}

/* ============================================================================
   APPLIED ANIMATIONS
   ============================================================================ */

/* Heatmap cells — staggered appearance (refined for F3) */
.heatmap-cell {
  animation: cellAppear 0.3s var(--ease-smooth) backwards;
}

/* Lottery ball entrance — staggered (F2) */
.lottery-ball:nth-child(1) { animation: ballEntrance 0.5s var(--ease-bounce) 0.1s backwards; }
.lottery-ball:nth-child(2) { animation: ballEntrance 0.5s var(--ease-bounce) 0.2s backwards; }
.lottery-ball:nth-child(3) { animation: ballEntrance 0.5s var(--ease-bounce) 0.3s backwards; }

/* Prediction match badge entrance */
.prediction-match {
  animation: slideIn 0.4s var(--ease-smooth);
}

/* ============================================================================
   SCROLL REVEAL SYSTEM (F2+F3)
   Sections start hidden and animate in when visible in viewport.
   JavaScript IntersectionObserver adds .revealed class.
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.animate-fade-in { animation: fadeIn 0.5s var(--ease-smooth); }
.animate-slide-up { animation: fadeInUp 0.5s var(--ease-smooth); }

/* ============================================================================
   THEME TRANSITION
   ============================================================================ */

/* Smooth color transitions when toggling dark mode */
body,
.card,
.main-content,
.top-bar,
.main-footer,
.time-unit,
.period-btn,
.mobile-header,
.lotteries-table-wrap,
.heatmap-grid,
.heatmap-stats,
.chart-container {
  transition: background-color 0.3s var(--ease-smooth), 
              color 0.3s var(--ease-smooth), 
              border-color 0.3s var(--ease-smooth);
}