.reaction-effect { position: relative; }
.reaction-effect > span.reaction-burst { display: block; }
.reaction-burst { --reaction-color: var(--love); --reaction-accent: #f194aa; position: absolute; top: 50%; left: 50%; width: 0; height: 0; color: var(--reaction-color); pointer-events: none; }
.reaction-burst--star { --reaction-color: #d99824; --reaction-accent: #f2c761; font-size: 24px; }
.reaction-burst::before, .reaction-burst::after { content: ''; position: absolute; border-radius: 50%; opacity: 0; }
.reaction-burst::before { width: 1.3em; height: 1.3em; left: -.65em; top: -.65em; border: 2px solid currentColor; }
.reaction-burst::after { width: .24em; height: .24em; left: -.12em; top: -.12em; background: transparent; box-shadow: 0 -.8em 0 var(--reaction-color), .57em -.57em 0 var(--reaction-accent), .8em 0 0 var(--reaction-color), .57em .57em 0 var(--reaction-accent), 0 .8em 0 var(--reaction-color), -.57em .57em 0 var(--reaction-accent), -.8em 0 0 var(--reaction-color), -.57em -.57em 0 var(--reaction-accent); }
@media (prefers-reduced-motion: no-preference) {
    .reaction-effect { animation: reaction-pop .42s cubic-bezier(.2, .8, .3, 1); }
    .reaction-burst::before { animation: reaction-ring .5s ease-out; }
    .reaction-burst::after { animation: reaction-sparks .7s cubic-bezier(.15, .75, .3, 1); }
}
@keyframes reaction-pop { 0% { transform: scale(.8); } 35% { transform: scale(1.25); } 70% { transform: scale(.95); } 100% { transform: none; } }
@keyframes reaction-ring { 0% { opacity: .65; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes reaction-sparks { 0% { opacity: 0; transform: rotate(-10deg) scale(.5); } 20% { opacity: 1; } 65% { opacity: .8; } 100% { opacity: 0; transform: rotate(12deg) scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .reaction-effect > span.reaction-burst { display: none; } }