/* P324 landing: page-wide motion (S5, spec 13, 15–17). Every hidden start state sits under
   html.lp-motion, which motion.ts adds only when it runs and motion is allowed, so the page reads
   in full without it. Motion is transform, opacity and clip only. */

/* Lenis' own rules: the page scrolls on the window, and smoothing replaces CSS smooth scroll. */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: clip; }

/* ---- Song-map rail (spec 15) ---------------------------------------- */

/* The rail's inset and width, and the band it claims at the right edge: full-bleed rows (the marquee) end before it. */
:root {
  --lp-map-right: clamp(16px, 2.2vw, 32px);
  --lp-map-width: 96px;
  --lp-map-clear: calc(var(--lp-map-right) + var(--lp-map-width) + 24px);
}

.lp-map {
  position: fixed;
  top: 50%;
  right: var(--lp-map-right);
  z-index: 40;
  width: var(--lp-map-width);
  height: min(58vh, 520px);
  translate: 0 -50%;
  font: 500 9.5px/1 var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lp-map__names {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-map__item {
  position: absolute;
  top: calc(var(--at) * 100%);
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  translate: 0 -50%;
}

/* The tick, crossing the line. */
.lp-map__item::after {
  content: '';
  width: 10px;
  height: 1px;
  margin-right: -4.5px;
  background: var(--lp-line-strong);
}

.lp-map__name {
  padding: 6px 0;
  color: var(--lp-ink-3);
  text-decoration: none;
  transition: color 200ms;
}

.lp-map__name:hover,
.lp-map__name[aria-current] { color: var(--lp-ink); }

.lp-map__name:focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.lp-map__line {
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: var(--lp-line-strong);
}

.lp-map__fill {
  position: absolute;
  inset: 0;
  background: var(--lp-hot);
  transform: scaleY(0);
  transform-origin: top;
}

/* The playhead: a red dot on the line with the song's clock beside it. */
.lp-map__head {
  position: absolute;
  top: 0;
  right: 0.5px;
  pointer-events: none;
}

.lp-map__head::after {
  content: '';
  position: absolute;
  top: -4.5px;
  right: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-hot);
  box-shadow: 0 0 12px #ff2d5599;
}

.lp-map__time {
  position: absolute;
  top: 0;
  right: 64px;
  translate: 0 -50%;
  color: var(--lp-hot);
  font-variant-numeric: tabular-nums;
  background: var(--lp-bg);
  padding: 2px 3px;
}

/* Reduced motion (or no smooth scroll): plain section links, no playhead. */
html:not(.lp-motion) .lp-map__fill,
html:not(.lp-motion) .lp-map__head { display: none; }

@media (max-width: 899px), print {
  :root { --lp-map-clear: 0px; }
  .lp-map { display: none; }
}

/* ---- Page tint (spec 16) -------------------------------------------- */

.lp-tint {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lp-tint__layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, var(--tint), transparent 70%);
  will-change: opacity;
}

.lp-tint__layer--red { --tint: #e0184f2e; }
.lp-tint__layer--violet { --tint: #8b5cf62e; }
.lp-tint__layer--gold { --tint: #ffd16621; }
.lp-tint__layer--magenta { --tint: #b0179a33; }

@media print {
  .lp-tint { display: none; }
}

/* ---- Section handoffs (spec 16) and hand marks (spec 13) ------------ */

/* Headings rise out of a mask on the beat: the clip's bottom edge falls as the heading rises. */
.lp-motion .lp-reveal {
  clip-path: inset(-50% -50% -50% -50%);
  transition: translate 700ms var(--lp-ease-out), clip-path 700ms var(--lp-ease-out);
}

.lp-motion .lp-reveal:not(.is-up) {
  translate: 0 60%;
  clip-path: inset(-50% -50% 100% -50%);
}

/* A section's hand note writes in after its heading lands, and leans with scroll speed (spec 17). */
.lp-motion .lp-note {
  rotate: var(--lp-lean, 0deg);
  clip-path: inset(-20% -5% -20% 0);
  transition: clip-path 650ms var(--lp-ease-out) 700ms, rotate 200ms var(--lp-ease-out);
}

.lp-motion .lp-note:not(.is-up) { clip-path: inset(-20% 100% -20% 0); }

/* Depths: glows at 0.8×, from motion.ts' scroll scrub (hand notes take none). */
.lp-motion .lp-depth { translate: 0 var(--lp-depth, 0px); }

/* Hand-drawn strokes draw in once on a downbeat, then wobble. */
.lp-motion .lp-mark path[pathLength="1"] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.lp-motion .lp-mark.is-up path[pathLength="1"] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 600ms var(--lp-ease-inout);
}

.lp-motion .lp-mark.is-up { animation: lp-wobble 120ms var(--lp-ease-inout) 600ms; }

@keyframes lp-wobble {
  33% { rotate: -1.5deg; }
  66% { rotate: 1deg; }
}

/* Below 1600 px the page's right gutter is too narrow for the names (they touched the FAQ's
   toggles at 1440): the rail keeps its line, ticks, playhead and clock, and shows the names only
   while you point at it or tab into it. */
@media (max-width: 1599px) {
  .lp-map__name {
    opacity: 0;
    transition: opacity 200ms, color 200ms;
  }

  .lp-map:hover .lp-map__name,
  .lp-map:focus-within .lp-map__name,
  .lp-map:hover .lp-map__time,
  .lp-map:focus-within .lp-map__time {
    opacity: 1;
  }

  /* The clock too: at 1440 it sat over the Pro pass's right edge. The red playhead still moves. */
  .lp-map__time {
    opacity: 0;
    transition: opacity 200ms;
  }
}

/* A section focused by the glide (tabindex="-1") moves the reading position for keyboard and screen
   reader users; it should not draw a ring round the whole section. */
.lp section[tabindex="-1"]:focus {
  outline: none;
}