/* Hover preview for video cards.
   Sprite: 5x5 grid of 240px frames -> 1200x680 total.
   Mobile-first: the sprite layer only activates on devices that actually hover,
   so touch users get the static thumbnail and no wasted download. */

.hp-wrap { position: relative; overflow: hidden; }

.hp-sprite {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  /* 5 columns wide -> the layer is 500% of the card, one frame visible at a time */
  background-size: 500% 500%;
  background-position: 0% 0%;
  transition: opacity .12s ease-out;
  will-change: background-position;
}

.hp-wrap.hp-on .hp-sprite { opacity: 1; }

/* progress bar so the scrub is legible */
.hp-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.18);
  opacity: 0;
  transition: opacity .12s ease-out;
}
.hp-wrap.hp-on .hp-bar { opacity: 1; }
.hp-bar > i {
  display: block; height: 100%; width: 0;
  background: rgba(255,255,255,.85);
  transition: width .08s linear;
}

/* only arm hover where hovering is real */
@media (hover: none), (pointer: coarse) {
  .hp-sprite, .hp-bar { display: none !important; }
}

/* respect reduced-motion: show the first frame, do not animate */
@media (prefers-reduced-motion: reduce) {
  .hp-sprite { transition: none; }
  .hp-wrap.hp-on .hp-sprite { background-position: 0% 0% !important; }
}