/* ==========================================================================
 * QynTro AI - Model Marquee
 * Landing page band: full-bleed strip between the nav and the hero headline.
 *
 * ADDITIVE ONLY. Every selector is prefixed .qmm- so nothing here can reach
 * the theme's own markup, and no font-family is declared anywhere - the band
 * inherits the page's face on purpose. An override that ships its own typeface
 * fights the page and flashes the wrong one on load.
 *
 * Injected by qyntro-models.js. Both files are loaded from the admin
 * header-code box.
 *
 * DEPLOY ORDER MATTERS: upload this file FIRST, then bump ?v= in the header
 * code. These assets are served with cache-control: max-age=604800 (7 days).
 * Bumping the version first and loading the page before the new file lands
 * makes the browser cache the OLD body under the NEW url - and it will not
 * re-check for a week.
 * ========================================================================== */

.qmm {
	--qmm-ground: #07080A;
	--qmm-pill: rgba(255,255,255,.045);
	--qmm-line: rgba(255,255,255,.10);
	--qmm-lime: #CBFF3C;
	--qmm-red: #FF2D46;
	--qmm-text: #E9EDF0;
	--qmm-muted: #7D8792;

	position: relative;
	/* Above the hero's own stacking context so the band is never painted over
	   by a full-bleed hero image or video, but below the fixed header, which
	   must keep covering it while the page scrolls. */
	z-index: 2;
	width: 100%;
	overflow: hidden;
	background: var(--qmm-ground);
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
	padding: 26px 0 28px;
}

/* The mask lives HERE, on an inner wrapper, and not on .qmm itself.
   A mask applies to everything the element paints - including its own
   background - so masking the band made its background transparent at both
   edges and the page's blue hero gradient showed straight through. The band
   now paints a solid ground; only the moving rows inside it fade out. */
