/*
 * PureCSS.com
 * https://purecss.com/examples/elastic-bounce/
 * A ball that bounces with a spring-like overshoot using a custom cubic-bezier easing.
 */

.demo-elastic-bounce .bounce-stage {
		display: flex;
		gap: 3rem;
		align-items: flex-end;
		justify-content: center;
		height: 200px;
		padding-bottom: .5rem;
		position: relative;
	}

.demo-elastic-bounce .bounce-lane {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .5rem;
		height: 100%;
		justify-content: flex-end;
	}

.demo-elastic-bounce .ball {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

.demo-elastic-bounce .ball-elastic {
		background: radial-gradient(circle at 35% 35%, var(--accent), #6ddf00);
		animation: bounce-elastic 1.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
	}

.demo-elastic-bounce .ball-spring {
		background: radial-gradient(circle at 35% 35%, var(--sky), var(--violet));
		animation: bounce-spring 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
		width: 36px;
		height: 36px;
	}

.demo-elastic-bounce .ball-linear {
		background: radial-gradient(circle at 35% 35%, var(--coral), var(--orange));
		animation: bounce-linear 1.4s linear infinite;
		width: 36px;
		height: 36px;
	}

.demo-elastic-bounce .bounce-label {
		font-size: .72rem;
		color: var(--text-muted);
		font-weight: 500;
		text-align: center;
	}

.demo-elastic-bounce .bounce-floor {
		position: absolute;
		bottom: 1.75rem;
		left: 10%;
		right: 10%;
		height: 2px;
		background: var(--border);
		border-radius: 1px;
	}

@keyframes bounce-elastic {
	0%, 100% {
		transform: translateY(0) scaleX(1) scaleY(1);
	}
	10% { transform: translateY(-140px) scaleX(1) scaleY(1); }
	30% { transform: translateY(0) scaleX(1.3) scaleY(0.7); }
	40% { transform: translateY(-70px) scaleX(1) scaleY(1); }
	60% { transform: translateY(0) scaleX(1.15) scaleY(0.85); }
	70% { transform: translateY(-30px) scaleX(1) scaleY(1); }
	85% { transform: translateY(0) scaleX(1.05) scaleY(0.95); }
}

@keyframes bounce-spring {
	from { transform: translateY(0); }
	to   { transform: translateY(-140px); }
}

@keyframes bounce-linear {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-140px); }
}