/*
 * why.css — section 05, why companies choose Synergi.
 * Contents: 1 local tokens · 2 shell · 3 layout · 4 copy · 5 counter ·
 * 6 stage and deck · 7 the card · 8 the card's copy · 9 pagination ·
 * 10 the deck in 3D (needs JavaScript) · 11 narrow screens.
 *
 * Loaded by inc/assets.php as "synergi-section-why", only on pages that declare
 * the section. Markup: sections/why.php. Behaviour: assets/js/sections/why.js.
 *
 * Four portrait cards turning on a 3D carousel. Unusually for this build, the
 * source's own fallback is sound: without JavaScript the deck is a two-by-two
 * grid of four readable cards, because the 3D positioning is all behind a `.js`
 * prefix and the copy is not hidden until script arrives. That structure is
 * kept as it stands — the scripting query below replaces the `.js` class, and
 * nothing else about the two states changes.
 *
 * The perspective sits on the stage rather than on each card, so all four share
 * one vanishing point and read as one object rotating. Move `perspective` onto
 * the cards and they each get their own, which looks like four separate cards
 * that happen to be tilted.
 *
 * TWO DEVIATIONS:
 *
 * 1. The section id. The source gives this one no id at all; it gets `why` here
 *    so the navigation has something to point at later, in line with every
 *    other section.
 * 2. The reduced-motion rule is dropped, not carried across. base.css already
 *    stops every transition in the theme under prefers-reduced-motion, and
 *    why.js separately refuses to start the auto-advance — so the source's
 *    `transition: none` on three selectors is saying a third time what is
 *    already true twice (CLAUDE.md §6, handled theme-wide so no section has to
 *    remember it).
 *
 * Class map, design source -> theme:
 *   .why-section  -> .syn-why           .why-layout   -> __layout
 *   .why-copy     -> __copy             .why-intro    -> __intro
 *   .why-controls -> __controls         .why-counter  -> __counter
 *   .why-showcase -> __showcase         .why-stage    -> __stage
 *   .why-deck     -> __deck             .why-card     -> __card
 *   .why-card-copy -> __card-copy       .why-card-number -> __card-number
 *   .why-pagination -> __pagination     .why-pagination button -> __page
 *   .is-active -> .syn-is-active
 *
 * Colours are derived from the §3 palette with color-mix(); the source writes
 * this section in rgba and four raw hexes.
 */

/* ==========================================================================
   1. Local tokens
   ========================================================================== */

.syn-why {
	/*
	 * The two greys the source hard-codes for the counter and the inactive page
	 * numbers (#8994a1 and #8d99a6 — near enough the same colour twice).
	 * text-soft lightened towards white lands on both.
	 */
	--syn-why-muted: color-mix(in srgb, var(--syn-text-soft) 70%, var(--syn-white));

	/* The card's own rim and the veil behind its number. */
	--syn-why-rim: color-mix(in srgb, var(--syn-white) 84%, transparent);
	--syn-why-number-rim: color-mix(in srgb, var(--syn-white) 48%, transparent);
	--syn-why-number-bed: color-mix(in srgb, var(--syn-ink) 35%, transparent);

	/*
	 * The scrim down each photograph. Almost nothing at the top, most of the way
	 * to solid at the bottom, so the white copy sitting on it clears 4.5:1
	 * wherever the picture happens to be pale (CLAUDE.md §9).
	 */
	--syn-why-scrim: linear-gradient(
		180deg,
		color-mix(in srgb, var(--syn-ink) 2%, transparent) 26%,
		color-mix(in srgb, var(--syn-ink) 28%, transparent) 53%,
		color-mix(in srgb, var(--syn-ink) 96%, transparent) 100%
	);
}

/* ==========================================================================
   2. Shell
   ========================================================================== */

