/* ==========================================================================
   Quality — Option 1. Reference frame 1600x900:
   arch 600x660 at x=500 y=120, top corners rounded 300 (a true semicircle),
   heading Poppins Regular 40/50 centred on the section, width 1133.
   The heading reads white outside the arch and #0d0d0d inside it.

   Scroll behaviour: `--p` (0 -> 1, set by assets/js/quality.js) grows the dome
   from the design's arch out to a full-screen background. --p:0 IS the design,
   so no-JS and reduced-motion both land on the static composition.
   ========================================================================== */

.section--quality {
	position: relative;
	background: var(--color-bg);
}

.quality__sticky {
	position: relative;
	aspect-ratio: 1600 / 900;
	min-height: 520px;
	overflow: hidden;
}

/* JS-only: give the section scroll length and pin the frame while it expands. */
.section--quality.is-expand {
	height: 250vh;
}

.section--quality.is-expand .quality__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	aspect-ratio: auto;
	min-height: 0;
}

/* The arch and the mask must be the same shape in the same place — one rule
   drives both, so the mask tracks the dome as it grows. The slashed radius
   keeps the top a real semicircle (300 of 600 wide, 300 of 660 tall) at any
   size, which a flat `300px` would not. */
.quality__arch,
.quality__mask {
	position: absolute;
	left: calc(31.25% * (1 - var(--p, 0)));
	top: calc(13.333% * (1 - var(--p, 0)));
	width: calc(37.5% + 62.5% * var(--p, 0));
	height: calc(73.333% + 26.667% * var(--p, 0));
	border-radius:
		calc(50% * (1 - var(--p, 0))) calc(50% * (1 - var(--p, 0))) 0 0 /
		calc(45.4545% * (1 - var(--p, 0))) calc(45.4545% * (1 - var(--p, 0))) 0 0;
	overflow: hidden;
}

.quality__arch {
	z-index: 0;
}

.quality__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quality__wash {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

.quality__heading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1133px, 92vw);
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 40px);
	line-height: 1.25;
	text-align: center;
	color: var(--white);
	z-index: 1;
}

/* The centred heading (white + dark mask) fades out as the pill forms. */
.quality__arch ~ .quality__heading,
.quality__mask {
	opacity: calc(1 - var(--pill, 0));
}

/* Sits above the white copy; the arch clip is what limits it to the dome. */
.quality__mask {
	z-index: 2;
	pointer-events: none;
}

.quality__heading--dark {
	color: #0d0d0d;
}

/* Single-line pill at the bottom of the expanded dome. Hidden at rest
   (--pill:0), it fades and rises in as the heading leaves the centre. */
.quality__pill {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vw, 56px);
	transform: translateX(-50%) translateY(calc((1 - var(--pill, 0)) * 24px));
	margin: 0;
	max-width: 92vw;
	padding: 14px 34px;
	background: rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	white-space: nowrap;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: clamp(0.85rem, 1.35vw, 22px);
	line-height: 1.4;
	text-align: center;
	color: var(--white);
	opacity: var(--pill, 0);
	pointer-events: none;
	z-index: 3;
}

@media (max-width: 900px) {
	.quality__sticky {
		aspect-ratio: 3 / 4;
	}

	.quality__arch,
	.quality__mask {
		left: calc(12% * (1 - var(--p, 0)));
		width: calc(76% + 24% * var(--p, 0));
	}
}

/* The long heading can't sit on one line on a phone — let the pill wrap. */
@media (max-width: 700px) {
	.quality__pill {
		white-space: normal;
		width: max-content;
		max-width: 88vw;
	}
}

/* Reduced motion: no scroll hijack, just the design's static composition. */
@media (prefers-reduced-motion: reduce) {
	.section--quality.is-expand {
		height: auto;
	}

	.section--quality.is-expand .quality__sticky {
		position: relative;
		height: auto;
		aspect-ratio: 1600 / 900;
		min-height: 520px;
	}
}