/**
 * Text Scroll Widget — frontend
 */

.tsw-ticker {
	--tsw-color: inherit;
	--tsw-bg: transparent;
	--tsw-link: inherit;
	--tsw-font-size: 16px;
	--tsw-font-weight: 400;
	--tsw-padding: 8px 12px;
	--tsw-radius: 0;
	--tsw-shadow: none;
	--tsw-duration: 20s;
	--tsw-delay: 0s;
	--tsw-gap: 48px;
	--tsw-height: 2.5em;

	box-sizing: border-box;
	position: relative;
	color: var(--tsw-color);
	background: var(--tsw-bg);
	font-size: var(--tsw-font-size);
	font-weight: var(--tsw-font-weight);
	padding: var(--tsw-padding);
	border-radius: var(--tsw-radius);
	box-shadow: var(--tsw-shadow);
	overflow: hidden;
	width: 100%;
	min-height: var(--tsw-height);
	line-height: 1.4;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tsw-ticker *,
.tsw-ticker *::before,
.tsw-ticker *::after {
	box-sizing: border-box;
}

.tsw-ticker a.tsw-message-link,
.tsw-ticker .tsw-message-link {
	color: var(--tsw-link);
	text-decoration: underline;
}

.tsw-ticker:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tsw-viewport {
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-height: var(--tsw-height);
}

.tsw-track {
	display: flex;
	align-items: center;
	gap: var(--tsw-gap);
	width: max-content;
	will-change: transform;
	animation-duration: var(--tsw-duration);
	animation-delay: var(--tsw-delay);
	animation-timing-function: var(--tsw-ease, linear);
	animation-iteration-count: infinite;
	backface-visibility: hidden;
}

.tsw-message {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Horizontal marquee — duplicated content, translate -50% for seamless loop */
.tsw-mode-marquee.tsw-axis-horizontal .tsw-track {
	flex-direction: row;
}

.tsw-mode-marquee.tsw-dir-left .tsw-track {
	animation-name: tsw-scroll-left;
}

.tsw-mode-marquee.tsw-dir-right .tsw-track {
	animation-name: tsw-scroll-right;
}

/* Vertical */
.tsw-mode-marquee.tsw-axis-vertical .tsw-viewport {
	height: var(--tsw-height);
}

.tsw-mode-marquee.tsw-axis-vertical .tsw-track {
	flex-direction: column;
	width: 100%;
	align-items: flex-start;
}

.tsw-mode-marquee.tsw-axis-vertical .tsw-message {
	white-space: normal;
	width: 100%;
}

.tsw-mode-marquee.tsw-dir-up .tsw-track {
	animation-name: tsw-scroll-up;
}

.tsw-mode-marquee.tsw-dir-down .tsw-track {
	animation-name: tsw-scroll-down;
}

/* Prefer measured loop size when JS sets --tsw-loop-size; fallback 50% for duplicated track */
@keyframes tsw-scroll-left {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--tsw-loop-size, 50%)), 0, 0); }
}

@keyframes tsw-scroll-right {
	from { transform: translate3d(calc(-1 * var(--tsw-loop-size, 50%)), 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}

@keyframes tsw-scroll-up {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, calc(-1 * var(--tsw-loop-size, 50%)), 0); }
}

@keyframes tsw-scroll-down {
	from { transform: translate3d(0, calc(-1 * var(--tsw-loop-size, 50%)), 0); }
	to { transform: translate3d(0, 0, 0); }
}

/* Pause on hover / focus (within ticker) */
.tsw-pause-hover:hover .tsw-track,
.tsw-pause-focus:focus .tsw-track,
.tsw-pause-focus:focus-within .tsw-track,
.tsw-ticker.is-paused .tsw-track {
	animation-play-state: paused;
}

/* Fade mode — one message at a time via JS .is-active */
.tsw-mode-fade .tsw-track {
	display: block;
	width: 100%;
	animation: none;
	will-change: auto;
	position: relative;
	min-height: var(--tsw-height);
}

.tsw-mode-fade .tsw-message {
	display: none;
	white-space: normal;
	width: 100%;
	opacity: 0;
}

.tsw-mode-fade .tsw-message.is-active {
	display: block;
	opacity: 1;
	animation: tsw-fade-in var(--tsw-transition, 0.45s) var(--tsw-ease, ease-in-out) both;
}

@keyframes tsw-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Static announcement */
.tsw-mode-static .tsw-track {
	display: block;
	width: 100%;
	animation: none;
	flex-wrap: wrap;
}

