/* ===========================================================================
   SHARED MUSIC-TIMELINE SKELETON
   Layout + interaction structure only. Each movement sets the CSS variables
   and may add a few bespoke overrides. Liked structure preserved:
   round covers, alternating heights, a connective line BEHIND the covers,
   drag + scrubber + arrows, a play button per song (childhood has two).
   =========================================================================== */

.tl-section { background: var(--tl-bg); color: var(--tl-ink); position: relative; overflow: hidden; }

/* header row */
.tl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px);
}
.tl-kicker {
  font-family: var(--tl-label); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tl-accent); display: flex; align-items: center; gap: 12px;
}
.tl-title {
  font-family: var(--tl-display); margin: 0;
  font-size: clamp(34px, 6vw, 84px); line-height: .92;
  color: var(--tl-ink); text-transform: var(--tl-title-tt, none);
  letter-spacing: var(--tl-title-ls, 0); font-weight: var(--tl-title-w, 700);
}

/* viewport + track */
.vp {
  margin-top: clamp(20px, 4vw, 48px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
.vp::-webkit-scrollbar { display: none; }
.vp.grabbing { cursor: grabbing; }

.track {
  display: flex; align-items: flex-start; width: max-content;
  padding: 70px clamp(40px, 9vw, 150px) 90px;
  position: relative;
}
/* the connective line, BEHIND the covers */
.track::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; top: var(--line-top, 168px);
  border-top: var(--tl-line-w, 3px) var(--tl-line-style, dotted) var(--tl-line);
  opacity: var(--tl-line-op, .85);
}

.station {
  scroll-snap-align: center;
  width: var(--station-w, 348px); flex: 0 0 var(--station-w, 348px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px; position: relative; z-index: 1;
}
.station:nth-child(even) { margin-top: var(--alt-drop, 92px); }

/* era badge */
.era {
  font-family: var(--tl-label); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--era-fg, var(--tl-accent));
  background: var(--era-bg, transparent);
  border: var(--era-border, 1.5px dashed var(--tl-accent));
  padding: 6px 13px; margin-bottom: 22px; border-radius: var(--era-radius, 2px);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.era .num { font-variant-numeric: tabular-nums; opacity: .6; }

/* covers */
.covers { display: flex; justify-content: center; position: relative; z-index: 2; }
.cover {
  width: var(--cover, 156px); height: var(--cover, 156px);
  border-radius: 50%; overflow: hidden; margin: 0;
  border: var(--ring-w, 6px) solid var(--ring, #fff);
  box-shadow: var(--cover-shadow, 0 16px 30px rgba(20,15,10,.28));
  background: #ddd; transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.covers.duo .cover { width: var(--cover-duo, 124px); height: var(--cover-duo, 124px); }
.covers.duo .c2 { margin-left: -34px; margin-top: 34px; }
.station:hover .cover { transform: translateY(-6px) scale(1.015); }
.covers.duo:hover .c2 { transform: translateY(-6px) scale(1.015) rotate(3deg); }

/* meta */
.meta { display: flex; flex-direction: column; align-items: center; }
.station h3 {
  font-family: var(--h3-font, var(--tl-display)); font-weight: var(--h3-w, 700);
  font-size: var(--h3-size, 24px); line-height: 1.05; margin: 24px 0 13px;
  color: var(--tl-ink); letter-spacing: var(--h3-ls, 0); text-transform: var(--h3-tt, none);
}
.who {
  font-family: var(--tl-label); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tl-accent); line-height: 1.3;
}
.memory {
  font-family: var(--tl-body); font-size: 14.5px; line-height: 1.58;
  color: var(--tl-soft); margin: 14px 6px 18px; font-style: var(--mem-style, normal);
  max-width: 290px; text-wrap: pretty;
}

/* play buttons */
.plays { display: flex; flex-direction: column; gap: 9px; align-items: center; width: 100%; }
.playwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.play {
  font-family: var(--tl-label); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--play-bg, var(--tl-ink)); color: var(--play-fg, var(--tl-bg));
  border: var(--play-border, none); border-radius: var(--play-radius, 999px);
  padding: 10px 18px; box-shadow: var(--play-shadow, none);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.play:hover { transform: translateY(-2px); }
.play .ico {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}
.play.on .ico {
  border-width: 0; width: 9px; height: 9px; background: currentColor; border-radius: 1px;
}
.embed { width: 290px; max-width: 78vw; display: none; }
.embed.show { display: block; margin-top: 2px; }
.embed iframe { border: 0; width: 100%; border-radius: 12px; display: block; }
.embed iframe.sp { height: 80px; }
.embed iframe.yt { height: 164px; }

/* controls */
.tl-controls {
  max-width: 1280px; margin: 8px auto 0; padding: 0 clamp(40px, 9vw, 150px);
  display: flex; align-items: center; gap: 18px;
}
.scrubber { flex: 1; display: flex; align-items: center; }
.scrubber input {
  flex: 1; -webkit-appearance: none; appearance: none; height: 0; background: transparent;
  border-top: var(--tl-line-w, 3px) var(--tl-line-style, dotted) var(--tl-line);
  cursor: pointer;
}
.scrubber input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tl-accent); border: 3px solid var(--tl-bg); cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.scrubber input::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tl-accent); border: 3px solid var(--tl-bg); cursor: grab;
}
.arrows { display: flex; gap: 10px; }
.arrow {
  font-family: var(--tl-label); width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--arrow-border, var(--tl-ink)); background: var(--arrow-bg, transparent);
  color: var(--arrow-fg, var(--tl-ink)); cursor: pointer; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.arrow:hover { background: var(--tl-ink); color: var(--tl-bg); transform: translateY(-2px); }

