/* ============================================
   INTERACTIONS.CSS  v1.0
   Scroll reveals · Micro-interactions
   Import after base.css
   ============================================ */

/* ============================================
   REVEAL ON SCROLL
   .reveal = initial hidden state
   .revealed = toggled by IntersectionObserver
   ============================================ */

.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out),
                transform 600ms var(--ease-out);
  }

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

  .reveal-delay-1 { transition-delay: 100ms; }
  .reveal-delay-2 { transition-delay: 200ms; }
  .reveal-delay-3 { transition-delay: 300ms; }
}

/* ============================================
   HEADER — scrolled state enhancement
   Class .scrolled already applied by hero.css JS
   ============================================ */

.site-header.scrolled {
  --header-height-reduction: 4px;
}

/* ============================================
   NAV LINKS — scaleX underline (replaces width anim)
   Overrides hero.css width-based approach with
   a higher-quality transform-origin:left version
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  .nav-links a::after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms var(--ease-out);
  }

  .nav-links a:hover::after {
    transform: scaleX(1);
  }
}