/* MECHANIZM — sygil pocięty na obracające się pierścienie.

   Jeden wygląd dla dwóch miejsc w grze: logo na splashu i czytnik pod palcem
   w kalibracji. Tam mechanizm rozkręca się sam, tu rozkręca go trzymanie
   palca — ale to ten sam przedmiot, więc ma być z tych samych części.

   Każda warstwa to KOPIA tej samej grafiki z maską na swoim pasie promienia.
   Statyczna płyta nie istnieje: całość jest złożona z ruchomych plastrów,
   bo obracająca się w całości grafika czyta się jak kręcący się obrazek,
   a nie jak działający mechanizm.

   ŻADNEGO `mix-blend-mode`: grafika przeszła przez `narzedzia/klucz_alfy.js`,
   który wypalił krycie z jasności pikseli, więc czarne tło nie istnieje.
   Łatanie tego trybem `screen` trzy razy skończyło się artefaktem —
   raz czarnym kwadratem, raz jaśniejszym kwadratem nad aurą, raz ciemnym
   dyskiem dookoła obręczy. Alfa w pliku kończy temat.

   `closest-side` w maskach jest konieczne: domyślnie promień gradientu liczy
   się do NAROŻNIKA kwadratu i pasy wypadają poza obwód sygilu.
   Pasy sąsiadów lekko NACHODZĄ na siebie — to te same piksele, więc zakładka
   wygładza szew, a szpara zrobiłaby ciemną obwódkę. */

.mech{position:relative;width:100%;aspect-ratio:1}
.mech-warstwa,.mech-prad{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}

.mech-warstwa.kamien{
  -webkit-mask-image:radial-gradient(closest-side,#000 22%,transparent 29%);
  mask-image:radial-gradient(closest-side,#000 22%,transparent 29%);
}
.mech-warstwa.piersc{
  -webkit-mask-image:radial-gradient(closest-side,transparent 21%,#000 27%,#000 37%,transparent 43%);
  mask-image:radial-gradient(closest-side,transparent 21%,#000 27%,#000 37%,transparent 43%);
}
.mech-warstwa.trojkaty{
  -webkit-mask-image:radial-gradient(closest-side,transparent 35%,#000 41%,#000 55%,transparent 60%);
  mask-image:radial-gradient(closest-side,transparent 35%,#000 41%,#000 55%,transparent 60%);
}
.mech-warstwa.runy{
  -webkit-mask-image:radial-gradient(closest-side,transparent 53%,#000 58%,#000 63%,transparent 69%);
  mask-image:radial-gradient(closest-side,transparent 53%,#000 58%,#000 63%,transparent 69%);
}
/* obręcz z filamentami — pędzi najszybciej i to ona robi wrażenie prądu */
.mech-prad{
  -webkit-mask-image:radial-gradient(closest-side,transparent 68%,#000 79%,#000 96%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 68%,#000 79%,#000 96%,transparent 100%);
}
.mech-prad.slaby{opacity:.55}

/* poświata pod mechanizmem — rośnie razem z mocą */
.mech-aura{
  position:absolute;inset:-38%;pointer-events:none;
  background:radial-gradient(circle,rgba(94,231,255,.30) 0%,rgba(94,231,255,.10) 38%,transparent 68%);
}

/* POWÓD wyjątku: fala uderzeniowa i wyrzut energii to dekoracje o
   NIEWIDOCZNYM stanie spoczynkowym — zamrożone renderowanie nie może przez
   nie niczego ukryć, najwyżej zostawi błysk. Oś czasu ma bezpiecznik. */
.mech-fala{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid rgba(147,240,255,.9);
  box-shadow:0 0 22px rgba(94,231,255,.55),inset 0 0 22px rgba(94,231,255,.35);
}
.mech-strzal{
  position:absolute;inset:31%;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid rgba(178,244,255,.9);
  box-shadow:0 0 18px rgba(94,231,255,.6),inset 0 0 14px rgba(94,231,255,.4);
}