/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN MOTION SYSTEM
 *
 * Lightweight, GPU-friendly transitions and reveals. Zero JS animation
 * frames — everything is CSS-driven with one IntersectionObserver to add
 * a single `.bn-in` class when a section enters the viewport.
 *
 * Performance budget:
 *   - Only `opacity` and `transform` are animated (compositor-only props)
 *   - Durations capped at 600ms (no long-running attention sinks)
 *   - `prefers-reduced-motion` disables everything
 *   - Mobile (<720px) reduces durations + range to 1/2
 *   - No backdrop-filter animations (heavy on iOS)
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Shared easings ──────────────────────────────────────────────────── */
:root {
  --bn-ease-soft:  cubic-bezier(0.16, 1, 0.30, 1);
  --bn-ease-emph:  cubic-bezier(0.22, 1, 0.36, 1);
  --bn-ease-flat:  cubic-bezier(0.4, 0, 0.2, 1);

  --bn-dur-micro:  140ms;
  --bn-dur-quick:  240ms;
  --bn-dur-normal: 420ms;
  --bn-dur-slow:   620ms;
}
@media (max-width: 720px) {
  :root {
    --bn-dur-micro:  100ms;
    --bn-dur-quick:  180ms;
    --bn-dur-normal: 280ms;
    --bn-dur-slow:   380ms;
  }
}

/* ── Reveal-on-scroll: applied by motion.js once per section ─────────── */
.bn-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--bn-dur-slow) var(--bn-ease-soft),
    transform var(--bn-dur-slow) var(--bn-ease-soft);
  will-change: opacity, transform;
}
.bn-reveal.bn-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — only 1 IntersectionObserver, the children animate
 * via CSS `transition-delay` cascades. */
.bn-reveal.bn-stagger > *,
.bn-stagger > .bn-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--bn-dur-normal) var(--bn-ease-soft),
    transform var(--bn-dur-normal) var(--bn-ease-soft);
}
.bn-reveal.bn-in.bn-stagger > *,
.bn-stagger.bn-in > .bn-reveal {
  opacity: 1; transform: translateY(0);
}
.bn-stagger > *:nth-child(1) { transition-delay:  40ms; }
.bn-stagger > *:nth-child(2) { transition-delay: 120ms; }
.bn-stagger > *:nth-child(3) { transition-delay: 200ms; }
.bn-stagger > *:nth-child(4) { transition-delay: 280ms; }
.bn-stagger > *:nth-child(5) { transition-delay: 360ms; }
.bn-stagger > *:nth-child(6) { transition-delay: 440ms; }
.bn-stagger > *:nth-child(7) { transition-delay: 520ms; }
.bn-stagger > *:nth-child(8) { transition-delay: 600ms; }

/* ── Hover micro-interactions ─────────────────────────────────────────── */
/* Buttons feel pressable */
.btn-primary,
.bn-btn,
.btn-ghost,
.btn-demo-hero,
.pro-btn,
.dj-alt-pick {
  transition:
    transform   var(--bn-dur-micro)  var(--bn-ease-soft),
    box-shadow  var(--bn-dur-quick)  var(--bn-ease-soft),
    background  var(--bn-dur-micro)  var(--bn-ease-flat),
    color       var(--bn-dur-micro)  var(--bn-ease-flat);
}
.btn-primary:active,
.bn-btn:active,
.btn-ghost:active,
.btn-demo-hero:active,
.pro-btn:active,
.dj-alt-pick:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--bn-dur-micro);
}

/* Card hover lift */
.step-card,
.project-card,
.dj-alt-card,
.usage-card,
.contractor-card,
.aqar-card,
.upsell-feat,
.material-card {
  transition:
    transform     var(--bn-dur-quick) var(--bn-ease-soft),
    box-shadow    var(--bn-dur-normal) var(--bn-ease-soft),
    border-color  var(--bn-dur-quick) var(--bn-ease-soft);
  will-change: transform;
}

/* Nav links — gold underline grows from center */
.nav-links a {
  position: relative;
  transition: color var(--bn-dur-quick) var(--bn-ease-soft);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  width: 0; height: 2px;
  background: var(--bn-gold-400);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width var(--bn-dur-quick) var(--bn-ease-soft);
}
.nav-links a:hover::after { width: 28px; }

/* ── Number count-up (handled by motion.js) ─────────────────────────── */
.stat strong[data-count-target] {
  /* hidden initially while count animates */
  font-variant-numeric: tabular-nums;
}

/* ── Subtle hero parallax on mouse move (desktop only) ──────────────── */
@media (min-width: 1024px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-canvas {
    transition: transform 80ms linear;
    will-change: transform;
  }
  .hero-sun {
    transition: transform var(--bn-dur-normal) var(--bn-ease-soft);
  }
}

/* ── Smooth-scroll for in-page anchors ────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Reduced motion: scope-only kill (no universal kill — interferes with
 *    the one-shot welcome cinematic the user explicitly opts into). */
@media (prefers-reduced-motion: reduce) {
  .bn-reveal, .bn-reveal.bn-stagger > *, .bn-stagger > .bn-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}