/* ==========================================================================
   Animations — page load, scroll reveals, micro-interactions
   ========================================================================== */

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

@keyframes scaleX {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

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

/* Orchestrated hero entry */
.hero-logo     { animation: fadeInUp 1.4s var(--ease-out); }
.hero-eyebrow  { animation: fadeInUp 1.4s var(--ease-out) 0.15s backwards; }
.hero-name     { animation: fadeInUp 1.4s var(--ease-out) 0.30s backwards; }
.hero-tagline  { animation: fadeInUp 1.4s var(--ease-out) 0.45s backwards; }
.hero-divider  { animation: scaleX   1.2s var(--ease-out) 0.60s backwards; }
.hero-bio      { animation: fadeInUp 1.4s var(--ease-out) 0.70s backwards; }

/* Scroll-reveal — JS toggles .in-view */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out),
              transform 1s var(--ease-out);
  will-change: opacity, transform;
}

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

.reveal-stagger-1 { transition-delay: 0s; }
.reveal-stagger-2 { transition-delay: 0.1s; }
.reveal-stagger-3 { transition-delay: 0.2s; }
.reveal-stagger-4 { transition-delay: 0.3s; }