/* ==========================================================================
   LΔSΞR product page
   ========================================================================== */

/* ---------- 1 · Scroll-scrubbed rotation ---------- */
.scrub {
  position: relative;
  height: 330vh;
}

.scrub__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: var(--header-h);
  overflow: hidden;
  background: #000;
}

.scrub__grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
  min-height: 0;
  padding-top: 1rem;
}

.scrub__text {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  position: relative;
  z-index: 1;
}

.scrub__title {
  font-size: clamp(3.2rem, 1.6rem + 8vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.scrub__tagline {
  color: var(--c-muted);
  font-size: var(--fs-small);
  max-width: 36ch;
}

.scrub__steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 0.75rem;
  margin-top: 0.6rem;
}

.scrub__steps li {
  display: contents;
}

.scrub__step-name {
  grid-row: 1;
  padding-top: 0.55rem;
  border-top: 1px solid var(--c-line-strong);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-faint);
  transition: color 0.3s, border-color 0.3s;
}

.scrub__steps li.is-active .scrub__step-name {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

.scrub__step-text {
  grid-row: 2;
  grid-column: 1 / -1;
  display: none;
  padding-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--c-text);
  min-height: 3.4em;
}

.scrub__steps li.is-active .scrub__step-text { display: block; }

.scrub__viewport {
  position: relative;
  min-height: 0;
}

.scrub__fallback,
.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scrub__fallback { object-fit: contain; }
.scrub.is-ready .scrub__fallback { visibility: hidden; }

.scrub__hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem 1.25rem;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.scrub__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--c-muted);
  transition: opacity 0.4s;
}

.scrub__hint::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--c-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .scrub__hint::before { animation: hint-drop 1.8s ease-in-out infinite; }
}

@keyframes hint-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.scrub.is-scrolled .scrub__hint { opacity: 0.35; }

.scrub__bar {
  position: relative;
  height: 1px;
  background: var(--c-line-strong);
}

.scrub__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

@media (min-width: 1024px) {
  .scrub__grid {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: center;
    padding-top: 0;
  }

  .scrub__text { gap: 1rem; }

  .scrub__title { font-size: clamp(5rem, 2rem + 6vw, 9.5rem); }

  .scrub__tagline { font-size: var(--fs-body); }

  .scrub__steps {
    grid-template-columns: none;
    gap: 0;
    margin-top: 1.5rem;
    max-width: 30rem;
  }

  .scrub__steps li {
    display: grid;
    border-top: 1px solid var(--c-line);
    padding-block: 0.8rem;
  }

  .scrub__steps li:last-child { border-bottom: 1px solid var(--c-line); }

  .scrub__step-name {
    grid-row: auto;
    padding-top: 0;
    border-top: 0;
  }

  .scrub__step-text {
    grid-row: auto;
    display: block;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    opacity: 0;
    transition: max-height 0.45s var(--ease-out), opacity 0.35s, padding 0.45s var(--ease-out);
  }

  .scrub__steps li.is-active .scrub__step-text {
    max-height: 6em;
    padding-top: 0.45rem;
    opacity: 1;
  }

  .scrub__viewport { height: 100%; }
}

@media (max-width: 639px) {
  .scrub { height: 280vh; }
  .scrub__tagline { display: none; }
}

/* ---------- 2 · Key figures ---------- */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}

.figures div {
  padding: 1.4rem 1rem 1.4rem 0;
  border-bottom: 1px solid var(--c-line);
}

.figures div:nth-child(odd) { border-right: 1px solid var(--c-line); }
.figures div:nth-child(even) { padding-left: 1.25rem; }

.figures dt {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.figures dd {
  margin-top: 0.35rem;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
  font-weight: 250;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.figures small {
  font-size: 0.42em;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  font-weight: 400;
}

/* ---------- 3 · Battery swap ---------- */
.swap-media {
  background: #000;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.swap-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  margin-top: 1.75rem;
  border-top: 1px solid var(--c-line);
}

.steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--c-line);
}

