/* The coxswain header sprite: a top-down 240x48 eight-plus-cox racing shell, */
/* oars out both sides and the cox on the stern deck. .cox-shell-track clips */
/* the glide to its own box so the boat stays beside the beta banner text */
/* instead of sweeping across it. */
.cox-shell-track {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 280px;
  height: 48px;
  vertical-align: middle;
  margin-right: 0.5em;
}

.cox-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1440px 48px;
  image-rendering: pixelated;
  animation:
    cox-stroke 0.9s steps(6) infinite,
    cox-glide 30s linear infinite;
}

/* An SVG loaded as a background-image cannot inherit the host page's color */
/* or custom properties, so each theme gets its own generated sheet instead */
/* of one currentColor file. docs/_sprite.py is the source of truth. */
[data-md-color-scheme="slate"] .cox-shell {
  background-image: url("shell-sprite-dark.svg");
}

[data-md-color-scheme="default"] .cox-shell {
  background-image: url("shell-sprite-light.svg");
}

/* Cycles the six stroke frames: catch, drive-early, drive-late, finish, recovery-early, recovery-late. */
@keyframes cox-stroke {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1440px 0;
  }
}

/* Glides the shell across its own clipped track once every 30 seconds. */
@keyframes cox-glide {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 240px);
  }
}

/* Reduced motion: remove both animations so background-position and left */
/* below take effect, resting the shell on frame 1 at the left edge. */
@media (prefers-reduced-motion: reduce) {
  .cox-shell {
    animation: none;
    background-position: 0 0;
    left: 0;
  }
}