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

header .article-header h1 {
  margin-left: -2em;
}

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

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

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

@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(-360deg);
    }
  }
  .logo::after {
    animation: rotate2 10s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -10s);
  }
  @keyframes  rotate2 {
  to {
    transform: rotate(-290deg);
    }
  }
}