.art-symbol {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.art-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.art-tennis-ball {
  --ball-x: 76%;
  --ball-y: 62%;
  --ball-scale: 1;
  --ball-spin: 0deg;
  --ball-glow: 0.72;
  left: var(--ball-x);
  top: var(--ball-y);
  z-index: 3;
  width: clamp(1.7rem, 4.4vw, 3.2rem);
  aspect-ratio: 1;
  opacity: var(--ball-opacity, 1);
  filter:
    drop-shadow(0 0 calc(0.85rem + var(--ball-glow) * 0.8rem) rgba(220, 239, 84, var(--ball-glow)))
    drop-shadow(0 0 1.8rem rgba(255, 238, 154, calc(var(--ball-glow) * 0.22)));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(var(--ball-spin)) scale(var(--ball-scale));
  transform-origin: center;
  will-change: left, top, transform, opacity, filter;
}

.art-tennis-ball .ball-seam {
  fill: none;
  stroke: rgba(255, 255, 244, 0.86);
  stroke-linecap: round;
  stroke-width: 6.4;
}

.art-tennis-ball .ball-seam-shadow {
  fill: none;
  stroke: rgba(63, 83, 18, 0.28);
  stroke-linecap: round;
  stroke-width: 9;
}

.art-racket {
  z-index: 2;
  width: clamp(1.65rem, 4.4vw, 3rem);
  height: clamp(5.6rem, 13vw, 9.3rem);
  opacity: 0.72;
  filter: drop-shadow(0 0 1.05rem rgba(174, 219, 255, 0.18));
  transform-origin: center 78%;
}

.art-racket-left {
  left: 18vw;
  bottom: 18svh;
  transform: rotate(-24deg);
}

.art-racket-right {
  right: 15vw;
  bottom: 18svh;
  transform: rotate(21deg);
}

.art-racket .racket-frame,
.art-racket .racket-throat,
.art-racket .racket-handle {
  fill: none;
  stroke: rgba(230, 238, 255, 0.68);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-racket .racket-frame {
  stroke-width: 2.1;
}

.art-racket .racket-throat,
.art-racket .racket-handle {
  stroke-width: 2.6;
}

.art-racket .racket-string {
  stroke: rgba(237, 247, 255, 0.34);
  stroke-width: 0.9;
}

.art-racket .racket-grip {
  stroke: rgba(244, 249, 255, 0.5);
  stroke-width: 1.1;
}

@media (max-width: 700px) {
  .art-tennis-ball {
    width: clamp(1.6rem, 6.4vw, 2.7rem);
  }

  .art-racket-left {
    left: 9vw;
  }

  .art-racket-right {
    right: 8vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-tennis-ball {
    transition: none;
  }
}