/* The clip player in the lightbox — see the player section of viewer.js.
 *
 * Controls sit over the bottom of the clip on a scrim, the same device the
 * reel and the story card use to put type over footage. `signal` marks only
 * how far the clip has played, which is progress; everything else is snow and
 * glacier on night. */

.kp {
  position: relative; align-self: center; max-width: 100%; line-height: 0;
  border-radius: var(--k-radius); overflow: hidden; background: #000;
  outline: none; user-select: none; -webkit-user-select: none;
}
.frame .kp video {
  display: block; max-width: 100%; max-height: calc(100dvh - 120px);
  border-radius: 0; cursor: pointer;
}
.kp:fullscreen { display: flex; align-items: center; justify-content: center; border-radius: 0; }
.kp:fullscreen video { max-height: 100dvh; width: 100%; height: 100%; }

.kp button { font: inherit; color: var(--k-snow); background: none; border: 0; cursor: pointer; }
.kp svg { width: 22px; height: 22px; fill: currentColor; }
.kp svg .kp-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- the big play button, while paused ------------------------------------ */

.kp-big {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: 50% !important;
  background: rgb(19 28 46 / .72) !important; box-shadow: 0 2px 16px rgb(19 28 46 / .5);
  transition: opacity .2s var(--k-ease), transform .2s var(--k-ease);
}
.kp-big svg { width: 32px; height: 32px; margin-left: 4px; }
.kp-big:hover { transform: scale(1.06); }
.kp:not(.is-paused) .kp-big, .kp.is-loading .kp-big, .kp.is-error .kp-big { opacity: 0; pointer-events: none; }

/* --- the spinner, while the network catches up ---------------------------- */

.kp-spin {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 3px solid rgb(244 247 249 / .25); border-top-color: var(--k-snow); border-radius: 50%;
  opacity: 0; pointer-events: none; transition: opacity .15s;
  animation: kp-spin .8s linear infinite;
}
.kp.is-loading:not(.is-error) .kp-spin { opacity: 1; transition-delay: .25s; }
@keyframes kp-spin { to { transform: rotate(360deg); } }

.kp-error {
  position: absolute; inset: auto 16px 50% 16px; margin: 0; line-height: 1.4;
  text-align: center; color: var(--k-snow); font-size: 14px;
}

/* --- the control bar ------------------------------------------------------ */

.kp-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 4px;
  padding: 28px 8px 6px; line-height: 1;
  background: linear-gradient(rgb(19 28 46 / 0), rgb(19 28 46 / .82) 60%);
  transition: opacity .25s var(--k-ease);
}
.kp.is-idle .kp-bar { opacity: 0; }
.kp.is-idle { cursor: none; }
.kp-btn { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: var(--k-radius); }
.kp-btn:hover, .kp-btn:focus-visible { background: rgb(244 247 249 / .14); }
.kp-time {
  flex: none; font-size: 12px; color: var(--k-glacier); font-variant-numeric: tabular-nums;
  padding: 0 6px; white-space: nowrap;
}
.kp-now { color: var(--k-snow); }

/* --- the scrubber --------------------------------------------------------- */

.kp-scrub {
  position: relative; flex: 1; min-width: 60px; height: 32px; cursor: pointer;
  touch-action: none; outline: none;
}
.kp-rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  border-radius: 2px; background: rgb(244 247 249 / .22); overflow: hidden;
  transition: height .15s, margin-top .15s;
}
.kp-scrub:hover .kp-rail, .kp.is-scrubbing .kp-rail, .kp-scrub:focus-visible .kp-rail { height: 6px; margin-top: -3px; }
/* What has arrived. Glacier, because it is the part of the clip already here —
 * not progress through it, which is signal's alone. */
.kp-buffered i { position: absolute; top: 0; bottom: 0; background: rgb(175 196 208 / .55); }
.kp-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--k-signal); }
.kp-knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--k-signal); box-shadow: 0 0 0 3px rgb(19 28 46 / .6);
  transform: scale(0); transition: transform .15s var(--k-ease);
}
.kp-scrub:hover .kp-knob, .kp.is-scrubbing .kp-knob, .kp.is-paused .kp-knob,
.kp-scrub:focus-visible .kp-knob { transform: scale(1); }
.kp-scrub:focus-visible { box-shadow: 0 0 0 2px var(--k-glacier); border-radius: var(--k-radius); }

@media (max-width: 480px) {
  .kp-time { font-size: 11px; padding: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-big, .kp-bar, .kp-knob, .kp-rail { transition: none; }
  .kp-spin { animation-duration: 2.4s; }
}