/* P324 landing: hero, its chord player, and the chord marquee (S2; motion spec 1–4, 6).
   The load sequence is CSS animation; tokens.css's reduced-motion rule lands every one at its end. */

/* ---------- Stage (spec 2) ---------- */

.lp-hero {
  position: relative;
  /* Clipped sideways only: the stage runs on under the marquee. */
  overflow: clip visible;
  isolation: isolate;
  padding-block: 112px 72px;
}

.lp-hero__stage {
  position: absolute;
  inset: 0 0 -200px;
  z-index: -1;
  background: #000;
  /* Fades photo, scrim and glow out together into the page, at every width. */
  mask-image: linear-gradient(#000 calc(100% - 520px), #0000);
  animation: lp-lights 250ms linear both;
}

/* The photo, then its floor mirrored below it, so the stage carries on behind the player. */
.lp-hero__scene {
  position: absolute;
  /* The spotlight sits 2.9% down the photo (1.45% of the scene, photo plus echo): this pins it 36px
     under the hero top at every width, over "ANY" as P324 draws it. A fixed -176px lifted it off the top. */
  top: 36px;
  left: 50%;
  display: grid;
  width: max(145%, 1500px);
  translate: -51% -1.45%;
  opacity: 0.85;
  /* The scroll drift and push-in (hero.ts), on top of the translate above and the load's scale. */
  transform: translateY(var(--lp-stage-y, 0px)) scale(var(--lp-stage-zoom, 1));
  animation: lp-photo 1.6s var(--lp-ease-out) both;
}

.lp-hero__scene img {
  width: 100%;
  max-width: none;
  height: auto;
}

/* Both masks meet at #0008, so the floor runs into its reflection without a seam. */
.lp-hero__photo { mask-image: linear-gradient(#000 80%, #0008); }

.lp-hero__echo {
  scale: 1 -1;
  /* Static, so it rasterises once; the mask flips with the image, so its #0008 end is the top. */
  filter: blur(4px);
  mask-image: linear-gradient(#0000 40%, #0008);
}

/* Scrim: the type side darkened, the floor fading to the page. */
.lp-hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000a 0%, #0000 30%, #0000 55%, #000c 100%),
    linear-gradient(180deg, #0006 0%, #0000 25%, #0008 62%, var(--lp-bg) 100%);
}

.lp-hero__glow {
  position: absolute;
  inset: 40% -10% -10%;
  z-index: 1;
  background: radial-gradient(50% 40% at 50% 55%, #e0184f55, #0000 70%);
  animation: lp-breathe 8s var(--lp-ease-inout) infinite alternate;
}

@keyframes lp-lights { from { opacity: 0; } }
@keyframes lp-photo { from { scale: 1.06; } }
@keyframes lp-breathe { to { scale: 1.08; } }

/* ---------- Headline (spec 1) ---------- */

.lp-hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.lp-hero__tape {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  padding: 9px 18px 9px 30px;
  background: var(--lp-gold);
  color: var(--lp-paper-ink);
  font: 700 12px/1 var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  rotate: 2deg;
  box-shadow: 0 6px 18px #0008;
  animation: lp-slap 260ms var(--lp-ease-spring) 1.54s both;
}

.lp-hero__tape::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--lp-red);
}

@keyframes lp-slap { from { opacity: 0; scale: 1.35; rotate: -6deg; } }

.lp-hero__title {
  display: grid;
  justify-items: center;
  max-width: 1000px;
  color: var(--lp-ink);
}

.lp-hero__line {
  display: block;
  font-size: clamp(56px, 10.3vw, 148px);
  overflow: clip;
  overflow-clip-margin: 0 0 12px;
  padding-top: 0.06em;
}

.lp-hero__word {
  display: inline-block;
  animation: lp-rise 700ms var(--lp-ease-out) both;
}

.lp-hero__word:nth-child(1) { animation-delay: 120ms; }
.lp-hero__word:nth-child(2) { animation-delay: 190ms; }
.lp-hero__word:nth-child(3) { animation-delay: 260ms; }

@keyframes lp-rise { from { translate: 0 105%; } }

.lp-hero__marker {
  margin: 0.15em 0 0.1em;
  translate: 2.6em 0;
  font-size: clamp(22px, 2.6vw, 38px);
  text-transform: none;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  animation: lp-write 650ms var(--lp-ease-inout) 560ms both;
}

@keyframes lp-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }

.lp-hero__line--drop {
  font-size: clamp(66px, 12vw, 172px);
  overflow: visible;
}

.lp-hero__hear,
.lp-hero__it {
  display: inline-block;
  /* Starts after the marker has finished writing (560ms + 650ms): words, marker, HEAR IT., circle. */
  animation: lp-drop 1.26s 300ms both, lp-kick 160ms var(--lp-ease-out) 1.56s both;
}

.lp-hero__hear {
  position: relative;
  color: var(--lp-hot);
}

@keyframes lp-drop {
  0%, 80% { opacity: 0; translate: 0 -30px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes lp-kick { from { scale: 1.06; } }

.lp-hero__circle {
  position: absolute;
  inset: -16% -9% -14% -7%;
  width: 116%;
  height: 130%;
  overflow: visible;
  pointer-events: none;
}

.lp-hero__circle path,
.lp-hero__arrow path {
  fill: none;
  stroke: var(--lp-gold);
  /* viewBox units (no non-scaling-stroke: it breaks the pathLength="1" draw-in on a stretched viewBox). */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* "1 2", not "1": at offset 1 a lone "1" leaves a zero-length dash at the path end, and the round cap paints it as a dot. */
  stroke-dasharray: 1 2;
  animation: lp-draw 600ms var(--lp-ease-inout) 1.6s both;
}

.lp-hero__arrow path { animation-delay: 1.75s; }

@keyframes lp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.lp-hero__sub {
  position: relative;
  max-width: 540px;
  margin-top: 26px;
  text-align: left;
  animation: lp-fade 600ms var(--lp-ease-out) 800ms both;
}

.lp-hero__sub .lp-body { margin: 0; }
.lp-hero__sub .lp-body a { text-decoration: underline; text-underline-offset: 3px; }

.lp-hero__arrow {
  position: absolute;
  right: calc(100% + 18px);
  top: 4px;
  width: 80px;
  height: 38px;
  overflow: visible;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  animation: lp-fade 600ms var(--lp-ease-out) 900ms both;
}

@keyframes lp-fade { from { opacity: 0; translate: 0 12px; } }

.lp-hero__actions .lp-btn { padding-block: 17px; }

/* D715: the second action is the Pro trial, or Watch it play for an account that can't have one (D714).
   A browser with a session holds the slot empty until plans answers (nav.ts marks it), so neither flashes. */
.lp-hero__alt[hidden] { display: none; }
.lp-trial-pending .lp-hero__alt { visibility: hidden; }
.lp-hero__nocard { margin-inline-start: -6px; font-weight: 500; opacity: 0.7; } /* closes most of .lp-btn's 10px gap: one label, not two */

.lp-hero__rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.lp-hero__play {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* ---------- Player (spec 3) ---------- */

/* Keeps the player's top margin inside the deck. Collapsing through it, the margin left the hero
   when the pin fixed the deck, so the page shrank 36 px, ScrollTrigger refreshed mid-scroll, and the
   re-wrapped player replayed its rise: the blink and jump at the pin's start and end. */
.lp-hero__deck { display: flow-root; }

.lp-player {
  --lp-card: 166px;
  --lp-gap: 14px;
  --lp-dia: 100px;
  max-width: 1120px;
  margin: 36px auto 0;
  padding: 26px 27px 22px;
  box-sizing: border-box;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-player-radius, 28px);
  background: #101014e6;
  scale: var(--lp-player-scale, 1);
  box-shadow: 0 40px 120px #000c;
  animation: lp-player-rise 800ms var(--lp-ease-out) 900ms both;
}

@supports (backdrop-filter: blur(1px)) {
  .lp-player {
    background: #101014c4;
    backdrop-filter: blur(18px);
  }
}

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

.lp-player__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}

.lp-player__art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #26102c; /* song-art.webp's sky, shown until it loads */
}

.lp-player__song { margin-right: auto; }

.lp-player__title {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
}

.lp-player__meta {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--lp-ink-3);
}

.lp-player__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-chip {
  padding: 8px 12px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  background: var(--lp-surface-2);
  color: var(--lp-ink-2);
  font: 500 13px/1 var(--lp-font);
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background-color 200ms;
}

.lp-chip:hover { color: var(--lp-ink); border-color: #ffffff55; }

.lp-chip[aria-pressed="true"] {
  border-color: var(--lp-hot);
  background: #ff2d5522;
  color: var(--lp-ink);
}

.lp-chip:focus-visible,
.lp-player__toggle:focus-visible,
.lp-wave:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 3px;
}

/* The rail: SLOTS cards in a row; the third is now. Sliding moves it one card left. */
.lp-rail {
  margin: 0 -4px;
  padding: 44px 4px 8px;
  overflow: clip;
  /* Past and coming cards fade alike towards both edges. */
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* The now slot (--lp-now-slot, set by player.ts) sits in the exact centre; the strip slides under it. */
.lp-rail__track {
  --lp-step: calc(var(--lp-card) + var(--lp-gap));
  display: flex;
  gap: var(--lp-gap);
  translate: calc(50% - var(--lp-card) / 2 - var(--lp-now-slot, 3) * var(--lp-step)) 0;
}

.lp-rail__track.is-sliding {
  translate: calc(50% - var(--lp-card) / 2 - (var(--lp-now-slot, 3) + 1) * var(--lp-step)) 0;
  transition: translate 520ms var(--lp-ease-out);
}

.lp-card {
  flex: 0 0 var(--lp-card);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 10px 16px;
  box-sizing: border-box;
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  background: #ffffff06;
  color: #ffffff38;
  transform-origin: 50% 100%;
  transition: scale 520ms var(--lp-ease-out), color 300ms, border-color 300ms, box-shadow 520ms, background-color 300ms;
}

.lp-card:is([data-state="past"], [data-state="next"]) { color: var(--lp-ink); background: #ffffff0a; }

.lp-card[data-state="now"] {
  color: var(--lp-chord-lit);
  scale: 1.12;
  border: 1.5px solid var(--lp-chord-lit);
  background: #ffd16612;
  box-shadow: 0 0 40px #ffd16633, inset 0 0 30px #ffd1660d;
}

.lp-card__name {
  font: 900 34px/1 var(--lp-display);
  text-transform: none;
}

.lp-card__art {
  display: grid;
  place-items: center;
  height: var(--lp-dia);
  width: 100%;
}

.lp-card__art > * { grid-area: 1 / 1; }
.lp-card__art .is-entering { animation: lp-fade-in 260ms var(--lp-ease-out) both; }
.lp-card__art .is-leaving { animation: lp-fade-out 200ms linear both; }

@keyframes lp-fade-in { from { opacity: 0; } }
@keyframes lp-fade-out { to { opacity: 0; } }

.lp-card__foot {
  font: 500 11px/1 var(--lp-mono);
  opacity: 0.8;
}

/* Diagrams (src/diagram), drawn in the card's own colour. */
.lp-card .dia { display: block; height: var(--lp-dia); width: auto; max-width: 100%; }
.lp-card .dia--bass { height: calc(var(--lp-dia) * 1.1); }
.lp-card .dia__grid { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-card :is(.dia__nut, .dia__dot) { fill: currentColor; }
.lp-card :is(.dia__num, .dia__string) { display: none; }
.lp-card :is(.dia__mark, .dia__fret-number) { fill: currentColor; opacity: 0.6; font-size: 8px; }
.lp-card .dia__open { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-card .dia__key { fill: currentColor; fill-opacity: 0.85; stroke: #101014; stroke-width: 0.6; }
.lp-card .dia__key--black { fill: #101014; fill-opacity: 1; }
.lp-card .dia__tone { fill: var(--lp-hot); }
.lp-card .dia__tone--root { fill: var(--lp-gold); }
.lp-card .dia--bass .dia__tone { fill: none; }
.lp-card .dia--bass :is(.dia__bass-string, .dia__bass-fret) { stroke: currentColor; stroke-opacity: 0.55; }
.lp-card .dia--bass .dia__bass-nut { stroke: currentColor; stroke-width: 7; }
.lp-card .dia--bass .dia__inlay { fill: currentColor; fill-opacity: 0.3; }
.lp-card .dia--bass .dia__anchor { fill: none; stroke: currentColor; stroke-opacity: 0.6; stroke-width: 1.5; }
.lp-card .dia--bass .dia__tone circle { fill: currentColor; }
.lp-card .dia--bass .dia__tone--root circle { fill: var(--lp-hot); }
.lp-card .dia--bass .dia__interval { fill: #101014; font-size: 13px; font-weight: 800; }
.lp-card .dia--bass .dia__tone--root .dia__interval { fill: #fff; }

.lp-player__lyric {
  min-height: 1.3em;
  margin: 22px 0 18px;
  text-align: center;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 500;
  word-spacing: 0.12em;
}

.lp-player__lyric span { color: var(--lp-ink-3); transition: color 200ms; }
.lp-player__lyric span[data-state="sung"] { color: var(--lp-ink); }
.lp-player__lyric span[data-state="now"] { color: var(--lp-gold); }

.lp-player__transport {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-player__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--lp-ink);
  cursor: pointer;
}

.lp-player__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.lp-player__toggle[data-state="playing"] .lp-player__icon-play,
.lp-player__toggle[data-state="paused"] .lp-player__icon-pause { display: none; }

.lp-wave__time {
  font: 500 12px/1 var(--lp-mono);
  color: var(--lp-ink-3);
}

.lp-wave {
  position: relative;
  flex: 1;
  height: 40px;
  cursor: pointer;
  touch-action: none;
  border-radius: 4px;
}

.lp-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-wave__base { fill: #ffffff2e; }
.lp-wave__played { fill: var(--lp-hot); }

/* ---------- Chord marquee (spec 6) ---------- */

/* Positioned, so it paints over the hero's stage running on beneath it. */
.lp-marquee {
  position: relative;
  overflow: clip;
  padding-block: 40px 56px;
}

/* Both edges fade out, so the rows drift in and out of view rather than being cut; each fade ends
   short of the song-map rail's band (motion.css), mirrored on the left so the row stays centred. */
.lp-marquee__row {
  --clear: var(--lp-map-clear, 0px);
  overflow: clip;
  mask-image: linear-gradient(90deg, transparent var(--clear), #000 calc(var(--clear) + 10%), #000 calc(90% - var(--clear)), transparent calc(100% - var(--clear)));
}

.lp-marquee__track {
  display: flex;
  align-items: baseline;
  width: max-content;
  will-change: transform;
}

.lp-marquee__row--chords span {
  padding-inline: 0.55em;
  font: 900 72px/1.1 var(--lp-display);
  color: #ffe8b81f;
  transition: color 300ms;
}

.lp-marquee__row--chords span.is-lit { color: var(--lp-chord-lit); }

.lp-marquee__row--stats { margin-top: 26px; }

.lp-marquee__row--stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-inline: 32px;
  font-size: 24px;
  color: var(--lp-ink-3);
  white-space: nowrap;
}

.lp-marquee__row--stats b {
  font: 800 40px/1 var(--lp-display);
  color: var(--lp-ink);
}

.lp-marquee__row--stats span::before {
  content: '♪';
  margin-right: 22px;
  font-size: 22px;
  color: var(--lp-hot);
}

/* Still: one centred set that wraps, no loop. */
@media (prefers-reduced-motion: reduce) {
  .lp-marquee__row { mask-image: none; }
  .lp-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 8px; padding-inline: var(--lp-map-clear, 0px); }
  .lp-marquee__row--stats span { padding-inline: 18px; }
}

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  /* Two lines held for every lyric, so a line that wraps and one that doesn't give the hero the same
     height; a height that changed with each lyric re-measured the page's scroll motion every few seconds. */
  .lp-player__lyric { line-height: 1.3; min-height: 2.6em; }
  .lp-hero { padding-block: 96px 48px; }
  .lp-hero__tape { font-size: 10px; letter-spacing: 0.1em; }
  .lp-hero__marker { translate: none; margin-block: 0.3em 0.25em; }
  .lp-hero__arrow { display: none; }
  .lp-hero__sub { text-align: center; }
  .lp-hero__sub .lp-body { font-size: 16px; }
  .lp-hero__actions .lp-btn { width: 100%; }
  .lp-hero__scene { width: 260%; translate: -45% 0; top: 0; }

  .lp-player {
    --lp-card: 112px;
    --lp-gap: 10px;
    --lp-dia: 72px;
    padding: 18px 16px 16px;
    border-radius: 20px;
  }

  /* One row, a segmented control: five equal 44px segments, scrolling sideways only if the labels can't fit. */
  .lp-player__chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid var(--lp-line-strong);
    border-radius: 999px;
    background: var(--lp-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lp-chip { min-height: 44px; padding: 0 8px; border-color: transparent; background: transparent; font-size: 13px; }
  .lp-chip[aria-pressed="true"] { border-color: var(--lp-hot); background: #ff2d5533; }
  .lp-chip:focus-visible { outline-offset: -2px; }
  .lp-card { padding: 14px 6px 12px; gap: 8px; }
  .lp-card__name { font-size: 26px; }
  .lp-wave__time { display: none; }
  .lp-marquee__row--chords span { font-size: 52px; }
  .lp-marquee__row--stats span { font-size: 17px; padding-inline: 18px; }
  .lp-marquee__row--stats b { font-size: 28px; }
  .lp-marquee__row--stats span::before { margin-right: 12px; font-size: 16px; }
}