/**
 * Fit Football — the marquee line, every mode. Loaded on the homepage and in
 * the Homepage panel (its live preview), so both draw the same strip.
 * Self-contained: the strip's base shape is restated here so the panel, which
 * has none of the homepage's stylesheets, draws it exactly.
 *
 * The gradient is on ::before and the shine on ::after: Elementor's lazy-load
 * rule strips background-image from elements, never from pseudo-elements.
 */

.fth-mq {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 16px;
	background: var(--mq-a, #0b0f14); color: var(--mq-fg, #fff);
	font-family: var(--ff-font-body, Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	font-weight: 700; font-size: 12.5px; line-height: 1.25;
	text-transform: uppercase; letter-spacing: .04em; text-align: center;
}
.fth .fth-marquee.fth-mq { background: var(--mq-a, #0b0f14); color: var(--mq-fg, #fff); }
.fth-mq::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background: linear-gradient(100deg, var(--mq-a, #0b0f14) 0%, var(--mq-b, #0b0f14) 100%);
}
.fth-mq svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Several messages share one cell, so the strip is as wide as the longest
   and never jumps when they change. */
.fth-mq-msgs { display: inline-grid; align-items: center; justify-items: center; min-width: 0; max-width: 100%; }
/* Wraps on a narrow phone rather than running off the edge; the cell is
   as tall as the longest message, so changing messages never jumps. */
.fth-mq-msg { grid-area: 1 / 1; opacity: 0; }
.fth-mq-msg.is-on { opacity: 1; }

/* shine */
.fth-mq.is-m-shine::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%; z-index: -1;
	background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 50%, rgba(255,255,255,0) 100%);
	transform: translateX(-110%); animation: fthMqShine 6s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes fthMqShine { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(420%); } }

/* flow: the gradient's colours drift along the strip */
.fth-mq.is-m-flow::before {
	background: linear-gradient(100deg, var(--mq-a, #0b0f14), var(--mq-b, #0b0f14), var(--mq-a, #0b0f14), var(--mq-b, #0b0f14));
	background-size: 300% 100%; animation: fthMqFlow 12s linear infinite;
}
@keyframes fthMqFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* beat: the mark beats like a heart */
.fth-mq.is-m-beat svg { animation: fthMqBeat 1.7s cubic-bezier(.22, .61, .36, 1) infinite; transform-origin: 50% 50%; }
@keyframes fthMqBeat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.32); } 26% { transform: scale(1.12); } }

/* type */
.fth-mq.is-m-type .fth-mq-msgs { display: inline-flex; align-items: center; min-height: 1.25em; }
.fth-mq-type { min-width: 0; }
.fth-mq-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; background: currentColor; }
.fth-mq.is-caret-off .fth-mq-caret { opacity: 0; }

/* ticker */
.fth-mq.is-m-ticker { justify-content: flex-start; padding-left: 0; padding-right: 0; }
.fth-mq-track { display: flex; flex: none; width: max-content; animation: fthMqTick 30s linear infinite; }
.fth-mq.is-m-ticker:hover .fth-mq-track { animation-play-state: paused; }
.fth-mq-seq { display: flex; flex: none; align-items: center; }
.fth-mq-it { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; white-space: nowrap; }
@keyframes fthMqTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion: slower, never removed (the strip is how the page says
   what season it is; a frozen ticker would read as broken). */
@media (prefers-reduced-motion: reduce) {
	.fth-mq.is-m-shine::after { animation-duration: 14s; }
	.fth-mq.is-m-flow::before { animation-duration: 24s; }
	.fth-mq.is-m-beat svg { animation-duration: 3s; }
}