/* doppler.css — moving source + expanding wavefronts for viz/doppler.js (pure DOM). */

.dp { display: flex; flex-direction: column; gap: 0.85rem; }
.dp-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0b1018, #07090f); }
.dp-waves { position: absolute; inset: 0; pointer-events: none; }
.dp-wave { position: absolute; top: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(56, 189, 248, 0.7); transform: translate(-50%, -50%); }

.dp-src { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: radial-gradient(circle at 34% 30%, #fda4af, #e11d48 62%, #9f1239); box-shadow: 0 0 9px rgba(244, 63, 94, 0.7); }
.dp-ear { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.74rem; font-weight: 700; color: #aebdce; }
.dp-ear-l { left: 6px; color: #7dd3fc; } .dp-ear-r { right: 6px; color: #fcd34d; }
.dp-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; }