Как уместить анимацию на мобильном устройстве?

:root {}

body {
  background-color: black;
}

.container {
  margin-top: 350px;
  text-align: center;
}

p {
  font-family: 'Orbitron', sans-serif !important;
  -webkit-text-stroke: 3px cyan;
  background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-size: 4.1em;
  text-transform: uppercase;
  position: relative;
  filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 2px red)drop-shadow(0 0 2px red);
  opacity: 0;
}

.curley {
  left: 170px;
  bottom: 52px;
  animation: bg-shift 1s infinite linear alternate, scale 750ms ease-in forwards 3.5s, jump 500ms ease-out forwards 5.7s, blur-in 300ms linear 3.5s, zoom 4s ease-in-out 6.25s, flip 500ms linear forwards 8s;
}

.web {
  right: 170px;
  animation: bg-shift 1s infinite linear alternate, scale-angle1 3s ease-in-out forwards 2s, blur-in 500ms linear 2s, rotate-up1 250ms ease-out forwards 5.7s, zoom 1.5s ease-in-out 6.25s, flip 500ms linear forwards 8.5s;
}

.dev {
  right: 175px;
  animation: bg-shift 1s infinite linear alternate, scale-angle2 3s ease-in-out forwards 2s, blur-in 500ms linear 2s, rotate-up2 250ms ease-out forwards 5.7s, zoom 1.5s ease-in-out 6.25s, flip 500ms linear forwards 8.5s;
}

@keyframes bg-shift {
  from {
    background-position: 0 125px;
  }
  to {}
}

@keyframes scale-angle1 {
  0% {
    opacity: 1;
    transform: scale(0) perspective(400px)rotateY(-45deg);
  }
  50% {
    transform: scale(1)perspective(400px) rotateY(-45deg);
  }
  75% {
    transform: scale(1)perspective(150px) rotateY(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}

@keyframes scale-angle2 {
  0% {
    opacity: 1;
    transform: scale(0) perspective(400px)rotateY(45deg);
  }
  50% {
    transform: scale(1)perspective(400px) rotateY(45deg);
  }
  75% {
    transform: scale(1)perspective(150px) rotateY(-360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}

@keyframes blur-in {
  from {
    filter: blur(100px);
  }
  to {
    filter: blur(0);
  }
}

@keyframes scale {
  0% {
    opacity: 1;
    transform: scale(0) translateY(-500px);
  }
  85% {
    transform: scale(1) translateY(0);
  }
  95% {
    transform: translateY(-25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes jump {
  0% {
    transform: scale(0) translateY(0px);
  }
  25% {
    transform: scale(1) translateY(-200px);
  }
  75% {
    transform: scale(1) translateY(0px);
  }
  85% {
    transform: translateY(-25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate-up1 {
  0% {
    transform: rotatez(0deg);
  }
  50% {
    transform: rotatez(-40deg);
  }
  100% {
    transform: rotatez(0deg);
  }
}

@keyframes rotate-up2 {
  0% {
    transform: rotatez(0deg);
  }
  50% {
    transform: rotatez(40deg);
  }
  100% {
    transform: rotatez(0deg);
  }
}

@keyframes flip {
  0% {
    transform: rotatex(0deg);
  }
  50% {
    transform: rotatex(360deg);
  }
  100% {
    transform: rotatex(90deg);
    filter: blur(20px)drop-shadow(0 0 5px cyan)drop-shadow(0 0 25px red);
  }
}

@keyframes zoom {
  0% {
    transform: scale(1) perspective(600px) rotatey(0deg);
  }
  50% {
    transform: scale(.3) perspective(600px) rotatey(3600deg);
  }
  100% {
    transform: scale(1) perspective(600px) rotatey(0deg);
  }
}

<div class="container text-uppercase">
  <p class="curley">Hello</p>
  <p class="web">Hello</p>
  <p class="dev">Hello</p>
  <div class="hide-text"></div>
</div>