/* Demo band.
 *
 * The demo was authored against a design-system palette of --vm-* tokens,
 * switched by a data-vm-theme attribute of its own. The site already has a
 * palette and a working three-way theme toggle on data-theme, so shipping the
 * design system's stylesheet too would put a second, competing theme system on
 * the page: the demo would keep its own light palette while the reader flips
 * the site to dark.
 *
 * So the --vm-* names are mapped onto the site's own tokens instead. The demo
 * then follows the site's toggle for free, and there is still one palette.
 *
 * Four tokens have no site equivalent (shadow, glass, red, orange), so they are
 * defined per theme below, drawn from the same palette.
 */

#how .demo-stage {
  --vm-bg: var(--bg);
  --vm-bg-alt: var(--bg-alt);
  --vm-ink: var(--ink);
  --vm-muted: var(--muted);
  --vm-line: var(--line);
  --vm-card: var(--card);
  --vm-primary: var(--primary);
  --vm-primary-ink: var(--primary-ink);
  --vm-yellow: var(--yellow);
  --vm-green: var(--green);
  --vm-pink: var(--pink);
  --vm-lilac: var(--lilac);

  /* No site equivalent. Sol values; the theme blocks below override. */
  --vm-shadow: 0 6px 20px rgba(139, 90, 74, 0.12), 0 2px 6px rgba(139, 90, 74, 0.08);
  --vm-glass: rgba(255, 255, 255, 0.78);
  --vm-red: #E04848;
  --vm-orange: #E89B3D;
}

[data-theme="riso"] #how .demo-stage {
  --vm-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
  --vm-glass: rgba(255, 254, 250, 0.82);
  --vm-red: #FF3366;
  --vm-orange: #FF8A3D;
}

[data-theme="dusk"] #how .demo-stage {
  --vm-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --vm-glass: rgba(31, 31, 64, 0.85);
  --vm-red: #FF6B7A;
  --vm-orange: #F2B05E;
}

/* The demo band itself.
 *
 * Two columns on a wide screen, stacked on a phone, matching the rest of the
 * page. The copy column leads on desktop; on a phone the stack puts the copy
 * first, so the reader knows what they are about to watch.
 */

.demo-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .demo-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
  }
}

.demo-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}

/* The canvas is a fixed 1080x1080 composition that Stage scales to whatever box
 * it is given, so the box only has to stay square. On a phone it is the full
 * column width; the cap stops it dominating a wide screen.
 */
.demo-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--vm-shadow);
}

/* The composition is a fixed 1080x1080 SVG that Stage scales with a transform.
 * The site's global `img, svg { max-width: 100%; height: auto }` overrides that
 * intrinsic size, so the canvas collapsed to the SVG default of 200px and was
 * then scaled a second time by the transform: a small picture floating in a
 * large box. Inside the stage the canvas keeps the size it was authored at and
 * lets the transform do the fitting.
 */
.demo-stage svg {
  max-width: none;
  height: auto;
}

/* Images inside the composition are positioned by the animation in canvas
 * coordinates, so the same global rule must not reflow them either.
 */
.demo-stage img:not(.demo-poster) {
  max-width: none;
}

/* Shown until the script mounts, and left in place for a visitor with no
 * JavaScript. It is a still frame of the demo, so the band is never empty.
 */
.demo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-stage[data-mounted="true"] .demo-poster {
  display: none;
}