.pixel-seal-track {
  --fish-drift: 2.25rem;
  display: grid;
  width: 11rem;
  min-height: 5.5rem;
  place-items: center start;
  overflow: hidden;
}

.pixel-seal-track .pixel-seal-swimmer,
.pixel-seal-track .pixel-seal-bubble {
  display: none;
}

.pixel-seal-track::before {
  content: "";
  display: block;
  width: 8.75rem;
  aspect-ratio: 278 / 160;
  background: url("/assets/pixel-fish-loader.png") center / contain no-repeat;
  image-rendering: pixelated;
  will-change: transform;
  animation: pixel-fish-swim 5.6s ease-in-out infinite alternate;
}

@keyframes pixel-fish-swim {
  0% { transform: translateZ(0) scaleX(1); }
  50% { transform: translate3d(calc(var(--fish-drift) * .55), -.7rem, 0) scaleX(1); }
  100% { transform: translate3d(var(--fish-drift), .5rem, 0) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-seal-track::before {
    animation: none;
    transform: translateX(calc(var(--fish-drift) * .5));
  }
}