/* Sphere's name in a public page's header: /, /team, /privacy and /docs link this one file and /brand/name.js
   (owner, 27.10.2026: «щоб в одному місці поміняв і воно візде помінялось»). A page keeps only the word, its
   slot's room and height (`--H`), and may set the word's face and size (`--name-font`, `--name-size`).

   Closed, the name is Sphere's mark: «С» as a true arc, open on the right, and four amber balls on the arc's
   own circle, smaller to bigger, one for each letter of «фера». Open, the arc is the word's «С»: drawn the
   height and weight of the face's letter and open as far («Дуга, але підігнана під шрифт»). The script draws
   the arc, the balls and the rings of the shock wave, measures them and plays the films. */
.pill-mark {
  position:relative; display:block; flex:none; height:var(--H); width:var(--w-open, 120px); border-radius:999px;
  text-decoration:none; color:var(--on);
}
.pill-mark:hover { text-decoration:none; }
.pill-mark .word {
  position:absolute; top:0; bottom:0; left:0;
  display:flex; align-items:center; white-space:nowrap;
  font-family:var(--name-font, var(--font-display)); font-weight:800; font-size:var(--name-size, 28px);
  letter-spacing:-.03em; line-height:1;
}
.pill-mark .c, .pill-mark .rest, .pill-mark .l { display:inline-block; }
.pill-mark .l, .pill-mark .balls i { will-change:transform, opacity; }
/* the typed «С» keeps its room and is what a reader hears; once the script has drawn the arc, the arc is what shows */
.pill-mark.is-drawn .c { color:transparent; }
.pill-mark .arc { position:absolute; display:block; overflow:visible; pointer-events:none; }
.pill-mark .arc circle { transform-box:view-box; transform-origin:50px 50px; }
.pill-mark .balls i { position:absolute; border-radius:50%; background:var(--amber, #E8A33D); opacity:0; pointer-events:none; }
.pill-mark .wave i { position:absolute; border-radius:50%; border:2px solid currentColor; opacity:0; pointer-events:none; }
.pill-mark.is-closed { width:max(var(--w-closed, 40px), 44px); }
/* closed, the word's box keeps the open word's width: it must not take a tap meant for the button beside it */
.pill-mark.is-closed .word { pointer-events:none; }