/* The percs.lol accent is a slow rainbow, not a fixed color. Every accent token on the site's own pages
   (landing, login, account, editor, legal) is computed from --hue, which drifts around the color wheel.
   Lightness and chroma stay fixed, so text on accent buttons keeps the same contrast at every hue.
   User pages never use these tokens. */
@property --hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 50;
}

/* steps() updates ~10 times a second instead of every frame: looks the same at this speed, far less work.
   .hue-local (published pages) only cycles the percs.lol screens, never the user's own page. */
:root:not(.hue-local),
.hue-local .state {
  animation: percs-hue 40s steps(400) infinite;
  animation-delay: var(--hue-delay, 0s); /* set by lib/hue.js */
}

@keyframes percs-hue {
  from { --hue: 50; }
  to { --hue: 410; }
}

/* Reduced motion: the color holds still. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.hue-local),
  .hue-local .state { animation: none; }
}