/* ============================================================
   TITANS — motion.css
   Keyframes + animation utilities
   ============================================================ */

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(255,107,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,94,87,0.6); }
  70%      { box-shadow: 0 0 0 8px rgba(255,94,87,0); }
}

@keyframes flash-coral {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}

@keyframes flash-green {
  0%   { background: var(--good-soft); }
  100% { background: transparent; }
}

@keyframes shimmer-bar {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes count-glow {
  0%, 100% { text-shadow: none; }
  50%      { text-shadow: 0 0 12px var(--accent-glow); }
}

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

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

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

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

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

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@keyframes scroll-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes save-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Reduced motion: kill every keyframe animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .ticker-track, .proof-col { animation: none !important; }
}

/* Utility classes */
.anim-pulse-ring { animation: pulse-ring 2s var(--ease) infinite; }
.anim-pulse-dot  { animation: pulse-dot 1.6s ease-in-out infinite; }
.anim-pulse-red  { animation: pulse-red 1.5s ease-out infinite; }
.anim-float      { animation: float-soft 4s ease-in-out infinite; }
.anim-fade-in    { animation: fade-in 260ms var(--ease) both; }
.anim-slide-up   { animation: fade-in-up 260ms var(--ease) both; }
.anim-modal      { animation: modal-in 200ms var(--ease) both; }
.anim-slide-right{ animation: slide-in-right 220ms var(--ease) both; }

.shimmer {
  background: linear-gradient(
    90deg,
    var(--card) 0%,
    var(--card-hover) 30%,
    var(--accent-soft) 50%,
    var(--card-hover) 70%,
    var(--card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-bar 1.4s linear infinite;
}

/* Stagger helper — always visible. The animation runs forward only,
   so even if the browser skips it, content stays at opacity 1. */
@keyframes fade-up-only {
  0%   { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.stagger > * { animation: fade-up-only 380ms var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }
.stagger > *:nth-child(n+9) { animation-delay: 480ms; }