/* --- KEYFRAME ANIMATIONS --- */

/* Page Fade & Slide In */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Skeleton Pulse Loading */
@keyframes pulseGlow {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

/* Subtle Hover/Press Bounce */
@keyframes springBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  80% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Badge Glow Sweep */
@keyframes glowSweep {
  0% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.2); }
  50% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.6); }
  100% { box-shadow: 0 0 5px rgba(56, 189, 248, 0.2); }
}

/* --- ANIMATION CLASSES --- */

/* Smooth Section Entry */
.animate-fade-in {
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Interactive Card & Button Motion */
.history-card, .trending-item, .tool-btn, .pill, .quiz-btn, .read-more-btn {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
              background-color 0.2s ease, 
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.history-card:hover, .trending-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.history-card:active, .trending-item:active, .tool-btn:active {
  transform: scale(0.95);
}

/* Pulse state for image/card loading */
.skeleton-card, .skeleton-line {
  animation: pulseGlow 1.5s infinite ease-in-out;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* Active Badge Animation */
.badge.live {
  animation: glowSweep 2s infinite ease-in-out;
}

/* Smooth Page Switching */
.article-view, .discovery-feed {
  transition: opacity 0.3s ease, transform 0.3s ease;
}