/* ==========================================================================
Animation System ORIGINALLY by Neale Van Fleet from Rogue Amoeba
CHANGES DREAMBITS: attributinized. Deleted delay classes. Changed Drop animation.
========================================================================== */
/* .animate {
    animation-duration: 0.75s;
    animation-delay: 0.5s;
    animation-name: animate-fade;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: backwards;
  }
   */

/* animations */

[data-gs-animation="slideLeft"] {
  animation-duration: var(--animation-duration);
  animation-name: slideLeft;
}
@keyframes slideLeft {
  from {
     margin-left:100px;
  }

  to {
     margin-left:0;
  }
}
/* ---------------------------------------------- */
[data-gs-animation="slideRight"] {
  animation-duration: var(--animation-duration);
  animation-name: slideRight;
}
@keyframes slideRight {
  from {
     margin-left:-100px;
  }

  to {
    margin-left:0;
  }
}
/* ------------------------------------------------ */
[data-gs-animation="fadeIn"] {
  animation-duration: var(--animation-duration);
  animation-name: fadeIn;
  animation-timing-function: ease;
}
@keyframes fadeIn {
  from {
      opacity: 0.3;
  }

  to {
      opacity: 1;
  }
}
/* ------------------------------------------------ */
[data-gs-animation="fadeOut"] {
  animation-duration: var(--animation-duration);
  animation-name: fadeOut;
}
@keyframes fadeOut {
  from {
      opacity: 1;
  }

  to {
      opacity: 0;
  }
}
/* --------------------------------------------------- */
[data-gs-animation="Blur"] {
  animation-duration: var(--animation-duration);
  animation-name: Blur;
}
@keyframes Blur {
  from {
       filter: blur(5px);
  }
 
   to {
      filter: blur(0px);
  }
 }
 /* --------------------------------------------------- */
[data-gs-animation="Scale"] {
  animation-duration: var(--animation-duration);
  animation-name: Scale;
}
@keyframes Scale{
 from {
      transform: scale(0.95);
 }

  to {
      transform: scale(1);
 }
}
/* --------------------------------------------------------- */

/* end animations */




  
  /* Pop In */
 
  [data-gs-animation="Pop"]  { animation-name: animate-pop; }
  
  @keyframes Pop {
    0% {
      opacity: 0;
      transform: scale(0.5, 0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }
  
  /* Blur In */
  [data-gs-animation="Blur1"]  {
    animation-name: Blu1r;
    animation-timing-function: ease;
  }
  
  @keyframes Blur1 {
    0% {
      opacity: 0;
      filter: blur(15px);
    }
    100% {
      opacity: 1;
      filter: blur(0px);
    }
  }
  
  /* Glow In */
  [data-gs-animation="Glow"]  {
    animation-name: Glow;
    animation-timing-function: ease;
  }
  
  @keyframes Glow {
    0% {
      opacity: 0;
      filter: brightness(3) saturate(3);
      /* transform: scale(0.8, 0.8); */
    }
    100% {
      opacity: 1;
      filter: brightness(1) saturate(1);
      /* transform: scale(1, 1); */
    }
  }
  
  /* Grow In */
  [data-gs-animation="Grow"]  { animation-name: Grow; }
  
  @keyframes Grow {
    0% {
      opacity: 0;
      transform: scale(1, 0);
      visibility: hidden;
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }
  
  /* Splat In */
  [data-gs-animation="Splat"]  { animation-name: Splat; }
  
  @keyframes Splat {
    0% {
      opacity: 0;
      transform: scale(0, 0) rotate(20deg) translate(0, -30px);
      }
    70% {
      opacity: 1;
      transform: scale(1.1, 1.1) rotate(15deg);
    }
    85% {
      opacity: 1;
      transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
    }
  
    100% {
      opacity: 1;
      transform: scale(1, 1) rotate(0) translate(0, 0);
    }
  }
  
  /* Roll In */
  [data-gs-animation="Roll"]  { animation-name: Roll; }
  
  @keyframes Roll {
    0% {
      opacity: 0;
      transform: scale(0, 0) rotate(360deg);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1) rotate(0deg);
    }
  }
  
  /* Flip In */
  [data-gs-animate="Flip"] {
    animation-name: animate-flip;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  @keyframes Flip {
    0% {
      opacity: 0;
      transform: rotateX(-120deg) scale(0.9, 0.9);
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg) scale(1, 1);
    }
  }
  
  /* Spin In */
  [data-gs-animation="Spin"]  {
    animation-name: Spin;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  @keyframes Spin {
    0% {
      opacity: 0;
      transform: rotateY(-120deg) scale(0.9, .9);
    }
    100% {
      opacity: 1;
      transform: rotateY(0deg) scale(1, 1);
    }
  }
  
  /* Slide In */
  [data-gs-animation="Slide"]  { animation-name: Slide; }
  
  @keyframes Slide {
    0% {
      opacity: 0;
      transform: translate(0, 20px);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  
  /* Drop In */
  [data-gs-animation="Drop"] { 
    animation-name: Drop; 
    animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
  }
  
  @keyframes Drop {
  0% {
    opacity: 0;
    transform: translate(0,-300px) scale(0.9, 1.1);
  }
  
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1);
    }
  }
  
  
  
  @media screen and (prefers-reduced-motion: reduce) {
    .animate {
      animation: none !important;
    }
  }