.public-background.public-background-checkerboard {
  --near: 1.28; --far: .755; --cycle: 11s;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 48%, #ffe590 0%, #f7d961 62%, #f1ce55 100%);
}
.public-background-checkerboard .pattern { position: absolute; inset: 0; }
.public-background-checkerboard .tile {
  position: absolute; display: grid; place-items: center;
  width: var(--cell); height: var(--cell);
  transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0);
  transition: transform 700ms ease-out;
}
.public-background-checkerboard .tile--mascot {
  transform: translate3d(calc(var(--pointer-x, 0px) * -.65), calc(var(--pointer-y, 0px) * -.65), 0);
}
.public-background-checkerboard .sprite {
  width: var(--sprite); height: var(--sprite); object-fit: contain; user-select: none;
  animation: hookemon-ball-depth var(--cycle) ease-in-out infinite;
}
.public-background-checkerboard .tile--mascot .sprite { animation-name: hookemon-mascot-depth; }
.public-background-checkerboard > .hero {
  all: unset;
  position: absolute; display: block; top: 50%; left: 50%;
  width: clamp(185px, 33%, 445px); max-width: 58%; max-height: 65%; height: auto;
  object-fit: contain; transform: translate(-50%, -50%); user-select: none;
}
.public-background-checkerboard[data-paused="true"] .sprite,
.public-background-checkerboard[data-hidden="true"] .sprite { animation-play-state: paused; }
.public-background-checkerboard[data-static="true"] .sprite { animation: none; opacity: .7; transform: scale(1); }
.public-background-checkerboard[data-static="true"] .tile--mascot .sprite { opacity: .45; }
.public-background-checkerboard[data-static="true"] .tile { transition: none; transform: none; }
@keyframes hookemon-ball-depth {
  0%, 100% { transform: scale(var(--far)); opacity: .38; }
  50% { transform: scale(var(--near)); opacity: 1; }
}
@keyframes hookemon-mascot-depth {
  0%, 100% { transform: scale(var(--near)); opacity: .65; }
  50% { transform: scale(var(--far)); opacity: .2; }
}
@media (max-width: 640px) {
  .public-background-checkerboard > .hero { width: 53%; max-width: 220px; max-height: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .public-background-checkerboard .tile { transition: none; }
}