.highlight-flash {
    position: relative;
    animation: highlightPulse var(--highlight-duration, 4s) ease-out;
}

    .highlight-flash::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -18px;
        width: 100%;
        height: 12px;
        /* TWO WAVES stacked */
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'>\
<path d='M0 3 Q 15 0 30 3 T 60 3 T 90 3 T 120 3' fill='none' stroke='%23ffcc00' stroke-width='2'/>\
</svg>"), url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'>\
<path d='M0 3 Q 15 0 30 3 T 60 3 T 90 3 T 120 3' fill='none' stroke='%23ffcc00' stroke-width='2'/>\
</svg>");
        background-repeat: repeat-x;
        background-position: top, bottom;
        animation: arrowFade 2s ease-in-out infinite alternate;
    }

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0px 8px rgba(255, 215, 0, 0.9);
        background-color: #fff9c4;
    }

    50% {
        box-shadow: 0 0 15px 12px rgba(255, 215, 0, 0.6);
        background-color: #fff3a0;
    }

    100% {
        box-shadow: none;
        background-color: inherit;
    }
}
@keyframes arrowFade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}