.steps__n {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--c-gold-line);
  border-radius: 50%;
  color: var(--c-gold);
  font-size: 0.85rem;
}

.steps strong { display: block; font-weight: 500; color: var(--c-text); }
.steps span:not(.steps__n) { font-size: var(--fs-small); color: var(--c-muted); }

/* ---------- 4 · Dimension drawing (pinned) ---------- */
.dim {
  position: relative;
  height: 230vh;
  border-top: 1px solid var(--c-line);
}

.dim__pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.25rem, 3vh, 3rem);
  gap: clamp(1rem, 3vh, 2rem);
}

.dim__head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.dim__head h2 { max-width: 22ch; }
.dim__head p { max-width: 58ch; color: var(--c-muted); font-size: var(--fs-small); }

.dim__or {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(300px, 70%);
  font-size: var(--fs-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.dim__or::before,
.dim__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line-strong);
}

.dim__pin > .wrap:last-child {
  flex: 1;
  min-height: 0;
  display: flex;
}

.dim__figure {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  container-type: size;
}

.dim__art {
  position: relative;
  width: min(100cqw, (100cqh - 2.5rem) * 1125 / 580);
  aspect-ratio: 1125 / 580;
  margin: auto;
}

.dim__art img {
  width: 100%;
  height: 100%;
}

.dim__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dim__svg line,
.dim__svg path {
  stroke: var(--c-text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-linecap: round;
}

.dim__svg .dim__ext line {
  stroke: var(--c-faint);
  stroke-dasharray: 4 4;
}

.dim__svg .dim__line,
.dim__svg .dim__dia { stroke: var(--c-gold); }
.dim__svg .dim__ticks path,
.dim__svg .dim__dia-ticks path { stroke: var(--c-gold); fill: var(--c-gold); }

.dim__label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.1em 0.45em;
  background: #000;
  font-size: clamp(0.95rem, 0.6rem + 1.4vw, 1.9rem);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  opacity: 0;
}

.dim__label small {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.dim__label--dia { font-size: clamp(0.72rem, 0.55rem + 0.7vw, 1.1rem); }

.dim__figure .frame__caption { width: 100%; margin-top: 0.5rem; }

/* No JS / reduced motion: show the finished drawing */
.dim.is-static .dim__label { opacity: 1; }

@media (max-width: 639px) {
  .dim { height: 190vh; }
}

/* ---------- 5 · Battery comparison ---------- */
.packs {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .packs { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.packs__media img { width: 100%; }

.packs__table td { width: 33%; }

.meter {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--c-line);
  position: relative;
}

.meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-gold);
  transform-origin: left;
  transform: scaleX(var(--v, 0));
}

/* ---------- 6 · Programmable modes ---------- */
.beam-demo {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .beam-demo {
    grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
    align-items: stretch;
    gap: 2rem;
  }
}

.beam-stage {
  /* geometry of the torch inside the stage */
  --torch-w: 44%;
  --torch-right: 3%;
  --lens-top: 38.7%;
  --lens-bottom: 61.3%;
  --power: 1;
  position: relative;
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(255, 255, 255, 0.04), transparent 70%),
    #000;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 639px) {
  .beam-stage {
    --torch-w: 60%;
    --lens-top: 39.75%;
    --lens-bottom: 60.25%;
    aspect-ratio: 4 / 3;
  }
}

.beam-stage__torch {
  position: absolute;
  right: var(--torch-right);
  top: 50%;
  width: var(--torch-w);
  transform: translateY(-50%);
  z-index: 2;
}

.beam-stage__cone,
.beam-stage__wall,
.beam-stage__hotspot {
  position: absolute;
  pointer-events: none;
  opacity: var(--power);
  transition: opacity 0.25s ease;
}

/* The beam: a clipped gradient, blurred for soft edges */
.beam-stage__cone {
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - var(--torch-right) - var(--torch-w) * 0.9715);
  filter: blur(10px);
  z-index: 1;
}

