/* ============================================
   NAXIRA — Animation System
   Scroll reveals, micro-interactions, transitions
   ============================================ */

/* ── Scroll Reveal Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-stagger--visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger--visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger--visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger--visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger--visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger--visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger--visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger--visible > *:nth-child(8) { transition-delay: 560ms; }

.reveal-stagger--visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero Animations ── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__label {
  animation: heroFadeUp 0.8s ease-out 0.2s both;
}

.hero__title {
  animation: heroFadeUp 0.8s ease-out 0.4s both;
}

.hero__subtitle {
  animation: heroFadeUp 0.8s ease-out 0.6s both;
}

.hero__actions {
  animation: heroFadeUp 0.8s ease-out 0.8s both;
}

.hero__stats {
  animation: heroFadeUp 0.8s ease-out 1s both;
}

/* ── Keyframe Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.spin { animation: spin 0.8s linear infinite; }
.fade-in { animation: fadeIn 0.4s ease forwards; }