/* number of small circles */
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
@property --i {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}
img {
  --r: 36px; /* control the small circles radius and the main size */
  --f: 2; /* control the scale factor, between 1.2 and 2 you get nice result */
  --c: #1a1a1b;
  width: calc(var(--r) * (1 + 1 / tan(180deg / 15)));
  aspect-ratio: 1;
  border-radius: 50%;
  --_m:
    radial-gradient(var(--c) calc(72% - var(--r)/2 - var(--i,0px)),#0000 0),
    radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.0666666667 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.0666666667 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.1333333333 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.1333333333 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.2 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.2 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.2666666667 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.2666666667 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.3333333333 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.3333333333 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.4 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.4 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.4666666667 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.4666666667 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.5333333333 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.5333333333 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.6 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.6 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.6666666667 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.6666666667 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.7333333333 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.7333333333 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.8 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.8 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.8666666667 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.8666666667 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 0.9333333333 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 0.9333333333 + var(--a, 0deg)))/var(--r) var(--r), radial-gradient(var(--c) 70%, rgba(0, 0, 0, 0) 72%) no-repeat calc(50% + (50% - var(--i, 0px)) * cos(360deg * 1 + var(--a, 0deg))) calc(50% + (50% - var(--i, 0px)) * sin(360deg * 1 + var(--a, 0deg)))/var(--r) var(--r);
  -webkit-mask: linear-gradient(#000 0 0) top/100% 50% no-repeat, var(--_m);
  background: var(--_m);
  --_a: rotate linear infinite;
  animation: var(--_a) 10s, var(--_a) 16s reverse;
  animation-composition: add;
  cursor: pointer;
  transition: --i 0.4s, scale 0.4s;
  mix-blend-mode:difference;

}

img:hover {
  --i: calc(var(--r)/var(--f));
  scale: calc((1 + 1 / tan(180deg / 15)) / (1 - 2 / var(--f) + 1 / tan(180deg / 15)));
  animation-play-state: running, paused;
  cursor: pointer;
}

@keyframes rotate {
  to {
    --a:360deg;
  }
}


/*# sourceMappingURL=ava.css.map */