/* P324 landing: the 6-stem split (S4, motion spec 7). The markup's resting state is the finished rig,
   so without JS, or under reduced motion, it is simply there; src/landing/stem-split.ts drives the rest. */

/* ---------- Section intro (shared by the practice sections; practice.css reuses it) ---------- */

.lp-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: 56px;
}

.lp-intro__note {
  margin: 28px 0 0;
  font-size: clamp(22px, 2.2vw, 30px);
  text-transform: uppercase;
}

.lp-intro__body { margin: 0 0 64px; }

@media (prefers-reduced-motion: no-preference) {
  /* Spec 13: the marker note writes in once it is on screen (practice sections add is-in). */
  .is-waiting:not(.is-in) .lp-intro__note { clip-path: inset(0 100% 0 0); }
  .is-in .lp-intro__note { animation: lp-write 600ms var(--lp-ease-inout) 300ms backwards, lp-wobble 120ms ease-out 900ms; }
}

@keyframes lp-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lp-wobble { 50% { rotate: 1.5deg; } }

/* ---------- The pinned title ---------- */

/* While the rig is pinned (three screens) the section's heading has scrolled away, so a compact copy of it rides
   above the rig in the band the pin leaves; stem-split.ts adds is-titled once the pin starts. Pin media only:
   touch and reduced motion never pin, and keep the heading in view. */
.lp-stems__pinned { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* The title row's height comes out of the intro's margin, so the rig sits where it did. */
  .lp-stems .lp-intro { margin-bottom: 12px; }
  .lp-stems__pinned {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin: 0 0 16px;
    opacity: 0;
    transition: opacity 300ms var(--lp-ease-out);
  }
  .lp-stems__pinned .lp-eyebrow { margin: 0; }
  .lp-stems__pinned .lp-display { font-size: 28px; }
  .lp-stems__stage.is-titled .lp-stems__pinned { opacity: 1; }
}

/* ---------- The rig ---------- */

.lp-rig {
  --lp-split: 1;
  --lp-playhead: 1;
  position: relative;
  padding: 32px 32px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, #121217, #0b0b0f);
  box-shadow: inset 0 0 0 1px var(--lp-line-strong), 0 40px 120px #00000080;
}

