/* Shared site backdrop: one seamless paw-print tile drifts behind every landing surface.
   The radial mask lets it disappear before the viewport edges, keeping the pattern texture
   from competing with the page's text and cards. */
:root {
  --paw-tile: 84px;
  --paw-drift: 48s;
  --game-paws: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='%23161A26'><path transform='translate(12 10) scale(.9)' d='M12 3.5c-1.4 0-2.5 1.6-2.5 3.5S10.6 10.5 12 10.5s2.5-1.6 2.5-3.5S13.4 3.5 12 3.5zM6 6c-1.2 0-2.2 1.4-2.2 3.1S4.8 12 6 12s2.2-1.3 2.2-2.9S7.2 6 6 6zm12 0c-1.2 0-2.2 1.4-2.2 3.1S16.8 12 18 12s2.2-1.3 2.2-2.9S19.2 6 18 6zm-6 6.5c-3.2 0-6 2.8-6 5.4 0 1.7 1.3 2.6 2.7 2.6 1.1 0 2-.7 3.3-.7s2.2.7 3.3.7c1.4 0 2.7-.9 2.7-2.6 0-2.6-2.8-5.4-6-5.4z'/><path transform='translate(50 48) rotate(-25) scale(.75)' d='M12 3.5c-1.4 0-2.5 1.6-2.5 3.5S10.6 10.5 12 10.5s2.5-1.6 2.5-3.5S13.4 3.5 12 3.5zM6 6c-1.2 0-2.2 1.4-2.2 3.1S4.8 12 6 12s2.2-1.3 2.2-2.9S7.2 6 6 6zm12 0c-1.2 0-2.2 1.4-2.2 3.1S16.8 12 18 12s2.2-1.3 2.2-2.9S19.2 6 18 6zm-6 6.5c-3.2 0-6 2.8-6 5.4 0 1.7 1.3 2.6 2.7 2.6 1.1 0 2-.7 3.3-.7s2.2.7 3.3.7c1.4 0 2.7-.9 2.7-2.6 0-2.6-2.8-5.4-6-5.4z'/><rect x='58' y='14' width='16' height='5' rx='2.5' transform='rotate(30 66 16)'/></g></svg>");
}

.stage .grid,
.backdrop .grid,
.backdrop::before {
  position: absolute;
  inset: -140px;
  pointer-events: none;
  background-image: var(--game-paws);
  background-repeat: repeat;
  background-size: var(--paw-tile) var(--paw-tile);
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 64% at 50% 46%,
    #000 0 26%,
    rgba(0, 0, 0, 0.72) 48%,
    rgba(0, 0, 0, 0.25) 70%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 60% 64% at 50% 46%,
    #000 0 26%,
    rgba(0, 0, 0, 0.72) 48%,
    rgba(0, 0, 0, 0.25) 70%,
    transparent 100%
  );
  will-change: transform;
  animation: paw-drift var(--paw-drift) linear infinite;
}

.backdrop::before {
  content: '';
}

/* On the splash, keep the fade anchored to the viewport. Only the repeating tile
   moves, by one full tile on each axis, so the loop has no jump or moving edge. */
.stage .grid {
  inset: 0;
  background-image: none;
  will-change: auto;
  animation: none;
}

.stage .grid::before {
  position: absolute;
  inset: calc(-1 * var(--paw-tile));
  background-image: var(--game-paws);
  background-repeat: repeat;
  background-size: var(--paw-tile) var(--paw-tile);
  will-change: transform;
  animation: paw-drift var(--paw-drift) linear infinite;
  content: '';
}

@keyframes paw-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--paw-tile), calc(-1 * var(--paw-tile)), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage .grid,
  .stage .grid::before,
  .backdrop .grid,
  .backdrop::before {
    animation: none;
  }
}