/*
  Home-page animated video watermark.
  Adjust these two variables if you later want the video brighter/darker.
*/
:root{
  --video-opacity:.20;
  --video-dark-overlay:.55;
}
.video-watermark{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#000;
  pointer-events:none;
}
.video-watermark__media{
  position:absolute;
  top:50%;
  left:50%;
  width:100vw;
  height:100vh;
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  opacity:var(--video-opacity);
  filter:saturate(.9) contrast(1.08);
}
.video-watermark__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 30%,rgba(12,221,218,.10),transparent 34rem),
    rgba(0,0,0,var(--video-dark-overlay));
}
body.home-video-page > .site-header,
body.home-video-page > main,
body.home-video-page > footer{
  position:relative;
  z-index:2;
}
@media(prefers-reduced-motion:reduce){
  .video-watermark__media{display:none}
}
@media(max-width:620px){
  :root{--video-opacity:.15;--video-dark-overlay:.62}
}