.action-cue, .picture-cue {
    --cue-glow-duration: 2600ms;
    --cue-glow-soft: #d8bc78a6;
    --cue-glow-strong: #d8bc78c2;
    --cue-halo-soft: #d8bc784d;
    --cue-halo-strong: #d8bc7880;
}

.action-cue[data-action-cue="true"]:not(:disabled) {
    animation: action-cue-glow var(--cue-glow-duration) ease-in-out infinite;
}

.picture-cue:not([hidden]) {
    animation: picture-cue-glow var(--cue-glow-duration) ease-in-out infinite;
}

/* 첫 그림자가 위에 그려지므로 빛 테두리를 기존 하단 그림자보다 앞에 둔다. */
@keyframes action-cue-glow {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--cue-glow-soft),
                    var(--action-cue-base-shadow, 0 0 0 transparent),
                    0 0 12px 2px var(--cue-halo-soft);
    }
    50% {
        box-shadow: 0 0 0 5px var(--cue-glow-strong),
                    var(--action-cue-base-shadow, 0 0 0 transparent),
                    0 0 24px 6px var(--cue-halo-strong);
    }
}

/* 투명 PNG의 사물 윤곽을 따라 빛을 표시한다. */
@keyframes picture-cue-glow {
    0%, 100% {
        filter: drop-shadow(0 0 3px var(--cue-glow-soft))
                drop-shadow(0 0 6px var(--cue-halo-soft));
    }
    50% {
        filter: drop-shadow(0 0 5px var(--cue-glow-strong))
                drop-shadow(0 0 12px var(--cue-halo-strong));
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-cue[data-action-cue="true"]:not(:disabled) {
        animation: none;
        box-shadow: 0 0 0 3px var(--cue-glow-soft),
                    var(--action-cue-base-shadow, 0 0 0 transparent);
    }

    .picture-cue:not([hidden]) {
        animation: none;
        filter: drop-shadow(0 0 3px var(--cue-glow-soft))
                drop-shadow(0 0 6px var(--cue-halo-soft));
    }
}