:root {
  --animate-duration: 1s;
  --animate-delay: 0s;
  --animate-repeat: 1;
  --animate-intensity: 2rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    -webkit-transform: translate3d(0, var(--animate-intensity), 0);
    transform: translate3d(0, var(--animate-intensity), 0);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounce {
  from {
    -webkit-transform: translate3d(0, -1rem, 0);
    transform: translate3d(0, -1rem, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .fadeIn,
    .fadeInUp,
    .zoomIn {
      timeline-trigger: --trigger view() entry 0% exit 80%;
      animation-trigger: --trigger play-once;
    }
  }

  .fadeIn,
  .fadeInUp,
  .zoomIn {
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  .fadeIn {
    animation: fadeIn var(--animate-duration) forwards;
  }

  .fadeInUp {
    animation: fadeInUp var(--animate-duration) forwards;
  }

  .zoomIn {
    animation: zoomIn var(--animate-duration) forwards;
  }

  .entry {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-delay: 0.1s;
    animation-fill-mode: both;
  }

  .infinite {
    -webkit-animation: .5s ease-out 2s fadeIn forwards, .7s ease-in 2s infinite alternate both bounce;
    -moz-animation: .5s ease-out 2s fadeIn forwards, .7s ease-in 2s infinite alternate both bounce;
    animation: .5s ease-out 2s fadeIn forwards, .7s ease-in 2s infinite alternate both bounce;
  }
}