.qmm-viewport {
	position: relative;
	overflow: hidden;
	/* Keeps the tilted rows from being flattened by the ancestor. */
	transform-style: preserve-3d;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.qmm * { box-sizing: border-box; }

/* BEHIND the video. Absolutely positioned in the video's parent and centred on
   the video by JS, so the pills stream out from behind the frame on both sides.
   `top` is set inline; everything else is here.

   No background and no borders in this mode: it is a background layer now, so a
   solid ground would just be a dark bar behind the video and would also hide the
   hero's flow field. The pills carry their own translucent fill. */
.qmm-behind {
	position: absolute;
	/* Centred on the video in pure CSS. Percentages resolve against the video
	   wrap this sits inside, so there is nothing to measure and nothing that can
	   drift while the page scrolls. */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	max-width: 100vw;
	/* Taller than the video so the field covers above and below it - but not so
	   tall that it reaches the CTA underneath. */
	height: 126%;
	z-index: 0;
	background: none;
	border-top: 0;
	border-bottom: 0;
	padding: 0;
	/* Must not swallow clicks meant for the play button, which sits over it. */
	pointer-events: none;
}

/* The video itself paints over the band. */
.qmm-behind ~ * { position: relative; z-index: 1; }

/* The band now has an explicit height (set inline from the video's), so the
   rows spread down it instead of clustering in the middle. */
.qmm-behind .qmm-viewport {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.qmm-behind .qmm-row + .qmm-row { margin-top: 0; }


/* The band's own lime wash is dropped too - the flow field is already providing
   the glow behind the video. */
.qmm-behind::before { display: none; }


.qmm::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(60% 140% at 50% 50%, rgba(203,255,60,.055), transparent 70%);
}

.qmm-row {
	display: flex;
	width: max-content;
	will-change: transform;
}

.qmm-row + .qmm-row { margin-top: 18px; }

.qmm-track {
	display: flex;
	gap: 18px;
	padding-right: 18px;
	flex: 0 0 auto;
}

/* Two tracks per row hold identical content and the animation travels exactly
   -50%, so the second copy lands where the first began and the loop is
   seamless. A single track visibly snaps back. */
/* Six rows across the band's height, alternating direction, each on its own
   duration so no two ever line up. Depth is carried by scale, opacity and blur
   together so the outer rows read as genuinely further back. Blur on the outer
   four only - it is the expensive property here. */
.qmm-row-a { animation: qmm-a 62s linear infinite; opacity: .30; filter: blur(2.5px); }
.qmm-row-b { animation: qmm-b 78s linear infinite; opacity: .55; filter: blur(1px); }
.qmm-row-c { animation: qmm-c 58s linear infinite; opacity: .92; }
.qmm-row-d { animation: qmm-d 84s linear infinite; opacity: .92; }
.qmm-row-e { animation: qmm-e 68s linear infinite; opacity: .55; filter: blur(1px); }
.qmm-row-f { animation: qmm-f 92s linear infinite; opacity: .30; filter: blur(2.5px); }

/* The curve. Each row is tilted in 3D so the strip bows away from the viewer,
   and the two rows tilt in OPPOSITE directions - together they arc around the
   video sitting between them, like a shallow orbit.

   The tilt has to live inside the keyframes: a transform animation replaces a
   declared transform outright, so a `transform: rotateX()` on the row would be
   thrown away the instant the animation started. Same reason row B repeats its
   scale in both steps. */
@keyframes qmm-a {
	from { transform: perspective(1600px) rotateX(22deg) rotateY(-15deg) scale(.74) translate3d(0,0,0); }
	to   { transform: perspective(1600px) rotateX(22deg) rotateY(-15deg) scale(.74) translate3d(-50%,0,0); }
}
@keyframes qmm-b {
	from { transform: perspective(1600px) rotateX(13deg) rotateY(-9deg) scale(.85) translate3d(-50%,0,0); }
	to   { transform: perspective(1600px) rotateX(13deg) rotateY(-9deg) scale(.85) translate3d(0,0,0); }
}
@keyframes qmm-c {
	from { transform: perspective(1600px) rotateX(4deg) rotateY(-3deg) scale(1) translate3d(0,0,0); }
	to   { transform: perspective(1600px) rotateX(4deg) rotateY(-3deg) scale(1) translate3d(-50%,0,0); }
}
@keyframes qmm-d {
	from { transform: perspective(1600px) rotateX(-4deg) rotateY(3deg) scale(1) translate3d(-50%,0,0); }
	to   { transform: perspective(1600px) rotateX(-4deg) rotateY(3deg) scale(1) translate3d(0,0,0); }
}
@keyframes qmm-e {
	from { transform: perspective(1600px) rotateX(-13deg) rotateY(9deg) scale(.85) translate3d(0,0,0); }
	to   { transform: perspective(1600px) rotateX(-13deg) rotateY(9deg) scale(.85) translate3d(-50%,0,0); }
}
@keyframes qmm-f {
	from { transform: perspective(1600px) rotateX(-22deg) rotateY(15deg) scale(.74) translate3d(-50%,0,0); }
	to   { transform: perspective(1600px) rotateX(-22deg) rotateY(15deg) scale(.74) translate3d(0,0,0); }
}

/* Every transform component is repeated in BOTH steps of each keyframe above:
   a transform animation replaces the declared transform outright, so a tilt or
   scale left out of one step snaps away the instant the animation starts. */

.qmm:hover .qmm-row { animation-play-state: paused; }

.qmm-pill {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto;
	padding: 18px 30px;
	border-radius: 16px;
	background: var(--qmm-pill);
	border: 1px solid var(--qmm-line);
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.qmm-tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--qmm-muted);
}

.qmm-sep {
	width: 1px;
	height: 16px;
	background: rgba(255,255,255,.14);
}

.qmm-name {
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--qmm-text);
}

/* Newness is the one thing the eye should catch as the band streams past, so
   it gets the accent border rather than only the red chip. */
