/*
 * Beweging
 * ========
 *
 * Eén idee, geen losse effectjes: het raster lost op. Het LSBR-logo is een
 * matrix van vierkantjes, en dat motief keert hier terug — content klikt op
 * zijn plek terwijl je scrollt, en pagina's groeien in elkaar door in plaats
 * van te knipperen.
 *
 * Alles hieronder is progressive enhancement: geen JavaScript, geen
 * bibliotheek. Een browser die het niet kent toont gewoon de statische
 * pagina, en wie beweging heeft uitgezet krijgt niets.
 */

/* --- Overgang tussen pagina's --------------------------------------------
   Cross-document view transitions. Twee regels CSS; de browser doet de rest.
   ---------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation-duration: 320ms;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Het portret van een fellow of de kaart van een grant houdt zijn eigen
   naam vast, zodat hij van het overzicht naar de detailpagina doorgroeit in
   plaats van te verdwijnen en opnieuw te verschijnen. */
::view-transition-group(.lsbr-morph) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --- Binnenkomen bij het scrollen ----------------------------------------
   animation-timeline: view() koppelt de animatie aan de positie van het
   element in beeld. Geen scroll-listener, geen IntersectionObserver: de
   browser doet het op de compositor, dus het blijft vloeiend.
   ---------------------------------------------------------------------- */

