/* A brief flash of light sweeps across each primary call or form action every three seconds. */
:is(a.button[href^="tel:"], .lead-actions > .button) {
    position: relative;
    isolation: isolate;
}

:is(a.button[href^="tel:"], .lead-actions > .button)::after,
a.mobile-call[href^="tel:"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background-image: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 25%) 44%, rgb(255 255 255 / 85%) 50%, rgb(255 255 255 / 25%) 56%, transparent 62%);
    background-size: 300% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    animation: cta-light-sweep 3s ease-in-out infinite;
}

/* Follow the raised mobile button's rounded corners. */
a.mobile-call[href^="tel:"]::after {
    border-radius: inherit;
}

/* Let hover and keyboard focus provide their own, steady feedback. */
:is(a.button[href^="tel:"], .lead-actions > .button):is(:hover, :focus-visible)::after,
a.mobile-call[href^="tel:"]:is(:hover, :focus-visible)::after {
    animation: none;
    opacity: 0;
}

@keyframes cta-light-sweep {
    0%, 70% { opacity: 0; background-position: 100% 0; }
    73% { opacity: 1; background-position: 100% 0; }
    94% { opacity: 1; background-position: 0% 0; }
    95%, 100% { opacity: 0; background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
    :is(a.button[href^="tel:"], .lead-actions > .button)::after,
    a.mobile-call[href^="tel:"]::after {
        animation: none;
        opacity: 0;
    }
}

@media print {
    :is(a.button[href^="tel:"], .lead-actions > .button)::after,
    a.mobile-call[href^="tel:"]::after {
        display: none;
    }
}