/**
 * Instagram Live-style floating hearts on like.
 */

.like-burst-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 4;
}

.like-burst-heart {
	position: absolute;
	left: var(--like-burst-left, 85%);
	bottom: var(--like-burst-bottom, 18%);
	width: var(--like-burst-size, 24px);
	height: var(--like-burst-size, 24px);
	color: var(--like-burst-color, #ff3040);
	opacity: 0;
	transform: translateX(-50%) scale(0.35);
	animation: like-burst-float var(--like-burst-duration, 2.8s) linear forwards;
	will-change: transform, opacity;
}

.like-burst-heart svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.story-viewer__stage .like-burst-layer {
	z-index: 6;
}

@keyframes like-burst-float {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(0) scale(0.3) rotate(-14deg);
	}

	10% {
		opacity: 1;
		transform: translateX(-50%) translateY(-12px) scale(1) rotate(10deg);
	}

	70% {
		opacity: 0.85;
	}

	100% {
		opacity: 0;
		transform: translateX(calc(-50% + var(--like-burst-drift, 0px))) translateY(-min(42vh, 280px)) scale(0.85)
			rotate(18deg);
	}
}

@keyframes like-burst-float-from-button {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(8px) scale(0.15) rotate(-8deg);
	}

	8% {
		opacity: 1;
		transform: translateX(-50%) translateY(-4px) scale(0.75) rotate(6deg);
	}

	20% {
		opacity: 1;
		transform: translateX(-50%) translateY(-28px) scale(1) rotate(10deg);
	}

	70% {
		opacity: 0.85;
	}

	100% {
		opacity: 0;
		transform: translateX(calc(-50% + var(--like-burst-drift, 0px))) translateY(-min(42vh, 280px)) scale(0.85)
			rotate(18deg);
	}
}

.like-burst-heart--from-button {
	animation-name: like-burst-float-from-button;
	animation-timing-function: ease-out;
}