/**
 * LCP Core — paginaovergang (blok 13, lcp-transition.php)
 *
 * Wegklikken (html.lcp-pt-leaving)
 *   1. drie lagen schuiven van onder omhoog, kort na elkaar: crème,
 *      surface, zwart. Net als het menu, maar verticaal.
 *   2. op de zwarte laag verschijnt de zoeker: hoekjes, REC en de naam van
 *      de bestemming, die van onder in beeld glijdt
 *   3. als de zwarte laag ligt, gaat de browser naar de volgende pagina
 *
 * Binnenkomen (html.lcp-pt-in → html.lcp-pt-in.lcp-pt-revealing)
 *   1. de pagina begint dicht, met hetzelfde beeld als stap 2 hierboven
 *   2. de lagen schuiven omhoog weg, nu in omgekeerde volgorde: zwart eerst,
 *      crème als laatste. Je ziet dus bij binnenkomen óók een flits crème.
 *
 * Alle beweging staat hier; lcp-transition.js zet alleen de classes.
 */

.lcp-pt {
	--lcp-pt-z: 9995; /* boven het menu (9990) en het logo (9991) */
	--lcp-pt-ease: cubic-bezier(0.65, 0.01, 0.05, 0.99); /* zelfde curve als het menu */

	/* Tijden. De browser wacht op het einde van de zwarte laag
	   (cover + 2 × stagger), dus cover bepaalt hoe lang een klik "duurt".
	   0.5s + 0.16s ≈ twee derde seconde. Korter dan 0.4s en de zoeker is
	   niet meer te lezen; langer dan 0.6s en het gaat traag voelen. */
	--lcp-pt-cover: 0.5s;
	--lcp-pt-reveal: 0.6s;
	--lcp-pt-stagger: 0.08s;

	--lcp-pt-layer-1: var(--e-global-color-accent, #FFFDDC);
	--lcp-pt-layer-2: var(--lcp-surface, #262626);
	--lcp-pt-bg: var(--lcp-black, #1C1C1C);
	--lcp-pt-ink: var(--e-global-color-primary, #FFFFFF);
	--lcp-pt-accent: var(--e-global-color-accent, #FFFDDC);

	/* Zoeker: afstand tot de rand van het scherm en lengte van de hoekjes. */
	--lcp-pt-inset: clamp(1rem, 0.5rem + 2.5vw, 3rem);
	--lcp-pt-corner: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	--lcp-pt-line: 2px;

	position: fixed;
	inset: 0;
	z-index: var(--lcp-pt-z);
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	color: var(--lcp-pt-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Overschrijft het hidden-attribuut uit de markup. Laadt dit bestand niet,
   dan blijft het element dus netjes verborgen. */
.lcp-pt[hidden] {
	display: block;
}

/* Tijdens de overgang zichtbaar en klikken blokkeren, zodat een tweede klik
   niet halverwege een andere pagina start. */
html.lcp-pt-leaving .lcp-pt,
html.lcp-pt-in .lcp-pt {
	visibility: visible;
	pointer-events: auto;
}


/* =========================================================================
 * LAGEN
 * ====================================================================== */

.lcp-pt__layer {
	position: absolute;
	inset: 0;
	transform: translateY(101%);
}

.lcp-pt__layer:nth-child(1) { background: var(--lcp-pt-layer-1); }
.lcp-pt__layer:nth-child(2) { background: var(--lcp-pt-layer-2); }
.lcp-pt__layer:nth-child(3) { background: var(--lcp-pt-bg); }

/* Wegklikken: van onder omhoog, crème eerst. */
html.lcp-pt-leaving .lcp-pt__layer {
	transform: none;
	transition: transform var(--lcp-pt-cover) var(--lcp-pt-ease) calc(var(--l) * var(--lcp-pt-stagger));
}

/* Binnenkomen: meteen dicht, zonder beweging. */
html.lcp-pt-in .lcp-pt__layer {
	transform: none;
	transition: none;
}

/* Openen: omhoog weg, zwart eerst, crème als laatste. */
html.lcp-pt-in.lcp-pt-revealing .lcp-pt__layer {
	transform: translateY(-101%);
	transition: transform var(--lcp-pt-reveal) var(--lcp-pt-ease) calc((2 - var(--l)) * var(--lcp-pt-stagger));
}


/* =========================================================================
 * ZOEKER — op de zwarte laag, beweegt dus met die laag mee
 * ====================================================================== */

.lcp-pt__frame {
	position: absolute;
	inset: var(--lcp-pt-inset);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(1.04);
}

/* Verschijnt terwijl de zwarte laag nog onderweg is, en staat er als die
   ligt. Op de nieuwe pagina staat hij er meteen, dus geen sprong. */
html.lcp-pt-leaving .lcp-pt__frame {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.3s ease calc(var(--lcp-pt-stagger) * 2 + 0.1s),
		transform 0.5s var(--lcp-pt-ease) calc(var(--lcp-pt-stagger) * 2 + 0.1s);
}

html.lcp-pt-in .lcp-pt__frame {
	opacity: 1;
	transform: none;
	transition: none;
}

.lcp-pt__corner {
	position: absolute;
	width: var(--lcp-pt-corner);
	height: var(--lcp-pt-corner);
	border: 0 solid var(--lcp-pt-accent);
}

.lcp-pt__corner.is-tl { top: 0;    left: 0;  border-top-width: var(--lcp-pt-line);    border-left-width: var(--lcp-pt-line); }
.lcp-pt__corner.is-tr { top: 0;    right: 0; border-top-width: var(--lcp-pt-line);    border-right-width: var(--lcp-pt-line); }
.lcp-pt__corner.is-bl { bottom: 0; left: 0;  border-bottom-width: var(--lcp-pt-line); border-left-width: var(--lcp-pt-line); }
.lcp-pt__corner.is-br { bottom: 0; right: 0; border-bottom-width: var(--lcp-pt-line); border-right-width: var(--lcp-pt-line); }

/* REC linksboven, binnen het hoekje. Global font "Label" (slot accent),
   zelfde koppeling als de menuknop. */
.lcp-pt__rec {
	position: absolute;
	top: calc(var(--lcp-pt-corner) * 0.5);
	left: calc(var(--lcp-pt-corner) * 0.5);
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--lcp-pt-accent);
	font-family: var(--e-global-typography-accent-font-family, "Archivo Black"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem));
	font-weight: var(--e-global-typography-accent-font-weight, 400);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, 0.06em);
	line-height: 1;
	text-transform: uppercase;
}

.lcp-pt__rec::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: currentColor;
	animation: lcp-pt-blink 1s steps(1, end) infinite;
}

@keyframes lcp-pt-blink {
	50% { opacity: 0; }
}

/* Bestemming: Archivo Black op H2-schaal (32 → 56), glijdt van onder in
   beeld binnen een masker. Klaar op hetzelfde moment als de zwarte laag. */
.lcp-pt__mask {
	display: block;
	max-width: 100%;
	overflow: clip;
	padding: 0 1rem;
}

.lcp-pt__label {
	display: block;
	font-family: var(--e-global-typography-primary-font-family, "Archivo Black"), sans-serif;
	font-size: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	transform: translateY(110%);
}

html.lcp-pt-leaving .lcp-pt__label {
	transform: none;
	transition: transform 0.46s var(--lcp-pt-ease) 0.2s;
}

html.lcp-pt-in .lcp-pt__label {
	transform: none;
	transition: none;
}


/* Bewegingsgevoelig: lcp-transition.js doet dan niets, en dit is de
   tweede zekerheid. */
@media (prefers-reduced-motion: reduce) {
	.lcp-pt,
	.lcp-pt[hidden] {
		display: none;
	}
}