$_desaturate_amount: 10%;

$_color_1: hsl(28, 100%, 48%);
$_color_2: hsl(69, 100%, 43%);
$_color_3: hsl(200, 100%, 50%);
$_color_4: hsl(278, 100%, 60%);

$_color_1_dark: hsl(28, 85%, 48%);
$_color_2_dark: hsl(69, 85%, 43%);
$_color_3_dark: hsl(200, 85%, 50%);
$_color_4_dark: hsl(278, 85%, 60%);

:root {
  --color-1: hsl(28, 100%, 48%);
  --color-2: hsl(69, 100%, 43%);
  --color-3: hsl(200, 100%, 50%);
  --color-4: hsl(278, 100%, 60%);

  @media (prefers-color-scheme: dark) {
    --color-1: hsl(28, 90%, 48%);
    --color-2: hsl(69, 90%, 43%);
    --color-3: hsl(200, 90%, 50%);
    --color-4: hsl(278, 90%, 60%);
  }
}

.logo__wrapper {
  width: 7rem;
  line-height: 0;
  margin-bottom: 2em;
}

.logo__color {
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
}

.logo__color_1 {
  animation-name: cycle_color_1;
}
.logo__color_2 {
  animation-name: cycle_color_2;
}
.logo__color_3 {
  animation-name: cycle_color_3;
}
.logo__color_4 {
  animation-name: cycle_color_4;
}

.logo__link:hover,
.logo__link:focus {
  .logo__color {
    animation-play-state: running;
  }
}

.logo__color_1 { fill: var(--color-1); }
.logo__color_2 { fill: var(--color-2); }
.logo__color_3 { fill: var(--color-3); }
.logo__color_4 { fill: var(--color-4); }

@keyframes cycle_color_1 {
  0%,
  100% { fill: var(--color-1); }
  25%  { fill: var(--color-2); }
  50%  { fill: var(--color-3); }
  75%  { fill: var(--color-4); }
}

@keyframes cycle_color_2 {
  0%,
  100% { fill: var(--color-2); }
  25%  { fill: var(--color-3); }
  50%  { fill: var(--color-4); }
  75%  { fill: var(--color-1); }
}

@keyframes cycle_color_3 {
  0%,
  100% { fill: var(--color-3); }
  25%  { fill: var(--color-4); }
  50%  { fill: var(--color-1); }
  75%  { fill: var(--color-2); }
}

@keyframes cycle_color_4 {
  0%,
  100% { fill: var(--color-4); }
  25%  { fill: var(--color-1); }
  50%  { fill: var(--color-2); }
  75%  { fill: var(--color-3); }
}