/**
 * GLITCH_CORE — animations.css
 * All @keyframes used by main.css and components.css.
 * Loaded last so it's available to everything.
 */

/* ── Fade variants ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── Modal ── */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Module enter ── */
@keyframes module-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Toast ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0);     max-height: 80px; margin-bottom: .5rem; }
  to   { opacity: 0; transform: translateX(20px);  max-height: 0;    margin-bottom: 0;    }
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%;   }
}

/* ── Pulse / blink ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   box-shadow: 0 0 4px currentColor;  }
  50%       { opacity: 0.4; box-shadow: 0 0 10px currentColor; }
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.5; }
}

@keyframes blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.2; }
}

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

/* ── Boot bar ── */
@keyframes boot-bar-fill {
  from { width: 0%;   }
  to   { width: 100%; }
}

/* ── Glitch text (logo) ── */
@keyframes glitch-text {
  0%        { text-shadow: 2px 0 var(--neon-cyan), -2px 0 var(--neon-purple); clip-path: inset(0 0 95% 0); }
  5%        { clip-path: inset(10% 0 60% 0); }
  10%       { clip-path: inset(50% 0 30% 0); text-shadow: -2px 0 var(--neon-cyan), 2px 0 var(--neon-purple); }
  15%       { clip-path: inset(80% 0 5% 0); }
  20%, 100% { clip-path: inset(0 0 100% 0); text-shadow: none; }
}

/* ── Scanlines movement ── */
@keyframes scanlines-move {
  from { background-position: 0 0;   }
  to   { background-position: 0 4px; }
}

/* ── Card reveal (stagger parent uses .stagger class) ── */
@keyframes card-reveal {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Ripple ── */
@keyframes ripple {
  from { transform: scale(0);   opacity: 0.5; }
  to   { transform: scale(2.5); opacity: 0;   }
}

/* ── Neon glow pulse ── */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 4px  var(--neon-cyan), 0 0 8px  var(--neon-cyan); }
  50%       { box-shadow: 0 0 12px var(--neon-cyan), 0 0 24px var(--neon-cyan); }
}

/* ── Utility animation classes ── */
.anim-fade-in       { animation: fadeIn      0.3s ease both; }
.anim-fade-in-up    { animation: fadeInUp    0.35s ease both; }
.anim-fade-in-left  { animation: fadeInLeft  0.3s ease both; }
.anim-scale-in      { animation: fadeInScale 0.25s ease both; }
.anim-module-enter  { animation: module-enter 0.3s ease both; }

/* Stagger children */
.stagger > *:nth-child(1) { animation: card-reveal 0.35s ease both 0.00s; }
.stagger > *:nth-child(2) { animation: card-reveal 0.35s ease both 0.06s; }
.stagger > *:nth-child(3) { animation: card-reveal 0.35s ease both 0.12s; }
.stagger > *:nth-child(4) { animation: card-reveal 0.35s ease both 0.18s; }
.stagger > *:nth-child(5) { animation: card-reveal 0.35s ease both 0.24s; }
.stagger > *:nth-child(6) { animation: card-reveal 0.35s ease both 0.30s; }

/* Spinner utility */
.spinner {
  border: 2px solid var(--border);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-md { width: 24px; height: 24px; }
.spinner-lg { width: 36px; height: 36px; }

/* Ripple on buttons */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
  animation: ripple 0.6s ease-out;
}

/* Card-reveal utility */
.card-reveal { animation: card-reveal 0.35s ease both; }

/* Login shake animation */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}