/* =========================================================
   Player — additions
   ========================================================= */

/* ---- buffering, shown on the bar instead of over the picture ----
   A stripe that moves along the progress bar. It says the same thing a
   spinner did without covering what someone is trying to watch. */
.scrub.buffering .buffered{
  background-image:linear-gradient(90deg,
    rgba(255,255,255,.18) 25%, rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.18) 75%);
  background-size:200% 100%;
  animation:fmBuf 1s linear infinite;
}
@keyframes fmBuf{ from{background-position:200% 0} to{background-position:-200% 0} }

/* Someone who has switched animation off in their system settings is told
   about it in a way that does not move. */
@media (prefers-reduced-motion: reduce){
  .scrub.buffering .buffered{animation:none;background:rgba(255,255,255,.4)}
}

/* ---- right click menu ---- */
.fm-ctx{
  position:absolute; z-index:40; min-width:190px; padding:5px;
  background:rgba(20,24,33,.97); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.5);
  font-size:13px; color:#e9ebef;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.fm-ctx[hidden]{display:none}
.fm-ctx__title{
  padding:7px 12px 8px; margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-weight:700; color:#6d5cf0; letter-spacing:.01em;
}
.fm-ctx button{
  display:block; width:100%; padding:8px 12px; text-align:left;
  background:none; border:0; border-radius:5px;
  font:inherit; color:inherit; cursor:pointer;
}
.fm-ctx button:hover{background:rgba(255,255,255,.08)}

/* ---- toast ---- */
.fm-toast{
  position:absolute; left:50%; bottom:76px; transform:translateX(-50%) translateY(6px);
  z-index:38; padding:7px 15px; border-radius:99px;
  background:rgba(0,0,0,.82); color:#fff; font-size:12.5px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.fm-toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- touch ----
   A finger is about 9mm across and lands imprecisely, so the controls are
   given room. The scrub bar in particular is the hardest thing to hit: it is
   thin by design, so the hit area is widened without the bar itself growing. */
@media (hover: none){
  .player .btn{min-width:44px; min-height:44px}

  .scrub{padding-block:14px; margin-block:-14px}   /* taller to hit, same to look at */
  .scrub .thumb{width:15px; height:15px}

  /* Nothing to hover on a phone, so the volume slider only takes up room.
     The mute button stays. */
  .vol-slider{display:none}

  .fm-ctx{min-width:210px; font-size:14px}
  .fm-ctx button{padding:11px 13px}
}

/* ---- volume ----
   Taller to press than it is to look at. The padding is what a pointer has to
   land inside; the negative margin takes that space back out of the layout so
   nothing around it moves. */
.vol-slider{
  padding-block:12px; margin-block:-12px;
  cursor:pointer;
}
.vol-slider::-webkit-slider-thumb{
  width:13px; height:13px;
  transition:transform .12s ease;
}
.vol-slider:hover::-webkit-slider-thumb,
.vol-slider:active::-webkit-slider-thumb{transform:scale(1.25)}
.vol-slider::-moz-range-thumb{
  width:13px; height:13px; border:0;
  transition:transform .12s ease;
}
.vol-slider:hover::-moz-range-thumb,
.vol-slider:active::-moz-range-thumb{transform:scale(1.25)}

/* ---- smoother ----
   The progress bar is repainted on every timeupdate, which is four times a
   second. A transition on width makes that look continuous rather than
   stepped, and the transform hint keeps it off the main thread.

   Not while dragging: there the bar should follow the finger exactly, and a
   transition would make it lag behind. */
.played, .buffered{transition:width .18s linear; will-change:width}
.scrub.dragging .played, .scrub.dragging .thumb{transition:none}
.thumb{transition:left .18s linear, transform .12s var(--fm-ease, ease)}
.scrub.dragging .thumb{transition:transform .12s ease}