@keyframes pan360 {
  0% { transform: rotate(0deg) translateY(min(50vw, 50vh)) rotate(0deg); }
  100% { transform: rotate(360deg) translateY(min(50vw, 50vh)) rotate(-360deg); }
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-from-black {
  0%   { filter: brightness(0); }
  100% { filter: brightness(1); }
}

@keyframes dark-cycle-background {
  0%    { background-color: hsl(0deg,   20%, 10%); }
  33.3% { background-color: hsl(120deg, 20%, 10%); }
  66.7% { background-color: hsl(240deg, 20%, 10%); }
  100%  { background-color: hsl(0deg,   20%, 10%); }
}

@keyframes cycle-background-1 {
  0%    { background-color: color-mix(in hsl, var(--print-cyan), white 25%); }
  33.3% { background-color: color-mix(in hsl, var(--print-magenta), white 25%); }
  66.7% { background-color: color-mix(in hsl, var(--print-yellow), white 25%); }
  100%  { background-color: color-mix(in hsl, var(--print-cyan), white 25%); }
}

@keyframes cycle-background-2 {
  0%    { background-color: color-mix(in hsl, var(--print-magenta), white 25%); }
  33.3% { background-color: color-mix(in hsl, var(--print-yellow), white 25%); }
  66.7% { background-color: color-mix(in hsl, var(--print-cyan), white 25%); }
  100%  { background-color: color-mix(in hsl, var(--print-magenta), white 25%); }
}

@keyframes cycle-background-3 {
  0%    { background-color: color-mix(in hsl, var(--print-yellow), white 25%); }
  33.3% { background-color: color-mix(in hsl, var(--print-cyan), white 25%); }
  66.7% { background-color: color-mix(in hsl, var(--print-magenta), white 25%); }
  100%  { background-color: color-mix(in hsl, var(--print-yellow), white 25%); }
}

@keyframes cycle-foreground {
  0%    { color: var(--print-cyan); }
  33.3% { color: var(--print-magenta); }
  66.7% { color: var(--print-yellow); }
  100%  { color: var(--print-cyan); }
}

@keyframes bounce-y {
  0%   { transform: translateY(1rem); }
  50%  { transform: translateY(-1rem); }
  100% { transform: translateY(1rem); }
}

.opaque.opaque {
  opacity: 1;
}

.transparent.transparent {
  opacity: 0;
}

.opaque-transition {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.transparent-transition {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}