.syn-why {
	overflow: hidden;
	background-color: var(--syn-paper);
	/*
	 * Half the usual opening space, because section 04 above closes with half
	 * of its own. Together they make one ordinary gap rather than two.
	 */
	padding-block-start: calc(var(--syn-section-space) * 0.5);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.syn-why__layout {
	display: grid;
	grid-template-columns: minmax(18rem, 0.82fr) minmax(31rem, 1.18fr);
	gap: clamp(3rem, 7vw, 7.5rem);
	align-items: center;
	min-inline-size: 0;
}

/* ==========================================================================
   4. Copy
   ========================================================================== */

.syn-why__copy {
	position: relative;
	/* Above the stage: the front card is pushed 7rem towards the reader and
	   would otherwise pass over the heading on a narrow desktop. */
	z-index: 2;
	max-inline-size: 35rem;
}

.syn-why__title {
	max-inline-size: 17ch;
	margin-block: 0 1.5rem;
	color: var(--syn-navy);
	font-size: clamp(2.5rem, 3.4vw, 3.65rem);
	letter-spacing: 0;
	line-height: 1.1;
}

.syn-why__intro {
	max-inline-size: 33rem;
	margin: 0;
	color: var(--syn-text-soft);
	font-size: clamp(0.95rem, 1.2vw, 1.08rem);
	line-height: 1.75;
}

/* ==========================================================================
   5. Counter
   Shown only where the deck can actually move — a running count of something
   standing still would be a lie.
   ========================================================================== */

.syn-why__controls {
	display: none;
	align-items: center;
	gap: 0.9rem;
	inline-size: fit-content;
	margin-block-start: 2.5rem;
}

.syn-why__counter {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
	min-inline-size: 4.25rem;
	margin: 0;
	color: var(--syn-why-muted);
	font-size: 0.75rem;
	font-weight: 700;
}

.syn-why__counter-current {
	color: var(--syn-navy);
	font-size: 1.05rem;
}

/* ==========================================================================
   6. Stage and deck
   Without JavaScript the deck is a two-by-two grid and this is the whole of it.
   Section 10 is what makes it a carousel.
   ========================================================================== */

.syn-why__showcase {
	min-inline-size: 0;
}

.syn-why__stage {
	position: relative;
	min-block-size: 34rem;
	/* One vanishing point for all four cards, so the deck reads as a single
	   object turning rather than four separately tilted ones. */
	perspective: 850px;
	perspective-origin: 52% 46%;
	/* Vertical scrolling stays with the page; horizontal is the deck's. */
	touch-action: pan-y;
}

.syn-why__deck {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	align-items: center;
}

/* ==========================================================================
   7. The card
   ========================================================================== */

.syn-why__card {
	position: relative;
	min-block-size: 24rem;
	padding: 2rem 1.5rem;
	overflow: hidden;
	border: 1px solid var(--syn-why-rim);
	border-radius: var(--syn-radius-lg);
	background-color: var(--syn-ink);
	box-shadow: 0 1.4rem 3.6rem color-mix(in srgb, var(--syn-ink) 14%, transparent);
	/* Keeps the scrim's blending to the card, so it cannot tint its neighbours
	   as they overlap in 3D. */
	isolation: isolate;
}

.syn-why__photo {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.syn-why__card::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	background-image: var(--syn-why-scrim);
	content: "";
}

/* ==========================================================================
   8. The card's copy
   ========================================================================== */

.syn-why__card-copy {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline: 0;
	padding: clamp(1.35rem, 3vw, 2.15rem);
	color: var(--syn-white);
}

.syn-why__card-number {
	display: grid;
	inline-size: 2.55rem;
	block-size: 2.55rem;
	place-items: center;
	margin-block-end: 1rem;
	border: 1px solid var(--syn-why-number-rim);
	border-radius: 50%;
	background-color: var(--syn-why-number-bed);
	color: var(--syn-white);
	font-size: 0.7rem;
	font-weight: 750;
}

.syn-why__card-title {
	max-inline-size: 18ch;
	margin: 0 0 0.7rem;
	color: var(--syn-white);
	font-size: clamp(1.3rem, 2vw, 1.72rem);
	letter-spacing: 0;
	line-height: 1.16;
}

.syn-why__card-text {
	max-inline-size: 34rem;
	margin: 0;
	color: color-mix(in srgb, var(--syn-white) 78%, transparent);
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	line-height: 1.58;
}

/* ==========================================================================
   9. Pagination
   Hidden until JavaScript can move the deck, same as the counter.
   ========================================================================== */

.syn-why__pagination {
	display: none;
	justify-content: center;
	gap: 0.55rem;
	margin-block-start: 0.3rem;
}

.syn-why__page {
	position: relative;
	inline-size: 2.4rem;
	block-size: 1.7rem;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--syn-why-muted);
	cursor: pointer;
}

