/* ── PULSE V2.7 — motifs.css · THE VARIETY SYSTEM (paint + motion for
   motifs.js instruments). Load AFTER base.css, only on pages that carry
   an <svg data-motif> host: download · pricing · compatibility · help ·
   guides · compare · about. ── */

/* Motif svgs stay LTR artifacts inside RTL copy (mirrors base.css §19) */
[dir="rtl"] .motif-svg { direction: ltr; }

/* ── 20. MOTIF SYSTEM — the variety instruments (motifs.js builds the
   geometry; these classes paint and animate it). One parameterized
   engine, eight distinct instruments: packets · equalize · radar ·
   sonar · constellation · converge · waypoints · channels. Every
   ambient loop is html.anim-gated and starts only once the svg is
   .motif-in (scroll into view). Reduced motion: §18 zeroes durations
   and motion.js never arms html.anim — the static geometry stands. ── */
.motif-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* shared paint */
.m-track { stroke: var(--viz-track); stroke-width: 1.5; }

/* packets (download) */
.m-basefill {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
  filter: drop-shadow(var(--glow-soft));
}
.m-pkt { fill: var(--accent); opacity: 0.55; }
.m-blip-tick { stroke: var(--accent-bright); stroke-width: 2; stroke-linecap: round; opacity: 0; }

/* equalize (pricing seam) */
.m-eq { fill: var(--accent); opacity: 0.5; transform-box: fill-box; }
.m-eq--a { transform-origin: 50% 100%; }
.m-eq--b { transform-origin: 50% 0%; fill: var(--mint); opacity: 0.35; }
.m-comet { fill: var(--accent-bright); opacity: 0; filter: drop-shadow(var(--glow-trace)); }

/* radar (compatibility) */
.m-grid-dot { fill: var(--text-4); opacity: 0.5; }
.m-beam { fill: var(--accent); opacity: 0; }

/* sonar (help) */
.m-ring-static { fill: none; stroke: var(--line-3); stroke-width: 1; }
.m-ring-static--2 { stroke: var(--line-2); }
.m-core { fill: var(--accent); filter: drop-shadow(var(--glow-soft)); }
.m-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.04);
}
.m-echo { fill: var(--text-3); opacity: 0.5; }

/* constellation (about hero) */
.m-link { stroke: var(--line-2); stroke-width: 1; }
.m-star { fill: var(--text-3); opacity: 0.6; transform-box: fill-box; transform-origin: center; }
.m-star--hot { fill: var(--accent-bright); opacity: 0.85; filter: drop-shadow(var(--glow-soft)); }

/* converge (compare) */
.m-wave {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-wave--dim { stroke: var(--text-4); }
.m-wave-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
  filter: blur(4px);
}
.m-wave-pulse {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(var(--glow-trace));
}

