/*
 * Halfpix Dayoo v1.7.2 - a video that is still transcoding on Bunny Stream.
 * Shown instead of a player that has nothing to play: the frame uploaded with
 * the video when there is one, and the progress. Palette tokens only.
 */
.hp-video-processing {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
  background: var(--hp-ink, #1f2d29);
}
.hp-video-processing img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) brightness(.72);
}
.hp-video-processing span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  font-size: 14px;
  font-weight: 650;
}
.hp-video-processing .app-icon { width: 18px; height: 18px; }
.hp-video-processing em { font-style: normal; }
.hp-video-processing:not(.is-failed) .app-icon { animation: hp-video-spin 1.2s linear infinite; }
@keyframes hp-video-spin { to { transform: rotate(360deg); } }

/*
 * v1.7.3 - post and Discover overlays. A carousel slide is a grid whose row
 * grew to the video's own height, so a portrait video ran past the bottom of
 * the overlay and took its progress bar and sound button with it. The row is
 * now the slide's height; the video fits inside it (object-fit: contain).
 */
.hp-post-overlay .media-gallery__slide { grid-template-rows: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) {
  .hp-video-processing .app-icon { animation: none; }
}