/* asianstreamtube hover previews.
   Video cards: 5x5 sprite (25 frames) from /previews/sprite/<id>.webp.
   Category cards: rotate member-video thumbnails once per second (JS). */
.hp-wrap { position: relative; overflow: hidden; }
.hp-sprite {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-repeat: no-repeat; 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; }
.hp-bar { position: absolute; left:0; right:0; bottom:0; height:3px; 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: var(--cls-ref-color-cyan-500, #0bd9db); transition: width .08s linear; }
.thumb__img { transition: opacity .15s ease-out; }
@media (hover: none), (pointer: coarse) { .hp-sprite, .hp-bar { display:none !important; } }
@media (prefers-reduced-motion: reduce) { .hp-sprite { transition:none; } .hp-wrap.hp-on .hp-sprite { background-position:0% 0% !important; } }