/* waypoints (guides) */
.m-route { fill: none; stroke: var(--line-3); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.m-node { fill: var(--canvas); stroke: var(--accent-line); stroke-width: 1.5; }
.m-node-halo { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-traveler { fill: var(--accent-bright); opacity: 0; filter: drop-shadow(var(--glow-trace)); offset-rotate: 0deg; }

/* channels (about sensor feed) */
.m-chan { fill: var(--accent); opacity: 0.45; transform-box: fill-box; transform-origin: 0% 50%; }
.m-chan-dot { fill: var(--accent-bright); opacity: 0.7; }

/* converge draw-on rides the trace timing; failsafe matches §11 */
html.anim .m-wave,
html.anim .m-wave-glow {
  transition: stroke-dashoffset var(--dur-trace) var(--ease-glide);
}
html.anim:not(.motif-ok) .m-wave,
html.anim:not(.motif-ok) .m-wave-glow {
  animation: trace-failsafe 0ms linear 3200ms forwards;
}
html.anim .motif-in .m-wave-pulse {
  opacity: 1;
  transition: opacity 600ms ease 1900ms;
  animation: m-flow var(--m-d, 8s) linear 2s infinite;
}
@keyframes m-flow { to { stroke-dashoffset: var(--m-flow, -1200); } }

/* ambient loops — organic per-element timing via custom properties */
html.anim .motif-in .m-pkt { animation: m-fall var(--m-d, 4s) linear var(--m-dl, 0s) infinite; }
@keyframes m-fall {
  0%   { transform: translate(var(--m-x0, 0px), var(--m-y0, -40px)); opacity: 0; }
  10%  { opacity: 0.8; }
  88%  { opacity: 0.7; }
  100% { transform: translate(var(--m-x1, 0px), var(--m-y1, 40px)); opacity: 0; }
}
html.anim .motif-in .m-basefill { animation: m-breathe-o 5.2s ease-in-out infinite; }
@keyframes m-breathe-o { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.66; } }
html.anim .motif-in .m-blip-tick { animation: m-blip var(--m-d, 3s) ease-out var(--m-dl, 0s) infinite; }
@keyframes m-blip { 0% { opacity: 0; } 6% { opacity: 0.9; } 28% { opacity: 0; } 100% { opacity: 0; } }
html.anim .motif-in .m-eq { animation: m-eqs var(--m-d, 3s) ease-in-out var(--m-dl, 0s) infinite alternate; }
@keyframes m-eqs { from { transform: scaleY(1); } to { transform: scaleY(var(--m-s, 0.5)); } }
html.anim .motif-in .m-comet { animation: m-glide var(--m-d, 7s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
@keyframes m-glide {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(var(--m-x1, 640px)); opacity: 0; }
}
html.anim .motif-in .m-beam { animation: m-sweep var(--m-d, 6s) linear infinite; }
@keyframes m-sweep {
  0%   { transform: translateX(0); opacity: 0; }
  4%   { opacity: 0.7; }
  96%  { opacity: 0.7; }
  100% { transform: translateX(var(--m-x1, 640px)); opacity: 0; }
}
html.anim .motif-in .m-grid-dot { animation: m-scanblip 6.4s linear var(--m-dl, 0s) infinite; }
@keyframes m-scanblip { 0% { opacity: 1; } 10% { opacity: 0.35; } 100% { opacity: 0.35; } }
html.anim .motif-in .m-ring { animation: m-ping var(--m-d, 6s) cubic-bezier(0.2, 0.6, 0.4, 1) var(--m-dl, 0s) infinite; }
@keyframes m-ping {
  0%   { transform: scale(0.05); opacity: 0; }
  6%   { opacity: 0.6; }
  40%  { opacity: 0.3; }
  62%  { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
html.anim .motif-in .m-echo { animation: m-echof var(--m-d, 6s) ease-out var(--m-dl, 0s) infinite; }
@keyframes m-echof { 0% { opacity: 1; } 4% { opacity: 1; } 22% { opacity: 0.35; } 100% { opacity: 0.35; } }
html.anim .motif-in .m-star { animation: m-twinkle var(--m-d, 4s) ease-in-out var(--m-dl, 0s) infinite alternate; }
@keyframes m-twinkle {
  from { opacity: 0.35; transform: scale(0.85); }
  to   { opacity: 0.95; transform: scale(1.2); }
}
html.anim .motif-in .m-driftg { animation: m-drift 18s ease-in-out infinite alternate; }
@keyframes m-drift {
  from { transform: translate(-1.2%, 1.5%); }
  to   { transform: translate(1.2%, -1.5%); }
}
html.anim .motif-in .m-node-halo { animation: m-nodeping var(--m-d, 6.8s) ease-out var(--m-dl, 0s) infinite; }
@keyframes m-nodeping {
  0%   { transform: scale(0.3); opacity: 0.8; }
  18%  { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
html.anim .motif-in .m-node { animation: m-nodeon var(--m-d, 6.8s) ease-out var(--m-dl, 0s) infinite; }
@keyframes m-nodeon {
  0%   { fill: var(--accent); }
  16%  { fill: var(--canvas); }
  100% { fill: var(--canvas); }
}
@supports (offset-path: path("M0 0 L4 4")) {
  html.anim .motif-in .m-traveler {
    opacity: 1;
    animation: m-travel var(--m-d, 6.8s) ease-in-out infinite;
  }
}
@keyframes m-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
html.anim .motif-in .m-chan { animation: m-chans var(--m-d, 4s) ease-in-out var(--m-dl, 0s) infinite alternate; }
@keyframes m-chans { from { transform: scaleX(1); } to { transform: scaleX(var(--m-s, 0.4)); } }
html.anim .motif-in .m-chan-dot { animation: m-breathe-o var(--m-d, 4s) ease-in-out var(--m-dl, 0s) infinite; }