.uoph-sonar-pulse {
    --uoph-sonar-size: 46px;
    --uoph-sonar-color: 255 255 255;
    --uoph-sonar-contrast-color: 0 0 0;
    --uoph-sonar-unit: calc(var(--uoph-sonar-size) / 46);
}

.uoph-sonar-pulse__wave,
.uoph-sonar-pulse__heartbeat {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.uoph-sonar-pulse__wave {
    border: calc(var(--uoph-sonar-unit) * 3) solid rgb(var(--uoph-sonar-color) / 98%);
    opacity: 0;
    filter: drop-shadow(0 0 var(--uoph-sonar-unit) rgb(var(--uoph-sonar-contrast-color) / 72%));
    animation: uoph-sonar-pulse-wave 9.6s ease-out 1s infinite;
}

.uoph-sonar-pulse__wave:nth-child(2) {
    animation-delay: 3.4s;
}

.uoph-sonar-pulse__wave:nth-child(3) {
    animation-delay: 5.8s;
}

.uoph-sonar-pulse__wave:nth-child(4) {
    animation-delay: 8.2s;
}

.uoph-sonar-pulse__heartbeat {
    border: calc(var(--uoph-sonar-unit) * 3) solid rgb(var(--uoph-sonar-color));
    box-shadow: 0 0 0 var(--uoph-sonar-unit) rgb(var(--uoph-sonar-contrast-color) / 30%);
    opacity: 1;
    animation: uoph-sonar-pulse-heartbeat 2.4s ease-in-out 1s infinite;
}

.uoph-sonar-pulse__wave,
.uoph-sonar-pulse__heartbeat {
    animation-play-state: paused;
}

@keyframes uoph-sonar-pulse-wave {
    0% { border-width: calc(var(--uoph-sonar-unit) * 3); opacity: 0; transform: scale(0.92); }
    6% { border-width: calc(var(--uoph-sonar-unit) * 3); opacity: 0.92; }
    38% { border-width: calc(var(--uoph-sonar-unit) * 2); opacity: 0.52; transform: scale(1.32); }
    58% { border-width: var(--uoph-sonar-unit); opacity: 0; transform: scale(1.5); }
    100% { border-width: var(--uoph-sonar-unit); opacity: 0; transform: scale(1.5); }
}

@keyframes uoph-sonar-pulse-heartbeat {
    0%, 45%, 100% {
        box-shadow: 0 0 0 var(--uoph-sonar-unit) rgb(var(--uoph-sonar-contrast-color) / 30%);
        transform: scale(1);
    }
    20% {
        box-shadow:
            0 0 0 var(--uoph-sonar-unit) rgb(var(--uoph-sonar-contrast-color) / 42%),
            0 0 calc(var(--uoph-sonar-unit) * 14) rgb(var(--uoph-sonar-color) / 72%);
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .uoph-sonar-pulse__wave,
    .uoph-sonar-pulse__heartbeat {
        animation: none !important;
    }
}