/* please preview animations here: https://covalent.netlify.app/ */
:root {
  /* --animation-easing: cubic-bezier(0.25, 1, 0.5, 1);
  --animation-duration: 1s; */
  --movement: 60px;
}
@media (prefers-reduced-motion: no-preference) {
  hh-animate-on-scroll.fadein > * {
    opacity: 0;
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll.zoomin > * {
    transform: scale(1.5);
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll.fadeup > * {
    opacity: 0;
    transform: translateY(var(--movement));
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll.fadeleft > * {
    opacity: 0;
    transform: translateX(var(--movement));
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll.faderight > * {
    opacity: 0;
    transform: translateX(calc(var(--movement) * -1));
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll.skew > * {
    transform: translateY(calc(var(--movement) * 2)) skewY(5deg);
    transition: all var(--hh-anim-default);
  }

  .fadein {
    opacity: 1;
    transform: none;
    transition: all var(--hh-anim-default);
  }

  .zoomin {
    transform: scale(1);
    transition: all var(--hh-anim-default);
    overflow: hidden;
  }

  .fadeup {
    opacity: 1;
    transform: translateY(0px);
    transition: all var(--hh-anim-default);
  }

  .fadeleft {
    opacity: 1;
    transform: translateX(0px);
    transition: all var(--hh-anim-default);
  }

  .faderight {
    opacity: 1;
    transform: translateX(0px);
    transition: all var(--hh-anim-default);
  }

  .skew {
    transform: translateY(0px) skewY(0deg);
    transition: all var(--hh-anim-default);
  }

  hh-animate-on-scroll {
    display: block;
    overflow: hidden;
    width: 100%;
  }

  adaptive-image {
    display: block;
  }
}