/* ==========================================================================
   Product page — V5 Reformer (scroll-zoom "showroom" + gallery + specs)
   Loaded only on product pages, on top of tokens/base/sections.
   ========================================================================== */

/* ---------- Showroom: pinned chapters that zoom on scroll ---------- */
.showroom { background: #050403; color: #fff; position: relative; z-index: 1; }
.sr-step { position: relative; height: 175vh; }
.sr-step:last-child { height: 130vh; }

.sr-frame { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sr-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, center);
  transform: scale(var(--z, 1.02)); transform-origin: var(--origin, center);
  will-change: transform;
}
/* legibility scrim — heavier at the bottom (where copy sits) */
.sr-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(4,3,2,.82) 0%, rgba(4,3,2,.30) 30%, rgba(4,3,2,0) 55%),
    linear-gradient(180deg, rgba(4,3,2,.45) 0%, rgba(4,3,2,0) 22%);
}

.sr-text {
  position: absolute; z-index: 2; inset-inline: clamp(20px, 6vw, 96px);
  inset-block-end: clamp(44px, 10vh, 128px); max-width: 42rem;
  opacity: var(--o, 0); transform: translateY(calc((1 - var(--o)) * 26px));
}
.sr-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.03; letter-spacing: -.01em; color: #fff; }
.sr-body { margin-top: .7em; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.86); max-width: 36ch; }
.sr-note { margin-top: .8em; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,255,.6); }

/* hero chapter (first) — bigger */
.sr-step--hero .sr-title { font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 300; }
.sr-step--hero .sr-title b { font-weight: 800; }
.sr-step--hero .sr-body { font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: rgba(255,255,255,.92); max-width: 30ch; }

@media (prefers-reduced-motion: reduce) {
  .sr-frame > img { transform: none; }
  .sr-text { opacity: 1; transform: none; }
}

/* ---------- Showroom SCRUB: scroll-driven video ---------- */
.header--scroll-reveal {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--white);
  border-bottom-color: var(--line);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.header--scroll-reveal.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.header--scroll-reveal .header__logo img { filter: brightness(0); }
.header--scroll-reveal .nav a { color: var(--ink); }
.header--scroll-reveal .burger span,
.header--scroll-reveal .burger span::before,
.header--scroll-reveal .burger span::after { background: var(--ink); }

.showroom-scrub { position: relative; height: 300vh; background: #050403; }
.scrub-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub-video, .scrub-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050403; display: block; }
.scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #050403; }
.scrub-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(0deg, rgba(4,3,2,.82) 0%, rgba(4,3,2,.30) 30%, rgba(4,3,2,0) 55%),
    linear-gradient(180deg, rgba(4,3,2,.5) 0%, rgba(4,3,2,0) 22%);
}
.scrub-cap {
  position: absolute; z-index: 2; inset-inline: clamp(20px, 6vw, 96px);
  inset-block-end: clamp(44px, 10vh, 128px); max-width: 42rem; color: #fff;
  opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.scrub-cap.is-on { opacity: 1; transform: none; }
/* scroll-hint chevron on the hero caption */
.scrub-hint { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 22px; text-align: center; color: rgba(255,255,255,.6); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: var(--hint, 1); transition: opacity .4s; }
/* progress bar */
.scrub-bar { position: absolute; z-index: 2; inset-block-start: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.12); }
.scrub-bar > span { display: block; height: 100%; width: var(--sp, 0%); background: var(--red); }

/* ---------- Dimensions strip (matches homepage stats: orange Night numbers on white) ---------- */
.dims { text-align: center; }
.dims__in { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 6vw, 80px); padding-block: var(--s6); border-block: 1px solid var(--line); }
.dims__item { display: flex; flex-direction: column; gap: 6px; }
.dims__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--red); letter-spacing: -.02em; direction: ltr; }
.dims__num small { font-family: var(--font-body); font-weight: 600; font-size: .42em; color: var(--muted); margin-inline-start: 3px; }
.dims__label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- In-motion (action shot + video) ---------- */
.pmotion__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--panel); }
.pmotion__media img, .pmotion__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmotion__note { margin-top: var(--s4); color: var(--muted); font-size: .95rem; }

/* ---------- Gallery ---------- */
.pgallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.pgallery__grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 16/10; }
.pgallery__grid img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }

/* ---------- Spec table ---------- */
.specs__grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: minmax(140px, 260px) 1fr; gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec-row__k { font-weight: 700; color: var(--ink); }
.spec-row__v { color: var(--ink-soft); }
@media (max-width: 560px) { .spec-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Product intro / section heads ---------- */
.psec-head { max-width: 60ch; margin-bottom: var(--s7); }
.psec-head .mono-label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.psec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); margin-top: .3em; }
.psec-head p { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-lead); }

/* ---------- CTA ---------- */
.pcta { background: var(--panel); border-radius: var(--radius-lg); padding: clamp(40px,7vw,88px) var(--gutter); text-align: center; }
.pcta h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); }
.pcta p { margin: var(--s3) auto var(--s6); color: var(--muted); max-width: 46ch; font-size: var(--fs-lead); }
.pcta__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.lp-quick-lead { background: var(--white); padding: clamp(34px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); }
.lp-quick-lead__in { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(760px, 1.35fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
.lp-quick-lead__copy .mono-label { color: var(--red); }
.lp-quick-lead__copy h2 { margin: .35em 0 .3em; max-width: 18ch; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.08; color: var(--ink); }
.lp-quick-lead__copy > p:last-child { color: var(--muted); font-size: 1.05rem; }
.lp-quick-form { position: relative; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(190px, 1.25fr) auto; align-items: end; gap: var(--s3); }
.lp-quick-form .field { min-width: 0; }
.lp-quick-form .field label { color: var(--ink); }
.lp-quick-form .field input, .lp-quick-form .field select { width: 100%; min-height: 52px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0 14px; font: inherit; }
.lp-quick-form .btn { min-height: 52px; white-space: nowrap; justify-content: center; }
.lp-quick-form .lp-form-status, .lp-quick-form__notice { grid-column: 1 / -1; }
.lp-quick-form .lp-form-status { min-height: 0; margin: 0; color: var(--ink); }
.lp-quick-form .lp-form-status:empty { display: none; }
.lp-quick-form .lp-form-status a { color: var(--red); }
.lp-quick-form__notice { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.lp-quick-form__notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1220px) {
  .lp-quick-lead__in { grid-template-columns: 1fr; gap: var(--s5); }
  .lp-quick-lead__copy h2 { max-width: 22ch; }
}
@media (max-width: 760px) { .lp-quick-form { grid-template-columns: 1fr; } .lp-quick-form .btn, .lp-quick-form .lp-form-status, .lp-quick-form__notice { grid-column: 1; } }