/*
 * Global, one-shot guidance effect used to draw attention inside a form field.
 * Alternate between the --a and --b variants to replay it on the same element.
 */
.ui-guidance-pulse {
    --ui-guidance-color-rgb: 132, 204, 22;
    --ui-guidance-duration: 1s;
    animation-duration: var(--ui-guidance-duration);
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.ui-guidance-pulse--a {
    animation-name: ui-guidance-pulse-a;
}

.ui-guidance-pulse--b {
    animation-name: ui-guidance-pulse-b;
}

@keyframes ui-guidance-pulse-a {
    0%, 100% {
        box-shadow: inset 0 0 0 999px rgba(var(--ui-guidance-color-rgb), 0);
    }

    50% {
        box-shadow: inset 0 0 0 999px rgba(var(--ui-guidance-color-rgb), 0.32);
    }
}

@keyframes ui-guidance-pulse-b {
    0%, 100% {
        box-shadow: inset 0 0 0 999px rgba(var(--ui-guidance-color-rgb), 0);
    }

    50% {
        box-shadow: inset 0 0 0 999px rgba(var(--ui-guidance-color-rgb), 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-guidance-pulse {
        animation-duration: 1ms;
    }
}