/* ===========================================================================
 * Blok: featured cases
 *
 * blocks/cases.js zet:
 * - .is-hijack (groot scherm, beweging aan): sticky podium in een baan van
 *   --baan hoog, de rij schuift met --x;
 * - --par per case voor de parallax.
 * Zonder .is-hijack: een rij om opzij te vegen (scroll-snap).
 * De kleuren van het raster (--raster-*) leest modules/raster.js uit.
 * ========================================================================= */

.blok-cases {
	--case-breedte: clamp(17rem, 36vw, 36rem);
	--case-gat: 3rem;
	/* Rand links en rechts van alle inhoud; groot scherm 50px extra per kant. */
	--cases-rand: var(--gutter);
	color: var(--c-wit);
}

.cases--oranje {
	--raster-basis: color-mix(in srgb, var(--c-pd-oranje) 18%, var(--c-pd-zwart));
	--raster-a: var(--c-pd-oranje);
	--raster-b: var(--c-pd-licht-oranje);
}

.cases--cyaan {
	--raster-basis: color-mix(in srgb, var(--c-pd-cyaan) 10%, var(--c-pd-nacht));
	--raster-a: var(--c-pd-cyaan);
	--raster-b: var(--c-pd-licht-blauw);
}

/* Geen WebGL-raster (of blokvoorbeeld): het blok krijgt de kleur als vlak. */
html:not(.heeft-raster) .blok-cases {
	background: var(--raster-basis);
}

/* --- Intro ----------------------------------------------------------------- */
.cases__intro {
	padding-inline: var(--cases-rand);
	margin-bottom: var(--ruimte-7);
}

.cases__kop {
	max-width: 10ch;
	margin-bottom: var(--ruimte-5);
	font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.cases__tekst {
	max-width: 30rem;
	color: rgba(255, 255, 255, 0.75);
}

.cases__knoppen {
	margin-top: var(--ruimte-6);
}

/* --- Rij ------------------------------------------------------------------- */
.cases__lijst {
	display: flex;
	gap: var(--case-gat);
	margin: 0;
	padding: 0 var(--cases-rand) var(--ruimte-5);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cases-rand);
	scrollbar-width: none;
}

.cases__lijst::-webkit-scrollbar {
	display: none;
}

.cases__item {
	flex: 0 0 var(--case-breedte);
	scroll-snap-align: start;
	perspective: 1100px;
}

@media (min-width: 900px) {
	.blok-cases {
		--cases-rand: calc(var(--gutter) + 3.125rem);
	}
}

@media (max-width: 899px) {
	.blok-cases {
		--case-breedte: min(82vw, 26rem);
	}
}

/* --- Case ------------------------------------------------------------------ */
/* 3D-kanteling naar de cursor. blocks/cases.js dempt --rx, --ry en --gl
   (lichtvlek) per frame, dus op transform geen transition. Hover: de hele
   case wordt een fractie groter (scale staat los van transform). */
.case {
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: scale 0.7s var(--ease-uit);
}

.case:has(.case__link:hover),
.case:has(.case__link:focus-visible) {
	scale: 1.025;
}

.case__link {
	display: block;
	color: inherit;
	text-decoration: none;
	transform-style: preserve-3d;
}

.case__inhoud {
	transform: translateZ(28px);
}

.case__beeld {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: rgba(255, 255, 255, 0.06);
	isolation: isolate;
}

.case__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateX(calc(var(--par, 0) * -7%)) scale(1.14);
}

.case__link:focus-visible {
	outline: 2px solid var(--c-pd-cyaan);
	outline-offset: 6px;
	border-radius: var(--radius-l);
}

.case__inhoud {
	padding-top: var(--ruimte-5);
}

/* Lichtvlek die met de cursor meeloopt. */
.case__beeld::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.22), transparent 55%);
	opacity: var(--gl, 0);
	pointer-events: none;
}

.case__labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte-2);
	margin: 0 0 var(--ruimte-4);
	padding: 0;
	list-style: none;
}

.case__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.3em 0.85em 0.3em 0.4em;
	font-size: var(--fs-label);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.88);
	background: rgba(2, 7, 7, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-rond);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Pixel-iconen uit Figma (11x11 bolletjes, currentColor). */
.case__icoon {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--c-wit);
}

.case__icoon svg {
	width: 100%;
	height: 100%;
}

.case__titel {
	margin-bottom: var(--ruimte-3);
	font-size: var(--fs-h3);
}

.case__tekst {
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.7);
}

/* --- Scroll hijack --------------------------------------------------------- */
.blok-cases.is-hijack .cases__baan {
	height: var(--baan, auto);
}

.blok-cases.is-hijack .cases__podium {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--header-hoogte);
	overflow: clip;
}

.blok-cases.is-hijack .cases__spoor {
	display: flex;
	align-items: center;
	width: max-content;
	transform: translate3d(var(--x, 0), 0, 0);
	will-change: transform;
}

.blok-cases.is-hijack .cases__intro {
	flex: 0 0 clamp(26rem, 40vw, 44rem);
	margin-bottom: 0;
	padding-inline: var(--cases-rand) clamp(4rem, 6vw, 7rem);
}

.blok-cases.is-hijack {
	--case-gat: clamp(5rem, 7vw, 8rem);
}

.blok-cases.is-hijack .cases__lijst {
	overflow: visible;
	padding-bottom: 0;
	padding-left: 0;
}

/* Golf: blocks/cases.js zet per case --golf-y (hoogte op de golf) en
   --golf-r (helling); de rij deint zo mee met het scrollen. */
.blok-cases.is-hijack .cases__item {
	translate: 0 var(--golf-y, 0);
	rotate: var(--golf-r, 0deg);
	will-change: translate;
}

/* Een case mag niet hoger worden dan het scherm toelaat (met ruimte voor de golf). */
.blok-cases.is-hijack .cases__item {
	flex-basis: min(var(--case-breedte), calc((100svh - var(--header-hoogte) - 19rem) * 1.333));
}

@media (prefers-reduced-motion: reduce) {
	.case {
		transform: none;
		transition: none;
	}

	.case__beeld img {
		transform: none;
	}
}