/**
 * Roadtrip Soundtrack — trail layer on top of the kit.
 *
 * The palette is pulled from the jukebox/vinyl aesthetic the re-gate
 * prescribed (the library pool has only 4 clean hero frames, so the page is
 * object- and portrait-led): the dark lacquer of a Wurlitzer cabinet, the
 * warm ivory of title-strip card stock, chrome, the amber of the color
 * tubes and their teal counter-glow. Contrast: --paper on --ink is 16.02:1,
 * --muted on --ink is 7.65:1.
 *
 * One bespoke set-piece: the Jukebox (#jukebox), a pinned 320vh scene before
 * the tally. Scroll works the selector — the title-strip drum advances
 * through seven real acts from the trail, the tonearm swings, the record
 * drops, and the side plays visually (EQ bars, card glow, NOW PLAYING tag).
 * All choreography is roadtrip-soundtrack.js as pure functions of pin
 * progress; this file owns the machine, the two archival raw scenes
 * (heyday, drifter) and the static/reduced-motion fallbacks.
 */

/* ── palette ─────────────────────────────────────────────────────────────── */
.exp[data-trail="roadtrip-soundtrack"] {
  --ink: #100c0d;      /* cabinet lacquer — near-black with oxblood in it */
  --paper: #f2e8d8;    /* title-strip card stock */
  --muted: #b0a08e;    /* aged chrome, worn lettering */
  --accent: #5ec8c0;   /* the teal tube */
  --sodium: #e8a13c;   /* the amber tube */

  --x-selection-bg: var(--sodium);
  --x-selection-color: #17100a;

  /* The trail's photography is dusk highway and warm interiors — tint the
     kit's veil to the lacquer and deepen it so copy never fights the frame. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(16,12,13,.92), rgba(16,12,13,.72) 42%, rgba(16,12,13,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(16,12,13,.64), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(16,12,13,.55), rgba(16,12,13,.78));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--sodium);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #17100a;
  --x-btn-s-color: var(--paper);
}

/* ── the archival raw scenes (heyday, drifter) ─────────────────────────────
   Kit .scene shell; copy on the left over a sourced full-bleed, one or two
   matted archival plates on the right. Every sourced frame carries its
   credit in small print — sourced photography is never presented as ours. */
.heyday-veil {
  background:
    linear-gradient(100deg,
      rgba(16,12,13,.96) 26%,
      rgba(16,12,13,.78) 52%,
      rgba(16,12,13,.38) 78%,
      rgba(16,12,13,.55) 100%);
}

.drifter-veil {
  background:
    linear-gradient(100deg,
      rgba(16,12,13,.97) 24%,
      rgba(16,12,13,.82) 50%,
      rgba(16,12,13,.45) 76%,
      rgba(16,12,13,.6) 100%);
}

.era-copy {
  position: relative;
  max-width: 58ch;
}

.era-credit {
  margin-top: 2.2rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.85;
}

.era-plates {
  position: absolute;
  right: 7vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3.2vmin;
  width: 25vmin;
  z-index: 2;
}

.era-plate {
  margin: 0;
  padding: 1.1vmin 1.1vmin 0.9vmin;
  background: linear-gradient(180deg, #f4ecdc, #e4d9c2);
  box-shadow: 0 1.6vmin 4vmin rgba(5,3,4,.55);
}

.era-plate:nth-child(odd) { transform: rotate(-2deg); }
.era-plate:nth-child(even) { transform: rotate(1.6deg); }

.era-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(16,12,13,.35);
}

.drifter .era-plate img { aspect-ratio: 4 / 3; }

.era-plate figcaption {
  padding-top: 0.7vmin;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.15vmin;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #5c5344;
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the machine needs the
   full 320vh pin with an inner sticky stage, so the base rules are reset
   rather than extended (own wrapper class, never pin-wrap). */
.scene.jukebox {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.jb-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 42%, #1d1516 0%, #120d0e 58%, #0a0708 100%);
}

/* The room: the glow the machine throws on the wall behind it. JS breathes
   --glow with play state; the finale drops it to a single warm ember. */
.jb-room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 42% at 50% 34%, rgba(232,161,60,.20), transparent 70%),
    radial-gradient(30% 30% at 38% 40%, rgba(94,200,192,.10), transparent 70%),
    radial-gradient(30% 30% at 62% 40%, rgba(232,161,60,.12), transparent 70%);
  opacity: var(--glow, 0.35);
}

