/* =========================================================
   Animations & Keyframes
   ========================================================= */

/* Orb drift — ambient background movement */
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(60px, -40px) scale(1.04); }
  50%  { transform: translate(20px, 60px) scale(0.96); }
  75%  { transform: translate(-50px, 20px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Shimmer sweep for loading cards */
@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* Card cascade entrance */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.story-card {
  opacity: 0;
  animation: card-enter 0.5s var(--ease-out) forwards;
}

/* Stagger via JS-set animation-delay, but set base here */
.story-card { animation-delay: var(--card-delay, 0ms); }

/* Fade in for ambient orbs */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 0.35; }
}
.orb { animation-name: drift, fade-in; }

/* Pulse for refresh button */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 180, 238, 0); }
  50%       { box-shadow: 0 0 16px 4px rgba(108, 180, 238, 0.3); }
}
.refresh-btn.loading {
  animation: pulse-glow 1.2s ease-in-out infinite;
  border-color: rgba(108, 180, 238, 0.4);
  color: #6cb4ee;
}

/* Hero logo glow pulse */
@keyframes neon-pulse {
  0%, 100% { filter: url(#glow-md); }
  50%       { filter: url(#glow-lg); }
}
.neon-logo { animation: neon-pulse 4s ease-in-out infinite; }

/* Scrollbar hidden globally for category nav */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }