/* ============================================================
   VibeSecurity - Animations & Motion
   ============================================================ */

/* ── ENTRANCE ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── AMBIENT ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(124, 93, 249, 0.5); }
  50%       { box-shadow: 0 0 0 4px rgba(124, 93, 249, 0);   }
}

@keyframes glowBreath {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -60%) scale(1);    }
  50%       { opacity: 1;   transform: translate(-50%, -60%) scale(1.08); }
}

@keyframes navPulse {
  0%, 100% { opacity: 1; transform: scale(1);    }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

@keyframes blink {
  50% { opacity: 0; }
}

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

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(45, 212, 170, 0.4); }
  70%       { box-shadow: 0 0 0 4px rgba(45, 212, 170, 0);   }
}

@keyframes scanLine {
  0%   { opacity: 0.5; }
  50%  { opacity: 1;   }
  100% { opacity: 0.5; }
}

/* ── UTILITY ANIMATION CLASSES ── */
.anim-fade-up   { animation: fadeUp  0.6s var(--ease-out) both; }
.anim-fade-in   { animation: fadeIn  0.5s var(--ease-out) both; }
.anim-fade-left { animation: fadeLeft 0.5s var(--ease-out) both; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }

/* Scroll reveal - add .vis via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal.vis {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal-left.vis {
  opacity: 1;
  transform: none;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}