/* =============================================================================
   THE ARTIFACT, NaviFin.

   Direction 4 shares a chassis with navibeat.app and diverges in exactly two
   places: five colour slots, and this file. The artifact is the thing a template
   cannot contain.

   NaviBeat's artifact is a working 10-band equaliser, because music is about
   sound. NaviFin's is a working scrubber, because video is about time. Drag it
   and the frame, the timecode, the chapter, the engine readout and the Skip
   Intro state all follow. It maps to features the app ships (Skip Intro, Next
   Up, the hybrid AVPlayer and VLC engine) rather than decorating.

   Built on a real <input type="range">, so keyboard, screen reader and touch all
   work without being reimplemented.
   ============================================================================= */

.scrub {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--raise);
  max-width: 900px;
}

.scrub__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.scrub__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.scrub__frame img.is-on { opacity: 1; }

/* The scrim. Text over video needs one on every band, and the frames here are
   busy screenshots rather than flat plates. */
.scrub__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, 0.55) 62%,
    rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
}

.scrub__osd {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
  pointer-events: none;
}
.scrub__chapter {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.scrub__skip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 13px;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.scrub__skip.is-on { opacity: 1; transform: none; }

.scrub__bar { padding: 16px 20px 20px; }
.scrub__bar input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: ew-resize;
  margin: 0;
  display: block;
}
.scrub__bar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.scrub__bar input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.scrub__bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--emph);
  border: 0;
  margin-top: -5px;
}
.scrub__bar input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--emph);
  border: 0;
}
.scrub__bar input[type="range"]:focus-visible {
  outline: 2px solid var(--emph);
  outline-offset: 4px;
  border-radius: 4px;
}

.scrub__marks { position: relative; height: 15px; margin-top: 2px; }
.scrub__mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
}
.scrub__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 1px;
  height: 7px;
  background: rgba(255, 255, 255, 0.22);
}

.scrub__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 20px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  flex-wrap: wrap;
}
.scrub__meta b { color: var(--text-0); font-weight: 400; }
.scrub-hint { font-size: 13px; color: var(--text-2); margin-top: 14px; }

@media (max-width: 640px) {
  .scrub__osd { left: 12px; right: 12px; bottom: 12px; font-size: 11px; }
  .scrub__chapter { font-size: 14px; }
  .scrub__mark { font-size: 9px; }
}