/**
 * =============================================================================
 * 05-animations.css
 * =============================================================================
 * Keyframes i animacions: transitions, transforms i efectes visuals animats.
 *
 * @package    temperatura.viladrau.online
 * @author     Andreu Pujol <hola@andreupujol.dev>
 * @version    1.0.0
 * @created    2025-11-27
 * =============================================================================
 */

/* =============================================================================
   1. Float In (entrada targetes)
   ============================================================================= */
@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =============================================================================
   2. Pulse Temp (temperatura pulsant)
   ============================================================================= */
@keyframes pulseTemp {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(14, 165, 233, 0.4);
  }
  50% {
    transform: translateY(-1px);
    text-shadow: 0 6px 18px rgba(14, 165, 233, 0.25);
  }
  100% {
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(14, 165, 233, 0.4);
  }
}

/* =============================================================================
   3. Halo (efecte d'aureola)
   ============================================================================= */
@keyframes halo {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0.12);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(14, 165, 233, 0.02);
  }
}

/* =============================================================================
   4. Sweep (efecte shimmer)
   ============================================================================= */
@keyframes sweep {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

/* =============================================================================
   5. Skeleton Shimmer (animació loading)
   ============================================================================= */
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* =============================================================================
   6. Fade In (aparició suau)
   ============================================================================= */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   7. Glow Pulse (pulsació de brillantor per predicció 7 dies)
   ============================================================================= */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.2);
  }
}

/* =============================================================================
   8. Bounce Subtle (rebot subtil per hover)
   ============================================================================= */
@keyframes bounceSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* =============================================================================
   7. Slide In Up (entrada des de baix)
   ============================================================================= */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   8. NOVES ANIMACIONS PER PREDICCIÓ IA
   ============================================================================= */

/* Pulsació subtil per efecte de fons predicció */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Brillantor per barra de confiança */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Gradient animat per prediccions */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulsació de temperatura predicció */
@keyframes pulsePrediction {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
  }
  50% {
    transform: scale(1.02);
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  }
}

/* =============================================================================
   9. MILLORES TRANSVERSALS (Novembre 2025)
   ============================================================================= */

/* Aparició escalonada per elements de llista */
@keyframes staggerIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hover suau per cards interactives */
@keyframes hoverLift {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

/* Loading dots (per estats de càrrega) */
@keyframes loadingDots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60%, 100% {
    content: '...';
  }
}

/* Smooth scale (per hover de botons) */
@keyframes smoothScale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}