/* ========================================= Lapis Interactive — Contact Ping (Sonar) Purpose: soft expanding ring + breathing dot (default) Scope: only when Depends on: --accent token (theme color) ========================================= */ .contact-page .map-static::before{ content:""; position:absolute; top:8%; left:39%; transform: translate(-50%, -50%) scale(0.25); width:12px; height:12px; border-radius:50%; pointer-events:none; z-index:0; background: radial-gradient(circle, transparent 35%, color-mix(in srgb,var(--accent),white 20%) 40%, color-mix(in srgb,var(--accent),transparent 90%) 60%, transparent 65%); opacity:.45; animation: sonar-expand 2.6s ease-out infinite; } .contact-page .map-static::after{ content:""; position:absolute; top:8%; left:39%; width:12px; height:12px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:1; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); box-shadow: 0 0 24px color-mix(in srgb,var(--accent),white 30%); animation: sonar-dot 2.6s ease-in-out infinite; } /* Keyframes */ @keyframes sonar-expand{ 0% { transform:translate(-50%,-50%) scale(0.30); opacity:.45 } 80% { transform:translate(-50%,-50%) scale(3.00); opacity:.08 } 100% { transform:translate(-50%,-50%) scale(3.20); opacity:0 } } @keyframes sonar-dot{ 0%,100% { transform:translate(-50%,-50%) scale(1); filter:brightness(1) } 50% { transform:translate(-50%,-50%) scale(1.08); filter:brightness(1.15) } } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .contact-page .map-static::before, .contact-page .map-static::after{ animation:none !important; } }