<!-- Updated to use HTML video element which saves over 1.4MB compared to animated GIF -->

<div class="stargate">
  
  <div class="stargate__portal">
    
    <video autoplay muted playsinline loop>
      <source src="https://res.cloudinary.com/shanomurphy/video/upload/v1520181785/water_obm8lb.webm" type="video/webm">
      <source src="https://res.cloudinary.com/shanomurphy/video/upload/v1520181785/water_obm8lb.mp4" type="video/mp4"> 
    </video>
    
  </div>
  
</div>

 /**
 * Background
 * ----------
*/

.stargate {
  background: #111 url('https://res.cloudinary.com/shanomurphy/image/upload/v1520182770/stargate_tztoon.jpg') no-repeat center;
  background-size: cover;
  width: 177vh;
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

/**
 * The Portal
 * ----------
 *
 * Looping video of water ripples with animated CSS filters to make it more
 * "supernatural" in appearance. Bounding div clips the bottom of the video.
*/

.stargate__portal {
  
  width: 77vh;
  height: 73vh;
  position: absolute;
  top: 18vh;
  left: 50vh;
  overflow: hidden; // clip bottom of video
  
  video {
    width: 100%;
    border-radius: 50%;
    width: 77vh;
    height: 77vh;
    animation: portal-animation 15s infinite;
  }
  
}

@keyframes portal-animation {
  
  0% {
    filter: hue-rotate(0deg) contrast(3) saturate(1);
  }
  
  50% {
    filter: hue-rotate(45deg) contrast(1) saturate(6);
  }
  
  100% {
    filter: hue-rotate(0deg) contrast(3) saturate(1);
  }
  
}

/**
 * Housekeeping
 * ------------
*/

body {
  background: black;
}