/* ═══════════════════════════════════════════════════════════
   HISTORY VISUALIZER — Animations
   ═══════════════════════════════════════════════════════════ */

@keyframes pulse-amber {
  0%, 100% { opacity: 1; box-shadow: var(--glow-amber-sm); }
  50%       { opacity: 0.65; box-shadow: none; }
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 8px var(--amber-mid); }
  50%       { text-shadow: 0 0 20px var(--amber-bright), 0 0 40px var(--amber-mid); }
}

@keyframes unfurl {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slide-in-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes particle-float {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 0.6; }
  50%  { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
  100% { transform: translateY(-40px) rotate(360deg); opacity: 0; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92%       { opacity: 1; }
  93%       { opacity: 0.7; }
  94%       { opacity: 1; }
  97%       { opacity: 0.85; }
}

/* ── Applied animation classes ──────────────────────────── */
.anim-fade-in    { animation: fade-in var(--dur-normal) var(--ease-out-expo) both; }
.anim-slide-up   { animation: slide-in-up var(--dur-normal) var(--ease-out-expo) both; }
.anim-slide-right{ animation: slide-in-right var(--dur-normal) var(--ease-out-expo) both; }
.anim-slide-left { animation: slide-in-left var(--dur-normal) var(--ease-out-expo) both; }

.led-amber {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber-mid);
  animation: pulse-amber 2s ease-in-out infinite;
  flex-shrink: 0;
}

.shimmer-text {
  background: linear-gradient(90deg, var(--sepia-mid) 25%, var(--amber-bright) 50%, var(--sepia-mid) 75%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}