/* g */
.header::before {
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(9,121,121,.8) 15%, rgba(0,255,255,.6) 40%, rgba(255,255,255,0) 100%);
  transform: rotate(200deg);
  animation: rotate1 2s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -3s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes  rotate1 {
  to {
    transform: rotate(-180deg);
  }
}

/* T */
.logo::before {
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(14,123,121,.7) 15%, rgba(187,255,255,.4) 40%, rgba(255,255,255,0) 100%);
  transform: rotate(13deg);
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -.5s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes  rotate {
  to {
    transform: rotate(-135deg);
  }
}

/* t */
.logo::after {
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(144,21,144,.7) 15%, rgba(255,150,255,.4) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(2deg);
  animation: rotate2 2s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -0.8s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes  rotate2 {
  to {
    transform: rotate(45deg);
  }
}

@media screen and (max-width: 60rem) {
  .logo::before {
    animation: rotate 12s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -12s);
  }
  @keyframes  rotate {
  to {
    transform: rotate(-240deg);
    }
  }
  .logo::after {
    animation: rotate2 10s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -10s);
  }
  @keyframes  rotate2 {
  to {
    transform: rotate(-360deg);
    }
  }
}