/* Scroll experience layer: Lenis smooth scroll, parallax, reveals.
   Loaded on top of the compiled site CSS — no bundle changes. */

/* Parallax pan replaces background-attachment:fixed (broken on iOS). */
#hero, #what, #why {
  background-attachment: scroll !important;
  background-position-x: center !important;
  will-change: background-position;
}

/* On portrait/narrow screens `cover` height-fits the image exactly, leaving
   zero pan room — oversize the backgrounds so the parallax has travel. */
@media (max-width: 820px) {
  #what, #why { background-size: auto 185% !important; }
  #hero { background-size: auto 140% !important; }
}

/* The original #how is locked to h-screen; its content (image grid + footer)
   overflows past the page's scrollable area, so the footer could never be
   reached. Let it size to its content. */
#how { height: auto !important; min-height: 100vh; padding-bottom: 4rem; }

/* Lenis housekeeping (per docs). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Reveal elements. Base: rise + fade. Directional variants slide in from
   the side the card sits on. Staggered via inline transition-delay. */
.pv-el {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.19, .75, .22, 1);
  will-change: opacity, transform;
}
.pv-el.pv-zoom  { transform: translateY(26px) scale(.955); }
.pv-el.pv-left  { transform: translateX(-72px); }
.pv-el.pv-right { transform: translateX(72px); }
.pv-on { opacity: 1; transform: none !important; }

/* Nav elevates once you leave the top. The fixed wrapper needs a stacking
   order above page content — without it the #how images paint over the bar. */
.fixed.top-0.left-0.right-0 { z-index: 60; }
nav {
  transition: box-shadow .35s ease, background-color .35s ease;
}
nav.pv-nav-elevated {
  box-shadow: 0 6px 24px rgba(15, 30, 20, .14);
  background-color: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hero down-arrow: slow bob after the intro settles. */
#hero a[href="#what"] svg {
  animation: pv-bob 2.8s ease-in-out 1.6s infinite;
}
@keyframes pv-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

/* The hero scroll arrow is w-36 (144px) — oversized on small screens. */
@media (max-width: 820px) {
  #hero a[href="#what"] svg { width: 4.5rem; height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-el { opacity: 1; transform: none; transition: none; }
  #hero a[href="#what"] svg { animation: none; }
}