.evt-vertical-text {
	--evt-duration: 1200ms;
	--evt-delay: 0ms;
	--evt-stagger: 60ms;
	--evt-letter-spacing: 0px;
	--evt-line-height: 1.2em;
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.evt-vertical-text__link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

.evt-vertical-text__content {
	display: inline-block;
	margin: 0;
	letter-spacing: var(--evt-letter-spacing);
	line-height: var(--evt-line-height);
	transition: color 0.25s ease;
	will-change: transform, opacity, filter;
}

/* Sideways orientation helpers */
.evt-vertical-text.evt-mode-sideways .evt-vertical-text__content {
	writing-mode: vertical-rl;
}

.evt-vertical-text.evt-mode-sideways.evt-orient-btt .evt-vertical-text__inner {
	transform: rotate(180deg);
	transform-origin: center center;
}

.evt-vertical-text__inner {
	display: inline-flex;
}

/*
 * Letter-span modes: native letter-spacing does not apply between span wrappers.
 * Sideways keeps writing-mode and spaces letters on the inline axis.
 * Upright uses flex gap between stacked characters.
 */
.evt-vertical-text.evt-mode-sideways .evt-vertical-text__content:has(.evt-letter) {
	letter-spacing: normal;
}

.evt-vertical-text.evt-mode-sideways .evt-letter {
	display: inline;
	line-height: var(--evt-line-height);
}

.evt-vertical-text.evt-mode-sideways .evt-letter:not(:last-child) {
	margin-inline-end: var(--evt-letter-spacing);
}

/* Upright stacked letters */
.evt-vertical-text.evt-mode-upright .evt-vertical-text__content.evt-stacked {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	letter-spacing: normal;
	gap: var(--evt-letter-spacing);
	line-height: var(--evt-line-height);
}

.evt-vertical-text.evt-mode-upright.evt-orient-btt .evt-vertical-text__content.evt-stacked {
	flex-direction: column-reverse;
}

.evt-vertical-text .evt-letter {
	display: inline-block;
	line-height: var(--evt-line-height);
}

.evt-vertical-text.evt-mode-upright .evt-letter {
	display: block;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.evt-vertical-text.evt-animated .evt-vertical-text__content,
	.evt-vertical-text.evt-animated .evt-letter {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* Initial hidden state for once-play entrance animations */
.evt-vertical-text.evt-animated.evt-loop-once:not(.is-playing):not(.is-done) .evt-vertical-text__content,
.evt-vertical-text.evt-animated.evt-loop-once:not(.is-playing):not(.is-done) .evt-letter {
	opacity: 0;
}

.evt-vertical-text.evt-animated.evt-loop-once.evt-anim-scale-in:not(.is-playing):not(.is-done) .evt-vertical-text__content {
	transform: scale(0.85);
}

.evt-vertical-text.evt-animated.evt-loop-once.evt-anim-fade-up:not(.is-playing):not(.is-done) .evt-vertical-text__content {
	transform: translateY(24px);
}

.evt-vertical-text.evt-animated.evt-loop-once.evt-anim-fade-down:not(.is-playing):not(.is-done) .evt-vertical-text__content {
	transform: translateY(-24px);
}

.evt-vertical-text.evt-animated.evt-loop-once.evt-anim-slide-in:not(.is-playing):not(.is-done) .evt-vertical-text__content {
	transform: translateX(-28px);
}

/* ========== Animations ========== */

@keyframes evt-fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes evt-fade-loop {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

@keyframes evt-fade-up {
	0% { opacity: 0; transform: translateY(24px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes evt-fade-up-loop {
	0%, 100% { opacity: 0.55; transform: translateY(10px); }
	50% { opacity: 1; transform: translateY(0); }
}

@keyframes evt-fade-down {
	0% { opacity: 0; transform: translateY(-24px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes evt-fade-down-loop {
	0%, 100% { opacity: 0.55; transform: translateY(-10px); }
	50% { opacity: 1; transform: translateY(0); }
}

@keyframes evt-slide-in {
	0% { opacity: 0; transform: translateX(-28px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes evt-slide-in-loop {
	0%, 100% { opacity: 0.65; transform: translateX(-12px); }
	50% { opacity: 1; transform: translateX(0); }
}

@keyframes evt-scale-in {
	0% { opacity: 0; transform: scale(0.85); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes evt-scale-in-loop {
	0%, 100% { opacity: 0.7; transform: scale(0.94); }
	50% { opacity: 1; transform: scale(1); }
}

@keyframes evt-glow-pulse {
	0%, 100% {
		opacity: 1;
		text-shadow: 0 0 0 currentColor;
		filter: brightness(1);
	}
	50% {
		opacity: 1;
		text-shadow: 0 0 18px currentColor;
		filter: brightness(1.15);
	}
}

@keyframes evt-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes evt-letter-reveal {
	0% { opacity: 0; transform: translateY(0.4em); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes evt-wave {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-0.35em); }
}

@keyframes evt-typewriter {
	0% { opacity: 0; }
	1%, 100% { opacity: 1; }
}

/* Once playback */
.evt-vertical-text.evt-loop-once.is-playing.evt-anim-fade .evt-vertical-text__content {
	animation: evt-fade var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-fade-up .evt-vertical-text__content {
	animation: evt-fade-up var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-fade-down .evt-vertical-text__content {
	animation: evt-fade-down var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-slide-in .evt-vertical-text__content {
	animation: evt-slide-in var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-scale-in .evt-vertical-text__content {
	animation: evt-scale-in var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-glow-pulse .evt-vertical-text__content {
	animation: evt-glow-pulse var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-float .evt-vertical-text__content {
	animation: evt-float var(--evt-duration) ease both;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-letter-reveal .evt-letter,
.evt-vertical-text.evt-loop-once.is-playing.evt-anim-wave .evt-letter,
.evt-vertical-text.evt-loop-once.is-playing.evt-anim-typewriter .evt-letter {
	animation-duration: var(--evt-duration);
	animation-timing-function: ease;
	animation-fill-mode: both;
	animation-delay: calc(var(--evt-delay) + (var(--evt-i) * var(--evt-stagger)));
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-letter-reveal .evt-letter {
	animation-name: evt-letter-reveal;
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-wave .evt-letter {
	animation-name: evt-wave;
}

.evt-vertical-text.evt-loop-once.is-playing.evt-anim-typewriter .evt-letter {
	animation-name: evt-typewriter;
	animation-timing-function: steps(1, end);
}

/* Infinite playback */
.evt-vertical-text.evt-loop-infinite.evt-anim-fade .evt-vertical-text__content {
	animation: evt-fade-loop var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-fade-up .evt-vertical-text__content {
	animation: evt-fade-up-loop var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-fade-down .evt-vertical-text__content {
	animation: evt-fade-down-loop var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-slide-in .evt-vertical-text__content {
	animation: evt-slide-in-loop var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-scale-in .evt-vertical-text__content {
	animation: evt-scale-in-loop var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-glow-pulse .evt-vertical-text__content {
	animation: evt-glow-pulse var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-float .evt-vertical-text__content {
	animation: evt-float var(--evt-duration) ease-in-out infinite;
	animation-delay: var(--evt-delay);
}

.evt-vertical-text.evt-loop-infinite.evt-anim-letter-reveal .evt-letter,
.evt-vertical-text.evt-loop-infinite.evt-anim-wave .evt-letter,
.evt-vertical-text.evt-loop-infinite.evt-anim-typewriter .evt-letter {
	animation-duration: var(--evt-duration);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: calc(var(--evt-delay) + (var(--evt-i) * var(--evt-stagger)));
}

.evt-vertical-text.evt-loop-infinite.evt-anim-letter-reveal .evt-letter {
	animation-name: evt-letter-reveal;
}

.evt-vertical-text.evt-loop-infinite.evt-anim-wave .evt-letter {
	animation-name: evt-wave;
}

.evt-vertical-text.evt-loop-infinite.evt-anim-typewriter .evt-letter {
	animation-name: evt-typewriter;
	animation-timing-function: steps(1, end);
}

/* Keep final state after once */
.evt-vertical-text.evt-loop-once.is-done .evt-vertical-text__content,
.evt-vertical-text.evt-loop-once.is-done .evt-letter {
	opacity: 1;
	transform: none;
	filter: none;
}