/* NIN Group · scroll-linked motion, studied from the reference video: blocks glide in with the scroll position
 * (not on a timer), the founder band pins while its two picture columns keep moving at different speeds.
 * motion.js sets --p (0..1) on each [data-scrub] block and --q (0..1) on the pinned band's pictures.
 * Without JS, or with reduced motion, --p stays unset and every block sits still at full opacity. */
.lenis.lenis-smooth { scroll-behavior: auto !important; }

[data-scrub] {
  --dx: 0rem; --dy: 4.5rem; --ds: 0.035;
  opacity: calc(0.06 + 0.94 * var(--p, 1));
  transform: translate3d(calc((1 - var(--p, 1)) * var(--dx)), calc((1 - var(--p, 1)) * var(--dy)), 0) scale(calc(1 - (1 - var(--p, 1)) * var(--ds)));
  transform-origin: 50% 100%;
}
[data-scrub="left"]  { --dx: -7rem; --dy: 1.5rem; --ds: 0; }
[data-scrub="right"] { --dx: 7rem;  --dy: 1.5rem; --ds: 0.06; }
[data-step="2"] { --dy: 6.5rem; }
[data-step="3"] { --dy: 8.5rem; }
[data-step="4"] { --dy: 5.5rem; }

/* Hero: one entrance on load, staggered, the only time-based motion on the page */
html.js .hero__text, html.js .hero__media > * { animation: nin-rise 1100ms var(--ease-out) both; }
html.js .hero__media > :nth-child(1) { animation-delay: 140ms; }
html.js .hero__media > :nth-child(2) { animation-delay: 260ms; }
html.js .hero__media > :nth-child(3) { animation-delay: 380ms; }
@keyframes nin-rise {
  from { opacity: 0; transform: translate3d(0, 2.5rem, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Founder band: pinned on desktop while the two picture columns travel past */
@media (min-width: 60rem) {
  .founder-pin { height: 210vh; }
  .founder-pin .band { position: sticky; top: 5.25rem; height: min(40rem, calc(100dvh - 6.5rem)); min-height: 0; }
  .founder-pin .band__pics { height: calc(100% + 2 * var(--space-2xl)); margin-block: calc(-1 * var(--space-2xl)); max-height: none; overflow: hidden; }
  .band__col { will-change: transform; }
  .band__col--a { transform: translate3d(0, calc(var(--q, 0) * -42%), 0); }
  .band__col--b { transform: translate3d(0, calc(14% - var(--q, 0) * 56%), 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero__text, html.js .hero__media > * { animation: none; }
  .band__col--a, .band__col--b { transform: none; }
}