@keyframes lsbr-opkomen {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

@supports (animation-timeline: view()) {
	.lsbr-grant,
	.lsbr-fellow,
	.lsbr-persoon,
	.lsbr-kwadrant,
	.lsbr-subsidie,
	.lsbr-tijdlijn__rij,
	.wp-block-query .wp-block-columns {
		animation: lsbr-opkomen linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 45%;
	}
}

/* --- Het pixelraster -----------------------------------------------------
   Het motief uit het logo als accent onder de displaykoppen: een rij
   vierkantjes die oplost naar rechts. Puur decoratief, dus verborgen voor
   voorleessoftware.
   ---------------------------------------------------------------------- */

.lsbr-sectiekop {
	position: relative;
}

@supports (animation-timeline: view()) {
	.lsbr-sectiekop::after {
		content: "";
		display: block;
		height: 0.5rem;
		margin-block-start: 0.75rem;
		width: min(18rem, 60%);
		background-image: linear-gradient(
			90deg,
			var(--wp--preset--color--rood) 0 0.5rem,
			transparent 0.5rem 0.75rem
		);
		background-size: 0.75rem 100%;
		mask-image: linear-gradient(90deg, #000, transparent);
		transform-origin: left;
		animation: lsbr-raster linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}
}

@keyframes lsbr-raster {
	from {
		transform: scaleX(0);
		opacity: 0;
	}
}

/* --- Balk die meekrimpt --------------------------------------------------
   Ook met een scroll-tijdlijn: het logo wordt kleiner en de balk compacter
   naarmate je verder bent. Zonder scriptje en zonder sprong.
   ---------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
	.wp-site-blocks > div:first-child {
		position: sticky;
		top: 0;
		z-index: 20;
		background: #fff;
	}

	.wp-site-blocks > div:first-child .wp-block-site-logo img {
		animation: lsbr-logo-krimpen linear both;
		animation-timeline: scroll(root);
		animation-range: 0 12rem;
		transform-origin: center;
	}

	.wp-site-blocks > div:first-child header {
		animation: lsbr-kop-krimpen linear both;
		animation-timeline: scroll(root);
		animation-range: 0 12rem;
	}
}

@keyframes lsbr-logo-krimpen {
	to {
		transform: scale(0.62);
	}
}

@keyframes lsbr-kop-krimpen {
	to {
		padding-block: 0.35rem;
	}
}

/* --- Voortgang -----------------------------------------------------------
   Een dunne streep boven in beeld die meeloopt met hoe ver je bent. Op de
   lange lijsten (196 grants) geeft dat houvast.
   ---------------------------------------------------------------------- */

@supports (animation-timeline: scroll()) {
	body::before {
		content: "";
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 50;
		height: 3px;
		width: 100%;
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--rood),
			var(--wp--preset--color--marine)
		);
		transform-origin: left;
		transform: scaleX(0);
		animation: lsbr-voortgang linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes lsbr-voortgang {
	to {
		transform: scaleX(1);
	}
}

/* --- Wie geen beweging wil ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	.lsbr-grant,
	.lsbr-fellow,
	.lsbr-persoon,
	.lsbr-kwadrant,
	.lsbr-subsidie,
	.lsbr-tijdlijn__rij,
	.wp-block-query .wp-block-columns,
	.lsbr-sectiekop::after,
	.wp-site-blocks > div:first-child .wp-block-site-logo img,
	.wp-site-blocks > div:first-child header,
	body::before {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* --- Diepte in de hero ---------------------------------------------------
   De foto beweegt trager dan het blauwe blok erop. Eén beeld, twee lagen —
   genoeg om diepte te suggereren zonder dat er iets "gebeurt".

   De animatie staat op de hero en niet op de foto zelf, en verplaatst twee
   aangepaste eigenschappen. Reden: de fotolaag moet overflow: hidden hebben
   om de opgeschaalde foto af te snijden, maar zo'n laag is een
   scrollcontainer — en dan meet view() de tijdlijn tegen die laag in plaats
   van tegen de pagina, waardoor de parallax bevriest. clip-path lost dat
   niet op: dat knipt alleen het schilderen, de layout loopt nog steeds over.
   ---------------------------------------------------------------------- */

@property --lsbr-foto-y {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

@property --lsbr-blok-y {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

@supports (animation-timeline: view()) {
	.lsbr-hero {
		animation: lsbr-diepte linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	.lsbr-hero__foto {
		overflow: hidden;
	}

	.lsbr-hero__foto img {
		transform: scale(1.12) translateY(var(--lsbr-foto-y));
		will-change: transform;
	}

	.lsbr-hero__blok {
		transform: translateY(var(--lsbr-blok-y));
	}
}

@keyframes lsbr-diepte {
	from {
		--lsbr-foto-y: -14px;
		--lsbr-blok-y: 12px;
	}

	to {
		--lsbr-foto-y: 14px;
		--lsbr-blok-y: -12px;
	}
}

/* --- De grafiek bouwt zichzelf op ----------------------------------------
   De kolommen groeien uit de basislijn, van links naar rechts. Dat is geen
   versiering: het is precies wat de grafiek vertelt — 27 jaar die zich
   opstapelen.

   Bewust op de tijd en niet op het scrollen: de grafiek staat op 754px en
   is dus bij het laden al in beeld. Een scroll-gestuurde animatie zou al
   half afgelopen zijn voordat de bezoeker iets doet.
   ---------------------------------------------------------------------- */

.lsbr-tl__kolom path {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: lsbr-groeien 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
	/* var(--i) is het volgnummer van de kolom: het beeld rolt van 1999 naar
	   2025 in plaats van in één klap te verschijnen. */
	animation-delay: calc(var(--i, 0) * 22ms);
}

.lsbr-tl__jaar,
.lsbr-tl__rasterlabel {
	animation: lsbr-opkomen 500ms ease-out backwards;
	animation-delay: 320ms;
}

@keyframes lsbr-groeien {
	from { transform: scaleY(0); }
}

/* --- Kaarten komen per rij binnen ----------------------------------------
   Ze schoven al omhoog; nu ook een fractie kleiner naar hun plek, en per
   kolom iets later. Dat leest als volgorde in plaats van als een deur die
   openklapt.
   ---------------------------------------------------------------------- */

@keyframes lsbr-settelen {
	from {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.985);
	}
}

@supports (animation-timeline: view()) {
	.lsbr-grant,
	.lsbr-fellow,
	.lsbr-persoon {
		animation-name: lsbr-settelen;
		animation-range: entry 0% entry 50%;
	}

	.lsbr-fellow:nth-child(3n + 2),
	.lsbr-persoon:nth-child(3n + 2) {
		animation-range: entry 4% entry 54%;
	}

	.lsbr-fellow:nth-child(3n),
	.lsbr-persoon:nth-child(3n) {
		animation-range: entry 8% entry 58%;
	}
}

/* --- Aanwijzen: één laag diep --------------------------------------------
   De kaart komt los van de pagina. Niet kantelen, niet gloeien — alleen
   hoogte, want dat is wat een kaart is.
   ---------------------------------------------------------------------- */

.lsbr-grant,
.lsbr-fellow {
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 260ms ease, border-color 200ms ease;
}

.lsbr-grant:hover,
.lsbr-grant:focus-within,
.lsbr-fellow:hover,
.lsbr-fellow:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgb(13 7 93 / 10%);
}

@media (prefers-reduced-motion: reduce) {
	.lsbr-hero,
	.lsbr-hero__foto img,
	.lsbr-hero__blok,
	.lsbr-tl__kolom path,
	.lsbr-tl__jaar,
	.lsbr-tl__raster,
	.lsbr-tl__rasterlabel {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.lsbr-grant:hover,
	.lsbr-fellow:hover {
		transform: none;
	}
}

/* --- De kwadranten schuiven in -------------------------------------------
   Elk vlak wist zich open vanaf zijn eigen buitenrand: links vanaf links,
   rechts vanaf rechts. Dat maakt van vier gekleurde blokken één beweging in
   plaats van vier losse fades — en het is hetzelfde idee als de rest van de
   site: het raster lost op.
   ---------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	.lsbr-kwadrant {
		animation: lsbr-wissen-links cubic-bezier(0.2, 0.7, 0.3, 1) both;
		animation-timeline: view();
		animation-range: entry 5% entry 55%;
	}

	/* De rechterkolom (tweede en vierde) wist de andere kant op. */
	.lsbr-kwadrant:nth-child(even) {
		animation-name: lsbr-wissen-rechts;
	}

	/* De onderste rij volgt een fractie later, zodat het als één golf leest. */
	.lsbr-kwadrant:nth-child(n + 3) {
		animation-range: entry 12% entry 62%;
	}

	/* De inhoud komt na het vlak: eerst de kleur, dan de tekst. */
	.lsbr-kwadrant > * {
		animation: lsbr-opkomen linear both;
		animation-timeline: view();
		animation-range: entry 25% entry 70%;
	}
}

@keyframes lsbr-wissen-links {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0); }
}

@keyframes lsbr-wissen-rechts {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0); }
}

/* Aanwijzen: het vlak wordt een tint dieper en de knop schuift mee. Geen
   schaduw en geen kantelen — een vlak is geen kaart. */
.lsbr-kwadrant {
	transition: filter 300ms ease;
}

.lsbr-kwadrant:hover {
	filter: brightness(0.97) saturate(1.08);
}

.lsbr-kwadrant .wp-block-button__link {
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
		background-color 200ms ease;
}

.lsbr-kwadrant:hover .wp-block-button__link {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.lsbr-kwadrant,
	.lsbr-kwadrant > * {
		animation: none;
		clip-path: none;
		opacity: 1;
	}

	.lsbr-kwadrant:hover {
		filter: none;
	}

	.lsbr-kwadrant:hover .wp-block-button__link {
		transform: none;
	}
}