/* P324 landing: key and speed (S4, motion spec 8, 14) and three ways to read (spec 9).
   The section intro (.lp-intro) is in stems.css. Tilts use `rotate` and entrances animate `translate`,
   so an entrance never fights a card's resting tilt. */

.lp-key, .lp-read { overflow-x: clip; }

/* ---------- Key and speed ---------- */

.lp-dials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.lp-dial {
  --lp-dial-ink: #fff;
  --lp-dial-dim: #ffffff59;
  --lp-fill: 50%; /* the value's share of the slider, set by key-speed.ts on the card */
  padding: 44px 40px 40px;
  border-radius: 24px;
  color: var(--lp-dial-ink);
}

.lp-dial--key {
  background: linear-gradient(160deg, #ff2d55 0%, #e0187a 50%, #8b2be2 100%);
  rotate: 1.4deg;
  box-shadow: 0 30px 80px #e0187a40;
}

.lp-dial--speed {
  --lp-dial-ink: var(--lp-paper-ink);
  --lp-dial-dim: #11101440;
  background: var(--lp-gold);
  rotate: -1.4deg;
  box-shadow: 0 30px 80px #ffd16626;
}

.lp-dial__read { display: flex; align-items: flex-end; gap: 14px; margin: 0; }

.lp-dial__num {
  display: inline-block;
  min-width: 2ch;
  font: 900 clamp(110px, 12vw, 176px)/0.8 var(--lp-display);
  font-variant-numeric: tabular-nums;
}

.lp-dial__unit { font-size: 20px; padding-bottom: 6px; }

/* Ticks: a long one every fifth. The ticks between the middle (0, 1.00×) and the value light up. */
.lp-dial__ruler {
  --lp-tick: var(--lp-dial-dim);
  position: relative;
  display: block;
  height: 30px;
  margin: 34px 0 18px;
}

.lp-dial__ruler, .lp-dial__ruler::after {
  background:
    repeating-linear-gradient(90deg, var(--lp-tick) 0 2px, transparent 2px 44px) bottom left / 100% 30px no-repeat,
    repeating-linear-gradient(90deg, var(--lp-tick) 0 2px, transparent 2px 11px) bottom left / 100% 16px no-repeat;
}

.lp-dial__ruler::after {
  --lp-tick: var(--lp-dial-ink);
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - max(var(--lp-fill), 50%)) 0 min(var(--lp-fill), 50%));
}

/* The slider: a thin bar, filled to the value (--lp-fill). */
.lp-dial__bar {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.lp-dial__bar::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lp-dial-ink) var(--lp-fill), var(--lp-dial-dim) var(--lp-fill));
}

.lp-dial__bar::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lp-dial-ink) var(--lp-fill), var(--lp-dial-dim) var(--lp-fill));
}

.lp-dial__bar::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7.5px;
  border: 0;
  border-radius: 50%;
  background: var(--lp-dial-ink);
  appearance: none;
  transition: scale 250ms var(--lp-ease-spring);
}

.lp-dial__bar::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--lp-dial-ink);
}

.lp-dial__bar:hover::-webkit-slider-thumb { scale: 1.15; }
.lp-dial__bar:focus-visible { outline: 2px solid var(--lp-dial-ink); outline-offset: 6px; border-radius: 4px; }

