/* Shared ascending mathematical symbols for entry pages.
   Keep the existing rise, rotation and fades behind the page content. */
.math-drift {
  --math-drift-opacity-high: .70;
  --math-drift-opacity-mid: .58;
  --math-drift-opacity-low: .26;
  --math-drift-violet: #c4b5fd;
  --math-drift-blue: #67e8f9;
  --math-drift-rose: #f9a8d4;
  --math-drift-green: #6ee7b7;
  --math-drift-gold: #fcd34d;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-math, Georgia, "Times New Roman", serif);
  font-weight: 400;
  line-height: 1.2;
}

:root[data-theme="light"] .math-drift {
  --math-drift-opacity-high: .64;
  --math-drift-opacity-mid: .52;
  --math-drift-opacity-low: .24;
  --math-drift-violet: #6d28d9;
  --math-drift-blue: #0369a1;
  --math-drift-rose: #be185d;
  --math-drift-green: #047857;
  --math-drift-gold: #b45309;
}

.math-drift > span {
  position: absolute;
  left: var(--x);
  bottom: -16vh;
  color: var(--math-drift-violet);
  font-size: clamp(2.2rem, 3.3vw, 4.5rem);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(8 9 35 / .5), 0 0 14px currentColor;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--s));
  animation: math-drift-rise var(--dur, 21s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.math-drift > span:nth-child(5n + 2) { color: var(--math-drift-blue); }
.math-drift > span:nth-child(5n + 3) { color: var(--math-drift-rose); }
.math-drift > span:nth-child(5n + 4) { color: var(--math-drift-green); }
.math-drift > span:nth-child(5n) { color: var(--math-drift-gold); }

:root[data-theme="light"] .math-drift > span { text-shadow: 0 1px 1px rgb(255 255 255 / .65); }

/* The wide light scene is indigo on its right half. */
@media (min-width: 961px) {
  :root[data-theme="light"] .auth-page .math-drift > .math-drift__on-deep {
    --math-drift-violet: #dfcfff;
    --math-drift-blue: #c4f1ff;
    --math-drift-rose: #ffc4e3;
    --math-drift-green: #b5ffe3;
    --math-drift-gold: #fff0a6;
    text-shadow: 0 1px 2px rgb(24 12 65 / .4);
  }
}

@keyframes math-drift-rise {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--s));
    opacity: 0;
  }
  25% { transform: translate3d(var(--sway, 22px), -31.25vh, 0) rotate(calc(var(--r) + var(--turn, 360deg) * .25)) scale(var(--s)); }
  50% { transform: translate3d(0, -62.5vh, 0) rotate(calc(var(--r) + var(--turn, 360deg) * .5)) scale(var(--s)); }
  75% { transform: translate3d(calc(var(--sway, 22px) * -1), -93.75vh, 0) rotate(calc(var(--r) + var(--turn, 360deg) * .75)) scale(var(--s)); }
  8% { opacity: var(--math-drift-opacity-high); }
  55% { opacity: var(--math-drift-opacity-mid); }
  92% { opacity: var(--math-drift-opacity-low); }
  100% {
    transform: translate3d(0, -125vh, 0) rotate(calc(var(--r) + var(--turn, 360deg))) scale(var(--s));
    opacity: 0;
  }
}

@media (max-width: 640px) {
  /* Keep alternating positions across the whole screen, and every colour. */
  .math-drift > span:nth-child(2n) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .math-drift > span {
    animation: none;
    bottom: auto;
    top: var(--rest, 22%);
    opacity: .3;
  }
  .math-drift > span:nth-child(2n) { display: none; }
}

/* Longer formulas drift gently enough to stay recognisable. */
.math-drift > .math-drift__formula { --turn: 42deg; font-size: clamp(1.15rem, 1.9vw, 1.85rem); }
.math-drift__formula sup { font-size: .65em; }
.math-drift__formula sub { font-size: .45em; margin-left: -1.6em; margin-right: .4em; vertical-align: -.95em; }
.math-drift__fraction { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; font-size: .8em; line-height: 1.3; }
.math-drift__fraction > span:first-child { padding: 0 .15em .06em; border-bottom: 1px solid currentColor; }

