/* ============================================================
   HYGENTRA MOTION — shared choreography styles
   Companion to motion.js. Namespaced (.m-*, .dotmatrix) so it
   can sit alongside any page stylesheet.
   ============================================================ */

/* ---- dot-matrix: the agent-at-work shimmer ----------------- */

.dotmatrix {
  display: grid;
  grid-template-columns: repeat(12, 2px);
  grid-auto-rows: 2px;
  gap: 1.5px;
  filter: drop-shadow(0 0 3px rgba(54, 255, 171, 0.45));
}

.dotmatrix i {
  width: 2px;
  height: 2px;
  border-radius: 0.5px;
  background: var(--mint, #36ffab);
  opacity: var(--o, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  .dotmatrix i {
    animation: m-dot-twinkle 1.1s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }
}

@keyframes m-dot-twinkle {
  0%,
  100% {
    opacity: calc(var(--o, 0.4) * 0.25);
  }
  50% {
    opacity: var(--o, 0.4);
  }
}

/* ---- thinker line ------------------------------------------ */

.m-think {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 18px;
}

.m-think.on {
  display: inline-flex;
}

.m-status {
  color: #7f7470;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.22s ease;
}

/* ---- typing caret ------------------------------------------ */

.m-caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--mint, #36ffab);
}

@media (prefers-reduced-motion: no-preference) {
  .m-caret {
    animation: m-caret-blink 0.9s steps(1) infinite;
  }
}

@keyframes m-caret-blink {
  50% {
    opacity: 0;
  }
}

/* ---- svg path draw ----------------------------------------- */

.m-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.m-path.m-drawn {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .m-path {
    stroke-dashoffset: 0;
  }
  .m-path.m-drawn {
    transition: none;
  }
}