.qmm-pill.is-new {
	background: rgba(203,255,60,.055);
	border-color: rgba(203,255,60,.34);
	box-shadow: 0 0 0 1px rgba(203,255,60,.05), 0 4px 22px -10px rgba(203,255,60,.5);
}

.qmm-pill.is-new .qmm-name { color: #F4FFDA; }

.qmm-new {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--qmm-red);
	padding: 4px 8px;
	border-radius: 5px;
	line-height: 1;
}

/* ==========================================================================
 * BAND TWO - typographic, sits between the pricing section and the FAQ.
 *
 * Same information as band one in the opposite register. Band one is
 * component-based - pills, borders, category tags, two crossing rows - and
 * reads as inventory. This one is pure type: no pills, no borders, one slow
 * line. Most of it sits deliberately dim and only the NEW models come up in
 * lime, so the eye reads fourteen bright marks moving through a grey stream
 * rather than forty things competing.
 *
 * Much slower than band one: by the time someone reaches the FAQ they are
 * reading, not scanning, and a fast ticker there is noise.
 * ========================================================================== */

.qmt {
	--qmm-ground: #07080A;
	--qmm-lime: #CBFF3C;
	--qmm-red: #FF2D46;

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--qmm-ground);
	border-top: 1px solid rgba(255,255,255,.07);
	border-bottom: 1px solid rgba(255,255,255,.07);
	padding: 26px 0 30px;
}

.qmt * { box-sizing: border-box; }

/* Hands off into the FAQ section below rather than ending on a flat rule. */
.qmt::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(203,255,60,.45), transparent);
}

.qmt-eyebrow {
	text-align: center;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--qmm-lime);
	opacity: .85;
	margin-bottom: 18px;
}

/* Masked wrapper, not the band - see the note on .qmm-viewport above. */
.qmt-viewport {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Travels right-to-left, same direction as band one's lead row. It ran the
   other way originally, as a deliberate counterpoint; the user preferred both
   bands moving the same way, which also reads more naturally to anyone used to
   scanning left-to-right - names arrive on the right and exit past the eye. */
.qmt-row {
	display: flex;
	width: max-content;
	animation: qmt-left 74s linear infinite;
	will-change: transform;
}

@keyframes qmt-left {
	from { transform: translate3d(0,0,0); }
	to   { transform: translate3d(-50%,0,0); }
}

.qmt:hover .qmt-row { animation-play-state: paused; }

.qmt-track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.qmt-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.qmt-name {
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: #4A525A;
	line-height: 1.1;
}

.qmt-item.is-new .qmt-name { color: var(--qmm-lime); }

.qmt-new {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--qmm-red);
	padding: 3px 6px;
	border-radius: 4px;
	line-height: 1;
	transform: translateY(-.55em);
}

.qmt-star {
	flex: 0 0 auto;
	margin: 0 26px;
	color: var(--qmm-lime);
	opacity: .34;
	font-size: 15px;
	line-height: 1;
}

@media (max-width: 640px) {
	.qmm { padding: 18px 0 20px; }
	.qmm-behind { padding: 0; }
	.qmm-pill { padding: 12px 20px; gap: 10px; border-radius: 13px; }
	.qmm-name { font-size: 17px; }
	.qmm-tag { font-size: 10px; }
	.qmm-row-a, .qmm-row-b, .qmm-row-f { display: none; }
	.qmm-row-e { filter: none; }

	.qmt { padding: 20px 0 22px; }
	.qmt-star { margin: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.qmm-row,
	.qmt-row {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		transform: none;
		opacity: 1;
	}
	.qmm-row-b { display: none; }
	.qmm-track,
	.qmt-track { flex-wrap: wrap; justify-content: center; gap: 9px; }
	.qmm-viewport,
	.qmt-viewport { -webkit-mask-image: none; mask-image: none; }

	/* Forty names at 42px stacked static would be a wall. */
	.qmt-name { font-size: 15px; }
	.qmt-star { margin: 0 10px; }
}