.syn-why__page.syn-is-active {
	color: var(--syn-navy);
}

/* The rule under each number, which thickens and turns cyan on the current one. */
.syn-why__page::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 2px;
	background-color: var(--syn-border);
	content: "";
	transition:
		background-color 250ms ease,
		transform 250ms ease;
}

.syn-why__page.syn-is-active::after {
	background-color: var(--syn-cyan);
	transform: scaleY(2);
}

.syn-why__page span {
	font-size: 0.62rem;
	font-weight: 700;
}

/* ==========================================================================
   10. The deck in 3D
   Everything that turns the grid above into a carousel. Gated on scripting
   because only why.js can turn it.

   Every card is placed in the same spot and told apart by transform and
   opacity alone — compositor properties, so a turn of the deck never triggers
   layout (CLAUDE.md §6). why.js rotates the position numbers; the geometry is
   written down once, here.
   ========================================================================== */

@media (scripting: enabled) {

	.syn-why__controls,
	.syn-why__pagination {
		display: flex;
	}

	.syn-why__deck {
		position: absolute;
		display: block;
		inset: 0;
		/* Without this the cards' rotations flatten into the stage and the deck
		   loses its depth entirely. */
		transform-style: preserve-3d;
	}

	.syn-why__card {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: min(61%, 22rem);
		min-block-size: 0;
		aspect-ratio: 3 / 4;
		transform-origin: center;
		transform-style: preserve-3d;
		backface-visibility: hidden;
		transition:
			transform 760ms cubic-bezier(0.2, 0.75, 0.2, 1),
			opacity 520ms ease,
			filter 520ms ease,
			box-shadow 520ms ease;
		will-change: transform;
	}

	/* Only the card facing the reader shows its words; the rest are pictures. */
	.syn-why__card:not(.syn-is-active) .syn-why__card-copy {
		opacity: 0;
		transform: translateY(0.8rem);
	}

	/*
	 * Asymmetric on purpose, and this is the whole of the ghost-title fix. A
	 * transition belongs to the state being entered, so this rule is the one
	 * that runs when a card stops being the front one: its words go at once,
	 * while it is still square on and before it crosses the card coming
	 * forward. The source delayed both directions by 180ms, which left the
	 * outgoing heading fully legible for the first third of the turn — and
	 * because two cards intersect in 3D mid-turn, it showed through the new
	 * card as a second title appearing under the deck and fading out.
	 */
	.syn-why__card-copy {
		transition:
			opacity var(--syn-duration-fast) ease,
			transform var(--syn-duration-fast) ease;
	}

	/* Arriving is the other way round: the card lands, then it speaks. The
	   delay outlasts the crossing, so nothing is readable while two cards
	   occupy the same space. */
	.syn-why__card.syn-is-active .syn-why__card-copy {
		transition:
			opacity 400ms ease 300ms,
			transform 500ms ease 300ms;
	}

	/*
	 * The four seats. 0 faces the reader, 1 and 3 flank it turned inwards, and 2
	 * is edge-on behind — which is why it is the one that fades out completely
	 * rather than showing a sliver of card back.
	 */
	.syn-why__card[data-syn-why-position="0"] {
		z-index: 4;
		opacity: 1;
		filter: saturate(1) contrast(1);
		box-shadow: 0 2.2rem 5rem color-mix(in srgb, var(--syn-ink) 25%, transparent);
		transform: translate3d(-50%, -50%, 7rem) rotateY(0deg) scale(1);
	}

	.syn-why__card[data-syn-why-position="1"] {
		z-index: 3;
		opacity: 0.86;
		filter: saturate(0.78) brightness(1.04);
		transform: translate3d(-5%, -50%, -3rem) rotateY(-32deg) scale(0.9);
	}

	.syn-why__card[data-syn-why-position="2"] {
		z-index: 1;
		opacity: 0;
		filter: saturate(0.58) brightness(1.08);
		transform: translate3d(-50%, -50%, -14rem) rotateY(-82deg) scale(0.8);
		pointer-events: none;
	}

	.syn-why__card[data-syn-why-position="3"] {
		z-index: 2;
		opacity: 0.78;
		filter: saturate(0.74) brightness(1.05);
		transform: translate3d(-95%, -50%, -4rem) rotateY(30deg) scale(0.9);
	}
}