.math-drift > span:nth-child(3n) { --sway: -30px; }
.math-drift > .math-drift__formula { --sway: 14px; }
.math-drift > .math-drift__diagram { --turn: 65deg; --sway: 36px; width: clamp(58px, 7vw, 108px); }
.math-drift__diagram svg { display: block; width: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.math-drift__orbit { transform-origin: 50px 50px; animation: math-orbit 16s linear infinite; }
.math-drift__diagram--solid svg { animation: math-solid-rock 10s ease-in-out infinite alternate; }
@keyframes math-orbit { to { transform: rotate(360deg); } }
@keyframes math-solid-rock { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .math-drift__orbit, .math-drift__diagram--solid svg { animation: none; } }

/* Fixed trajectories in external CSS also work with the strict token-page CSP. */
.math-drift > span:nth-child(1) { --x:5%; --r:-14deg; --s:.9; --dur:18s; --delay:-2s; --rest:18%; }
.math-drift > span:nth-child(2) { --x:12%; --r:18deg; --s:.82; --dur:22s; --delay:-13s; --rest:64%; }
.math-drift > span:nth-child(3) { --x:20%; --r:-8deg; --s:1.02; --dur:19s; --delay:-7s; --rest:74%; }
.math-drift > span:nth-child(4) { --x:29%; --r:10deg; --s:.78; --dur:24s; --delay:-18s; --rest:30%; }
.math-drift > span:nth-child(5) { --x:38%; --r:-18deg; --s:.88; --dur:20s; --delay:-4s; --rest:12%; }
.math-drift > span:nth-child(6) { --x:48%; --r:15deg; --s:.72; --dur:23s; --delay:-16s; --rest:82%; }
.math-drift > span:nth-child(7) { --x:57%; --r:14deg; --s:.86; --dur:21s; --delay:-10s; --rest:86%; }
.math-drift > span:nth-child(8) { --x:66%; --r:-10deg; --s:1; --dur:25s; --delay:-20s; --rest:46%; }
.math-drift > span:nth-child(9) { --x:76%; --r:20deg; --s:.76; --dur:18s; --delay:-9s; --rest:24%; }
.math-drift > span:nth-child(10) { --x:84%; --r:-16deg; --s:.94; --dur:22s; --delay:-1s; --rest:56%; }
.math-drift > span:nth-child(11) { --x:93%; --r:12deg; --s:.8; --dur:20s; --delay:-15s; --rest:68%; }
.math-drift > span:nth-child(12) { --x:7%; --r:-8deg; --s:.9; --dur:31s; --delay:-19s; --rest:38%; }
.math-drift > span:nth-child(13) { --x:24%; --r:5deg; --s:.82; --dur:36s; --delay:-6s; --rest:62%; }
.math-drift > span:nth-child(14) { --x:43%; --r:-12deg; --s:.85; --dur:33s; --delay:-26s; --rest:17%; }
.math-drift > span:nth-child(15) { --x:67%; --r:8deg; --s:.92; --dur:29s; --delay:-17s; --rest:50%; }
.math-drift > span:nth-child(16) { --x:79%; --r:-7deg; --s:.84; --dur:34s; --delay:-10s; --rest:77%; }
.math-drift > span:nth-child(17) { --x:14%; --r:9deg; --s:.78; --dur:38s; --delay:-29s; --rest:88%; }
.math-drift > span:nth-child(18) { --x:52%; --r:-5deg; --s:.88; --dur:32s; --delay:-12s; --rest:33%; }
.math-drift > span:nth-child(19) { --x:34%; --r:7deg; --s:.86; --dur:35s; --delay:-23s; --rest:71%; }
.math-drift > span:nth-child(20) { --x:4%; --r:-6deg; --s:.9; --dur:30s; --delay:-8s; --rest:44%; }
.math-drift > span:nth-child(21) { --x:72%; --r:4deg; --s:.86; --dur:37s; --delay:-31s; --rest:9%; }
.math-drift > span:nth-child(22) { --x:11%; --r:-12deg; --s:.85; --dur:34s; --delay:-12s; --rest:22%; }
.math-drift > span:nth-child(23) { --x:82%; --r:0deg; --s:.9; --dur:39s; --delay:-23s; --rest:60%; }
.math-drift > span:nth-child(24) { --x:40%; --r:6deg; --s:.9; --dur:41s; --delay:-7s; --rest:80%; }
.math-drift > span:nth-child(25) { --x:64%; --r:-5deg; --s:.8; --dur:37s; --delay:-30s; --rest:35%; }