@media (prefers-reduced-motion: no-preference) {

  .banner__title::before{
    animation: rotateText infinite 25s linear;
  }

  .has-animation{
    opacity: 0;
  }

    .run-animation{
      --delay: 0s;
      --duration: 1s;
      --animationName: fadeUp;
      animation: var(--duration) forwards var(--delay) var(--animationName);
    }

    .fade-up{
      --animationName: fadeUp;
    }

    .spin-logo{
      opacity: 1;
      --animationName: spinLogo;
    }

    .delay-025{
      --delay: 0.25s;
    }

    .delay-050{
      --delay: 0.5s;
    }

    .delay-075{
      --delay: 0.75s;
    }

    .delay-0100{
      --delay: 1s;
    }
}

@keyframes fadeUp{
  from {
    transform: translate3d(0,40px,0);
  }
  to {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@keyframes rotateText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


@keyframes spinLogo{
  0%{
    transform: rotate(0);
  }
  40%{
    transform: rotate(1805deg);
  }
  75%{
    transform: rotate(1800deg);
  }
  100%{
    transform: rotate(1800deg);
  }
}