.tsw-mode-static .tsw-message {
	white-space: normal;
	display: block;
	margin-bottom: 0.35em;
}

.tsw-mode-static .tsw-message:last-child {
	margin-bottom: 0;
}

/* Templates */
.tsw-template-announcement {
	--tsw-bg: #1e293b;
	--tsw-color: #f8fafc;
	--tsw-link: #93c5fd;
	--tsw-padding: 10px 16px;
}

.tsw-template-news {
	--tsw-bg: #fef2f2;
	--tsw-color: #7f1d1d;
	--tsw-link: #b91c1c;
	border-left: 4px solid #dc2626;
}

/* News mode reuses marquee motion (badge styles may come from Pro CSS) */
.tsw-mode-news.tsw-axis-horizontal .tsw-track {
	display: flex;
	width: max-content;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--tsw-duration, 40s);
	animation-delay: var(--tsw-delay, 0s);
}
.tsw-mode-news.tsw-dir-left .tsw-track { animation-name: tsw-scroll-left; }
.tsw-mode-news.tsw-dir-right .tsw-track { animation-name: tsw-scroll-right; }
.tsw-mode-news.is-paused .tsw-track { animation-play-state: paused; }

/* Library / Pro template classes kept in free CSS so designs survive license changes */
.tsw-template-breaking { --tsw-bg: #111; --tsw-color: #fff; --tsw-link: #fbbf24; }
.tsw-template-glass { --tsw-bg: rgba(255,255,255,.65); }
.tsw-template-dark { --tsw-bg: #0f172a; --tsw-color: #e2e8f0; --tsw-link: #38bdf8; }
.tsw-template-outline { border: 2px solid currentColor; --tsw-bg: transparent; }
.tsw-template-pill { --tsw-radius: 999px; }
.tsw-template-ribbon { border-left: 6px solid #2563eb; }
.tsw-template-compact { --tsw-padding: 4px 10px; --tsw-font-size: 13px; }
.tsw-template-hero { --tsw-padding: 16px 24px; --tsw-font-size: 20px; }
.tsw-template-subtle { --tsw-bg: #f1f5f9; --tsw-color: #475569; }
.tsw-template-contrast { --tsw-bg: #fef08a; --tsw-color: #111; }

/* Reduced motion: no animation; allow manual scroll */
@media (prefers-reduced-motion: reduce) {
	.tsw-ticker .tsw-track {
		animation: none !important;
		transform: none !important;
		flex-wrap: wrap;
		width: 100%;
		max-height: 12em;
	}

	.tsw-ticker .tsw-viewport {
		overflow: auto;
		max-height: 12em;
	}

	.tsw-ticker .tsw-message {
		white-space: normal;
	}

	.tsw-mode-fade .tsw-message {
		display: block;
		animation: none;
		opacity: 1;
	}
}

.tsw-reduced-motion .tsw-track {
	animation: none !important;
	transform: none !important;
	flex-wrap: wrap;
	width: 100%;
}

.tsw-reduced-motion .tsw-viewport {
	overflow: auto;
}

/* Accessibility controls */
.tsw-controls {
	position: absolute;
	inset-inline-end: 6px;
	inset-block-start: 6px;
	z-index: 2;
}

.tsw-ctrl {
	appearance: none;
	border: 1px solid currentColor;
	background: rgba(255, 255, 255, 0.85);
	color: inherit;
	border-radius: 999px;
	width: 28px;
	height: 28px;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	opacity: 0.85;
}

.tsw-ctrl:hover,
.tsw-ctrl:focus {
	opacity: 1;
}

.tsw-ctrl:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tsw-ctrl-icon::before {
	content: "❚❚";
	font-size: 10px;
	letter-spacing: -1px;
}

.tsw-ticker.is-paused .tsw-ctrl-icon::before,
.tsw-ctrl[aria-pressed="true"] .tsw-ctrl-icon::before {
	content: "▶";
	letter-spacing: 0;
	font-size: 11px;
	padding-inline-start: 1px;
}

.tsw-has-controls {
	padding-inline-end: calc(var(--tsw-padding, 8px) + 28px);
}

/* RTL */
[dir="rtl"] .tsw-template-news {
	border-left: 0;
	border-right: 4px solid #dc2626;
}

[dir="rtl"] .tsw-mode-marquee.tsw-dir-left .tsw-track {
	animation-name: tsw-scroll-right;
}

[dir="rtl"] .tsw-mode-marquee.tsw-dir-right .tsw-track {
	animation-name: tsw-scroll-left;
}

@media (prefers-reduced-motion: reduce) {
	.tsw-controls {
		display: none;
	}
}