/* Voltra Remote — the home page's scroll story.
   The dial stays put while the chapters scroll past it; each chapter swaps in the real screens
   (rendered from the firmware) and the ring turns with the scroll. Same tokens as site.css:
   black, white and grey, red only where the remote uses it. */

/* ── top bar: Guide and Install always in reach, phone included ─────────────── */
.home .top { position: sticky; top: 0; }
.home .top .wrap { flex-wrap: nowrap; height: 56px; padding-top: 0; padding-bottom: 0; }
.home .nav { width: auto; margin-left: 0; align-items: center; }
.nav .nav-cta {
  background: var(--text); color: var(--bg); font-weight: 600;
  padding: 8px 14px; margin-left: 4px;
}
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { background: #fff; color: var(--bg); }
@media (max-width: 640px) {
  .home .nav-extra { display: none; }
  .home .nav a { font-size: 15px; }
}

/* ── the story ──────────────────────────────────────────────────────────── */
.home main { padding: 0; }
.story {
  --top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.stage {
  position: sticky; top: var(--top);
  height: calc(100vh - var(--top)); height: calc(100svh - var(--top));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.chapters { padding-bottom: 12vh; }
/* ordinary scrolling: the words move with the page; the dial plays as each chapter passes */
.chapter { min-height: 78vh; min-height: 78svh; display: flex; flex-direction: column; justify-content: center; }
.chapter.intro { min-height: calc(100svh - 56px); }
.chapter.slow { min-height: 120vh; min-height: 120svh; }  /* more scroll for a longer story */
.chapter .txt { opacity: .15; transition: opacity .45s ease; }
.chapter.active .txt { opacity: 1; }
.chapter h1 { font-size: 52px; letter-spacing: -0.02em; margin-top: 10px; }
.chapter h2 { font-size: 34px; border: 0; margin: 10px 0 14px; padding: 0; letter-spacing: -0.015em; }
.chapter p { font-size: 19px; color: var(--text2); }
.chapter .lead { margin-top: 16px; }
.step { font: 600 13px/1 var(--mono); color: var(--text3); letter-spacing: .08em; }
.scroll-hint { font-size: 14px !important; color: var(--text4) !important; margin-top: 18px; }

/* ── the dial ───────────────────────────────────────────────────────────── */
.knob {
  --size: min(400px, 40vw, 62vh);
  --turn: 0deg;
  position: relative; width: var(--size); height: var(--size); border-radius: 50%;
}
/* the knurled aluminium ring: a fine pattern that visibly turns */
.knob .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(#34343b 0 1.2deg, #1b1b20 1.2deg 2.4deg);
  transform: rotate(var(--turn));
  box-shadow: 0 0 0 1px #2e2e34, 0 30px 60px -20px rgba(0,0,0,.8);
}
.knob .ring::after {           /* the index mark, so the turn reads */
  content: ""; position: absolute; left: 50%; top: 1.2%; width: 3px; height: 4.5%;
  margin-left: -1.5px; border-radius: 2px; background: var(--text2);
}
.knob .bezel { position: absolute; inset: 6.5%; border-radius: 50%; background: #050506; box-shadow: inset 0 0 0 1px #26262b; }
.knob .face { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: #000; }
.knob .face img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  visibility: hidden;          /* swapped instantly, like the panel: no crossfade */
}
.knob .face img.on { visibility: visible; }
.caption {
  font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text3); min-height: 12px;
}

/* ── after the story ────────────────────────────────────────────────────── */
.after { padding-bottom: 80px; }
.after > h2 { margin-top: 0; }
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 0; }
/* side by side: the number sits above its box; stacked (phone): beside it, on the left */
.need-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.need-n {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 20px/1 var(--sans); color: var(--text);
  background: var(--surface2); border: 1px solid var(--border-strong);
}
.need { flex: 1; align-self: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.need h3 { font-size: 17px; margin: 0 0 6px; }
.need p { margin: 0; color: var(--text3); font-size: 15px; }
.after .aff { margin-top: 14px; font-size: 13px; color: var(--text3); max-width: none; }
.final { text-align: center; padding: 72px 0 24px; }
.final h2 { border: 0; padding: 0; margin: 0 0 12px; font-size: 40px; }
.final .lead { margin: 0 auto 8px; }
.final .btn-row { justify-content: center; }
.final p { margin-left: auto; margin-right: auto; }
.btn.big { font-size: 17px; padding: 15px 28px; }
.small { font-size: 14px; }

/* ── phone: the dial pinned in the top half; the words scroll underneath and fade out as
   they reach it (the stage's lower edge is a short fade to the page colour). */
@media (max-width: 820px) {
  .story { display: block; }
  .stage {
    height: auto; padding: 14px 0 6px; gap: 8px;
    background: var(--bg); z-index: 5;
  }
  .stage::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 56px;
    background: linear-gradient(var(--bg), rgba(11, 11, 13, 0));
    pointer-events: none;
  }
  .knob { --size: min(64vw, 36svh, 300px); }
  .caption { font-size: 11px; }
  .chapters { padding-bottom: 0; }
  .chapter { min-height: 42svh; justify-content: flex-start; padding-top: 40px; }
  .chapter.intro { min-height: 0; padding-top: 40px; padding-bottom: 24px; }
  .chapter:last-child { min-height: 40svh; }
  .chapter.slow { min-height: 75svh; }
  .chapter h1 { font-size: 34px; }
  .chapter h2 { font-size: 26px; }
  .chapter p { font-size: 17px; }
  .chapter .lead { font-size: 18px; }
  .scroll-hint { display: none; }
  .needs { grid-template-columns: 1fr; }
  .need-row { flex-direction: row; align-items: center; }
  .need-n { width: 42px; height: 42px; font-size: 18px; }
  .final { padding-top: 64px; }
  .final h2 { font-size: 30px; }
  .final .btn-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .knob .ring { transform: none; }
  .knob .face img, .chapter .txt { transition: none; }
}