/*!
 * 108™ Supply — Video Pairs (CSS)
 * Desktop: dual-video swap (example <-> dark) controlled by JS via .show-dark / .show-example
 * Touch (hover:none): force single-video UI (example only). The JS also strips the dark video so it never loads.
 */

 .video-pair[data-video-pair]{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.video-pair[data-video-pair] > video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity 200ms ease;
  will-change:opacity;
}

/* Default state: show example */
.video-pair[data-video-pair] > video[data-role="example"]{ opacity:1; }
.video-pair[data-video-pair] > video[data-role="dark"]{ opacity:0; }

/* JS-controlled swap */
.video-pair[data-video-pair].show-dark > video[data-role="example"]{ opacity:0; }
.video-pair[data-video-pair].show-dark > video[data-role="dark"]{ opacity:1; }

.video-pair[data-video-pair].show-example > video[data-role="example"]{ opacity:1; }
.video-pair[data-video-pair].show-example > video[data-role="dark"]{ opacity:0; }

/* Touch devices: visually force example only (performance part is handled in JS by removing data-src/src from dark) */
html.is-touch .video-pair[data-video-pair] > video[data-role="dark"]{
  opacity:0 !important;
  display:none !important;
}