.text-ticker-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.text-ticker-wrap * {
	box-sizing: border-box;
}

.text-ticker-horizontal {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.text-ticker-vertical {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.text-ticker-track {
	display: flex;
	align-items: center;
	gap: var(--tt-gap, 60px);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--tt-speed, 30s);
}

.text-ticker-horizontal .text-ticker-track {
	flex-direction: row;
	width: max-content;
	animation-name: text-ticker-scroll-x;
}

.text-ticker-vertical .text-ticker-track {
	flex-direction: column;
	height: max-content;
	animation-name: text-ticker-scroll-y;
}

.text-ticker-pause-hover:hover .text-ticker-track {
	animation-play-state: paused;
}

.text-ticker-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.text-ticker-horizontal .text-ticker-item {
	flex-basis: var(--tt-item-size, auto);
	width: var(--tt-item-size, auto);
}

.text-ticker-vertical .text-ticker-item {
	flex-basis: var(--tt-item-size, auto);
	width: 100%;
}

.text-ticker-text {
	display: block;
	width: 100%;
	color: var(--tt-text-color, #333333);
	font-size: var(--tt-text-size, 18px);
	font-weight: var(--tt-text-weight, 600);
	font-family: var(--tt-text-font, inherit);
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

a.text-ticker-item .text-ticker-text {
	text-decoration: none;
}

a.text-ticker-item:hover .text-ticker-text {
	text-decoration: underline;
}

/* Divider - uses a border rather than a solid block so it can be
   dashed/dotted/double, not just a solid line. */
.text-ticker-divider {
	flex: 0 0 auto;
	align-self: stretch;
}

.text-ticker-horizontal .text-ticker-divider {
	border-left-style: var(--tt-divider-style, solid);
	border-left-width: var(--tt-divider-width, 1px);
	border-left-color: var(--tt-divider-color, #dddddd);
	min-height: 20px;
}

.text-ticker-vertical .text-ticker-divider {
	border-top-style: var(--tt-divider-style, solid);
	border-top-width: var(--tt-divider-width, 1px);
	border-top-color: var(--tt-divider-color, #dddddd);
	width: 100%;
}

@keyframes text-ticker-scroll-x {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - (var(--tt-gap, 60px) / 2))); }
}

@keyframes text-ticker-scroll-y {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-50% - (var(--tt-gap, 60px) / 2))); }
}

/* --- Entrance / continuous animations --- */

/* Fade: applied via JS toggling this class when an item scrolls into view. */
.text-ticker-anim-fade .text-ticker-text {
	opacity: 0;
}
.text-ticker-anim-fade .text-ticker-text.tt-in-view {
	opacity: 1;
	transition: opacity var(--tt-anim-speed, 900ms) ease;
}

/* Pulse: continuous, no JS trigger needed. */
.text-ticker-anim-pulse .text-ticker-text {
	animation: text-ticker-pulse var(--tt-anim-speed, 900ms) ease-in-out infinite;
}
@keyframes text-ticker-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

/* Spin-in letters: each character is wrapped in a span by JS; this
   handles the per-letter entrance transform. */
.text-ticker-anim-spin .tt-letter {
	display: inline-block;
	opacity: 0;
	transform: rotate(-90deg) scale(0.4);
}
.text-ticker-anim-spin .text-ticker-text.tt-in-view .tt-letter {
	animation: text-ticker-letter-spin 0.5s ease forwards;
}
@keyframes text-ticker-letter-spin {
	from { opacity: 0; transform: rotate(-90deg) scale(0.4); }
	to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Typewriter: text content is progressively built up by JS; just needs
   a blinking caret while actively typing. */
.text-ticker-anim-typewriter .text-ticker-text.tt-typing::after {
	content: "|";
	animation: text-ticker-caret 0.8s steps(1) infinite;
}
@keyframes text-ticker-caret {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.text-ticker-track {
		animation: none;
	}
	.text-ticker-horizontal .text-ticker-track {
		flex-wrap: wrap;
		justify-content: center;
	}
	.text-ticker-anim-fade .text-ticker-text,
	.text-ticker-anim-spin .tt-letter {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.text-ticker-anim-pulse .text-ticker-text {
		animation: none;
	}
}

/* Admin preview box */
.text-ticker-preview-box {
	border: 1px solid #dcdcde;
	background: #fff;
	padding: 30px 20px;
	margin: 1rem 0 2rem;
	border-radius: 4px;
}