/* ─── "See how it works": the stepped showcase ───────────────────────────────
   Real captures of the app (public/img/howitworks/*.webp, rebuilt from a live
   server by test/capture-howitworks.mjs + scripts/build-howitworks-assets.py)
   with the live parts drawn over them by howitworks.js: the heard words
   walking along the sheet, the lit note on the fretboard, the loop markers,
   the accuracy slider. Every colour is a site.css token. Nothing here is
   fixed or floating: the page scrolls past it like any other block.
   Layout: the section art (the vector Leonardo) beside the heading, then the
   step list on the left and the stage on the right (desktop); on phones the
   stage comes first, the caption under it, the steps as a scrolling row. */

/* Intro row: the section art next to the heading */
.hiw-intro { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; margin-bottom: 30px; }
.hiw-art { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lift); background: var(--surface-2); }
.hiw-art img { display: block; width: 100%; height: auto; }
.hiw-intro .eyebrow, .hiw-intro h2, .hiw-intro .sec-lead { text-align: left; }
.hiw-intro .sec-lead { margin: 0; }
@media (min-width: 860px) {
  .hiw-intro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; margin-bottom: 38px; }
}

/* The showcase: steps + stage */
.hiw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 auto 44px; }
.hiw-stage {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; container-type: size; min-width: 0;
  border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lift); background: var(--surface-2);
}
.hiw-scene { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.hiw-scene.is-on { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }
.hiw-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hiw-scene .hiw-alt { position: absolute; inset: 0; opacity: 0; }
.hiw-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Step list: one button a step; the active one carries the progress bar */
.hiw-steps { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; min-width: 0; }
.hiw-steps::-webkit-scrollbar { display: none; }
.hiw-step {
  flex: none; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; text-align: left;
  padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font: inherit; cursor: pointer; position: relative; overflow: hidden; min-width: 0;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hiw-step .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--surface-2); color: var(--ink-soft); }
.hiw-step .t { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hiw-step .s { display: none; grid-column: 2; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.hiw-step:hover { border-color: var(--brand); }
.hiw-step.is-on { border-color: var(--brand); background: var(--primary-soft); }
.hiw-step.is-on .n { background: var(--brand); color: var(--on-primary); }
.hiw-step .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); transform-origin: left center; transform: scaleX(0); }

/* Caption + controls under the stage */
.hiw-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hiw-cap { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-soft); min-height: 3em; max-width: 640px; }
.hiw-cap b { color: var(--ink); font-weight: 700; }
.hiw-ctl { display: flex; align-items: center; gap: 8px; }
.hiw-pause, .hiw-arrow {
  padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hiw-pause:hover, .hiw-arrow:hover { border-color: var(--brand); color: var(--brand); }
.hiw-pause[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.hiw-arrow { padding: 7px 11px; }

@media (min-width: 860px) {
  .hiw { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: 'steps stage' 'steps bar'; gap: 14px 22px; align-items: start; }
  .hiw-steps { grid-area: steps; flex-direction: column; overflow: visible; padding: 0; gap: 8px; }
  .hiw-stage { grid-area: stage; }
  .hiw-bar { grid-area: bar; }
  .hiw-step { flex: none; padding: 11px 14px; }
  .hiw-step .t { white-space: normal; }
  .hiw-step .s { display: block; }
  .hiw-step .n { grid-row: span 2; align-self: start; margin-top: 1px; }
}
@media (min-width: 1020px) { .hiw { grid-template-columns: 280px minmax(0, 1fr); } }

/* Overlay primitives (positioned in % of the frame by howitworks.js) */
.hiw-el { position: absolute; box-sizing: border-box; }
.hiw-wash { background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 6px; opacity: 0; }
.hiw-wash.accent { background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.hiw-word { background: color-mix(in srgb, var(--accent-2) 60%, transparent); border-radius: 3px; opacity: 0; transform: scale(.9); }
.hiw-ring { border: 2px solid var(--accent); border-radius: 8px; opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.hiw-ring.pulse { animation: hiw-pulse 1.1s ease-out both; }
.hiw-ring.hold { animation: hiw-hold 1.1s ease-out forwards; }
.hiw-ring.round { border-radius: 999px; }
.hiw-pointer {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; opacity: 0;
  background: color-mix(in srgb, var(--primary) 72%, transparent); border: 2px solid var(--on-primary);
  box-shadow: 0 2px 10px var(--brand-glow);
}
.hiw-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; opacity: 0; transform: translateY(6px);
  padding: .45em .8em; border-radius: var(--radius-pill); font-weight: 700; line-height: 1.2;
  font-size: clamp(9.5px, 1.15cqw, 13px); background: var(--steel); color: var(--on-dark);
  box-shadow: var(--shadow-lift); border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
}
.hiw-chip.accent { background: var(--accent); color: var(--steel-d); border-color: transparent; }
.hiw-chip.primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.hiw-chip .mono { font-family: var(--mono); }
.hiw-chip .tick { font-weight: 800; }
.hiw-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.1em; }
.hiw-meter i { display: block; width: .28em; height: 30%; border-radius: 2px; background: var(--accent-2); animation: hiw-bar .7s ease-in-out infinite alternate; }
.hiw-meter i:nth-child(2) { animation-delay: -.15s; } .hiw-meter i:nth-child(3) { animation-delay: -.35s; }
.hiw-meter i:nth-child(4) { animation-delay: -.5s; } .hiw-meter i:nth-child(5) { animation-delay: -.25s; } .hiw-meter i:nth-child(6) { animation-delay: -.6s; }
.hiw-fill { background: var(--accent); border-radius: 999px; transform-origin: left center; transform: scaleX(0); }
.hiw-glow { border-radius: 999px; opacity: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px 6px color-mix(in srgb, var(--accent) 45%, transparent); }

@keyframes hiw-pulse {
  0% { opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  15% { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes hiw-hold {
  0% { opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  15% { opacity: 1; }
  100% { opacity: 1; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes hiw-bar { from { height: 25%; } to { height: 100%; } }

/* Phones: the stage shows the 390-wide captures (portrait), same overlays from the phone anchor set */
@media (max-width: 699px) {
  .hiw-stage { aspect-ratio: 390 / 600; max-width: 400px; margin: 0 auto; width: 100%; }
  .hiw-cap { font-size: 14.5px; }
  .hiw-pointer { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
}
@media (max-width: 859px) {
  .hiw { grid-template-areas: 'stage' 'bar' 'steps'; }
  .hiw-stage { grid-area: stage; }
  .hiw-bar { grid-area: bar; }
  .hiw-steps { grid-area: steps; }
}

/* Reduced motion: one static frame per step and the captions; no autoplay, no overlays in motion */
@media (prefers-reduced-motion: reduce) {
  .hiw-scene { transition: none; }
  .hiw-fx, .hiw-step .bar, .hiw-pause { display: none; }
}
.hiw.static .hiw-fx, .hiw.static .hiw-step .bar, .hiw.static .hiw-pause { display: none; }