Для начала у элементов curley, web, dev, уберите свойства: left, right, bottom. Далее можно немного подправить остальные стили у элементов + немного изменить разметку и ситуация улучшится.
<div class="container text-uppercase">
<p class="text curley">Hello</p>
<div class="group">
<p class="text web">Hello</p>
<p class="text dev">Hello</p>
</div>
<div class="hide-text"></div>
</div>
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.text {
--sw-1: drop-shadow(0 0 1px black);
--sw-2: drop-shadow(0 0 2px red);
font-family: "Orbitron", sans-serif;
background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
-webkit-text-stroke: 3px cyan;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
font-size: 4.1em;
text-align: center;
text-transform: uppercase;
filter: var(--sw-1) var(--sw-1) var(--sw-2) var(--sw-2);
opacity: 0;
margin: 0;
}
.group {
display: flex;
gap: 10px;
justify-content: center;
}
.curley {
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 {
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 {
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;
}
/* Код анимаций без изменений */
Размер шрифта скорее всего придётся уменьшать через
@media
запросы, чтобы на мобильниках всё нормально отображалось. Но в целом ваши анимации и стили можно и нужно улучшить.