/* Composer Assistant — the home's "Hear it" (templates/site/home.html, #hear).
 * Split out of home.css at its 1000-line limit (30 Sep, A40), as the hero and
 * the camera were before it. Loaded on the home only, after home.css. Part of
 * the swap unit. Same discipline as home.css: tokens only, every selector
 * .home*, no selector declared twice across the home sheets.
 *
 * THE PLAYER IS THE PLUGIN (A17, A23): the real WHAT holding the idea, the
 * real YOUR TAKE holding the takes — captures of the plugin, never drawn —
 * with buttons laid over their own controls (home.js).
 */

/* ── At rest: every example on the page, one under the other ─────────────── */

.home-ex + .home-ex {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--border-subtle);
}

.home-ex__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -.02em;
}

/* A39 (Fede): TWO EQUAL CARDS, side by side, top-aligned — the idea, and what
   comes back — each under its own header; between them, the connector.
   ⟳ A40 (D): the whole content width, the pictures as large as the room
   allows (never above 1.5× their pixels — the frame's inline cap).
   The rows, shared by both cards (subgrid):
     1  the headers
     2  WHAT, and the result's take tabs + player (⟳ A43: the player alone,
        cropped — no taller than WHAT); the connector centres on it
     3  both captions, on one line
   Both cards span all the rows: the same height. */
.home-ex__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(2.5rem, 4vw, 4rem) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(.5rem, 1vw, .75rem);
  margin-top: 1.75rem;
}

.home-ex__card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  align-content: start;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  transition: border-color .4s ease, box-shadow .4s ease;
}

.home-ex__card--in { grid-column: 1; }
.home-ex__card--out { grid-column: 3; }

.home-ex__k {
  grid-row: 1;
  margin: 0 0 1rem;
  font-family: var(--data);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-text);
}

.home-ex__card--in > .home-plate__frame { grid-row: 2; align-self: start; }
.home-player__body { grid-row: 2; align-self: start; min-width: 0; }
.home-ex__card > figcaption { grid-row: 3; align-self: start; }

/* A real capture: its frame carries the 1.5× cap (inline), centred in its card. */
.home-plate--native .home-plate__frame { width: 100%; margin-inline: auto; }

/* In a card, a picture keeps only its edge — the card carries the depth. */
.home-ex__card .home-plate__img { box-shadow: 0 0 0 1px var(--border-strong); }

/* The connector: a line and its head, from the idea to the result, level
   with WHAT — quiet at rest; home.js lights it while the idea plays. */
.home-ex__link {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  height: 1.5rem;
}

.home-ex__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: .7rem;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-muted) 60%, var(--bg-base));
}

.home-ex__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: .8rem;
  height: .95rem;
  margin-top: -.475rem;
  background: color-mix(in srgb, var(--text-muted) 60%, var(--bg-base));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.home-plate { margin: 0; }

/* Its own edge and depth on both grounds (A33): a hairline, a shadow that
   shows on the light page, and the brass glow. */
.home-plate__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--border-strong),
              0 1rem 2.5rem -1.25rem color-mix(in srgb, var(--on-brass) 45%, transparent),
              0 1.25rem 3.5rem var(--accent-glow);
}

.home-plate figcaption { margin-top: .8rem; font-size: .95rem; color: var(--text-muted); }

/* Every sound on its own labelled player — the section with no script. */
.home-sounds {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .6rem;
}

.home-sound {
  display: grid;
  gap: .3rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.home-sound__label { font-weight: 500; }

.home-sound__note { font-family: var(--data); font-size: .72rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIONS (static/site/js/home.js) — each rule matches only once the
   script has switched an element on (un-hidden, or a --live / --flow class).
   ═══════════════════════════════════════════════════════════════════════════ */

.home-plate__frame { position: relative; }

.home-ex--live .home-sounds { display: none; }

/* A button laid exactly over a control of the render. Invisible until
   hovered or focused — the render IS the control. */
.home-hot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.home-hot:hover { box-shadow: inset 0 0 0 2px var(--brass); }

/* The play key is small on a phone: a bigger invisible target around it. */
.home-hot--play::before { content: ""; position: absolute; inset: -.5rem; }

.home-hot--play.is-playing { box-shadow: inset 0 0 0 3px var(--signal); }

/* A small control (a real capture's file chip): its ▶ sits beside it. */
.home-hot--chip { border-radius: 999px; }
.home-hot--chip .home-hot__badge { top: 50%; right: auto; left: calc(100% + .6rem); width: 2rem; transform: translateY(-50%); }
.home-hot--chip .home-hot__bar { left: .6rem; right: .6rem; bottom: .15rem; height: 3px; }

/* ⟳ A40: the capture's OWN take tiles pick the take — a button over each
   AUDIO tile; the capture swapped in shows the pick, as the plugin does. */
.home-hot--tile { border-radius: var(--radius-md); }

/* The take's player (A23): the capture, framed. A stand-in keeps small take
   buttons above it; a cropped picture's own edge is cut off, so the frame
   wears it (A33). */
.home-plate__frame--crop { overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border-strong); }

.home-player__takes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.home-player__takes[hidden] { display: none; }

.home-player__take {
  padding: .45rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  font: 500 .8rem/1 var(--data);
  color: var(--text-muted);
  cursor: pointer;
}

.home-player__take:hover { border-color: var(--brass); color: var(--text-primary); }
.home-player__take[aria-pressed="true"] { border-color: var(--brass); background: var(--brass); color: var(--on-brass); }

/* WHAT has no play key of its own in the plugin, so the idea gets a badge:
   ▶ at rest, ■ while it plays, and a thin progress line along the bottom. */
.home-hot--input { border-radius: var(--radius-md); }

.home-hot__badge {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: clamp(2.25rem, 5vw, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--brass) 28%, transparent);
}

