/* The history control (public/historyslider.js): a film strip along the bottom of the page, and a
   stack of covers that fades in above it while a finger is on it. At rest only the strip is there.

   Everything that moves is a transform or an opacity — the strip is one canvas, the covers are a
   handful of absolutely placed figures — so nothing here reflows while a finger drags. */

.hs {
  position: relative;
  height: 46px;
  outline: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* a horizontal drag is ours; the page may still scroll vertically over it */
}

/* On the viewer page it sits along the bottom (after .hs, so this placement wins). */
.history {
  position: absolute;
  right: var(--safe-right, 12px);
  bottom: var(--safe-bottom, 10px);
  left: var(--safe-left, 12px);
  z-index: 6;
}

.hs.is-dragging {
  cursor: grabbing;
}

/* A soft floor so the strip and the covers read over the video behind them. It grows while the
   covers are up, and is only ever a background: it never takes a pointer. */
.hs::before {
  content: "";
  position: absolute;
  inset: -10px -20px -12px;
  background: linear-gradient(to top, rgba(7, 6, 13, 0.92) 30%, rgba(7, 6, 13, 0.45) 80%, transparent);
  pointer-events: none;
  transition: inset 260ms ease;
}

.hs.is-showing::before {
  inset: -210px -20px -12px;
  background: linear-gradient(to top, rgba(7, 6, 13, 0.95) 18%, rgba(7, 6, 13, 0.72) 52%, rgba(7, 6, 13, 0.25) 78%, transparent);
}

/* ---------- The film strip ---------- */

.hs-film {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 18px rgba(0, 0, 0, 0.45);
  background: #0b0916;
}

.hs-film canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hs:focus-visible .hs-film {
  box-shadow: 0 0 0 2px var(--violet, #a259ff);
}

/* The knob: a bright bar across the strip, at the finger while it is down and drifting back to the
   middle after. It is drawn from the left edge, so its transform is its position. */
.hs-knob {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(7, 6, 13, 0.75),
    0 0 12px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 3;
}

.hs-knob[data-live="true"] {
  background: var(--live, #ff2d55);
  box-shadow:
    0 0 0 1px rgba(7, 6, 13, 0.75),
    0 0 14px rgba(255, 45, 85, 0.9);
}

.hs.is-dragging .hs-knob {
  top: -6px;
  bottom: -6px;
  width: 4px;
  margin-left: -2px;
}

/* ---------- The covers ---------- */

.hs-covers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 150px;
  perspective: 900px;
  perspective-origin: 50% 65%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hs.is-showing .hs-covers {
  opacity: 1;
  transform: none;
}

.hs-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hs-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 132px; /* replaced by the control, which cuts the stack to the width of the bar */
  margin: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.hs-pic {
  position: relative;
  height: 74px; /* likewise */
  border-radius: 8px;
  overflow: hidden;
  background: #191430;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 10px 24px rgba(0, 0, 0, 0.55);
  -webkit-box-reflect: below 3px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.16));
}

.hs-pic img,
.hs-pic canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The frame from the run's own strip, at the moment under the finger, over the poster beneath it
   (public/thumbs.js sets the image and which cell of it to show). */
.hs-pic .hs-strip {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.hs-pic .hs-strip.is-in {
  opacity: 1;
}

/* The live cover says what it is, since the picture itself is playing behind the control. */
.hs-pic .hs-livetile {
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* A run with neither a strip nor a poster: its host's initial, over the run's own colour. */
.hs-pic .hs-initial {
  display: grid;
  height: 100%;
  place-items: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.hs-cover.is-active .hs-pic {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.55) inset,
    0 14px 30px rgba(0, 0, 0, 0.6);
}

.hs-cover.is-live .hs-pic {
  box-shadow:
    0 0 0 1.5px rgba(255, 45, 85, 0.55) inset,
    0 14px 30px rgba(0, 0, 0, 0.6);
}

/* Where in the run the moment under the finger is: the run's own slider, along the cover's foot. */
.hs-line {
  position: absolute;
  left: 0;
  bottom: 22px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 160ms ease;
}

.hs-cover.is-active .hs-line {
  opacity: 1;
}

.hs-cover figcaption {
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: center;
  height: 20px;
  padding-top: 3px;
  font: 10px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
}

.hs-cover.is-active figcaption {
  opacity: 1;
}

.hs-cover figcaption b {
  color: var(--ink, #f6f4ff);
  font-weight: 600;
}

.hs-cover figcaption small {
  color: var(--dim, #a9a3c8);
  font-variant-numeric: tabular-nums;
}

/* The moment under the finger, above the stack. */
.hs-bubble {
  position: absolute;
  left: 0;
  bottom: 198px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(22, 18, 40, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink, #f6f4ff);
  font: 11px/1.4 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  margin-left: -110px;
  width: 220px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 4;
}

.hs.is-showing .hs-bubble {
  opacity: 1;
}

/* Short screens: a smaller stack, and the bubble tucked closer. */
@media (max-height: 560px), (max-width: 420px) {
  .hs-covers {
    height: 118px;
    bottom: 42px;
  }

  .hs-bubble {
    bottom: 162px;
  }

  .hs.is-showing::before {
    inset: -170px -20px -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-covers,
  .hs::before,
  .hs-pic .hs-strip,
  .hs-line,
  .hs-cover figcaption,
  .hs-bubble {
    transition: none;
  }
}