.hero-art{perspective:1000px}
.hero-art .hero-ball{position:relative;z-index:2;display:block;width:min(370px,80%);aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 25px 28px #00102c99);animation:ball-bob 4s ease-in-out infinite}
.hero-art .ball-spin{position:absolute;inset:0;border-radius:50%;overflow:hidden;animation:ball-turn 9s linear infinite}
.hero-art .ball-spin .ball-panels{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;filter:none}
.hero-art .ball-spin .ball-crest{position:absolute;left:50%;top:50%;width:29%;height:29%;max-height:none;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 2px 4px #00102c55);background:#fff;border:5px solid #f2bf49;border-radius:50%;padding:3px;box-shadow:0 0 0 4px #0c244f}
.hero-art .hero-ball:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 31% 24%,#ffffff9c 0%,#ffffff30 18%,transparent 42%),radial-gradient(circle at 44% 33%,transparent 40%,#061b4330 72%,#061b4388 100%);box-shadow:inset -20px -17px 35px #061b4377,inset 9px 8px 18px #ffffff85}
@keyframes ball-turn{to{transform:rotate(360deg)}}
@keyframes ball-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:850px){.hero-art .hero-ball{width:250px;max-width:80%}}
@media(max-width:570px){.hero-art .hero-ball{width:200px}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-ball,.hero-art .ball-spin{animation:none}}