@property --rl {
  syntax: '<number>';
  inherits: true;
  initial-value: .7;
}
@property --bl {
  syntax: '<number>';
  inherits: true;
  initial-value: .7;
}
@property --gl {
  syntax: '<number>';
  inherits: true;
  initial-value: .7;
}
@property --yl {
  syntax: '<number>';
  inherits: true;
  initial-value: .7;
}


svg.header__logo {
  --rl: .7; --gl: .7;
  --bl: .7; --yl: .7;
  --r: hsl(0   100% calc(var(--rl) * 100%));
  --g: hsl(120 100% calc(var(--gl) * 100%));
  --b: hsl(240 100% calc(var(--bl) * 100%));
  --y: hsl(60  100% calc(var(--yl) * 100%));
}

@media (prefers-reduced-motion: no-preference) {
  svg.header__logo {
    animation: var(--anim, all-in) 6s linear infinite normal;
  }
}

@keyframes step-step {
  0% { --rl: .7; --bl: .1; --gl: .1; --yl: .1; }
  25% { --rl: .1; --bl: .7; --gl: .1; --yl: .1; }
  50% { --rl: .1; --bl: .1; --gl: .7; --yl: .1; }
  75% { --rl: .1; --bl: .1; --gl: .1; --yl: .7; }
  100% { --rl: .7; --bl: .1; --gl: .1; --yl: .1; }
}
@keyframes pairs {
  0% { --rl: .7; --bl: .1; --gl: .7; --yl: .1; }
  25% { --rl: .7; --bl: .1; --gl: .7; --yl: .1; }
  50% { --rl: .1; --bl: .7; --gl: .1; --yl: .7; }
  75% { --rl: .1; --bl: .7; --gl: .1; --yl: .7; }
  100% { --rl: .7; --bl: .1; --gl: .7; --yl: .1; }
}
@keyframes all-in {
  0% { --rl: .7; --bl: .7; --gl: .7; --yl: .7; }
  25% { --rl: .7; --bl: .7; --gl: .7; --yl: .7; }
  50% { --rl: .1; --bl: .1; --gl: .1; --yl: .1; }
  75% { --rl: .1; --bl: .1; --gl: .1; --yl: .1; }
  100% { --rl: .7; --bl: .7; --gl: .7; --yl: .7; }
}