.beam-stage__cone span {
  position: absolute;
  inset: -20px 0 -20px -20px;
  clip-path: polygon(0 -5%, 100% var(--lens-top), 100% var(--lens-bottom), 0 105%);
  background: linear-gradient(to left, rgba(255, 247, 220, 0.95) 0%, rgba(255, 247, 220, 0.5) 18%, rgba(255, 247, 220, 0.16) 55%, rgba(255, 247, 220, 0.05) 100%);
}

.beam-stage__wall {
  inset: 0;
  background: radial-gradient(45% 80% at 0% 50%, rgba(255, 247, 220, 0.3), transparent 70%);
  z-index: 0;
}

.beam-stage__hotspot {
  left: calc(100% - var(--torch-right) - var(--torch-w) * 0.9715);
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 252, 240, 0.95) 0%, rgba(255, 247, 220, 0.4) 18%, transparent 60%);
  mix-blend-mode: screen;
  z-index: 3;
}

.beam-stage__readout {
  position: absolute;
  left: 1rem;
  top: 0.85rem;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  mix-blend-mode: difference;
  color: #fff;
}

.beam-stage__readout .label { color: #fff; opacity: 0.8; }
.beam-stage__readout strong { font-weight: 500; font-size: 1rem; }

.beam-demo[data-mode="full"] .beam-stage { --power: 1; }
.beam-demo[data-mode="half"] .beam-stage { --power: 0.42; }
.beam-demo[data-mode="off"] .beam-stage { --power: 0; }
.beam-demo[data-mode="strobe"] .beam-stage { --power: 1; }

/* Strobe preview is deliberately slow (≈2 flashes/s) to stay comfortable on screen */
@media (prefers-reduced-motion: no-preference) {
  .beam-demo[data-mode="strobe"] .beam-stage__cone,
  .beam-demo[data-mode="strobe"] .beam-stage__wall,
  .beam-demo[data-mode="strobe"] .beam-stage__hotspot {
    transition: none;
    animation: strobe 0.5s steps(1, end) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beam-demo[data-mode="strobe"] .beam-stage { --power: 0.6; }
}

@keyframes strobe {
  0% { opacity: 1; }
  40% { opacity: 0; }
}

.beam-controls {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

@media (min-width: 640px) and (max-width: 1023px) {
  .beam-controls {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: center;
  }
  .beam-controls .mode-list,
  .beam-controls__note { grid-column: 1 / -1; }
}

.tail-switch {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.tail-switch__cap {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #2a2a27 0 38%, #151513 39% 100%);
  border: 1px solid var(--c-line-strong);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.6), 0 0 0 5px #0d0d0c, 0 0 0 6px var(--c-line);
  transition: transform 0.12s, box-shadow 0.3s;
}

.tail-switch__cap::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  border: 1px solid var(--c-faint);
}

.tail-switch:hover .tail-switch__cap { box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.6), 0 0 0 5px #0d0d0c, 0 0 0 6px var(--c-gold-line); }
.tail-switch:active .tail-switch__cap { transform: scale(0.93); }

.beam-controls__help,
.beam-controls__note { font-size: 0.78rem; color: var(--c-faint); }

.mode-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .mode-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mode-list button {
  display: grid;
  gap: 0.15rem;
  justify-items: start;
  min-height: 56px;
  padding: 0.6rem 0.8rem;
  background: #000;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-muted);
  text-align: left;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.mode-list button span { font-size: 0.85rem; font-weight: 500; }
.mode-list button small { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); }

.mode-list button:hover { color: var(--c-text); border-color: var(--c-faint); }

.mode-list button[aria-checked="true"] {
  color: var(--c-text);
  border-color: var(--c-gold);
  background: rgba(255, 215, 0, 0.06);
}

.mode-list button[aria-checked="true"] small { color: var(--c-gold); }