@media (max-width: 640px) {
  .station { --cover: 128px; --station-w: 270px; }
}

/* ===========================================================================
   REVEAL VARIANTS + STAGGER GROUPS (finalists only; archives lack .anim)
   =========================================================================== */
.anim [data-reveal][data-anim="flip"] { transform: perspective(800px) rotateX(-72deg); transform-origin: center bottom; }
.anim [data-reveal][data-anim="pop"]  { transform: scale(.84); }
.anim [data-reveal][data-anim="deal"] { transform: translateY(38px) rotate(-5deg); }
.anim [data-stagger] { opacity: 1 !important; transform: none !important; }
.anim [data-stagger] > * { opacity: 0; transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.25,1); }
.anim [data-stagger="flip"] > * { transform: perspective(800px) rotateX(-72deg); transform-origin: center bottom; }
.anim [data-stagger="deal"] > * { transform: translateY(40px) rotate(-6deg); }
.anim [data-stagger="pop"]  > * { transform: scale(.82); }
.anim [data-stagger="rise"] > * { transform: translateY(28px); }
.anim [data-stagger].in > * { opacity: 1; transform: none; }
.anim [data-stagger].in > *:nth-child(1) { transition-delay: .05s; }
.anim [data-stagger].in > *:nth-child(2) { transition-delay: .13s; }
.anim [data-stagger].in > *:nth-child(3) { transition-delay: .21s; }
.anim [data-stagger].in > *:nth-child(4) { transition-delay: .29s; }
.anim [data-stagger].in > *:nth-child(5) { transition-delay: .37s; }
.anim [data-stagger].in > *:nth-child(6) { transition-delay: .45s; }
.anim [data-stagger].in > *:nth-child(7) { transition-delay: .53s; }
.anim [data-stagger].in > *:nth-child(8) { transition-delay: .61s; }

/* always-on motion: covers bob, connective line flows */
@media (prefers-reduced-motion: no-preference){
  @keyframes tl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .anim .station .covers{animation:tl-bob 4.6s ease-in-out infinite}
  .anim .station:nth-child(even) .covers{animation-duration:5.4s;animation-delay:-1.3s}
  .anim .station:nth-child(odd) .covers{animation-delay:-.5s}
  .anim .station:nth-child(3n) .covers{animation-duration:5s;animation-delay:-2.1s}
  @keyframes tl-flow{to{background-position-x:16px}}
  .anim .track::before{border-top-color:transparent;height:var(--tl-line-w,3px);
    background:repeating-linear-gradient(90deg,var(--tl-line) 0 7px,transparent 7px 16px);
    animation:tl-flow 1.05s linear infinite}
}