/* =============================================================
   ANIWEEK — animations.css  (shimmer · pulses · transitions)
   ============================================================= */

/* ── SHIMMER (skeleton loader) ───────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.sk-head,
.sk-card {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-raised)  50%,
    var(--bg-surface) 75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ── GLOW PULSE (airing-now badge) ──────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px  var(--green-glow); }
  50%       { box-shadow: 0 0 18px var(--green-glow), 0 0 6px rgba(16,185,129,.6); }
}

/* ── MODAL ENTRANCE ──────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── CARD APPEAR (staggered, triggered by JS adding .visible) ── */
.anime-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--base) var(--ease),
              transform var(--base) var(--ease),
              border-color var(--base) var(--ease),
              box-shadow var(--base) var(--ease);
}
.anime-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PIN ANIMATION ───────────────────────────────────────────── */
@keyframes pin-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.pin-btn.pop { animation: pin-pop 250ms var(--ease); }

/* ── COUNTDOWN TICK ──────────────────────────────────────────── */
@keyframes countdown-tick {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}
.card-countdown.ticking {
  animation: countdown-tick 1s ease-in-out infinite;
}

/* ── SCROLL FADE (utility) ───────────────────────────────────── */
@keyframes scroll-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scroll-appear {
  animation: scroll-fade-in var(--slow) var(--ease) both;
}

/* ── WATCHLIST BADGE APPEAR ──────────────────────────────────── */
@keyframes badge-pop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.watchlist-badge.show {
  animation: badge-pop 300ms var(--ease) both;
}