/* ==========================================================================
   Motion & Scroll Reveal — matthewheyman.com v2
   ========================================================================== */

/* Scroll-triggered section reveals, staggered entrances, in-view glow.
   Respects prefers-reduced-motion. No content hidden without JS fallback. */

/* ==========================================================================
   1. Scroll-triggered section reveal
   ========================================================================== */

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

/* Modern browsers: CSS scroll-driven animation (no JS required) */
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    animation: revealIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* JS fallback: when .js is on body, we hide until .in-view (Intersection Observer) */
body.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

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

/* Browsers that support scroll-driven don't need the JS hide; ensure they stay visible */
@supports (animation-timeline: view()) {
  body.js .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   2. Staggered hero entrance (on load)
   ========================================================================== */

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

.hero__title {
  animation: staggerIn 0.6s ease-out both;
  animation-delay: 0.1s;
}

.hero__subtitle {
  animation: staggerIn 0.6s ease-out both;
  animation-delay: 0.25s;
}

.hero__actions {
  animation: staggerIn 0.6s ease-out both;
  animation-delay: 0.4s;
}

/* ==========================================================================
   3. Staggered feature cards (on scroll or on load when in view)
   ========================================================================== */

.feature-card {
  animation: revealIn 0.5s ease-out both;
}

.feature-card:nth-child(1) { animation-delay: 0s; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.2s; }

/* When inside a reveal-on-scroll section, cards animate with section (scroll-driven) or when section gets .in-view */
.reveal-on-scroll .feature-card {
  animation: none; /* let parent reveal handle it, or use scroll-driven on cards */
}

@supports (animation-timeline: view()) {
  .reveal-on-scroll .feature-card {
    animation: revealIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .reveal-on-scroll .feature-card:nth-child(1) { animation-delay: 0s; }
  .reveal-on-scroll .feature-card:nth-child(2) { animation-delay: 0.08s; }
  .reveal-on-scroll .feature-card:nth-child(3) { animation-delay: 0.16s; }
}

/* ==========================================================================
   4. Section glow when in view (optional; JS adds .in-view)
   ========================================================================== */

.reveal-on-scroll.glow-when-in-view {
  transition: box-shadow 0.4s ease-out;
}

body.js .reveal-on-scroll.glow-when-in-view.in-view {
  box-shadow: var(--glow-subtle);
}

/* ==========================================================================
   5. prefers-reduced-motion: disable or shorten animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .feature-card {
    animation: none !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  body.js .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  body.js .reveal-on-scroll.in-view {
    opacity: 1;
    transform: none;
  }
}