/* ── the cabinet ─────────────────────────────────────────────────────────── */
.jb-box {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 46vmin;
  height: 76vmin;
  border-radius: 23vmin 23vmin 2.4vmin 2.4vmin / 22vmin 22vmin 2.4vmin 2.4vmin;
  background:
    linear-gradient(115deg, rgba(255,240,220,.08) 0%, transparent 30%, transparent 68%, rgba(255,240,220,.05) 100%),
    linear-gradient(180deg, #2a1516 0%, #1e0f10 46%, #170b0c 100%);
  box-shadow:
    0 4vmin 10vmin rgba(0,0,0,.65),
    inset 0 0 0 .45vmin #3d2324,
    inset 0 0 6vmin rgba(0,0,0,.5);
}

/* ── the dome: glass arch, chrome ribs, the color tubes ─────────────────── */
.jb-dome {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 2.6%;
  height: 26%;
  border-radius: 20vmin 20vmin 1.2vmin 1.2vmin / 19vmin 19vmin 1.2vmin 1.2vmin;
  background:
    radial-gradient(120% 150% at 50% 110%, rgba(20,10,10,.1) 40%, rgba(8,5,6,.75) 100%),
    linear-gradient(180deg, rgba(255,235,200,.10), rgba(20,12,12,.35) 60%);
  box-shadow:
    inset 0 0 0 .4vmin #4a2c2b,
    inset 0 -1vmin 2vmin rgba(0,0,0,.55);
  overflow: hidden;
}

/* Chrome ribs inside the dome glass. */
.jb-dome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 16%,
    rgba(226,220,210,.16) 16% calc(16% + .5vmin),
    transparent calc(16% + .5vmin) 20%);
  opacity: .8;
}

/* The color tubes: amber, teal, amber. They breathe on a CSS cycle; JS's
   --tubeo dims the whole bank as the finale lands. */
.jb-tube {
  position: absolute;
  top: 12%;
  bottom: 10%;
  width: 9%;
  border-radius: 99px;
  filter: brightness(1);
  animation: jb-breathe 4.6s ease-in-out infinite;
  opacity: var(--tubeo, 1);
}

