/* ============================================================
   VISA NOIR — Motion System
   ============================================================ */

/* --- Fade Up (staggered page load) --- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-up {
  opacity: 0;
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-delay-1 { animation-delay: 100ms; }
.anim-delay-2 { animation-delay: 200ms; }
.anim-delay-3 { animation-delay: 300ms; }
.anim-delay-4 { animation-delay: 400ms; }
.anim-delay-5 { animation-delay: 500ms; }
.anim-delay-6 { animation-delay: 600ms; }

/* --- Fade In --- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.anim-fade-in {
  opacity: 0;
  animation: fade-in 0.4s ease forwards;
}

/* --- Slide Down (step bar) --- */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-slide-down {
  animation: slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Pulse Ring (waiting status) --- */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(247, 182, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(247, 182, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(247, 182, 0, 0);
  }
}

.anim-pulse-ring {
  animation: pulse-ring 2s ease-out infinite;
}

/* --- Success Pulse --- */
@keyframes success-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(0, 230, 118, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
  }
}

.anim-success-pulse {
  animation: success-pulse 2s ease-out infinite;
}

/* --- Error Pulse --- */
@keyframes error-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 82, 82, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.anim-error-pulse {
  animation: error-pulse 2s ease-out infinite;
}

/* --- Scale In (modals) --- */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-scale-in {
  animation: scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Glow Pulse (active step number) --- */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(247, 182, 0, 0.15), 0 0 20px rgba(247, 182, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(247, 182, 0, 0.25), 0 0 30px rgba(247, 182, 0, 0.15);
  }
}

.anim-glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* --- Spin (loading) --- */
@keyframes noir-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.anim-spin {
  animation: noir-spin 1s linear infinite;
}

/* --- Border Flash (copy feedback) --- */
@keyframes border-flash {
  0% { border-color: rgba(247, 182, 0, 0.6); }
  100% { border-color: rgba(255, 255, 255, 0.06); }
}

.anim-border-flash {
  animation: border-flash 0.5s ease forwards;
}

/* --- Shimmer (loading placeholder) --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary) 50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}