/* Colorful like celebration for single article/video floating like buttons. */
.bk-like-celebration-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

.bk-like-celebration-heart {
    --bk-heart-size: 20px;
    --bk-heart-color: #ff3d71;
    --bk-heart-x: 0px;
    --bk-heart-y: -360px;
    --bk-heart-rotate: 90deg;
    position: fixed;
    width: var(--bk-heart-size);
    height: var(--bk-heart-size);
    margin: 0;
    border: 0;
    border-radius: 3px;
    background: var(--bk-heart-color);
    opacity: 0;
    filter: drop-shadow(0 5px 8px rgba(31, 52, 70, .18));
    will-change: transform, opacity;
    animation-name: bk-like-heart-burst;
    animation-duration: 1750ms;
    animation-timing-function: cubic-bezier(.16, .75, .24, 1);
    animation-fill-mode: both;
}

.bk-like-celebration-heart::before,
.bk-like-celebration-heart::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
}

.bk-like-celebration-heart::before {
    top: -50%;
    left: 0;
}

.bk-like-celebration-heart::after {
    top: 0;
    left: 50%;
}

@keyframes bk-like-heart-burst {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.18) rotate(-45deg);
    }
    12% {
        opacity: 1;
    }
    66% {
        opacity: .98;
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--bk-heart-x)), calc(-50% + var(--bk-heart-y)), 0)
                   scale(1.08) rotate(calc(-45deg + var(--bk-heart-rotate)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bk-like-celebration-heart {
        animation-duration: 1000ms;
    }
}