/* video-text-hover.css -- fixed floating video follower for text/list hovers */

:root {
  --video-text-hover-width: clamp(220px, 23vw, 480px);
  --video-text-hover-z: 90000;
}

.js-video-text-hover,
[data-video-text-hover] {
  position: relative;
}

.js-video-hover-item,
[data-video-hover-item],
[data-video-hover-key],
[data-video-webm],
[data-video-mp4] {
  position: relative;
}

.js-video-text-hover .js-video-hover-item,
.js-video-text-hover [data-video-hover-item],
.js-video-text-hover [data-video-hover-key],
.js-video-text-hover [data-video-webm],
.js-video-text-hover [data-video-mp4],
[data-video-text-hover] .js-video-hover-item,
[data-video-text-hover] [data-video-hover-item],
[data-video-text-hover] [data-video-hover-key],
[data-video-text-hover] [data-video-webm],
[data-video-text-hover] [data-video-mp4] {
  z-index: calc(var(--video-text-hover-z) + 1);
}

.feat-video-text-hover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--video-text-hover-z);
  width: var(--video-text-hover-width);
  aspect-ratio: 16 / 9;
  pointer-events: none;
  contain: layout paint style;
  opacity: 0;
}

.feat-video-text-hover__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(7, 20, 33, 0.58);
  transform: translateZ(0);
  clip-path: inset(0 round 0);
}

.feat-video-text-hover__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  opacity: 0;
  transform: scale(1.015);
  will-change: opacity;
}

.feat-video-text-hover__canvas {
  position: absolute;
  inset: -1px;
  z-index: 2;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  opacity: 0;
  pointer-events: none;
}

.feat-video-text-hover__frame.has-webgl-video-frame .feat-video-text-hover__canvas {
  opacity: 1;
}

.feat-video-text-hover__frame.is-webgl-pending .feat-video-text-hover__video,
.feat-video-text-hover__frame.has-webgl-video-frame .feat-video-text-hover__video {
  opacity: 0 !important;
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .feat-video-text-hover {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-video-text-hover {
    display: none !important;
  }

  .js-video-hover-item,
  [data-video-hover-item],
  [data-video-hover-key],
  [data-video-webm],
  [data-video-mp4] {
    z-index: auto;
  }
}