.hero-motion img {
  object-position: 50% 50% !important;
  animation-duration: 38s !important;
  filter: saturate(1.02) contrast(1.07) brightness(.83) !important;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(4,15,29,.96) 0%, rgba(4,15,29,.82) 42%, rgba(4,15,29,.26) 76%, rgba(4,15,29,.12)),
    linear-gradient(to top, rgba(4,15,29,.9), transparent 64%) !important;
}

.impact-ball { display: none !important; }

.baseball-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 38;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.floating-baseball {
  position: absolute;
  width: var(--size);
  height: var(--size);
  object-fit: contain;
  opacity: var(--opacity);
  filter: blur(var(--blur)) drop-shadow(0 7px 11px rgba(0,0,0,.16));
  will-change: transform;
}

.float-one { --size:42px; --opacity:.16; --blur:0px; left:3%; top:17%; animation:slowDriftOne 132s ease-in-out -14s infinite alternate; }
.float-two { --size:25px; --opacity:.11; --blur:.45px; left:82%; top:9%; animation:slowDriftTwo 148s ease-in-out -38s infinite alternate; }
.float-three { --size:58px; --opacity:.08; --blur:1.35px; left:70%; top:58%; animation:slowDriftThree 168s ease-in-out -51s infinite alternate; }
.float-four { --size:32px; --opacity:.13; --blur:.2px; left:12%; top:76%; animation:slowDriftFour 142s ease-in-out -27s infinite alternate; }
.float-five { --size:21px; --opacity:.1; --blur:.7px; left:92%; top:82%; animation:slowDriftFive 156s ease-in-out -63s infinite alternate; }

@keyframes slowDriftOne {
  0% { transform:translate3d(-8vw,6vh,0) rotate(-16deg); }
  50% { transform:translate3d(22vw,-9vh,0) rotate(54deg); }
  100% { transform:translate3d(52vw,11vh,0) rotate(128deg); }
}

@keyframes slowDriftTwo {
  0% { transform:translate3d(9vw,-4vh,0) rotate(18deg); }
  50% { transform:translate3d(-19vw,16vh,0) rotate(-51deg); }
  100% { transform:translate3d(-48vw,3vh,0) rotate(-122deg); }
}

@keyframes slowDriftThree {
  0% { transform:translate3d(8vw,12vh,0) rotate(0); }
  50% { transform:translate3d(-18vw,-13vh,0) rotate(63deg); }
  100% { transform:translate3d(-43vw,7vh,0) rotate(139deg); }
}

@keyframes slowDriftFour {
  0% { transform:translate3d(-7vw,12vh,0) rotate(-22deg); }
  50% { transform:translate3d(20vw,-5vh,0) rotate(45deg); }
  100% { transform:translate3d(49vw,-18vh,0) rotate(117deg); }
}

@keyframes slowDriftFive {
  0% { transform:translate3d(7vw,5vh,0) rotate(14deg); }
  50% { transform:translate3d(-22vw,-17vh,0) rotate(-48deg); }
  100% { transform:translate3d(-51vw,-5vh,0) rotate(-119deg); }
}

.baseball-cursor {
  --cursor-scale: 1;
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  border-radius:50%;
  background:url('../../assets/baseball-cutout.png') center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.34));
  will-change: transform;
  transition: opacity .15s ease,filter .15s ease;
}

.baseball-cursor::after {
  content:none;
}

.baseball-cursor.is-visible { opacity: .96; }
.baseball-cursor.is-interactive { --cursor-scale: .82; filter:drop-shadow(0 1px 2px rgba(0,0,0,.38)) brightness(1.08); }

@media (pointer:fine) {
  html.sports-cursor-active,
  html.sports-cursor-active * { cursor: none !important; }
}

@media (pointer:coarse) {
  .baseball-cursor { display: none !important; }
}

@media (max-width:600px) {
  html, body { overflow-x: clip !important; }
  body .diamond { width:68vw !important; max-width:68vw !important; }
  .baseball-atmosphere { opacity: .7; }
  .floating-baseball { --size: 26px; }
}

@media (prefers-reduced-motion:reduce) {
  .baseball-atmosphere { display: none !important; }
  .hero-motion img { animation: none !important; }
}