.home-hot__badge::before {
  content: "";
  position: absolute;
  inset: 30% 26% 30% 36%;
  background: var(--on-brass);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.home-hot--input.is-playing .home-hot__badge::before { inset: 33%; clip-path: none; }

.home-hot__bar {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .7rem;
  height: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-base) 25%, transparent);
  opacity: 0;
}

.home-hot--input.is-playing .home-hot__bar { opacity: 1; }

.home-hot__fill {
  display: block;
  height: 100%;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
}

/* The playhead runs over the capture's own display while a take plays; a
   click on the display jumps there, as in the plugin. */
.home-display { position: absolute; cursor: pointer; }

.home-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--signal);
  box-shadow: 0 0 .75rem var(--signal);
  opacity: 0;
}

.home-display.is-playing .home-playhead { opacity: 1; }

/* Until the visitor plays something in this example, the two play controls
   breathe — gently — so it is clear the picture can be pressed. */
.home-ex--fresh .home-hot--play,
.home-ex--fresh .home-hot__badge { animation: home-breathe 2.4s ease-in-out infinite; }

@keyframes home-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 0%, transparent); }
  50%      { box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--brass) 45%, transparent); }
}

.home-ex__status { margin: 1.25rem 0 0; font-family: var(--data); font-size: .8rem; color: var(--signal-text); }

/* A39: while the idea plays (home-ex--flow) the connector lights — a light
   runs along it toward the result — the idea's card takes the brass edge,
   and a beat later the result's card lights up: the idea goes in, the result
   comes out. Reduced motion: the same lit state, standing still. */
.home-ex--flow .home-ex__link::before {
  background: linear-gradient(90deg, transparent, var(--brass-text), transparent) no-repeat,
              color-mix(in srgb, var(--brass-text) 45%, var(--bg-base));
  background-size: 45% 100%, auto;
  box-shadow: 0 0 .7rem color-mix(in srgb, var(--brass) 50%, transparent);
  animation: home-flow 1.3s linear infinite;
}

.home-ex--flow .home-ex__link::after { background: var(--brass-text); }

.home-ex--flow .home-ex__card--in { border-color: var(--brass); }

.home-ex--flow .home-ex__card--out {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass), 0 1rem 2.5rem var(--accent-glow);
  transition-delay: .5s;
}

@keyframes home-flow {
  from { background-position: -82% 0, 0 0; }
  to   { background-position: 182% 0, 0 0; }
}

/* ── A phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  /* A39: the cards stack, full width each, and the connector between them
     points down; the take tiles stay thumb-sized (≥ 44 px) at 390. */
  .home-ex__pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .home-ex__card { grid-column: auto; grid-row: auto; grid-template-rows: none; padding: .75rem; }
  .home-ex__k { margin-bottom: .75rem; }
  .home-player__takes { flex-wrap: nowrap; }
  .home-player__take { flex: 1; padding-inline: .4rem; }
  .home-ex__link { grid-column: auto; grid-row: auto; justify-self: center; width: 3rem; margin-block: 1.5rem; transform: rotate(90deg); }
  /* A39: the four examples on ONE row that scrolls sideways, running to the
     screen's edges — the example itself shows right away. position: the
     tabs' hidden words (.visually-hidden, absolute) stay inside the row —
     otherwise they stretch the PAGE sideways. */
  .home-hear .home-tabs {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1.5rem 1.5rem;
    padding: .25rem 1.5rem;
    scroll-padding-inline: 1.5rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .home-hear .home-tabs::-webkit-scrollbar { display: none; }
  .home-hear .home-tab { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

@media (max-width: 40rem) {
  .home-hear .home-tabs { margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-ex--fresh .home-hot--play,
  .home-ex--fresh .home-hot__badge { animation: none; }
  .home-ex__card { transition: none; }
  .home-ex--flow .home-ex__link::before { animation: none; background: var(--brass-text); }
}