/* Copyright Ayers Electronics Inc. All rights reserved. */
/* waiting for a picture: the buffering ring and the tunes own breath. */
/* ---- waiting for a picture: two events, two answers ----
   A CHANNEL TUNE is the viewer's own act, and the banner is already up saying which channel it is,
   so the stage is black and the plate breathes - a set-top box never spun anything at a channel
   change. A mid-stream REBUFFER has no banner and no cause the viewer can see, so it gets the ring,
   which is the one thing that answers "is this dead", once the picture has been stopped for the
   parity hold. Neither transport's own flag is read here: js/stall-ring.js decides, and writes
   data-rebuffering on #player when the ring is owed. */
.buffering {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.spinner {
  opacity: 0;
  transition: opacity 200ms ease;
  color: var(--text);
}
.spinner [data-part="track"] {
  opacity: 0.25;
}
.spinner [data-part="track-fill"] {
  color: var(--accent);
  opacity: 0.85;
}
#player[data-rebuffering] .spinner {
  opacity: 1;
}
/* The library hangs its own spin on .vds-buffering-spinner inside .vds-buffering-indicator
   (vendor/default-theme.css); our markup carries our own names, so nothing of theirs reaches this
   element and the turn is ours to draw. Turn the SVG, never the custom element: the element is
   inline, so its box carries a baseline gap and its centre is not the arc's centre - that offset
   centre is the wobble a viewer saw on a slow tune. */
#player[data-rebuffering] .spinner [data-part="root"] {
  animation: buffering-spin 1s linear infinite;
  transform-origin: 50% 50%;
}
/* The tune's own face: the plate breathes on the state the banner is already showing
   (js/tuner.js setHudState). The state rides #player itself rather than being read off the banner,
   so the rule lands at the WebView floor. */
#player.tuning #hudNum {
  animation: tuning-breath 1400ms ease-in-out infinite;
}
@keyframes buffering-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tuning-breath {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* Less motion slows the ring's turn and never stops it, so a viewer who asked for less motion still
   sees that something is happening: the one rule that outranks the page's blanket (css/base.css),
   under the device's signal and under the switch's mark alike. The plate simply stops. */
@media (prefers-reduced-motion: reduce) {
  #player[data-rebuffering] .spinner [data-part="root"] {
    animation-duration: 8s !important;
    animation-iteration-count: infinite !important;
  }
  #player.tuning #hudNum {
    animation: none;
  }
}
html[data-reduce-motion] #player[data-rebuffering] .spinner [data-part="root"] {
  animation-duration: 8s !important;
  animation-iteration-count: infinite !important;
}