.seismic-marker-container { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; } .seismic-pulse-ring { position: absolute; border-radius: 50%; border: 2px solid; opacity: 0; animation: seismic-pulse 2.5s ease-out infinite; } .seismic-pulse-ring-inner { animation-delay: 0.8s; } .seismic-fill { position: absolute; border-radius: 50%; animation: seismic-breathe 2s ease-in-out infinite; } .seismic-center-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 1; box-shadow: 0 0 6px currentColor; } .seismic-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; text-align: center; font-family: 'Fira Code Variable', 'Noto Sans KR Variable', monospace; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); pointer-events: none; } .seismic-magnitude { display: block; font-size: 13px; font-weight: 800; } .seismic-place { display: block; font-size: 9px; opacity: 0.8; } @keyframes seismic-pulse { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 0; } } @keyframes seismic-breathe { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 0.8; transform: scale(1); } }