/* ====================================
   VUAE - Scroll motion
   Everything is scoped to html.m, which is only set when the visitor
   allows motion. Without it the pages render fully static.
   ==================================== */

/* motion.js takes over from the plain fade in site.css */
.m .reveal { opacity: 1; transform: none; transition: none; }

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---- Headlines: words rise out of a mask ---- */
.m .display:not(.is-split) { visibility: hidden; }
.w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.06em 0.05em 0.14em;
  margin: -0.06em -0.05em -0.14em;
}
.w__i {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
}
.display.in .w__i { transform: none; }

/* ---- Statements: words light up with the scroll ---- */
.sw { color: inherit; opacity: 0.16; transition: opacity 0.2s linear; }

/* ---- Rise ---- */
.m :is(.eyebrow, .lede, .body-mute, .cta-row, .hero__sub, .picker, .shop-nav, .panel__index, .article-back, .link-arrow,
       .specbar > div, .keyspecs > div, .spec-list li, .ownership__list li, .contact-lines > div, .duo__body, .post,
       .bike-card__body, .gear-card, .faq details, .table-plain, .form > *, .prose > *,
       .site-footer__col, .site-footer__brand, .site-footer__base) {
  transition: opacity 0.9s var(--ease), translate 1s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms);
}
.m :is(.eyebrow, .lede, .body-mute, .cta-row, .hero__sub, .picker, .shop-nav, .panel__index, .article-back, .link-arrow,
       .specbar > div, .keyspecs > div, .spec-list li, .ownership__list li, .contact-lines > div, .duo__body, .post,
       .bike-card__body, .gear-card, .faq details, .table-plain, .form > *, .prose > *,
       .site-footer__col, .site-footer__brand, .site-footer__base):not(.in) {
  opacity: 0;
  translate: 0 26px;
}

/* Hero copy arrives in sequence after the page loads */
.hero, .bike-hero, .bike-split__copy { --d: 0s; }
:is(.hero, .bike-hero, .bike-split__copy) .display { --d: 0.15s; }
:is(.hero, .bike-hero, .bike-split__copy) :is(.hero__sub, .lede) { --d: 0.6s; }
:is(.hero, .bike-hero, .bike-split__copy) :is(.cta-row, .picker) { --d: 0.75s; }
.hero .specbar > div, .bike-hero .specbar > div { --d: 0.9s; }

/* ---- Hairlines draw themselves ---- */
.m :is(.keyspecs > div, .spec-list li, .ownership__list li, .contact-lines > div) {
  position: relative;
  border-top-color: transparent;
}
.m :is(.keyspecs > div, .spec-list li, .ownership__list li, .contact-lines > div)::after {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: currentColor;
  opacity: 0.16;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms);
}
.m :is(.keyspecs > div, .spec-list li, .ownership__list li, .contact-lines > div).in::after { transform: none; }

/* ---- Images wipe open and settle ---- */
.m :is(.panel__media, .duo__media, .post__media, .bike-card__media, .bike-split__media, .strips figure, .article-image) {
  transition: clip-path 1.4s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.m :is(.panel__media, .duo__media, .post__media, .bike-card__media, .bike-split__media, .strips figure, .article-image):not(.in) {
  clip-path: inset(0 0 100% 0);
}

@media (min-width: 901px) {
  .m .panel:not(.panel--flip) .panel__media:not(.in) { clip-path: inset(0 100% 0 0); }
  .m .panel--flip .panel__media:not(.in) { clip-path: inset(0 0 0 100%); }
}

.m :is(.panel__media, .duo__media, .post__media, .bike-card__media) img {
  transition: transform 1.2s var(--ease), scale 1.8s var(--ease);
}
.m :is(.panel__media, .duo__media, .post__media, .bike-card__media, .strips figure, .bike-split__media):not(.in) img { scale: 1.14; }
.m .bike-split__media img { transition: opacity 0.35s var(--ease), scale 1.8s var(--ease); }
.m .strips img { transition: scale 1.8s var(--ease); }

/* Overscan so parallax never shows an edge */
@media (min-width: 901px) {
  .m :is(.panel__media, .duo__media, .post__media, .bike-card__media).in img { scale: 1.05; }
  .m .panel__media img, .m .duo__media img, .m .post__media img, .m .bike-card__media img { translate: 0 var(--py, 0); }
  .m .strips figure { translate: 0 var(--py, 0); }

  /* The range: each bike slides up over the last */
  .m [aria-label="The range"] .panel { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .m [aria-label="The range"] .panel:not(.on-bone) { background: var(--ink); }
  .m [aria-label="The range"] .panel__copy { padding-top: calc(var(--nav-h) + 28px); }
}
@media (max-height: 699px) {
  .m [aria-label="The range"] .panel { position: static; height: auto; }
}

/* ---- Hero ---- */
@keyframes m-hero-in {
  from { opacity: 0; scale: 1.1; }
  to { opacity: 1; scale: 1; }
}
.m :is(.hero__media, .bike-hero__media) img { animation: m-hero-in 2.2s var(--ease) both; }
.m :is(.hero__media, .bike-hero__media) { translate: 0 var(--hero-y, 0); }
.m :is(.hero__copy, .bike-hero__copy) { translate: 0 var(--copy-y, 0); opacity: var(--copy-o, 1); }

/* ---- Full-bleed band ---- */
.m .band__media img { scale: var(--band-s, 1.1); }

/* ---- Cards ---- */
/* Scroll: the row rises as a fan, then keeps drifting at different speeds */
.m .duo__item {
  translate: 0 var(--cy, 0);
  scale: var(--cs, 1);
  rotate: var(--cr, 0deg);
  transform-origin: 50% 100%;
}

/* Cursor: cards tilt toward the pointer and catch the light */
.m .tilt { position: relative; transform-style: preserve-3d; transition: box-shadow 0.5s var(--ease); }
.m .tilt.is-hover { z-index: 2; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.45); }
.m .tilt :is(.duo__media, .bike-card__media, .post__media, .gear-card__media) { position: relative; }
.m .tilt :is(.duo__media, .bike-card__media, .post__media, .gear-card__media)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.2), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.m .tilt.is-hover :is(.duo__media, .bike-card__media, .post__media, .gear-card__media)::after { opacity: 1; }
.m .tilt:is(:hover, .is-hover) :is(.duo__media, .bike-card__media, .post__media) img {
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.05);
  transition: transform 0.6s var(--ease), scale 1.8s var(--ease);
}

/* A red line draws across the caption */
.m :is(.duo__body, .bike-card__body) { position: relative; }
.m :is(.duo__body, .bike-card__body)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.m .tilt.is-hover :is(.duo__body, .bike-card__body)::before { transform: none; }