/* Pure CSS. Prime-length cycles never line up, so the field almost never repeats. */
@property --s  { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --g  { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --a  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --c  { syntax: '<color>';  inherits: false; initial-value: #fff; }
@property --hue { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --blur { syntax: '<length>'; inherits: false; initial-value: 2px; }
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --kick { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: crosshair;
}

main {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  font-size: 12px;
  color: #fff;
  filter: blur(var(--blur)) contrast(40) hue-rotate(calc(var(--hue) + var(--kick)));
  transition: --mx 1.2s ease-out, --my 1.2s ease-out, --kick 0.4s ease-out;
  animation: hue 173s linear infinite, goo 41s ease-in-out infinite alternate;
}

/* press anywhere: the palette lurches */
body:active main { --kick: 180deg; transition: --mx 1.2s ease-out, --my 1.2s ease-out, --kick 0.08s; }

main div {
  --d: 40;
  position: absolute;
  inset: -50vmax;
  background-image: repeating-radial-gradient(var(--c), var(--c) calc(var(--s) * 1em), transparent calc(var(--s) * 1em), transparent calc((var(--s) + var(--g)) * 1em));
  background-size: 3.12em 3.12em;
  background-position: calc(50% + 1.56em);
  translate: calc(var(--mx) * var(--d) * 1px) calc(var(--my) * var(--d) * 1px);
  transition: translate 1.5s ease-out;
  animation:
    spin 67s linear infinite,
    breathe 13s ease-in-out infinite alternate,
    gap 19s ease-in-out infinite alternate;
}

main div:nth-child(1) { --d: -30; }

main div:nth-child(2) {
  --d: 60;
  font-size: 1.33em;
  animation-direction: reverse, alternate, alternate-reverse;
  animation-duration: 89s, 17s, 23s;
  animation-delay: -20s, -5s, -11s;
}

main div:nth-child(3) {
  --d: 120;
  font-size: 4.33em;
  --c: #48c;
  opacity: 0.25;
  background-size: 2.5em 2.5em;
  animation: spin 2s linear infinite, breathe 7s ease-in-out infinite alternate;
}

main div:nth-child(4) {
  --d: -90;
  font-size: 2.1em;
  opacity: 0.6;
  background-image: repeating-conic-gradient(from var(--a), var(--c) 0deg calc(var(--s) * 9deg), transparent calc(var(--s) * 9deg) calc((var(--s) + var(--g)) * 9deg));
  background-size: 7em 7em;
  mix-blend-mode: difference;
  animation:
    spin 113s linear infinite reverse,
    breathe 29s ease-in-out infinite alternate,
    gap 31s ease-in-out infinite alternate,
    angle 37s linear infinite,
    tint 53s linear infinite;
}

main div:nth-child(5) {
  --d: 200;
  font-size: 0.8em;
  background-image: radial-gradient(var(--c) calc(var(--s) * 0.8em), transparent calc(var(--s) * 0.8em + 0.05em));
  background-size: calc(var(--g) * 2em + 2em) calc(var(--g) * 2em + 2em);
  opacity: 0.8;
  animation:
    spin 43s linear infinite,
    breathe 11s ease-in-out infinite alternate,
    gap 47s ease-in-out infinite alternate-reverse,
    tint 61s linear infinite reverse,
    flicker 97s steps(1) infinite;
}

main div:nth-child(6) {
  --d: -160;
  font-size: 1.7em;
  background-image: repeating-linear-gradient(var(--a), var(--c) 0 calc(var(--s) * 0.6em), transparent calc(var(--s) * 0.6em) calc((var(--s) + var(--g)) * 0.8em));
  background-size: auto;
  mix-blend-mode: exclusion;
  animation:
    spin 79s linear infinite,
    breathe 59s ease-in-out infinite alternate,
    gap 71s ease-in-out infinite alternate,
    angle 83s linear infinite reverse,
    tint 73s linear infinite,
    flicker 101s steps(1) infinite -40s;
}

@keyframes spin {
  50% { transform: scale(.75) rotate(.5turn); }
  to  { transform: scale(1) rotate(1turn); }
}
@keyframes breathe { from { --s: 0.35; } to { --s: 1.4; } }
@keyframes gap     { from { --g: 0.3; }  to { --g: 2.4; } }
@keyframes angle   { to { --a: 360deg; } }
@keyframes tint {
  0%   { --c: #fff; }
  25%  { --c: #f4a; }
  50%  { --c: #4fd; }
  75%  { --c: #fd4; }
  100% { --c: #fff; }
}
@keyframes flicker {
  0%, 100% { opacity: 0.8; }
  31% { opacity: 0; }
  47% { opacity: 0.5; }
  73% { opacity: 0; }
  83% { opacity: 1; }
}
@keyframes hue { to { --hue: 360deg; } }
@keyframes goo {
  from { --blur: 1.4px; }
  to   { --blur: 3.2px; }
}

/* invisible pointer grid: hovering a cell tells the layers where you are */
nav {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(5, 1fr);
}
nav i { display: block; }

body:has(.c:nth-child(1):hover) main { --mx: -0.50; --my: -0.50; }
body:has(.c:nth-child(2):hover) main { --mx: -0.25; --my: -0.50; }
body:has(.c:nth-child(3):hover) main { --mx: 0.00; --my: -0.50; }
body:has(.c:nth-child(4):hover) main { --mx: 0.25; --my: -0.50; }
body:has(.c:nth-child(5):hover) main { --mx: 0.50; --my: -0.50; }
body:has(.c:nth-child(6):hover) main { --mx: -0.50; --my: -0.25; }
body:has(.c:nth-child(7):hover) main { --mx: -0.25; --my: -0.25; }
body:has(.c:nth-child(8):hover) main { --mx: 0.00; --my: -0.25; }
body:has(.c:nth-child(9):hover) main { --mx: 0.25; --my: -0.25; }
body:has(.c:nth-child(10):hover) main { --mx: 0.50; --my: -0.25; }
body:has(.c:nth-child(11):hover) main { --mx: -0.50; --my: 0.00; }
body:has(.c:nth-child(12):hover) main { --mx: -0.25; --my: 0.00; }
body:has(.c:nth-child(13):hover) main { --mx: 0.00; --my: 0.00; }
body:has(.c:nth-child(14):hover) main { --mx: 0.25; --my: 0.00; }
body:has(.c:nth-child(15):hover) main { --mx: 0.50; --my: 0.00; }
body:has(.c:nth-child(16):hover) main { --mx: -0.50; --my: 0.25; }
body:has(.c:nth-child(17):hover) main { --mx: -0.25; --my: 0.25; }
body:has(.c:nth-child(18):hover) main { --mx: 0.00; --my: 0.25; }
body:has(.c:nth-child(19):hover) main { --mx: 0.25; --my: 0.25; }
body:has(.c:nth-child(20):hover) main { --mx: 0.50; --my: 0.25; }
body:has(.c:nth-child(21):hover) main { --mx: -0.50; --my: 0.50; }
body:has(.c:nth-child(22):hover) main { --mx: -0.25; --my: 0.50; }
body:has(.c:nth-child(23):hover) main { --mx: 0.00; --my: 0.50; }
body:has(.c:nth-child(24):hover) main { --mx: 0.25; --my: 0.50; }
body:has(.c:nth-child(25):hover) main { --mx: 0.50; --my: 0.50; }