@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; opacity: 0; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
.anim-slide-in-right { animation: slideInRight 0.4s ease-out forwards; opacity: 0; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 4px currentColor; }
  50% { box-shadow: 0 0 12px currentColor; }
}
.anim-pulse { animation: pulseGlow 2s ease-in-out infinite; }

@keyframes alertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.anim-alert-pulse { animation: alertPulse 1.5s ease-in-out infinite; }

.anim-stagger {
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: calc(var(--stagger-index, 0) * 100ms);
  opacity: 0;
}

.typewriter-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--accent-purple, #818cf8);
  animation: blink 0.7s step-end infinite;
  vertical-align: text-bottom; margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

@keyframes pageSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pageSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-60px); }
}
.page-entering { animation: pageSlideIn 0.3s ease-out forwards; }
.page-exiting { animation: pageSlideOut 0.3s ease-out forwards; }

.step-active { opacity: 1 !important; }
.flow-step { opacity: 0.4; transition: opacity 0.3s ease; }
.flow-step.step-active { opacity: 1; }