/*
  Zweck: Langsamer Sechs-Ton-Farbzyklus und Glow-Puls für den Footer-Uhr-Chip.
  Zielpfad: /home/mckiede/public_html/design/clock-theme.css
  Verantwortlich: mckie-Portal

  Total loop 48s (~8s per tone: hold, glow, handoff).
*/

.footer-chip--clock {
  box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--orange) 62%, transparent);
  animation: clock-frame-cycle 48s ease-in-out infinite;
}

@keyframes clock-frame-cycle {
  /* orange */
  0%,
  9% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--orange) 62%, transparent);
    filter: brightness(1);
  }
  11% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--orange) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--orange) 36%, transparent);
    filter: brightness(1.12);
  }
  13%,
  16.67% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--orange) 62%, transparent);
    filter: brightness(1);
  }

  /* peach */
  18%,
  25.66% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--peach) 62%, transparent);
    filter: brightness(1);
  }
  27.66% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--peach) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--peach) 36%, transparent);
    filter: brightness(1.12);
  }
  29.66%,
  33.33% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--peach) 62%, transparent);
    filter: brightness(1);
  }

  /* violet */
  35%,
  42.66% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--violet) 62%, transparent);
    filter: brightness(1);
  }
  44.66% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--violet) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--violet) 36%, transparent);
    filter: brightness(1.12);
  }
  46.66%,
  50% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--violet) 62%, transparent);
    filter: brightness(1);
  }

  /* blue */
  51.66%,
  59.33% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--blue) 62%, transparent);
    filter: brightness(1);
  }
  61.33% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--blue) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--blue) 36%, transparent);
    filter: brightness(1.12);
  }
  63.33%,
  66.66% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--blue) 62%, transparent);
    filter: brightness(1);
  }

  /* steel */
  68.33%,
  76% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--steel) 62%, transparent);
    filter: brightness(1);
  }
  78% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--steel) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--steel) 36%, transparent);
    filter: brightness(1.12);
  }
  80%,
  83.33% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--steel) 62%, transparent);
    filter: brightness(1);
  }

  /* red */
  85%,
  92.66% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--red) 62%, transparent);
    filter: brightness(1);
  }
  94.66% {
    box-shadow:
      inset 0 0 0 0.14rem color-mix(in srgb, var(--red) 78%, transparent),
      0 0 1.1rem color-mix(in srgb, var(--red) 36%, transparent);
    filter: brightness(1.12);
  }
  96.66%,
  100% {
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--red) 62%, transparent);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-chip--clock {
    animation: none;
    box-shadow: inset 0 0 0 0.12rem color-mix(in srgb, var(--violet) 62%, transparent);
  }
}