/* ==========================================================================
   11. Narrow screens
   Three steps. At the last one the copy stops being a column of its own and the
   deck loses most of its depth, because a 3D fan needs room either side and a
   phone has none.
   ========================================================================== */

@media (max-width: 74rem) {

	.syn-why__layout {
		grid-template-columns: minmax(17rem, 0.75fr) minmax(27rem, 1.25fr);
		gap: 2.5rem;
	}

	.syn-why__title {
		font-size: clamp(2.4rem, 4.2vw, 3.35rem);
	}

	.syn-why__stage {
		min-block-size: 32rem;
	}
}

@media (max-width: 61.25rem) {

	.syn-why__layout {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	/* The copy splits in two: heading on one side, intro on the other, counter
	   across the bottom. */
	.syn-why__copy {
		display: grid;
		grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.1fr);
		gap: 0 3rem;
		align-items: end;
		max-inline-size: none;
	}

	.syn-why__title {
		grid-column: 1;
		margin-block-end: 0;
	}

	.syn-why__intro {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.syn-why__controls {
		grid-column: 1 / -1;
		margin-block-start: 2rem;
	}

	.syn-why__stage {
		inline-size: min(100%, 46rem);
		min-block-size: 33rem;
		margin-inline: auto;
	}
}

@media (max-width: 47.99rem) {

	.syn-why__layout {
		gap: 1.5rem;
	}

	.syn-why__copy {
		display: block;
	}

	.syn-why__title {
		max-inline-size: 16ch;
		margin-block-end: 1.25rem;
		font-size: clamp(2.15rem, 8vw, 2.65rem);
	}

	.syn-why__intro {
		font-size: 0.9rem;
		line-height: 1.7;
	}

	.syn-why__controls {
		margin-block-start: 1.6rem;
	}

	/*
	 * The stage reaches past the container's gutter on both sides, so the two
	 * flanking cards have somewhere to be instead of being clipped at the edge
	 * of the screen.
	 */
	.syn-why__stage {
		inline-size: calc(100% + 2rem);
		min-block-size: 29rem;
		margin-inline-start: -1rem;
		perspective: 900px;
	}

	.syn-why__card-copy {
		padding: 1.35rem;
	}

	.syn-why__card-number {
		inline-size: 2.3rem;
		block-size: 2.3rem;
		margin-block-end: 0.8rem;
	}

	.syn-why__card-title {
		font-size: 1.32rem;
	}

	.syn-why__card-text {
		font-size: 0.76rem;
	}
}

@media (scripting: enabled) and (max-width: 47.99rem) {

	.syn-why__card {
		inline-size: min(76vw, 19.5rem);
		padding: clamp(1.25rem, 6vw, 2rem);
	}

	/* The fan closes up and the flanking cards dim further, since they now sit
	   much closer to the one in front. */
	.syn-why__card[data-syn-why-position="0"] {
		transform: translate3d(-50%, -50%, 4rem) rotateY(0deg) scale(1);
	}

	.syn-why__card[data-syn-why-position="1"] {
		opacity: 0.66;
		transform: translate3d(-18%, -50%, -3rem) rotateY(-24deg) scale(0.89);
	}

	.syn-why__card[data-syn-why-position="2"] {
		transform: translate3d(-50%, -50%, -10rem) rotateY(-78deg) scale(0.8);
	}

	.syn-why__card[data-syn-why-position="3"] {
		opacity: 0.66;
		transform: translate3d(-82%, -50%, -4rem) rotateY(24deg) scale(0.89);
	}
}