/* assets/css/bilibili-reactions.css */
/* Animaciones para reacciones flotantes estilo Bilibili / TikTok Live */

.floating-reaction {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    pointer-events: none;
    z-index: 1000;
    opacity: 1;
    animation: floatUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    will-change: transform, opacity;
}

@keyframes floatUp {
    0% {
        transform: translate(-50%, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    15% {
        transform: translate(calc(-50% + (var(--rand-x) * 0.2)), -30px) scale(1.5) rotate(calc(var(--rand-x) * 0.5deg));
        opacity: 1;
    }
    50% {
        transform: translate(calc(-50% + var(--rand-x)), -80px) scale(1.1) rotate(calc(var(--rand-x) * 1deg));
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + (var(--rand-x) * 1.5)), -160px) scale(0.8) rotate(calc(var(--rand-x) * 1.5deg));
        opacity: 0;
    }
}

/* Para el Super Like o Combo (Múltiples elementos) */
.reaction-burst-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}