/* wave_motion.css — particle wave for viz/wave_motion.js (pure DOM). */

.wm { display: flex; flex-direction: column; gap: 0.85rem; }
.wm-stage { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 180px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.wm-parts { position: absolute; inset: 0; pointer-events: none; }
.wm-p { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 30%, #7dd3fc, #0ea5e9 65%, #075985); box-shadow: 0 0 3px rgba(14, 165, 233, 0.5); }
.wm-parts.wm-long .wm-p { background: radial-gradient(circle at 34% 30%, #fcd34d, #f59e0b 65%, #b45309); box-shadow: 0 0 3px rgba(245, 158, 11, 0.5); }
.wm-arrow { position: absolute; right: 8px; top: 6px; font-size: 0.72rem; color: #8aa0b6; font-style: italic; }
.wm-pmotion { position: absolute; left: 8px; top: 6px; font-size: 0.74rem; font-weight: 700; color: #fcd34d; background: rgba(251, 191, 36, 0.12); padding: 2px 7px; border-radius: 5px; }
.wm-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }

.wm-types { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wm-tlbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.wm-type { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.wm-type:hover { background: rgba(255, 255, 255, 0.09); }
.wm-type.wm-on { color: #07121d; background: #38bdf8; border-color: #38bdf8; }