.bww-letter-anim {
	visibility: hidden;
	margin: 0;
	padding: 0;
}
.bww-letter-anim.bww-la-ready {
	visibility: visible;
}
.bww-letter-anim .bww-la-letter {
	display: inline-block;
	line-height: 1;
	vertical-align: baseline;
	will-change: transform, opacity, color;
}

/*
 * Starting states.
 *
 * transform-origin sits at the bottom-center of the letter's own box, i.e.
 * on the shared text baseline the standing letters rest on, so rotating the
 * letter tips it over exactly along that line instead of dropping below it.
 * --bww-la-baseline-offset is an optional small per-theme/font nudge (set
 * from the plugin's settings, 0 by default).
 * --bww-la-angle is 90deg or -90deg, chosen per-letter in JS so the letter
 * always tips INWARD across the word (overlapping a neighboring letter)
 * rather than swinging out past the start/end of the title.
 */
.bww-letter-anim .bww-la-letter.bww-la-flat {
	transform: rotate(var(--bww-la-angle, 90deg)) translateY(var(--bww-la-baseline-offset, 0em));
	transform-origin: bottom center;
	color: var(--bww-la-fallen-color, inherit);
	transition: color var(--bww-la-duration, 600ms) ease;
	transition-delay: var(--bww-la-delay, 0ms);
}
.bww-letter-anim .bww-la-letter.bww-la-drop {
	opacity: 0;
	transform: translateY(-46px) rotate(-10deg);
	color: var(--bww-la-fallen-color, inherit);
	transition: color var(--bww-la-duration, 650ms) ease;
	transition-delay: var(--bww-la-delay, 0ms);
}

/* Triggered states */
.bww-letter-anim.bww-la-run .bww-la-letter.bww-la-flat {
	animation-name: bwwLaStandUp;
	animation-duration: var(--bww-la-duration, 600ms);
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-delay: var(--bww-la-delay, 0ms);
	animation-fill-mode: both;
	color: inherit;
}
.bww-letter-anim.bww-la-run .bww-la-letter.bww-la-drop {
	animation-name: bwwLaDropBounce;
	animation-duration: var(--bww-la-duration, 650ms);
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-delay: var(--bww-la-delay, 0ms);
	animation-fill-mode: both;
	color: inherit;
}

@keyframes bwwLaStandUp {
	0% {
		transform: rotate(var(--bww-la-angle, 90deg)) translateY(var(--bww-la-baseline-offset, 0em));
	}
	60% {
		transform: rotate(calc(var(--bww-la-angle, 90deg) * -0.09)) translateY(var(--bww-la-baseline-offset, 0em));
	}
	80% {
		transform: rotate(calc(var(--bww-la-angle, 90deg) * 0.045)) translateY(var(--bww-la-baseline-offset, 0em));
	}
	100% {
		transform: rotate(0deg) translateY(var(--bww-la-baseline-offset, 0em));
	}
}

@keyframes bwwLaDropBounce {
	0% {
		opacity: 0;
		transform: translateY(-46px) rotate(-10deg);
	}
	55% {
		opacity: 1;
		transform: translateY(8px) rotate(5deg);
	}
	75% {
		transform: translateY(-4px) rotate(-2deg);
	}
	90% {
		transform: translateY(2px) rotate(1deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bww-letter-anim .bww-la-letter.bww-la-flat,
	.bww-letter-anim .bww-la-letter.bww-la-drop {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
		color: inherit !important;
	}
}