/* ─── "See how it works": the motion graphic ─────────────────────────────────
   Real captures of the app (public/img/howitworks/*.webp) with the live
   parts drawn over them in CSS/JS: the heard-word highlight, the listening
   meter, the chord badge, the note hit. Every colour is a site.css token.
   Layout: one stage (3:2 on desktop, 390:600 on phones), scene captions
   below, scene buttons for manual navigation. Nothing here is fixed or
   floating; the page scrolls past it like any other block. */
.hiw { max-width: 1040px; margin: 0 auto 38px; }
.hiw-stage {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; container-type: size;
  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; }

/* 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-now { background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px; opacity: 0; }
.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.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 .spin { width: .8em; height: .8em; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: hiw-spin .8s linear infinite; }
.hiw-chip .tick { font-weight: 800; }
/* the listening meter: six bars that breathe while a scene "hears" */
.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-chip.primary .hiw-meter i, .hiw-chip:not(.accent) .hiw-meter i { background: var(--accent-2); }
.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); }

@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-bar { from { height: 25%; } to { height: 100%; } }
@keyframes hiw-spin { to { transform: rotate(360deg); } }

/* Caption, progress and controls */
.hiw-prog { height: 3px; margin: 10px 8px 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hiw-prog i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left center; transform: scaleX(0); }
.hiw-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 12px; }
.hiw-cap { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-soft); min-height: 3em; max-width: 620px; }
.hiw-cap b { color: var(--ink); font-weight: 700; }
.hiw-ctl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.hiw-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hiw-dot, .hiw-pause {
  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-dot:hover, .hiw-pause:hover { border-color: var(--brand); color: var(--brand); }
.hiw-dot.is-on { background: var(--brand); border-color: var(--brand); color: var(--on-primary); }
.hiw-dot .n { display: inline-block; min-width: 1.2em; margin-right: 4px; opacity: .7; font-weight: 800; }
.hiw-pause { margin-left: 6px; }
.hiw-pause[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }

/* Phones: the stage shows the 390-wide captures (portrait), same overlays from the phone anchor set */
@media (max-width: 699px) {
  .hiw { max-width: 400px; }
  .hiw-stage { aspect-ratio: 390 / 600; }
  .hiw-cap { font-size: 14.5px; }
  .hiw-pointer { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .hiw-dot, .hiw-pause { padding: 6px 10px; font-size: 12px; }
  .hiw-dot .n { display: none; }
}

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