/* Motion layer — zero dependency, loaded AFTER design-system.css.
   Revert = delete the <link> + <script> lines from the page head/body.
   Everything here degrades to the static layout under
   prefers-reduced-motion: reduce and on browsers without JS. */

:root {
  --rv-dur: .72s;
  --rv-ease: cubic-bezier(.16, .84, .44, 1);
  --rv-stagger: 70ms;
}

/* ---------- 1. scroll reveal: graded + staggered ------------------------ */
.reveal {
  --rv-i: 0;
  transform: translateY(26px) scale(.986);
  transition:
    opacity var(--rv-dur) var(--rv-ease),
    transform var(--rv-dur) var(--rv-ease);
  transition-delay: calc(var(--rv-i) * var(--rv-stagger));
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 2. image reveal: curtain wipe ------------------------------ */
/* Applied by js/motion.js to .reveal img.media — never to the LCP hero image */
img.rv-img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition:
    clip-path .95s var(--rv-ease),
    transform 1.15s var(--rv-ease);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger) + 90ms);
}
img.rv-img.is-in { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- 3. parallax ------------------------------------------------ */
[data-para] { will-change: transform; }

/* ---------- 4. nav scrolled state ------------------------------------- */
.nav {
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .97);
  border-bottom-color: rgba(44, 24, 11, .12);
  box-shadow: 0 6px 26px rgba(44, 24, 11, .10);
}
.nav.is-stuck .logo-mark { transform: translateY(-1px); }
.nav.is-stuck .logo-mark { transition: transform .3s var(--rv-ease); }

/* ---------- 5. cards -------------------------------------------------- */
.pcard {
  transition: transform .38s var(--rv-ease), box-shadow .38s var(--rv-ease);
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(44, 24, 11, .14);
}
.pcard-media { transition-duration: .55s; }
.pcard:hover .pcard-media { transform: scale(1.05); }
.pcard:hover .pcard-title, .pcard:hover h3, .pcard:hover h4 { color: var(--brand-dark); }
.pcard .pcard-title, .pcard h3, .pcard h4 { transition: color .25s ease; }

/* ---------- 6. buttons: sheen sweep ----------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; animation: sheen .85s var(--rv-ease); }
.btn-primary:hover::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%); }
@keyframes sheen { from { left: -70%; } to { left: 135%; } }

/* hero buttons keep the template two-line roll, add a soft lift */
.hero-tpl-btn { transition: transform .3s var(--rv-ease), box-shadow .3s var(--rv-ease), background-color .2s ease; }
.hero-tpl-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }

/* ---------- 7. scroll progress bar ------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width .08s linear;
}

/* ---------- 8. section artwork drift ---------------------------------- */
.section-soft .media, .section-dark .media { transition: transform .6s var(--rv-ease); }
.section-soft:hover .media, .section-dark:hover .media { transform: none; }

/* ---------- 9. reduced motion: everything off ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  img.rv-img { clip-path: none !important; transform: none !important; opacity: 1 !important; }
  [data-para] { transform: none !important; }
}