/**
 * motion.css
 * Animation tokens, scroll-reveal, hover micro-interactions.
 * Motion tokens are defined in tokens.css (:root).
 * Depends on: tokens.css
 */

/* --------------------------------------------------------------------------
 * Scroll-reveal
 * Elements receive .reveal class in PHP templates.
 * JS IntersectionObserver adds .is-visible when they enter the viewport.
 * -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

/* Stagger — applied via JS transition-delay on child .reveal elements */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms;   }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms;  }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }
/* Cap at 6 children; additional children get no extra delay */

/* --------------------------------------------------------------------------
 * Nav underline animation — slides in from left on hover
 * Used on .nav__link elements.
 * -------------------------------------------------------------------------- */

.nav__link {
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-brand-green);
  transition: width var(--dur-base) var(--ease-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item--active .nav__link::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
 * Map grayscale hover (footer Google Maps iframe)
 * -------------------------------------------------------------------------- */

.map-embed {
  filter: grayscale(0.4);
  transition: filter var(--dur-slow) var(--ease-out);
}

.map-embed:hover {
  filter: grayscale(0);
}

/* --------------------------------------------------------------------------
 * Transition helpers
 * -------------------------------------------------------------------------- */

.transition-color {
  transition: color var(--dur-fast) var(--ease-out);
}

.transition-bg {
  transition: background-color var(--dur-fast) var(--ease-out);
}

.transition-transform {
  transition: transform var(--dur-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
 * Reduced motion override
 * Disables all durations and transforms for users who prefer it.
 * JS also reads matchMedia('(prefers-reduced-motion: reduce)') and
 * adds .is-visible immediately on reveal elements.
 * -------------------------------------------------------------------------- */

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

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

  .reveal.is-visible {
    transition: none;
  }

  .nav__link::after {
    transition: none;
  }

  .map-embed {
    filter: grayscale(0.4);
    transition: none;
  }
}