/* Ręka z piłką-okiem: obraz + warstwa SVG (oko patrzy za kursorem) */
.hl-hand{position:relative;aspect-ratio:940/670;width:100%;isolation:isolate}
/* miękka poświata w kolorze tła strony: zasłania linie boiska za ręką i daje obrazkowi tło do „rozjaśnienia” */
.hl-hand::before{content:"";position:absolute;inset:-14% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,13,36,.97) 62%,rgba(4,13,36,0) 100%)}
/* lighten: ciemne tło obrazka (#010714) przyjmuje kolor strony (#040D24), świecąca grafika zostaje bez zmian */
.hl-hand > img{position:absolute;inset:0;z-index:1;width:100%;height:100%;user-select:none;-webkit-user-drag:none;mix-blend-mode:lighten}
/* krawędzie wygaszone do zera dokładnie na brzegu obrazka (closest-side), więc nie ma widocznego prostokąta */
.hl-hand > img,.hl-hand > svg{
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%)}
.hl-hand > svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.hl-hand > .hl-lens{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.hl-hand .fx{mix-blend-mode:screen}
.hl-hand.zooming svg [filter]{filter:none}
/* głęboko w oku krawędzie obrazu są poza ekranem: bez maski (oszczędza pamięć GPU) */
.hl-hand.deep > img,.hl-hand.deep > svg{-webkit-mask-image:none;mask-image:none}
.hl-hand.zooming .num,.hl-hand.zooming .sheen{opacity:0}

/* pierścienie oka: stały obrót, w przeciwnych kierunkach */
.hl-hand .ring{transform-box:view-box;transform-origin:640px 393px}
.hl-hand .r1{animation:hlSpin 18s linear infinite}
.hl-hand .r2{animation:hlSpin 26s linear infinite reverse}
.hl-hand .glow{transform-box:view-box;transform-origin:640px 393px;animation:hlPulse 3.2s ease-in-out infinite}
.hl-hand .beam{animation:hlBeam 4.6s ease-in-out infinite}
.hl-hand .sheen{animation:hlSheen 7s ease-in-out infinite}
.hl-hand .num{font-family:Anybody,sans-serif;font-weight:700;fill:#9DB9FF;opacity:0;animation:hlRise 6s ease-out infinite}
.hl-hand .num.o{fill:#FF9A4D}
@keyframes hlSpin{to{transform:rotate(360deg)}}
@keyframes hlPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hlBeam{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes hlSheen{0%,100%{transform:translate(-260px,-120px)}50%{transform:translate(200px,120px)}}
@keyframes hlRise{0%{opacity:0;transform:translateY(14px)}15%{opacity:.9}70%{opacity:.5}100%{opacity:0;transform:translateY(-46px)}}
@media (prefers-reduced-motion:reduce){
  .hl-hand .r1,.hl-hand .r2,.hl-hand .glow,.hl-hand .beam,.hl-hand .sheen,.hl-hand .num{animation:none}
  .hl-hand .num{opacity:.55}
}