.lp-dial__note { margin: 26px 0 0; font-size: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .lp-dials.is-waiting:not(.is-in) .lp-dial { opacity: 0; }
  .lp-dials.is-in .lp-dial--key { animation: lp-from-left 650ms var(--lp-ease-spring) backwards; }
  .lp-dials.is-in .lp-dial--speed { animation: lp-from-right 650ms var(--lp-ease-spring) 100ms backwards; }
  /* A flip-board roll: the new value turns down into place. */
  .lp-dial__num.is-flipping { animation: lp-flip 180ms var(--lp-ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-dial__num.is-flipping { animation: lp-fade 180ms ease-out; }
}

@keyframes lp-from-left { from { opacity: 0; translate: -120px 0; } }
@keyframes lp-from-right { from { opacity: 0; translate: 120px 0; } }
@keyframes lp-flip { from { opacity: 0.2; transform: perspective(400px) rotateX(-70deg); } }
@keyframes lp-fade { from { opacity: 0.3; } }

/* ---------- Three ways to read it ---------- */

.lp-read .lp-intro__note { margin-bottom: 56px; }

.lp-ways {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-way {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 30px;
  border-radius: 24px;
  background: #0b0b0e;
  box-shadow: inset 0 0 0 1px var(--lp-line-strong);
  transition: translate 220ms var(--lp-ease-out), box-shadow 220ms;
}

.lp-way:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px #ffffff55; }
.lp-way__title { margin: auto 0 10px; font-size: 20px; font-weight: 700; }
.lp-way__body { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--lp-ink-3); }

/* Words with the chords on them: a taped, tilted cream sheet. */
.lp-way--words {
  position: relative;
  background: var(--lp-cream);
  color: var(--lp-paper-ink);
  rotate: -1.2deg;
  box-shadow: 0 24px 60px #00000066;
}

.lp-way--words::before {
  content: '';
  position: absolute;
  top: var(--lp-tape-top);
  right: 30px;
  width: 112px;
  height: var(--lp-tape-h);
  background: var(--lp-tape);
  rotate: 3deg;
}

.lp-way--words:hover { box-shadow: 0 30px 70px #00000080; }
.lp-way--words .lp-way__body { color: #55525c; }
.lp-sheet__line { margin: 0 0 18px; font-size: 21px; line-height: 1; transition: opacity 400ms var(--lp-ease-inout); }

/* The sheet scrolls up as it is sung (read.ts): about four lines show, faded at both edges. */
.lp-sheet {
  height: 250px;
  /* Room for the lit chord's backing, which the mask would otherwise cut at the edge. */
  margin-inline: -4px;
  padding-inline: 4px;
  overflow: clip;
  mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent);
}

.lp-sheet__line[data-state='played'], .lp-sheet__line[data-state='upcoming'] { opacity: 0.4; }

/* A chord sits over the word it lands on. */
.lp-cw { display: inline-flex; flex-direction: column; gap: 9px; margin-right: 0.35em; }
.lp-cw::before { content: attr(data-chord); align-self: start; font: 700 15px/1 var(--lp-mono); color: var(--lp-red); }
/* The chord sounding now, lit as the product's sheet lights it: a backing behind the name, no reflow. */
.lp-cw.is-lit::before { border-radius: 3px; background: var(--lp-red); box-shadow: 0 0 0 3px var(--lp-red); color: #fff; }

/* The bar grid: the song's sections, each a coloured rail and caps tag as the Studio's grid draws them
   (sheet.css .sheet__gblock), four beats a box, the bar now playing lit and its section with it. */
.lp-form { display: grid; gap: 8px; }

.lp-sect {
  --sect: var(--lp-line-strong);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--sect) 45%, transparent);
  transition: border-color 200ms;
}

.lp-sect[data-kind='intro'] { --sect: var(--lp-sect-intro); }
.lp-sect[data-kind='verse'] { --sect: var(--lp-sect-verse); }
.lp-sect[data-kind='chorus'] { --sect: var(--lp-sect-chorus); }
.lp-sect[data-kind='bridge'] { --sect: var(--lp-sect-bridge); }
.lp-sect.is-lit { border-left-color: var(--sect); }

.lp-sect__tag {
  justify-self: start;
  margin: 0;
  padding: 4px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sect) 14%, transparent);
  color: var(--sect);
  font: 700 10px/1 var(--lp-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 200ms, color 200ms;
}

.lp-sect.is-lit .lp-sect__tag { background: var(--sect); color: var(--lp-bg); }

.lp-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-bars li {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  overflow: clip;
  height: 38px;
  border-radius: 8px;
  background: #ffffff0a;
  box-shadow: inset 0 0 0 1px var(--lp-line);
  font: 600 14px/1 var(--lp-mono);
  color: var(--lp-ink-2);
}

.lp-bars li.is-lit { background: #3a0d18; box-shadow: inset 0 0 0 1.5px var(--lp-hot); color: #fff; }
.lp-bars span { position: absolute; inset: 0; display: grid; place-items: center; }
/* Four beats a box, the one playing tinted, as the Studio's grid marks it (sheet.css .sheet__beat.is-now). */
.lp-bars i { align-self: stretch; }
.lp-bars i + i { box-shadow: inset 1px 0 #ffffff0a; }
.lp-bars i.is-now { background: color-mix(in srgb, var(--lp-hot) 25%, transparent); }

/* Diagram mode: a real G shape, gold edged. */
.lp-way--shape { box-shadow: inset 0 0 0 1.5px var(--lp-gold); }
.lp-way--shape:hover { box-shadow: inset 0 0 0 1.5px var(--lp-chord-lit), 0 0 40px #ffd16626; }

.lp-shape {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 22px 16px 16px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px var(--lp-chord-lit);
  color: var(--lp-chord-lit);
}

.lp-shape__name { font: 700 34px/1 var(--lp-mono); }
/* The old name and shape fade out under the new in the same cell (read.ts). */
.lp-shape__name, .lp-shape__art { display: grid; justify-items: center; }
.lp-shape__name > *, .lp-shape__art > * { grid-area: 1 / 1; }
.lp-shape__foot { font-size: 11px; color: var(--lp-gold); }
.lp-shape .dia { display: block; height: 130px; width: auto; }
.lp-shape .dia__grid { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-shape :is(.dia__nut, .dia__dot) { fill: currentColor; }
.lp-shape :is(.dia__num, .dia__string) { display: none; }
.lp-shape :is(.dia__mark, .dia__fret-number) { fill: currentColor; opacity: 0.6; font-size: 8px; }
.lp-shape .dia__open { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: no-preference) {
  .lp-ways.is-waiting:not(.is-in) .lp-way { opacity: 0; }
  .lp-ways.is-in .lp-way { animation: lp-rise 700ms var(--lp-ease-out) backwards; }
  .lp-ways.is-in .lp-way:nth-child(2) { animation-delay: 100ms; }
  .lp-ways.is-in .lp-way:nth-child(3) { animation-delay: 200ms; }
}

@keyframes lp-rise { from { opacity: 0; translate: 0 40px; } }

/* ---------- Narrower screens: everything stacks ---------- */

@media (max-width: 1100px) {
  .lp-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-way--words { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .lp-dials, .lp-ways { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-dial { padding: 32px 24px 28px; }
  .lp-dial__ruler { margin: 24px 0 12px; }
  .lp-way { min-height: 0; gap: 0; }
  .lp-way__title { margin-top: 28px; }
  .lp-sheet__line { font-size: 18px; }
  .lp-sheet { height: 220px; }
}