/* =========================================================
   Triangle glyph animations — Nanosoft
   Link this AFTER css/style.css.
   Glyphs live INSIDE each triangle's own <svg viewBox> (see
   patch-snippets.txt) so they scale/crop together with the
   triangle itself. No positioning rules needed here anymore —
   that's all inline via <g transform="..."> per glyph.
   ========================================================= */

.cad-draw {
	fill: none;
	stroke: rgba(255,255,255,.85);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
	animation: cadDraw 6s ease-in-out infinite;
}
.cad-dot { fill: rgba(255,255,255,.9); stroke: none; }

@keyframes cadDraw {
	0%   { stroke-dashoffset: var(--len); opacity: 0; }
	8%   { opacity: 1; }
	55%  { stroke-dashoffset: 0; opacity: 1; }
	80%  { stroke-dashoffset: 0; opacity: 1; }
	100% { stroke-dashoffset: calc(var(--len) * -1); opacity: 0; }
}

/* .cad-spin: apply to an INNER <g> only — never the same <g> that
   also carries a translate()/scale() positioning transform, or the
   animation will overwrite that positioning. Set transform-origin
   inline per glyph (it's in that glyph's own local 0-100 space). */
@keyframes cadSpin { to { transform: rotate(360deg); } }
.cad-spin { animation: cadSpin 22s linear infinite; }

@keyframes cadPulse {
	0%, 100% { r: 3.2; opacity: .6; }
	50%      { r: 5;   opacity: 1; }
}
.cad-pulse { animation: cadPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.cad-draw  { animation: none; stroke-dashoffset: 0; opacity: .55; }
	.cad-spin  { animation: none; }
	.cad-pulse { animation: none; }
}