/* ── Page Transitions ── */
.fade-in {
  animation: fadeIn 0.5s ease both;
}

.fade-out {
  animation: fadeOut 0.3s ease both;
}

.slide-up {
  animation: slideUp 0.5s ease both;
}

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

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

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

/* ── Staggered Children ── */
.stagger > * {
  animation: fadeIn 0.4s ease both;
}

.stagger > *:nth-child(1) {
  animation-delay: 0ms;
}
.stagger > *:nth-child(2) {
  animation-delay: 60ms;
}
.stagger > *:nth-child(3) {
  animation-delay: 120ms;
}
.stagger > *:nth-child(4) {
  animation-delay: 180ms;
}
.stagger > *:nth-child(5) {
  animation-delay: 240ms;
}
.stagger > *:nth-child(6) {
  animation-delay: 300ms;
}
.stagger > *:nth-child(7) {
  animation-delay: 360ms;
}
.stagger > *:nth-child(8) {
  animation-delay: 420ms;
}

/* ── Terminal Typing ── */
.terminal-line {
  animation: typeLine 0.3s ease both;
}

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

/* ── Pulse for active dot ── */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1.6);
  }
}

.nav-dot.current {
  animation: pulse 2s ease-in-out infinite;
  background: var(--color-accent);
}

/* ── Bar Fill Animation ── */
@keyframes barGrow {
  from {
    width: 0;
  }
}

.axis-bar-fill.animate {
  animation: barGrow 0.8s ease both;
}

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