/* ============================================================================
   Tunk — the demo page.

   Loaded after styles.css, which supplies the tokens, the font, the buttons and
   the page chrome. This file adds only what the demo page needs: the hero, the
   three app shots, the measured strip, and the four setup steps.

   Order on the page is the decision recorded in design-explorations/demo-page.html:
   the gesture opens, the real app proves it, the numbers hold it up, and the
   four steps close it.
   ============================================================================ */

/* ------------------------------------------------------------------ hero -- */

/* Two columns: the claim on the left, the thing you can knock on the right, both
   above the fold. Centred put the laptop below the fold, which is the wrong half
   of the page for the one element a visitor can touch. */
.demo-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  text-align: left;
  padding-block: clamp(36px, 6vw, 76px) clamp(28px, 4vw, 52px);
}

.demo-hero .demo-stage { margin: 0; max-width: none; }

.demo-hero .demo-controls {
  margin: 14px 0 0;
  max-width: none;
  justify-content: flex-start;
}

.demo-hero .demo-controls__note { text-align: left; }

.demo-hero__text { max-width: 46ch; }


.demo-hero__text .cta-row { justify-content: flex-start; }

.demo-hero__media { margin: 0; }

.demo-hero__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--shadow-3);
  background: var(--ink-200, #16191E);
}

.demo-hero__media figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-3);
  text-wrap: pretty;
}

/* The gesture demo keeps the photograph, now on its own below the hero. */
.demo-wake { text-align: center; }
.demo-wake .lede { max-width: 58ch; margin-inline: auto; }
.demo-wake .demo-hero__fig { max-width: 520px; margin: clamp(24px, 3vw, 36px) auto 0; }

.demo-hero__text h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 10px 0 16px;
  text-wrap: balance;
}

.demo-hero__text .lede { margin-bottom: 26px; }

/* The figure is a square photograph. A fixed aspect stops the grid jumping
   while it decodes, which is the one layout shift this page can have. */
.demo-hero__fig {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: var(--r-lg, 20px);
  overflow: hidden;
  /* On a near-black page a drop shadow does nothing. A hairline ring gives the
     photograph an edge, so the column reads as a frame rather than a hole. */
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--hair);
}

.demo-hero__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The lit screen sits over the dark one and crosses in on a double tap. Two
   separate photographs rather than a CSS glow: the screen light also falls on
   the keyboard and the desk, and no filter fakes that convincingly. */
.demo-hero__lit {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}

.demo-hero__lit.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .demo-hero__lit { transition: none; }
}

/* The Canvas UI ripple draws here. It sits above the hero and takes no
   pointer events; the section below it handles the clicks. */
.ripple-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.demo-hero__hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-3);
}

/* ----------------------------------------------------------- app screens -- */

.demo-shots { /* .band already supplies the section rhythm; a second padding doubles it. */ }

.demo-shots__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin-top: 28px;
}

.demo-shot { margin: 0; }

.demo-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow-2);
}

.demo-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  text-wrap: pretty;
}

.demo-shot figcaption b {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* -------------------------------------------------------------- measured -- */

.demo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  margin-top: 24px;
}

.demo-stat {
  background: var(--surface);
  padding: 20px 18px;
}

.demo-stat__n {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.demo-stat__n--live { color: var(--accent-text); }

.demo-stat__l {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
}

.demo-stats__note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--text-2);
  max-width: 66ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- setup -- */

.demo-setup {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.demo-steps {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.demo-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}

.demo-steps li b { color: var(--text); font-weight: 600; }

.demo-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.demo-download {
  padding: 24px;
  border-radius: var(--r-lg, 20px);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.demo-download h3 { margin: 0 0 6px; font-size: 17px; }

.demo-download__meta {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.demo-download .btn { width: 100%; justify-content: center; }

.demo-download__warn {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.demo-download__warn b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- narrow -- */

@media (max-width: 900px) {
  .demo-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .demo-hero__text { max-width: 60ch; margin-inline: auto; }
  .demo-hero__text .cta-row { justify-content: center; }
  .demo-hero .demo-controls { justify-content: center; }
  .demo-hero .demo-controls__note { text-align: center; }
  .demo-setup { grid-template-columns: 1fr; }
  .demo-shots__row { grid-template-columns: 1fr; }
  .demo-stats { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-hero__hint { display: none; }
}

/* ------------------------------------------------------- interactive stage -- */

/* The photograph and the effect canvas are siblings: the effect must not draw
   itself. Where html-in-canvas exists the script slips a source canvas between
   them at runtime, which is why the stage owns the positioning, not the figure. */
.demo-stage {
  position: relative;
  max-width: 520px;
  margin: clamp(24px, 3vw, 36px) auto 0;
}

.demo-stage__source {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.demo-stage .demo-hero__fig { margin: 0; }

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  max-width: 520px;
  margin: 18px auto 0;
}

.demo-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
}

.demo-controls input[type="range"] {
  width: 92px;
  accent-color: var(--accent);
}

.demo-controls__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  text-wrap: pretty;
}

/* The method card had a column of empty space beside it. The video belongs
   there: the claim is that reliability is measured, and this is the measuring
   running. */
.method--media {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

.method--media .method__fig { margin: 0; }

.method--media .method__fig video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow-2);
  background: var(--ink-200, #16191E);
}

.method--media .method__fig figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .method--media { grid-template-columns: 1fr; }
}