.jb-tube-a {
  left: 12%;
  background: linear-gradient(180deg, #ffd98f, #e8a13c 55%, #8a4d12);
  box-shadow: 0 0 2.6vmin rgba(232,161,60,.85), 0 0 6vmin rgba(232,161,60,.35);
}

.jb-tube-b {
  left: 45.5%;
  animation-delay: -1.5s;
  background: linear-gradient(180deg, #b8f4ee, #5ec8c0 55%, #1f6a66);
  box-shadow: 0 0 2.6vmin rgba(94,200,192,.8), 0 0 6vmin rgba(94,200,192,.3);
}

.jb-tube-c {
  right: 12%;
  animation-delay: -3.1s;
  background: linear-gradient(180deg, #ffd98f, #e8a13c 55%, #8a4d12);
  box-shadow: 0 0 2.6vmin rgba(232,161,60,.85), 0 0 6vmin rgba(232,161,60,.35);
}

@keyframes jb-breathe {
  0%, 100% { filter: brightness(.82); }
  50% { filter: brightness(1.18); }
}

/* The little crown marquee. */
.jb-crown {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  padding: .7vmin 1.6vmin;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.5vmin;
  letter-spacing: .3em;
  white-space: nowrap;
  color: #ffd98f;
  text-shadow: 0 0 1.2vmin rgba(232,161,60,.9);
  border: .22vmin solid rgba(232,161,60,.55);
  border-radius: .6vmin;
  background: rgba(20,10,8,.6);
  opacity: var(--tubeo, 1);
}

/* ── the chrome arch around the selector window ─────────────────────────── */
.jb-arch {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 31%;
  height: 27%;
  border-radius: 3vmin;
  background:
    linear-gradient(135deg, #e8e4da 0%, #8f8a80 18%, #d9d4c8 36%, #6f6a60 52%, #cfc9bc 70%, #86816f 86%, #e2ddd2 100%);
  box-shadow:
    0 .6vmin 1.6vmin rgba(0,0,0,.5),
    inset 0 .2vmin .3vmin rgba(255,255,255,.5);
}

/* ── the selector window and the title-strip drum ───────────────────────── */
.jb-window {
  position: absolute;
  left: 10.5%;
  right: 10.5%;
  top: 32.6%;
  height: 23.8%;
  border-radius: 2.2vmin;
  background: linear-gradient(180deg, #0c0708, #150c0d 55%, #0b0607);
  box-shadow: inset 0 1.2vmin 2.4vmin rgba(0,0,0,.8);
  overflow: hidden;
  perspective: 60vmin;
}

/* Soft top/bottom shade so the strips roll away like a real drum. */
.jb-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8,5,6,.92) 0%, transparent 26%,
    transparent 74%, rgba(8,5,6,.92) 100%);
  pointer-events: none;
}

.jb-drum {
  position: absolute;
  inset: 0;
}

.jb-card {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 30%;
  margin-top: -4.3%;
  display: grid;
  grid-template-columns: 5.4vmin 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 1vmin;
  padding: 0 1.2vmin;
  border-radius: .7vmin;
  background: linear-gradient(180deg, #f6efdd, #e7dcc2);
  box-shadow: 0 .4vmin 1vmin rgba(0,0,0,.5);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.jb-card b {
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 2.1vmin;
  color: #f2e8d8;
  background: linear-gradient(180deg, #8a2c20, #5c1a13);
  border-radius: .5vmin;
  letter-spacing: .06em;
}

.jb-card .jb-side {
  align-self: end;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.75vmin;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #241512;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-card .jb-act {
  align-self: start;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.35vmin;
  letter-spacing: .05em;
  color: #6d5344;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The active strip glows like it is lit from inside the machine. */
.jb-card.on {
  background: linear-gradient(180deg, #fff3d9, #f3dfb2);
  box-shadow:
    0 .4vmin 1vmin rgba(0,0,0,.5),
    0 0 2.4vmin rgba(232,161,60,.75);
}

/* ── the deck: platter, record, tonearm ─────────────────────────────────── */
.jb-deck {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 59%;
  height: 22%;
  border-radius: 1.6vmin;
  background: linear-gradient(180deg, #120a0b, #1b1011);
  box-shadow: inset 0 .5vmin 1.4vmin rgba(0,0,0,.75), inset 0 0 0 .25vmin #3a2223;
}

.jb-platter {
  position: absolute;
  left: 8%;
  top: 50%;
  width: 15vmin;
  height: 15vmin;
  margin-top: -7.5vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle, #3a3f45 0%, #23262b 58%, #14161a 100%);
  box-shadow:
    0 .5vmin 1.4vmin rgba(0,0,0,.6),
    inset 0 0 0 .5vmin #454b52;
}

/* The record: a sourced public-domain LP photograph as the vinyl face. It
   drops onto the platter and spins while the side plays — both pure
   functions of pin progress. */
.jb-record {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 .3vmin 1vmin rgba(0,0,0,.65);
  opacity: 0;
  will-change: transform, opacity;
}

.jb-record::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  height: 31%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #0c0708 0 12%, #e8a13c 13% 100%);
  box-shadow: inset 0 0 .6vmin rgba(0,0,0,.5);
}

/* The tonearm, parked off the platter until a side drops. */
.jb-arm {
  position: absolute;
  right: 10%;
  top: 12%;
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8e4da, #7d786d 70%);
  box-shadow: 0 .3vmin .8vmin rgba(0,0,0,.6);
  transform: rotate(-38deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.jb-arm-rod {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11.5vmin;
  height: .85vmin;
  margin-top: -.42vmin;
  transform-origin: 0 50%;
  transform: rotate(112deg);
  border-radius: 99px;
  background: linear-gradient(180deg, #e8e4da, #8f8a80 60%, #cfc9bc);
  box-shadow: 0 .3vmin .6vmin rgba(0,0,0,.5);
}

.jb-arm-head {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.6vmin;
  height: 1.5vmin;
  transform: translate(-9.4vmin, 5.6vmin) rotate(-24deg);
  border-radius: .5vmin;
  background: linear-gradient(180deg, #d9d4c8, #6f6a60);
  box-shadow: 0 .25vmin .5vmin rgba(0,0,0,.55);
}

/* ── the chrome grille ──────────────────────────────────────────────────── */
.jb-grille {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3.2%;
  height: 12.5%;
  border-radius: 1.4vmin;
  background:
    repeating-linear-gradient(90deg,
      #d9d4c8 0 .7vmin,
      #6f6a60 .7vmin .95vmin,
      #2a2020 .95vmin 1.5vmin),
    linear-gradient(180deg, #cfc9bc, #86816f);
  box-shadow:
    inset 0 .3vmin .5vmin rgba(255,255,255,.4),
    inset 0 -.8vmin 1.6vmin rgba(0,0,0,.6),
    0 .5vmin 1.2vmin rgba(0,0,0,.5);
  opacity: .92;
}

/* ── the EQ: the song you can see ───────────────────────────────────────── */
.jb-eq {
  position: absolute;
  left: 50%;
  bottom: -9.5%;
  transform: translateX(-50%);
  width: 118%;
  height: 8%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.1%;
}

.jb-eq i {
  flex: 0 0 2.1%;
  height: calc(var(--h, 0.06) * 100%);
  border-radius: .3vmin .3vmin 0 0;
  background: linear-gradient(180deg, #ffd98f, #e8a13c 60%, rgba(232,161,60,.25));
  box-shadow: 0 0 1vmin rgba(232,161,60,.4);
  opacity: var(--eqo, .9);
}

.jb-eq i:nth-child(4n+2) {
  background: linear-gradient(180deg, #b8f4ee, #5ec8c0 60%, rgba(94,200,192,.25));
  box-shadow: 0 0 1vmin rgba(94,200,192,.35);
}

/* ── the NOW PLAYING tag ────────────────────────────────────────────────── */
.jb-tag {
  position: absolute;
  z-index: 3;
  right: 8vw;
  top: 14vh;
  max-width: 34ch;
  padding: 1.2vmin 1.6vmin;
  border: .25vmin solid rgba(232,161,60,.6);
  border-radius: .8vmin;
  background: rgba(18,11,12,.82);
  box-shadow: 0 0 2.4vmin rgba(232,161,60,.22);
  pointer-events: none;
}

.jb-tag-h {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.3vmin;
  letter-spacing: .3em;
  color: var(--sodium);
}

.jb-tag-t {
  display: block;
  margin-top: .5vmin;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.6vmin;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--paper);
}

.jb-credit {
  position: absolute;
  z-index: 3;
  right: 8vw;
  bottom: 6vh;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.2vmin;
  letter-spacing: .05em;
  color: var(--muted);
  opacity: .75;
  pointer-events: none;
}

/* ── the ledger ─────────────────────────────────────────────────────────── */
.jb-ledger {
  position: absolute;
  z-index: 3;
  left: 8vw;
  bottom: 6vh;
  max-width: 44ch;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.jb-ledger.show { opacity: 1; }

.jb-ledger .jb-line {
  font-size: clamp(12px, 1.35vw, 15px);
  letter-spacing: .04em;
  color: var(--muted);
  text-shadow: 0 1px 12px rgba(5,3,4,.8);
}

.jb-ledger .jb-line em {
  color: var(--sodium);
  font-style: normal;
}

/* ── static / reduced-motion fallback ──────────────────────────────────────
   .jb-static (added by JS when api.reduced) parks the machine: every strip
   listed, record on the platter, the finale line up, nothing moving. */
.jb-static.scene.jukebox { height: auto; }

.jb-static .jb-stage {
  position: static;
  height: auto;
  min-height: 100vh;
  padding: 10vh 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vmin;
  overflow: hidden;
}

.jb-static .jb-box {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 0 auto;
}

.jb-static .jb-drum {
  position: static;
  display: flex;
  flex-direction: column;
  gap: .6vmin;
  padding: 1.2vmin;
  overflow: auto;
}

.jb-static .jb-card {
  position: static;
  margin: 0;
  height: auto;
  min-height: 4.2vmin;
  opacity: 1;
  transform: none;
  flex: 0 0 auto;
}

.jb-static .jb-record { opacity: 1; }
.jb-static .jb-arm { transform: rotate(6deg); }
.jb-static .jb-eq { display: none; }
.jb-static .jb-tube { animation: none; }
.jb-static .jb-ledger { opacity: 1; }

.jb-static .jb-tag,
.jb-static .jb-ledger,
.jb-static .jb-credit {
  position: static;
  max-width: 46ch;
  align-self: center;
  text-align: center;
}

.jb-static .jb-tag-h,
.jb-static .jb-tag-t { font-size: clamp(10px, 1.4vw, 14px); }
.jb-static .jb-credit { font-size: 10px; }

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .era-plates {
    position: static;
    transform: none;
    flex-direction: row;
    width: auto;
    margin-top: 3rem;
  }

  .era-plate { flex: 1 1 0; }
  .era-plate figcaption { font-size: 1.7vmin; }

  .jb-box {
    width: 66vmin;
    height: 98vmin;
    border-radius: 33vmin 33vmin 2.4vmin 2.4vmin / 30vmin 30vmin 2.4vmin 2.4vmin;
  }

  .jb-card b { font-size: 3vmin; }
  .jb-card .jb-side { font-size: 2.5vmin; }
  .jb-card .jb-act { font-size: 1.9vmin; }
  .jb-crown { font-size: 2.1vmin; }

  .jb-platter { width: 21vmin; height: 21vmin; margin-top: -10.5vmin; }

  .jb-tag {
    right: 6vw;
    left: 6vw;
    top: 9vh;
    max-width: none;
  }

  .jb-tag-h { font-size: 1.8vmin; }
  .jb-tag-t { font-size: 2.2vmin; }

  .jb-ledger {
    left: 6vw;
    right: 6vw;
    bottom: 4.5vh;
    max-width: none;
  }

  .jb-credit {
    right: 6vw;
    bottom: 11vh;
    font-size: 1.6vmin;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* If JS is unavailable entirely, at least the machine reads: all strips
     visible, tubes still. The JS adds .jb-static for the full static render;
     this covers no-JS. */
  .jb-tube { animation: none; }
}