/**
 * OSHIDA — home service strip.
 *
 * @figma 1445:251  Group 343, y 1407.63 -> 1866
 * @figma 1445:106  pill 449.74 x 130.18, pitch 469.74 (gap 20)
 * @figma 1445:111  text column 260.17 wide, 36.29 from the pill's inline start
 * @figma 1445:109  icon 65.27 square, 53.9 from the pill's inline end
 * @figma 1445:164  title 538.99 x 41 at y=1626.78
 *
 * The rows are centred, not offset: four pills measure 1858.94 (the design's
 * -209.47 -> 1649.47) and three measure 1389.2 (25.2 -> 1414.4), so centring
 * both reproduces the half-pitch stagger exactly.
 *
 * Owner: work package C1.
 */

.o-home-service-strip {
	position: relative;
	z-index: var(--o-z-raised);

	/* The rows are wider than the frame on purpose; the page must not scroll. */
	overflow: hidden;
	padding-block-end: clamp(56px, 14vw, 201.5px);
}

/* --------------------------------------------------------------------------
 * Rows
 * -------------------------------------------------------------------------- */
/*
 * The viewport is the static, masked window; the row inside it is the track
 * that moves. The mask has to sit on something that does not translate, or it
 * would slide along with the pills and the fade would stop being an edge fade.
 */
.o-home-service-strip__viewport {
	overflow: hidden;

	/*
	 * The edge fade. Measured off the render: the pill labels read L 255 at the
	 * frame centre, 178 at x=200 and 104 at x=1350, so the strip fades toward
	 * the edges but never to nothing. --o-text-muted is alpha 0.4, which is
	 * what the mask needs; --o-text is alpha 1.
	 */
	mask-image: linear-gradient(
		to right, /* rtl-ok — symmetric fade, no reading direction */
		var(--o-text-muted) 0%,
		var(--o-text) 28%,
		var(--o-text) 72%,
		var(--o-text-muted) 100%
	);
	-webkit-mask-image: linear-gradient(
		to right, /* rtl-ok — symmetric fade, no reading direction */
		var(--o-text-muted) 0%,
		var(--o-text) 28%,
		var(--o-text) 72%,
		var(--o-text-muted) 100%
	);
}

.o-home-service-strip__row {
	display: flex;
	justify-content: flex-start; /* rtl-ok — a marquee track starts at its own edge */
	gap: var(--o-space-xs);
	margin: 0;
	padding: 0;
	inline-size: max-content;
	list-style: none;
}

/*
 * At rest the two halves sit still and centred, so the section reads correctly
 * with no motion, with JavaScript off, and for anyone who asks for less motion.
 */
@media (prefers-reduced-motion: reduce) {
	.o-home-service-strip__row {
		justify-content: center;
		margin-inline: auto;
	}

	.o-home-service-strip__pill[aria-hidden="true"] {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.o-home-service-strip__row {
		/* One cycle = exactly half the track, so the loop is seamless. */
		animation: o-marquee-forward var(--o-marquee-duration, 64s) linear infinite;
		will-change: transform;
	}

	.o-home-service-strip__row[data-o-marquee="reverse"] {
		animation-name: o-marquee-reverse;
	}

	.o-home-service-strip:hover .o-home-service-strip__row,
	.o-home-service-strip:focus-within .o-home-service-strip__row {
		animation-play-state: paused;
	}
}

/*
 * The offsets are POSITIVE, and that is not a slip.
 *
 * Under dir="rtl" a flex track with justify-content: flex-start is anchored at
 * its right edge and extends leftward, so its box already sits mostly off-screen
 * to the left. Translating it further negative drags it out of the window and
 * the strip empties from the right. Translating positive pulls the off-screen
 * copies back in, which is the direction that keeps the strip full.
 *
 * Half the track is one identical repeat, so offset 0 and offset 50% render the
 * same pixels and the loop has no seam.
 */
@keyframes o-marquee-forward {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(50%, 0, 0); }
}

@keyframes o-marquee-reverse {
	from { transform: translate3d(50%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
 * Pills
 * -------------------------------------------------------------------------- */
.o-home-service-strip__pill {
	display: flex;
	align-items: center;
	gap: var(--o-space-sm);
	flex: 0 0 auto;
	inline-size: clamp(268px, 31.23vw, 449.74px);
	min-block-size: clamp(96px, 9.04vw, 130.18px);
	padding-inline: clamp(24px, 3.74vw, 53.9px) clamp(22px, 2.52vw, 36.29px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-veil-card);
}

.o-home-service-strip__icon {
	flex: 0 0 auto;
	display: flex;
	inline-size: clamp(44px, 4.53vw, 65.27px);
	block-size: clamp(44px, 4.53vw, 65.27px);
}

.o-home-service-strip__glyph {
	inline-size: 100%;
	block-size: 100%;
}

.o-home-service-strip__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
	text-align: start;
}

.o-home-service-strip__name {
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-black);
	line-height: 1.3;
	letter-spacing: var(--o-track-tight);
}

.o-home-service-strip__summary {
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 1.5;

	/* Design value is --o-text-muted; raised for contrast, see the report. */
	color: var(--o-text);
	opacity: 0.72;
}

/* --------------------------------------------------------------------------
 * The title between the rows
 * -------------------------------------------------------------------------- */
.o-home-service-strip__title {
	margin: 0;
	padding-block: clamp(28px, 5.14vw, 74px) clamp(26px, 4.72vw, 68px);
	font-size: clamp(22px, 2.78vw, 40px);
	font-weight: var(--o-fw-extralight);
	line-height: 1.1;
	letter-spacing: var(--o-track-tight);
	text-align: center;
}

.o-home-service-strip__brand {
	font-weight: var(--o-fw-black);
}

@media (max-width: 899px) {
	.o-home-service-strip__row {
		gap: var(--o-space-3xs);
		--o-marquee-duration: 48s;
	}

	.o-home-service-strip__pill {
		inline-size: 300px;
		min-block-size: 104px;
		padding-inline: var(--o-space-sm) var(--o-space-xs);
	}
}