.lp-rig__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.lp-rig__label,
.lp-rig__status,
.lp-rig__ready,
.lp-router__pct,
.lp-lanes__label {
  margin: 0;
  font: 500 12px/1 var(--lp-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

.lp-rig__tag {
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--lp-line-strong);
  font: 700 12px/1 var(--lp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lp-rig__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(140px, 1fr) minmax(0, 556px);
  align-items: center;
}

/* Input: the YouTube video, its mixed waveform, the source switch. */
.lp-rig__in {
  position: relative;
  z-index: 1;
  padding: 20px;
  border-radius: 18px;
  background: var(--lp-surface);
  box-shadow: inset 0 0 0 1px var(--lp-line);
}

.lp-src { display: flex; align-items: center; gap: 12px; }

.lp-src__thumb {
  position: relative;
  flex: 0 0 72px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.lp-src__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-src__yt { position: absolute; inset: 0; margin: auto; width: 22px; height: 16px; }
.lp-src__yt rect, .lp-src__meta rect, .lp-pick__opt rect { fill: #ff0000; }
.lp-src__yt path, .lp-src__meta path, .lp-pick__opt [viewBox="0 0 28 20"] path { fill: #fff; }
.lp-src__title { display: block; font-weight: 600; font-size: 14px; }

.lp-src__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font: 400 12px/1 var(--lp-mono);
  color: var(--lp-ink-3);
}

.lp-src__meta svg { width: 14px; height: 10px; }

.lp-mix {
  display: block;
  width: 100%;
  height: 168px;
  margin: 18px 0;
}

.lp-pick {
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--lp-line-strong);
}

.lp-pick__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: transparent;
  color: var(--lp-ink-2);
  font: 500 12.5px/1.2 var(--lp-font);
  cursor: pointer;
  transition: background-color 250ms var(--lp-ease-inout), color 250ms;
}

.lp-pick__opt svg { flex: none; width: 14px; height: 12px; }
.lp-pick__opt:first-child { flex: none; white-space: nowrap; }
.lp-pick__opt [viewBox="0 0 16 16"] path { fill: none; stroke: currentColor; stroke-width: 1.3; }
.lp-pick__opt[aria-checked="true"] { background: #fff; color: var(--lp-paper-ink); font-weight: 600; }
.lp-pick__opt:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

/* Router: a ring that fills as the song is read, with the split's percentage under it. */
.lp-router {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  translate: 0 14px;
}

.lp-router__ring { width: 120px; height: 120px; overflow: visible; rotate: -90deg; }
.lp-router__track { fill: none; stroke: var(--lp-line-strong); stroke-width: 1; }

.lp-router__fill {
  fill: none;
  stroke: var(--lp-hot);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px #ff2d5588);
}

.lp-router__core { fill: #17090e; stroke: var(--lp-hot); stroke-width: 2.5; }
.lp-router__icon { rotate: 90deg; transform-origin: 60px 60px; fill: none; stroke: #fff; stroke-width: 2; }

/* Wires: drawn behind everything, laid out by stem-split.ts from the real boxes. */
.lp-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lp-wires path { fill: none; stroke-width: 1.5; }
.lp-wires__in { stroke: #6aa7ff99; }
.lp-wires__out path { stroke-dasharray: 1; opacity: 0.85; }

/* Lanes */
.lp-lanes {
  position: relative;
  z-index: 1;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background: var(--lp-surface);
  box-shadow: inset 0 0 0 1px var(--lp-line);
}

.lp-lanes__label { margin-bottom: 16px; text-transform: none; letter-spacing: 0.04em; font-size: 12.5px; }
.lp-lanes__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.lp-lane {
  --lp-stem: var(--lp-stem-other);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 28px 28px;
  align-items: center;
  gap: 6px;
  height: 58px;
  padding: 0 14px 0 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--lp-stem) 9%, #111116);
  box-shadow: inset 3px 0 0 var(--lp-stem), inset 0 0 0 1px color-mix(in srgb, var(--lp-stem) 45%, transparent);
  transition: opacity 250ms var(--lp-ease-inout), background-color 250ms;
}

.lp-lane[data-stem="vocals"] { --lp-stem: var(--lp-stem-vocals); }
.lp-lane[data-stem="drums"] { --lp-stem: var(--lp-stem-drums); }
.lp-lane[data-stem="bass"] { --lp-stem: var(--lp-stem-bass); }
.lp-lane[data-stem="piano"] { --lp-stem: var(--lp-stem-piano); }
.lp-lane[data-stem="guitar"] { --lp-stem: var(--lp-stem-guitar); }

/* A lane still waiting for its stem: grey and flat. */
.lp-lane[data-on="false"] { background: #111116; box-shadow: inset 0 0 0 1px var(--lp-line); }
.lp-lane[data-on="false"] .lp-lane__name { color: var(--lp-ink-3); }
.lp-lane[data-on="false"] .lp-lane__name::before { background: var(--lp-ink-3); }
.lp-lane.is-quiet { opacity: 0.32; }

.lp-lane__name {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 12.5px/1 var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lp-lane__name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.lp-lane__wave { display: block; width: 100%; height: 34px; margin-right: 10px; }

.lp-lane__btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: #ffffff14;
  color: var(--lp-ink-2);
  font: 700 11px/1 var(--lp-mono);
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}

.lp-lane__btn:hover { background: #ffffff26; }
.lp-lane__btn:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
.lp-lane__btn[data-mute][aria-pressed="true"] { background: var(--lp-hot); color: #fff; }
.lp-lane__btn[data-solo][aria-pressed="true"] { background: var(--lp-gold); color: var(--lp-paper-ink); }

/* The playhead runs the lanes once the split is done (90–100%). */
.lp-lanes__head {
  position: absolute;
  top: 46px;
  bottom: 20px;
  left: calc(140px + (100% - 252px) * var(--lp-playhead));
  width: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 12px #ffffffaa;
  opacity: 0;
  pointer-events: none;
}

.lp-rig[data-ready="true"] .lp-lanes__head { opacity: 1; }

/* Footer: the split's progress, what it is doing, and READY. */
.lp-rig__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}

.lp-rig__bar { position: relative; height: 3px; border-radius: 2px; background: #ffffff14; overflow: hidden; }

.lp-rig__bar span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--lp-hot), var(--lp-gold));
  transform-origin: left;
  scale: var(--lp-split) 1;
}

.lp-rig__status { display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-width: 30ch; color: var(--lp-gold); }
.lp-rig__status::before,
.lp-rig__ready::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp-rig__ready { display: flex; align-items: center; gap: 10px; color: #3f6f2a; transition: color 250ms; }
.lp-rig[data-ready="true"] .lp-rig__ready { color: var(--lp-stem-other); text-shadow: 0 0 12px #a3e63599; }

/* ---------- Narrower screens: the rig stacks (input, a small router, the lanes) ---------- */

@media (max-width: 1100px) {
  .lp-intro { grid-template-columns: minmax(0, 1fr); }
  .lp-intro__body { margin: 0; max-width: 560px; }
  .lp-rig__body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-router { translate: none; grid-auto-flow: column; align-items: center; }
  .lp-router__ring { width: 64px; height: 64px; }
  .lp-wires { display: none; }
}

@media (max-width: 600px) {
  .lp-rig { padding: 20px 14px; border-radius: 20px; }
  .lp-rig__head { margin-bottom: 20px; }
  .lp-rig__label { font-size: 10px; letter-spacing: 0.1em; }
  .lp-rig__tag { flex: none; font-size: 10px; }
  .lp-rig__in, .lp-lanes { padding: 14px; }
  .lp-mix { height: 110px; }
  .lp-pick__opt { padding: 8px 10px; font-size: 11.5px; }
  .lp-lane { grid-template-columns: 72px minmax(0, 1fr) 28px 28px; height: 48px; padding: 0 8px 0 12px; }
  .lp-lane__name { gap: 8px; font-size: 11px; letter-spacing: 0.08em; }
  .lp-lanes__head { left: calc(104px + (100% - 204px) * var(--lp-playhead)); top: 40px; bottom: 14px; }
  .lp-rig__foot { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; margin-top: 22px; }
  .lp-rig__bar { grid-column: 1 / -1; }
  .lp-rig__status, .lp-rig__ready { font-size: 10px; letter-spacing: 0.1em; }
  .lp-rig__status { min-width: 0; justify-content: flex-start; }
}

/* The narrowest phones: "Rendering stems · 6 of 6" wrapped to a second line under 330px, so the rig grew 10px and
   back as the status changed. A little less tracking and gap keeps every status on one line. */
@media (max-width: 340px) {
  .lp-rig__foot { column-gap: 10px; }
  .lp-rig__status, .lp-rig__ready { letter-spacing: 0.06em; }
}

/* The note says "scroll" only where scrolling pulls the song apart: not on touch (it plays by
   itself) and not with reduced motion (it is shown already split). */
.lp-stems__note-still { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 899px), (prefers-reduced-motion: reduce) {
  .lp-stems__note-scroll { display: none; }
  .lp-stems__note-still { display: inline; }
}

/* Phones: the formats would wrap the pill onto two lines. */
@media (max-width: 600px) {
  .lp-pick__formats { display: none; }
}