/* Image-to-motion hover-swap styles */
.motion-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* width inherited from inline style copied from <img> */
}
.motion-frame__img,
.motion-frame__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.motion-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
/* When the user hovers, fade the video in over the static image. The video
   plays in the same frame; <img> stays underneath so the poster is what
   renders before bytes arrive. */
.motion-frame:hover .motion-frame__video,
.motion-frame .motion-frame__video[data-playing="1"] {
  opacity: 1;
}
/* When the video element is playing (Chrome at least exposes a 'playing'
   state via JS — we toggle the visibility programmatically too) */
.motion-frame__video:not([paused]) {
  opacity: 1;
}