/*
    VHS
    Post-future CSS animations
 
*/

.vhs-flash {
  -webkit-animation-name: vhs-flash;
          animation-name: vhs-flash;
  -webkit-animation-duration: .1s ;
          animation-duration: .1s ; /* previously .025s; */
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps(1);
          animation-timing-function: steps(1);
  opacity: 0;
}

@-webkit-keyframes vhs-flash {
   0% { opacity: 0 }
  50% { opacity: 1 }
}

@keyframes vhs-flash {
   0% { opacity: 0 }
  50% { opacity: 1 }
}
.vhs-flicker {
  opacity: 0;
  -webkit-animation-name: vhs-flicker;
          animation-name: vhs-flicker;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: steps(7);
          animation-timing-function: steps(7);
}

@-webkit-keyframes vhs-flicker {
    0%   { opacity: 0 }
   12.5% { opacity: .25 }
   25%   { opacity: 0 }
   37.5% { opacity: 0 }
   50%   { opacity: .75 }
   62.5% { opacity: 0 }
   75%   { opacity: 1 }
   87.5% { opacity: .5 }
  100%   { opacity: 1 }
}

@keyframes vhs-flicker {
    0%   { opacity: 0 }
   12.5% { opacity: .25 }
   25%   { opacity: 0 }
   37.5% { opacity: 0 }
   50%   { opacity: .75 }
   62.5% { opacity: 0 }
   75%   { opacity: 1 }
   87.5% { opacity: .5 }
  100%   { opacity: 1 }
}
.vhs-zoom {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation-name: vhs-zoom;
          animation-name: vhs-zoom;
  -webkit-animation-duration: .2s;
          animation-duration: .2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes vhs-zoom {
    0% { -webkit-transform: scale(0); transform: scale(0) }
  100% { -webkit-transform: scale(1); transform: scale(1) }
}

@keyframes vhs-zoom {
    0% { -webkit-transform: scale(0); transform: scale(0) }
  100% { -webkit-transform: scale(1); transform: scale(1) }
}
.vhs-fade {
  opacity: 0;
  -webkit-animation-name: vhs-fade;
          animation-name: vhs-fade;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes vhs-fade {
    0% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes vhs-fade {
    0% { opacity: 0 }
  100% { opacity: 1 }
}
.vhs-pop {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation-name: vhs-pop;
          animation-name: vhs-pop;
  -webkit-animation-duration: .2s;
          animation-duration: .2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes vhs-pop {
    0% { -webkit-transform: scale(0); transform: scale(0) }
   75% { -webkit-transform: scale(1.25); transform: scale(1.25) }
  100% { -webkit-transform: scale(1); transform: scale(1) }
}

@keyframes vhs-pop {
    0% { -webkit-transform: scale(0); transform: scale(0) }
   75% { -webkit-transform: scale(1.25); transform: scale(1.25) }
  100% { -webkit-transform: scale(1); transform: scale(1) }
}
.vhs-highlight {
  -webkit-animation-name: vhs-highlight;
          animation-name: vhs-highlight;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.vhs-highlight-text {
  -webkit-animation-name: vhs-highlight-text;
          animation-name: vhs-highlight-text;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes vhs-highlight {
  0%   { background-color: rgba(0, 255, 255, 0.5); background-color: rgba(127, 219, 255, 0.5) }
  100% { background-color: rgba(0, 255, 255, 0); background-color: rgba(127, 219, 255, 0) }
}

@keyframes vhs-highlight {
  0%   { background-color: rgba(0, 255, 255, 0.5); background-color: rgba(127, 219, 255, 0.5) }
  100% { background-color: rgba(0, 255, 255, 0); background-color: rgba(127, 219, 255, 0) }
}

@-webkit-keyframes vhs-highlight-text {
  0%   { color: blue; color: #0074d9 }
  100% { color: inherit }
}

@keyframes vhs-highlight-text {
  0%   { color: blue; color: #0074d9 }
  100% { color: inherit }
}
.vhs-left,
.vhs-right,
.vhs-top,
.vhs-bottom {
  opacity: 0;
  -webkit-animation-duration: .6s;
          animation-duration: .6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.vhs-left {
  -webkit-animation-name: vhs-left;
          animation-name: vhs-left;
  -webkit-transform: translateX(-12.5vw);
      -ms-transform: translateX(-12.5vw);
          transform: translateX(-12.5vw);
}
.vhs-right {
  -webkit-animation-name: vhs-right;
          animation-name: vhs-right;
  -webkit-transform: translateX(12.5vw);
      -ms-transform: translateX(12.5vw);
          transform: translateX(12.5vw);
}
.vhs-top {
  -webkit-animation-name: vhs-top;
          animation-name: vhs-top;
  -webkit-transform: translateY(-12.5vh);
      -ms-transform: translateY(-12.5vh);
          transform: translateY(-12.5vh);
}
.vhs-bottom {
  -webkit-animation-name: vhs-bottom;
          animation-name: vhs-bottom;
  -webkit-transform: translateY(12.5vh);
      -ms-transform: translateY(12.5vh);
          transform: translateY(12.5vh);
}

@-webkit-keyframes vhs-left {
   0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes vhs-left {
   0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@-webkit-keyframes vhs-right {
   0% { -webkit-transform: translateX(12.5vw); transform: translateX(12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes vhs-right {
   0% { -webkit-transform: translateX(12.5vw); transform: translateX(12.5vw); opacity: 0; }
 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@-webkit-keyframes vhs-top {
   0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes vhs-top {
   0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@-webkit-keyframes vhs-bottom {
   0% { -webkit-transform: translateY(12.5vh); transform: translateY(12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes vhs-bottom {
   0% { -webkit-transform: translateY(12.5vh); transform: translateY(12.5vh); opacity: 0; }
 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
.vhs-blur  {
  -webkit-animation-name: vhs-blur;
          animation-name: vhs-blur;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes vhs-blur {
  from { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="32" /></filter></svg>#filter'); -webkit-filter: blur(32px); filter: blur(32px) }
  to { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter'); -webkit-filter: blur(0); filter: blur(0) }
}

@keyframes vhs-blur {
  from { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="32" /></filter></svg>#filter'); -webkit-filter: blur(32px); filter: blur(32px) }
  to { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter'); -webkit-filter: blur(0); filter: blur(0) }
}

.vhs-highlight-pop {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation-name: vhs-pop, vhs-highlight;
          animation-name: vhs-pop, vhs-highlight;
  -webkit-animation-duration: .2s, 2s;
          animation-duration: .2s, 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.vhs-highlight-pop-text {
  -webkit-animation-name: vhs-pop, vhs-highlight-text;
          animation-name: vhs-pop, vhs-highlight-text;
  -webkit-animation-duration: .2s, 2s;
          animation-duration: .2s, 2s;
}

.vhs-delay-1 { -webkit-animation-delay: .1s; animation-delay: .1s }
.vhs-delay-2 { -webkit-animation-delay: .2s; animation-delay: .2s }
.vhs-delay-3 { -webkit-animation-delay: .4s; animation-delay: .4s }
.vhs-delay-4 { -webkit-animation-delay: .6s; animation-delay: .6s }
.vhs-delay-5 { -webkit-animation-delay: .8s; animation-delay: .8s }
.vhs-delay-6 { -webkit-animation-delay: 1s; animation-delay: 1s }
.vhs-delay-7 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s }
.vhs-delay-8 { -webkit-animation-delay: 1.4s; animation-delay: 1.4s }
.vhs-delay-9 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s }
.vhs-delay-10 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s }
.vhs-delay-11 { -webkit-animation-delay: 2.0s; animation-delay: 2.0s }
.vhs-duration-1 { -webkit-animation-duration: .1s; animation-duration: .1s  }
.vhs-duration-2 { -webkit-animation-duration: .2s; animation-duration: .2s  }
.vhs-duration-3 { -webkit-animation-duration: .4s; animation-duration: .4s  }
.vhs-duration-4 { -webkit-animation-duration: .6s; animation-duration: .6s  }
.vhs-duration-5 { -webkit-animation-duration: .8s; animation-duration: .8s  }
.vhs-duration-6 { -webkit-animation-duration: 1s; animation-duration: 1s  }
.vhs-duration-7 { -webkit-animation-duration: 1.2s; animation-duration: 1.2s  }
.vhs-duration-8 { -webkit-animation-duration: 1.4s; animation-duration: 1.4s  }
.vhs-duration-9 { -webkit-animation-duration: 1.6s; animation-duration: 1.6s  }
.vhs-duration-10 { -webkit-animation-duration: 1.8s; animation-duration: 1.8s  }
.vhs-duration-11 { -webkit-animation-duration: 2.0s; animation-duration: 2.0s  }

/* Initial Value */
/* .vhs-ease { animation-timing-function: ease } */

.vhs-linear { -webkit-animation-timing-function: linear; animation-timing-function: linear }
.vhs-ease-in { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
.vhs-ease-out { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
.vhs-ease-in-out { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out }

/* Reference */
/* cubic-bezier(0.1, 0.7, 1.0, 0.1) */
/* Steps */
.vhs-infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }
.vhs-reverse { -webkit-animation-direction: reverse; animation-direction: reverse }
.vhs-alternate { -webkit-animation-direction: alternate; animation-direction: alternate }
.vhs-fill-forwards { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards }
.vhs-fill-backwards { -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards }
.vhs-fill-both { -webkit-animation-fill-mode: both; animation-fill-mode: both }
.vhs-paused { -webkit-animation-play-state: paused; animation-play-state: paused }


/*

   COLOR VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/

:root {

  /* Cool */


  /* Warm */


  /* Gray scale */

}