/* Home, "Gabriel, in your pocket" (section.demo#demo): Tyler's pick A (10/6), built from the ?pocket=a mockup.
   Only Ask shows at first; each next beat rises in as the clip reaches it. page.js sets the beats' .on and .done from
   the clip's time (scrubbed by scroll in the desktop pin, played in real time on phones) and marks the section
   .is-rising (beats rise in) or .is-still (reduced motion: every beat shows, still). Without JavaScript every beat
   shows too. Phones: one screen, the phone beside the beats. Layers on style.css (section 7, the demo).
   The mockup files (pocket-mock.js/.css) stay on disk as reference only; nothing loads them. */

.demo .beats{border-top:1px solid var(--line)}
.demo .beats li{border-top:0;border-bottom:1px solid var(--line);transition:border-color .6s}
.demo .beats li:last-child{border-bottom:1px solid var(--line)}
.demo .beats .beat{padding:17px 0;min-height:44px;transition:opacity .5s var(--ease-out),transform .8s var(--ease-out)}
.demo .beats span{font-size:clamp(17px,1.32vw,20px);letter-spacing:-.01em;line-height:1.35}
/* The beats still to come wait out of sight, just below their place, their rows a fainter hairline; a keyboard can
   always reach them */
.demo.is-rising .beats li:not(:first-child):not(.on):not(.done):not(:focus-within){border-bottom-color:rgba(44,52,55,.55)}
.demo.is-rising .beats li:not(:first-child):not(.on):not(.done):not(:focus-within) .beat{opacity:0;transform:translateY(22px);pointer-events:none}
.demo .beats li.on b{color:var(--jade)}
.demo .beats li.on span{color:var(--pearl)}
.demo .beats li.done b{color:var(--dim)}
.demo .beats li.done span{color:var(--silver)}
.demo .beats .beat:focus-visible{outline-offset:-2px;border-radius:12px}
/* The replay button shows only when page.js shows it (style.css's display:grid overrode [hidden], so it sat on the
   desktop phone while scrolling plays the clip there) */
.demo .replay[hidden]{display:none}

/* ---------- Phones and tablets (960 and under; not pinned, the clip plays once half the phone is on screen): one
   screen. The copy on top, then the phone beside the beats, the name over the line. ---------- */
@media (max-width:960px){
  .demo .demo-stage{padding-block:96px 30px}
  .demo .demo-grid{display:grid;grid-template-columns:minmax(0,.54fr) minmax(0,.46fr);grid-template-areas:"eb eb" "h2 h2" "lead lead" "dev side" "tag tag" "act act";column-gap:16px;row-gap:0;align-items:start}
  .demo .demo-dev{display:contents}
  .demo .demo-copy>.eyebrow{grid-area:eb;margin-bottom:10px}
  .demo .demo-copy>.h2{grid-area:h2;margin-bottom:12px}
  .demo .demo-copy>.lead{grid-area:lead;margin-bottom:18px;font-size:var(--fs-17)}
  .demo #demoPhone{grid-area:dev;width:100%;max-width:300px;margin:0;border-radius:30px;padding:6px}
  .demo #demoPhone video{border-radius:24px}
  .demo .demo-tag{grid-area:tag;margin-top:12px;padding-right:0;text-align:left}
  .demo .demo-copy>.actions{grid-area:act;margin-top:16px}
  /* the replay control rests on the phone, as on desktop */
  .demo .dev-live .replay{top:auto;right:10px;bottom:10px;width:44px;height:44px;padding:0;display:grid;border-radius:999px;border:1px solid rgba(24,29,32,.2);background:rgba(250,250,250,.92);color:var(--obsidian)}
  .demo .dev-live .replay::after{content:none}
  .demo .dev-live .replay[hidden]{display:none}
  .demo .beats{grid-area:side;margin-top:0;align-self:stretch}
  .demo .beats .beat{grid-template-columns:1fr;gap:6px;padding:13px 0}
  .demo .beats span{font-size:var(--fs-15);line-height:1.35}
}

/* ---------- Reduced motion (and ?motion=off): nothing pins, nothing moves; every beat shows. One screen. ---------- */
.demo.is-still .demo-stage{padding-block:clamp(80px,6vw,92px)}
.demo.is-still .beats li{transition:none}
@media (max-width:960px){.demo.is-still .demo-stage{padding-block:96px 30px}}