.cover {
  max-width: 600px;
}

@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr);
    gap: clamp(32px, 5vw, 80px);
  }
}

/* Synchronized horizontal, vertical, rotational, and shadow motion. */
.basketball-runner {
  --basketball-duration: 8.2s;
  --basketball-delay: 1.2s;
  position: fixed;
  z-index: 20;
  left: -70px;
  bottom: 10px;
  width: 54px;
  height: 54px;
  pointer-events: none;
  will-change: transform;
  animation: basketball-travel var(--basketball-duration) linear var(--basketball-delay) 1 forwards;
}

.basketball-runner::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -2px;
  width: 32px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  filter: blur(3px);
  will-change: transform, opacity;
  animation: basketball-shadow var(--basketball-duration) linear var(--basketball-delay) 1 forwards;
}

.basketball-bouncer {
  width: 54px;
  height: 54px;
  transform-origin: center bottom;
  will-change: transform;
  animation: basketball-bounce var(--basketball-duration) linear var(--basketball-delay) 1 forwards;
}

.basketball-image {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0.78) saturate(1.2) contrast(1.12);
  will-change: transform;
  animation: basketball-spin var(--basketball-duration) linear var(--basketball-delay) 1 forwards;
}

@keyframes basketball-travel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(100vw + 140px), 0, 0); }
}

@keyframes basketball-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(2880deg); }
}

@keyframes basketball-bounce {
  0% {
    transform: translate3d(0, 0, 0) scale(1.12, .88);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  1% { transform: translate3d(0, -10px, 0) scale(.97, 1.04); }
  12% {
    transform: translate3d(0, -154px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  23% { transform: translate3d(0, -10px, 0) scale(.97, 1.05); }
  24% {
    transform: translate3d(0, 0, 0) scale(1.15, .85);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  25% { transform: translate3d(0, -8px, 0) scale(.98, 1.04); }
  34% {
    transform: translate3d(0, -108px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  44% { transform: translate3d(0, -8px, 0) scale(.98, 1.04); }
  45% {
    transform: translate3d(0, 0, 0) scale(1.13, .87);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  46% { transform: translate3d(0, -7px, 0) scale(.98, 1.03); }
  54% {
    transform: translate3d(0, -74px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  63% { transform: translate3d(0, -7px, 0) scale(.98, 1.03); }
  64% {
    transform: translate3d(0, 0, 0) scale(1.11, .89);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  65% { transform: translate3d(0, -5px, 0) scale(.99, 1.025); }
  72% {
    transform: translate3d(0, -48px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  79% { transform: translate3d(0, -5px, 0) scale(.99, 1.025); }
  80% {
    transform: translate3d(0, 0, 0) scale(1.09, .91);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  81% { transform: translate3d(0, -4px, 0) scale(.99, 1.02); }
  87% {
    transform: translate3d(0, -28px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  92% { transform: translate3d(0, -4px, 0) scale(.99, 1.02); }
  93% {
    transform: translate3d(0, 0, 0) scale(1.07, .93);
    animation-timing-function: cubic-bezier(.16, .72, .3, 1);
  }
  94% { transform: translate3d(0, -3px, 0) scale(.995, 1.01); }
  97% {
    transform: translate3d(0, -10px, 0) scale(1);
    animation-timing-function: cubic-bezier(.62, 0, .88, .38);
  }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes basketball-shadow {
  0%, 24%, 45%, 64%, 80%, 93%, 100% {
    transform: scaleX(1.16);
    opacity: .4;
  }
  12% {
    transform: scaleX(.42);
    opacity: .09;
  }
  34% {
    transform: scaleX(.54);
    opacity: .13;
  }
  54% {
    transform: scaleX(.66);
    opacity: .18;
  }
  72% {
    transform: scaleX(.76);
    opacity: .23;
  }
  87% {
    transform: scaleX(.86);
    opacity: .28;
  }
  97% {
    transform: scaleX(.94);
    opacity: .33;
  }
}

@media (prefers-reduced-motion: reduce) {
  .basketball-runner {
    display: none;
  }
}