/* ── Color ──────────────────────────────────────────────────────────────────
   Override --pulsing-circle-color on any parent to change the dot color.
   Defaults to wave blue.                                                     */
:root {
    --pulsing-circle-color: var(--wp--preset--color--wave, #5995ED);
}

/* ── Keyframe ───────────────────────────────────────────────────────────────
   Ring expands from 1× to 3.5× and fades out — two rings offset by half
   a cycle give the continuous sonar sweep.                                   */
@keyframes pulsing-circle-sonar {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }
    100% {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* ── Block shell ─────────────────────────────────────────────────────────── */
.pulsing-circle-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Enough room for the rings to breathe without clipping */
    padding: 0.35em;
    line-height: 1;
}

/* ── Dot ─────────────────────────────────────────────────────────────────── */
.pulsing-circle-block__dot {
    position: relative;
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--pulsing-circle-color);
    flex-shrink: 0;
}

/* ── Sonar rings (two pseudo-elements, staggered) ───────────────────────── */
.pulsing-circle-block__dot::before,
.pulsing-circle-block__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--pulsing-circle-color);
    transform-origin: center;
    animation: pulsing-circle-sonar 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

.pulsing-circle-block__dot::after {
    animation-delay: 1.2s;
}