/* The timeline rail: ours, plain DOM over the WebGL page, along the bottom of
   the home view. Colours arrive as custom properties set from timeline.json. */

.po-tl {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 84px;                /* above the site's own FEATURED / FULL line */
  height: 86px;
  z-index: 60;
  display: none;
  color: var(--po-fg);
  font-family: sans, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* fade out at both ends instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.po-tl.is-open { display: block; }
.po-tl { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.po-tl.is-waiting { opacity: 0; pointer-events: none; }
/* a soft dark band so the text reads over the bright grid, without a visible box */
.po-tl::before {
  content: "";
  position: absolute;
  inset: -14px 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.78) 70%, transparent);
  pointer-events: none;
}

.po-tl__scroll {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* no snapping: the rail follows the cards itself, with the playhead held in the
     middle, and snap points pulled every small follow step back to an entry */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.po-tl__scroll::-webkit-scrollbar { display: none; }

.po-tl__track {
  position: relative;
  height: 100%;
  display: flex;
  padding: 0 10vw;
  width: max-content;
}
/* the line, 30px from the top of the rail */
.po-tl__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 1px;
  background: var(--po-line);
  box-shadow: 0 0 6px var(--po-line);
}

.po-tl__lap { position: relative; display: flex; flex: none; }
/* the copies and gaps only exist for a phone's endless rail */
.po-tl__lap.is-copy, .po-tl__gap { display: none; }

.po-tl__chapter {
  position: relative;
  flex: none;
  display: flex;
  /* no gap of its own: every dot is one entry (144px) from the next, across chapters too */
}
.po-tl__chapter-name {
  position: absolute;
  top: 8px;
  left: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--po-line);
  white-space: nowrap;
}
.po-tl__chapter-year { display: none; }  /* the dates below already carry it */

.po-tl__entry {
  all: unset;
  flex: none;           /* flex items shrink by default, and then the text overlaps */
  cursor: pointer;
  position: relative;
  width: calc(var(--po-entry, 144px) - 12px);  /* a share of the rail, set by timeline.js */
  margin-right: 12px;
  height: 100%;
  scroll-snap-align: start;
}
.po-tl__entry::before {   /* the dot on the line */
  content: "";
  position: absolute;
  top: 27px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--po-line);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.po-tl__body { position: absolute; top: 44px; left: 0; right: 0; }
.po-tl__date {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}
.po-tl__title {
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.po-tl__entry:hover .po-tl__title,
.po-tl__entry:focus-visible .po-tl__title { color: var(--po-hot); }
.po-tl__entry:hover::before,
.po-tl__entry:focus-visible::before {
  background: var(--po-hot);
  border-color: var(--po-hot);
  box-shadow: 0 0 8px var(--po-hot);
}
.po-tl__entry:focus-visible { outline: none; }

/* the card at the centre of the carousel */
.po-tl__entry.is-active .po-tl__title { color: var(--po-line); }
.po-tl__entry.is-active .po-tl__date { opacity: 0.9; }
.po-tl__entry.is-active::before {
  background: var(--po-line);
  box-shadow: 0 0 10px var(--po-line);
}

/* the playhead: a glowing tick that slides along the line with the carousel */
.po-tl__head {
  position: absolute;
  top: 18px;
  left: 0;
  width: 2px;
  height: 25px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--po-line);
  box-shadow: 0 0 8px var(--po-line), 0 0 18px var(--po-line);
  pointer-events: none;
  z-index: 1;
}
/* the comet tail, behind the direction of travel; --tail is set from the speed */
.po-tl__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: var(--tail, 0px);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--po-line));
  opacity: 0.8;
}
.po-tl__head.is-left::after {
  right: auto;
  left: 100%;
  background: linear-gradient(270deg, transparent, var(--po-line));
}

@media (max-width: 649px) {
  /* the box itself runs to the screen's bottom edge, with the old 64 px kept as padding:
     the band used to hang 70 px BELOW the box, and the box's horizontal mask-image clips
     everything outside the box, so a strip of the card leaked through under the rail */
  .po-tl { bottom: 0; height: calc(86px + 64px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
           padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* cards scroll under it on a phone, so it is a bar there: solid behind the text */
  .po-tl::before { inset: -10px 0 0; background: linear-gradient(180deg, transparent, #000 15%); }
  /* one line per lap, fading out at both ends, with a dark gap before the next */
  .po-tl__lap.is-copy { display: flex; }
  .po-tl__gap { display: block; flex: none; width: 72px; }
  .po-tl__track::before { display: none; }
  .po-tl__lap::before {
    content: "";
    position: absolute;
    left: -24px;
    right: 0;
    top: 30px;
    height: 1px;
    background: var(--po-line);
    box-shadow: 0 0 6px var(--po-line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 72px), transparent);
  }
  /* half a screen either side, so the playhead can sit in the middle over any entry */
  .po-tl__track { padding: 0 calc(50vw - 4px); }
}

/* the seam's rubber band: timeline.js widens the tick (scaleX) while the band holds it */
.po-tl__head { transform-origin: 50% 50%; }

/* landing across the seam: the dot pops, and a ring ripples out from it once */
.po-tl__entry.is-landing::before { animation: po-tl-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.po-tl__entry.is-landing::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--po-line);
  box-shadow: 0 0 10px var(--po-line);
  pointer-events: none;
  animation: po-tl-ring 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes po-tl-pop {
  0% { transform: scale(1); }
  35% { transform: scale(2.1); box-shadow: 0 0 18px var(--po-line); }
  100% { transform: scale(1); }
}
@keyframes po-tl-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(5.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .po-tl__entry.is-landing::before, .po-tl__entry.is-landing::after { animation: none; }
}