/* BotUI · dot matrix — the CSS renderer.
 *
 * The glyph is a mask of the SAME path data the SVG renderer draws, so the two
 * cannot disagree about the silhouette — and a five-point star is expressible at
 * all only because a mask is real geometry rather than a border-radius.
 *
 * Layout numbers (track sizes, the dot's share of its cell) are written onto the
 * host as custom properties by the runtime, in px, from the explicit `size`.
 * Nothing here measures the DOM.
 */
.botui-dot-matrix {
  display: grid;
  place-content: center;
  /* explicit tracks, never 1fr: 1fr divides the box between tracks and ignores
     the field's own pitch, so the layout drifts away from the SVG one */
  grid-template-columns: repeat(var(--botui-cols, 7), 1fr);
  color: inherit;
  contain: layout paint;
}

.botui-dot-matrix > i {
  display: block;
  background: currentColor;
  transform-origin: center;
  -webkit-mask: var(--botui-mask) center / calc(var(--botui-fill, 1) * 100%) no-repeat;
  mask: var(--botui-mask) center / calc(var(--botui-fill, 1) * 100%) no-repeat;
  /* `scale` is animated and `transform` stays free for the glyph's own rotation,
     so the two compose instead of overwriting each other */
  scale: var(--botui-s-min, 0.5);
  animation: var(--botui-anim, botui-dm-spiral) var(--botui-cycle, 1500ms) linear infinite;
  /* a NEGATIVE delay seeds each cell partway into one shared cycle, so the field
     is already in flight on the first painted frame and every cell runs the
     identical keyframes — the per-cell value is one number */
  animation-delay: calc(var(--botui-o, 0) * var(--botui-seed, -0.95) * var(--botui-cycle, 1500ms));
}

.botui-dot-matrix[data-timing^='steps'] > i {
  animation-timing-function: steps(3, end);
}

/* Reduced motion: no cycle at all. Each dot holds a static level derived from its
 * own traversal position, so the field still reads as a lit matrix — a still
 * gradient, not a frozen frame of the animation. */
@media (prefers-reduced-motion: reduce) {
  .botui-dot-matrix > i {
    animation: none;
    opacity: calc(
      var(--botui-floor, 0.16) +
        (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * calc(1 - var(--botui-o, 0))
    );
    scale: 1;
  }
}

@keyframes botui-dm-spiral{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}8.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}16.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.640);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.640)}24.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.440);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.440)}32.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}40.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}}
@keyframes botui-dm-snake{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}8.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}16.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.640);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.640)}24.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.440);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.440)}32.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}40.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}}
@keyframes botui-dm-columnSnake{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}8.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}16.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.640);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.640)}24.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.440);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.440)}32.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}40.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}}
@keyframes botui-dm-ripple{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}4.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}10.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}17.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.500);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.500)}22.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}}
@keyframes botui-dm-ring{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.160);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.160)}34.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.160);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.160)}}
@keyframes botui-dm-diagonal{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}8.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}16.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.640);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.640)}24.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.440);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.440)}32.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}40.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.080);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.080)}}
@keyframes botui-dm-columns{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.000)}}
@keyframes botui-dm-breathe{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}50.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.240);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.240)}}
@keyframes botui-dm-morph{0.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.180);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.180)}20.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.880);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.880)}45.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 1.000);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 1.000)}62.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.880);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.880)}82.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.180);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.180)}100.00%{opacity:calc(var(--botui-floor, 0.16) + (var(--botui-peak, 1) - var(--botui-floor, 0.16)) * 0.180);scale:calc(var(--botui-s-min, 0.5) + (var(--botui-s, 1.45) - var(--botui-s-min, 0.5)) * 0.180)}}