/* The transport's own furniture. Paired with player.js; a loop includes both
   or neither. Everything here is prefixed lp- so it can never collide with a
   loop's own names. */

.lp { cursor: pointer; user-select: none; }
/* whatever the loop animates stops with the clock, or a paused artefact keeps
   twitching behind a frozen number */
.lp.lp-paused *, .lp.lp-paused { animation-play-state: paused !important; }

/* the glyph: it flashes the state just chosen, then sits faintly while stopped */
.lp-hint {
  position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(18,18,18,.22); backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 7; pointer-events: none;
  opacity: 0; transform: scale(.86); transition: opacity .32s ease, transform .32s ease;
}
.lp-hint.show { opacity: 1; transform: scale(1); }
.lp-hint.dim  { opacity: .42; transform: scale(1); }
.lp-hint.play span {
  width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid rgba(255,255,255,.88);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.lp-hint.pause span {
  width: 13px; height: 18px;
  border-left: 4px solid rgba(255,255,255,.88);
  border-right: 4px solid rgba(255,255,255,.88);
}

/* the rail, only where a loop asked for one. A line until you come near it. */
.lp-rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5;
  background: linear-gradient(to right, rgba(10,10,10,.30) var(--p, 0%), rgba(10,10,10,.07) var(--p, 0%));
}
.lp-seek {
  position: absolute; left: 0; right: 0; bottom: -6px;
  width: 100%; height: 14px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent;
  z-index: 6; cursor: pointer;
}
.lp-seek:focus { outline: none; }
.lp-seek::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.lp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px;
  border-radius: 50%; background: #9a9a94; opacity: 0; transition: opacity .16s ease;
}
.lp:hover .lp-seek::-webkit-slider-thumb,
.lp.lp-held .lp-seek::-webkit-slider-thumb,
.lp-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.lp-seek::-moz-range-track { height: 2px; background: transparent; }
.lp-seek::-moz-range-thumb {
  width: 10px; height: 10px; border: 0; border-radius: 50%;
  background: #9a9a94; opacity: 0; transition: opacity .16s ease;
}
.lp:hover .lp-seek::-moz-range-thumb, .lp.lp-held .lp-seek::-moz-range-thumb { opacity: 1; }