/* The timeline shares the film's matte surface, directly below the 16:9
   picture. Nothing covers authored captions or artwork. It appears only after
   an explicit Play; the poster and picture keep exactly the same geometry. */
.lp2-premium .lp2-hero__media { aspect-ratio: auto; height: auto; max-height: none; background: #050606; }
.lp2-premium .lp2-hero__film { position: relative; inset: auto; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: contain; }
.lp2-film-seek {
  position: relative;
  z-index: 5;
  inset: auto;
  margin-inline: clamp(16px, 3.5vw, 64px);
  height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f2f0e9;
  pointer-events: none;
}
.lp2-film-seek[hidden] { display: none; }
.lp2-film-seek__time {
  flex: 0 0 auto;
  min-width: 3.5ch;
  font: 400 11px/1 var(--lp2-body, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 1px 5px #000;
}
.lp2-film-seek__time:last-child { color: #c6ceca; text-align: right; }
.lp2-film-seek__range {
  --film-progress: 0%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #c8d7c9;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  accent-color: #c8d7c9;
}
.lp2-film-seek__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 6px;
  background: linear-gradient(to right, #c8d7c9 0 var(--film-progress), #f2f0e942 var(--film-progress) 100%);
}
.lp2-film-seek__range::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 6px;
  background: #f2f0e942;
}
.lp2-film-seek__range::-moz-range-progress { height: 3px; border-radius: 6px; background: #c8d7c9; }
.lp2-film-seek__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background: #f2f0e9;
  box-shadow: 0 1px 8px #0008;
  transition: transform .15s ease;
}
.lp2-film-seek__range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #f2f0e9;
  box-shadow: 0 1px 8px #0008;
  transition: transform .15s ease;
}
.lp2-film-seek__range:hover::-webkit-slider-thumb,
.lp2-film-seek__range:focus-visible::-webkit-slider-thumb { transform: scale(1.35); }
.lp2-film-seek__range:hover::-moz-range-thumb,
.lp2-film-seek__range:focus-visible::-moz-range-thumb { transform: scale(1.35); }
.lp2-film-seek__range:focus-visible { outline: 2px solid #c8d7c9; outline-offset: 2px; border-radius: 6px; }
.lp2-film-seek__range:disabled { cursor: wait; opacity: .45; }
/* The completion actions sit above the rail, never over its touch target. */
.lp2-premium .lp2-hero__media.is-ended .lp2-hero__end { bottom: 44px; padding-bottom: 12px; }
/* Seeking away from the last frame is an immediate dismissal, not an outro
   fade. Otherwise the old CTA floats over the newly selected scene. */
.lp2-premium .lp2-hero__media:not(.is-ended) .lp2-hero__end { visibility: hidden; opacity: 0; transition: none; }
@media (max-width: 760px) {
  .lp2-film-seek { margin-inline: 12px; gap: 10px; }
  .lp2-film-seek__time { font-size: 10px; }
  .lp2-premium .lp2-hero__media.is-ended .lp2-hero__end { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp2-film-seek__range::-webkit-slider-thumb { transition: none; }
  .lp2-film-seek__range::-moz-range-thumb { transition: none; }
}