/* ==========================================================================
   Always-loaded skeleton loading state.
   The rest of the player CSS is lazy-loaded by bonneville-bootstrapper.js,
   so anything needed before that happens lives here.
   ========================================================================== */

/* The spinning wheel (Mimics native Video.js spinner).
   .bonneville-is-loading  = initial load (video hidden, spinner on black)
   .bonneville-is-recovering = fatal-error recovery (video stays visible, spinner over last frame) */
.bonneville-hls-player.bonneville-is-loading::before,
.bonneville-hls-player.bonneville-is-recovering::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: vjs-mimic-spin 1s linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes vjs-mimic-spin {
  100% { transform: rotate(360deg); }
}

/* Hide the inner elements while loading so they don't flash unstyled */
.bonneville-hls-player.bonneville-is-loading .video-js,
.bonneville-hls-player.bonneville-is-loading video {
  opacity: 0;
  pointer-events: none;
}

/* Recovering: keep the last frame visible; don't let the poster cover it */
.bonneville-hls-player.bonneville-is-recovering .vjs-poster {
  display: none;
}