/*
Theme Name:   ENSO
Description:  Theme voor de trouwsite van Enrico en Sophie. Alleen presentatie: gasten, antwoorden en links staan in de ENSO Wedding-plugin.
Version:      0.1.0
Requires PHP: 8.2
Author:       Enrico van de Craats
Text Domain:  enso
License:      Privé - niet voor distributie
*/

/*
 * Design tokens (DES-03). Gemeten op de drukbestanden van de kaarten (SavetheDate_dark_2.pdf en
 * Trouwkaart.pdf): kleuren, snitten en spatiëring komen daar letterlijk vandaan. Eén theme; de site
 * begint op de donkere kaart en gaat bij het scrollen over in de witte. Een stijlwijziging gebeurt
 * hier en raakt geen gegevens.
 *
 * Letters, zoals op de kaart:
 *   La Luxes Serif Pro Bold         SAVE OUR DATE (spooktekst) en ALL BLACK
 *   La Luxes Serif Pro Light        gespatieerde kapitalen (datum), "This love is ours", koppen
 *   La Luxes Serif Pro Light Italic "love", de namen op de envelop
 *   La Luxes Serif Pro ExtLt Italic "Dress code", "De officiële uitnodiging volgt"
 *   La Luxes Serif Pro Regular      knoppen (een tikje steviger dan Light, voor de leesbaarheid)
 *   "Enrico & Sophie"               op de kaart omgezet in lijnen; staat als assets/names.svg
 *   New Icon Serif                  lopende tekst en het formulier; groter dan gewone broodtekst
 *                                   (--enso-text-size), nooit kleiner dan 1rem
 * New Icon heeft geen vette snit: font-synthesis staat uit, zodat de browser nooit nep-vet maakt.
 */
:root {
	--enso-paper: #faf6f1;
	--enso-ink: #36332f;
	--enso-ghost: #dedede;
	--enso-night: #2c2a28;
	--enso-table: #ebe4da;
	--enso-envelope: #1e1d1b;
	--enso-envelope-flap: #232120;
	--enso-envelope-inside: #121110;
	--enso-envelope-seam: #3a3733;
	--enso-liner: #ece3d6;
	--enso-liner-stripe: rgba(44, 42, 40, 0.06);
	--enso-night-ghost: #36332f;
	--enso-night-text: #faf6f1;
	--enso-night-muted: #9d978f;
	--enso-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--enso-muted: #77726c;
	--enso-line: #e4dfd8;
	--enso-accent: #2c2a28;
	--enso-radius: 2px;
	--enso-font-display: "La Luxes Serif Pro", "Didot", "Bodoni 72", Georgia, serif;
	--enso-font-text: "New Icon Serif", "Bodoni 72 Book", "Iowan Old Style", Georgia, serif;
	--enso-text-size: 1.25rem;
	--enso-tracking-caps: 0.33em;
}

@font-face {
	font-family: "New Icon Serif";
	src: url("assets/fonts/NewIconSerif-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "New Icon Serif";
	src: url("assets/fonts/NewIconSerif-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* La Luxes met font-display: block. De kaart en de envelop komen toch al rustig binnen; liever een
 * tel niets dan een flits in Georgia die daarna verspringt. Lopende tekst (New Icon) blijft swap. */
@font-face {
	font-family: "La Luxes Serif Pro";
	src: url("assets/fonts/LaLuxesSerifPro-ExtLtIta.woff2") format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: block;
}

@font-face {
	font-family: "La Luxes Serif Pro";
	src: url("assets/fonts/LaLuxesSerifPro-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "La Luxes Serif Pro";
	src: url("assets/fonts/LaLuxesSerifPro-LightItalic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: block;
}

@font-face {
	font-family: "La Luxes Serif Pro";
	src: url("assets/fonts/LaLuxesSerifPro-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "La Luxes Serif Pro";
	src: url("assets/fonts/LaLuxesSerifPro-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: block;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	font-synthesis: none;
}

body {
	margin: 0;
	background: var(--enso-paper);
	color: var(--enso-ink);
	font-family: var(--enso-font-text);
	font-size: var(--enso-text-size);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-underline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
	padding: 8px 12px;
	background: var(--enso-ink);
	color: var(--enso-paper);
	z-index: 10;
}

/* --- kop en voet ------------------------------------------------------------------------------ */

.site-header {
	padding: 20px 16px;
	text-align: center;
}

/* Op pagina's met de opening staat het monogram op het zegel en op de kaart; geen aparte kop. */
body:has(.enso-show) .site-header {
	display: none;
}

.site-monogram {
	display: inline-block;
	width: 44px;
	height: 44px;
	color: inherit;
}

.site-monogram svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-footer {
	padding: 48px 16px 40px;
	color: var(--enso-muted);
	font-family: var(--enso-font-display);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: var(--enso-tracking-caps);
	text-align: center;
	text-transform: uppercase;
}

body:has(.enso-show) .site-footer {
	background: var(--enso-night);
	color: var(--enso-night-muted);
}

.site-footer__mark {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto 14px;
	color: var(--enso-ink);
	opacity: 0.85;
}

body:has(.enso-show) .site-footer__mark {
	color: var(--enso-night-text);
}

.site-footer__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- de opening: podium --------------------------------------------------------------------------
 *
 * Zonder beweging (geen JavaScript of "minder beweging"): alleen de donkere kaart, stil, schermvullend.
 * Met beweging (.js-motion): een hoge sectie met een sticky podium; motion.js zet per frame de
 * maten en standen als CSS-variabelen op het podium:
 *
 *   --ex --ey --ew --eh   plaats en maat van de envelop (px)
 *   --edrop               hoe ver de envelop naar beneden is weggezakt (px)
 *   --flap --flapz        stand van de klep (graden) en of hij voor of achter de kaart ligt
 *   --sx --sy --ss        verplaatsing en schaal van de kaart
 *   --ct --cl             uitsnede van de kaart (staand 2:3 terwijl hij klein is, daarna vol)
 *   --t                   hoe hoog de lijn van de witte kaart staat (0 tot 1)
 */
.enso-show {
	position: relative;
	background: var(--enso-night);
}

.enso-show__stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	--t: 0;
}

.enso-env-text,
.enso-env__back,
.enso-env__flap,
.enso-env__front,
.enso-show__cue {
	display: none;
}

/* --- de kaart ------------------------------------------------------------------------------------ */

.enso-card {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
}

.enso-card__sheet {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
}

.enso-card__layer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
}

.enso-card__layer--night {
	background: var(--enso-night);
	color: var(--enso-night-text);
	--ghost: var(--enso-night-ghost);
}

.enso-card__layer--day {
	position: absolute;
	inset: 0;
	background: var(--enso-paper);
	color: var(--enso-ink);
	--ghost: var(--enso-ghost);
	clip-path: inset(calc((1 - var(--t)) * 100%) 0 0 0);
	pointer-events: none;
}

/*
 * De kaart op schaal. Een staande kaart van 2:3 past in het scherm (breedte min(100%, 100svh / 1,5),
 * dezelfde maat die motion.js voor de uitsnede gebruikt); de inhoud is 90% daarvan, met 5% marge
 * links en rechts, zoals op de drukproef. Alle maten hieronder zijn in cqi van die inhoudsbreedte en
 * gemeten op SavetheDate_dark_2.pdf (kaartbreedte = 111,1cqi):
 *
 *   spooktekst   52,2 pt op 283,5 pt breed  -> 20,46cqi, regelafstand 1,055, Bold
 *   namen        127,7 pt breed             -> 50,13cqi (vector, assets/names.svg)
 *   datum        8 pt, spatiëring 0,33em    -> 3,14cqi, regelafstand 1,62, Light
 *   motto        14 pt                      -> 5,49cqi, Light met "love" in Light Italic
 *
 * De marges tussen de blokken zijn zo gekozen dat basislijnen en kapitaalhoogtes op dezelfde
 * plekken vallen als op de kaart. Alleen de datum heeft een ondergrens (12px), voor kleine schermen.
 */
.enso-card__inner {
	width: min(90%, 60vh);
	width: min(90%, 60svh);
	container-type: inline-size;
}

/* De 1,1cqi boven de spooktekst: op de kaart staat het blok net iets onder het midden. */
.enso-card__ghost {
	margin: 1.1cqi 0 13.17cqi;
	font-family: var(--enso-font-display);
	font-weight: 700;
	font-size: 20.46cqi;
	line-height: 1.055;
	text-transform: uppercase;
	color: var(--ghost);
	user-select: none;
}

.enso-card__line {
	display: block;
	overflow: hidden;
}

.enso-card__line > span {
	display: block;
}

.enso-card__names {
	width: 50.13cqi;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 0;
}

.enso-card__names svg {
	display: block;
	width: 100%;
	height: auto;
}

.enso-card__date {
	margin: 3.83cqi 0 0;
	font-family: var(--enso-font-display);
	font-weight: 300;
	font-size: max(0.75rem, 3.14cqi);
	letter-spacing: var(--enso-tracking-caps);
	line-height: 1.62;
	text-transform: uppercase;
}

.enso-card__motto {
	margin: 18.62cqi 0 0;
	font-family: var(--enso-font-display);
	font-weight: 300;
	font-size: 5.49cqi;
	line-height: 1.2;
}

/* --- de opening met beweging --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js-motion .enso-show {
		height: 520vh;
		height: 520svh;
		background: var(--enso-table);
	}

	/* Dezelfde maten als motion.js uitrekent, zodat de envelop er vanaf de eerste weergave goed
	 * staat; het script zet daarna exacte pixels. */
	.js-motion .enso-show__stage {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		min-height: 0;
		background: var(--enso-table);
		--ew: min(70vw, 33.8svh, 400px);
		--eh: calc(var(--ew) * 1.42);
		--ex: calc((100vw - var(--ew)) / 2);
		--ey: calc((100svh - var(--eh)) / 2 + 8svh);
		--edrop: 0px;
	}

	/* De kaart zit in de dichte envelop. Tonen pas als het script hem op zijn plek heeft gezet én
	 * de envelop klaar is met binnenkomen; anders schemert hij door de nog doorzichtige envelop. */
	.js-motion .enso-show__stage:not(.is-ready) .enso-card {
		visibility: hidden;
	}

	.js-motion .enso-card {
		animation: enso-appear 0s linear 1.6s both;
	}

	/* Envelop: achterkant, klep, voorkant. Alles schuift samen weg met --edrop. */
	.js-motion .enso-env__back,
	.js-motion .enso-env__front,
	.js-motion .enso-env__flap {
		display: block;
		position: absolute;
		left: var(--ex);
		top: var(--ey);
		width: var(--ew);
	}

	/* De binnenkant: zwart met een crèmekleurige voering, zoals bij een luxe envelop. */
	.js-motion .enso-env__back {
		z-index: 1;
		height: var(--eh);
		background:
			repeating-linear-gradient(135deg, var(--enso-liner-stripe) 0 1px, transparent 1px 7px),
			var(--enso-liner);
		border: 7px solid var(--enso-envelope);
		box-shadow: 0 38px 60px -34px rgba(44, 42, 40, 0.6), 0 2px 3px rgba(44, 42, 40, 0.18);
		transform: translateY(var(--edrop));
	}

	.js-motion .enso-env__front {
		z-index: 3;
		height: var(--eh);
		background:
			linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 45%),
			var(--enso-envelope);
		clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%);
		transform: translateY(var(--edrop));
	}

	.js-motion .enso-env__flap {
		z-index: var(--flapz, 4);
		height: calc(var(--eh) * 0.4);
		transform-origin: 50% 0;
		transform: translateY(var(--edrop)) perspective(1100px) rotateX(var(--flap, 0deg));
		transform-style: preserve-3d;
	}

	/* Twee kanten van de klep. Welke zichtbaar is, zet motion.js (is-flapped): betrouwbaarder dan
	 * backface-visibility, die in sommige browsers wegvalt zodra er een filter of clip-path meedoet. */
	.js-motion .enso-env__flap-face {
		position: absolute;
		inset: 0;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

	.js-motion .enso-env__flap-face--front {
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%),
			var(--enso-envelope-flap);
	}

	.js-motion .enso-env__flap-face--back {
		visibility: hidden;
		background: var(--enso-envelope);
	}

	.js-motion .enso-env__flap-face--back::before {
		content: "";
		position: absolute;
		inset: 0;
		clip-path: polygon(6% 0, 94% 0, 50% 88%);
		background:
			repeating-linear-gradient(135deg, var(--enso-liner-stripe) 0 1px, transparent 1px 7px),
			var(--enso-liner);
	}

	.js-motion .enso-show__stage.is-flapped .enso-env__flap-face--front {
		visibility: hidden;
	}

	.js-motion .enso-show__stage.is-flapped .enso-env__flap-face--back {
		visibility: visible;
	}

	.js-motion .enso-env__seam {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.js-motion .enso-env__seam polyline {
		stroke: var(--enso-envelope-seam);
		stroke-width: 1;
	}

	/* Het lakzegel: een echte knop. Tik en de opening speelt zichzelf af. */
	.js-motion .enso-env__seal {
		position: absolute;
		left: 50%;
		top: 100%;
		width: calc(var(--ew) * 0.3);
		max-width: 120px;
		aspect-ratio: 1;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		cursor: pointer;
		transform: translate(-50%, -54%);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
		-webkit-tap-highlight-color: transparent;
	}

	.js-motion .enso-env__seal svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* Zodra de klep voorbij de helft is, ligt het zegel aan de achterkant. */
	.js-motion .enso-show__stage.is-flapped .enso-env__seal {
		visibility: hidden;
	}

	.js-motion .enso-env__seal {
		transition: translate 0.5s var(--enso-ease), filter 0.5s var(--enso-ease);
	}

	@media (hover: hover) {
		.js-motion .enso-env__seal:hover {
			translate: 0 -3px;
			filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
		}
	}

	.js-motion .enso-env__seal:active {
		scale: 0.95;
	}

	.js-motion .enso-env__seal:focus-visible {
		outline: 2px solid var(--enso-paper);
		outline-offset: 4px;
	}

	.js-motion .enso-env-text {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		padding: 0 24px;
		text-align: center;
		color: var(--enso-ink);
		transform: translateY(var(--edrop));
	}

	.js-motion .enso-env-text--head {
		bottom: calc(100% - var(--ey) + 28px);
		translate: 0 calc(var(--lift, 0) * -1);
	}

	.js-motion .enso-env-text--foot {
		top: calc(var(--ey) + var(--eh) + 32px);
	}

	.enso-env-text__small,
	.enso-env-text__hint,
	.enso-env-text__date {
		margin: 0;
		font-family: var(--enso-font-display);
		font-weight: 300;
		font-size: 0.75rem;
		letter-spacing: var(--enso-tracking-caps);
		text-transform: uppercase;
		color: var(--enso-muted);
	}

	.enso-env-text__names {
		margin: 6px 0 0;
		font-family: var(--enso-font-display);
		font-weight: 300;
		font-style: italic;
		font-size: clamp(1.6rem, 7vw, 2.3rem);
		line-height: 1.1;
	}

	.enso-env-text__hint {
		color: var(--enso-ink);
	}

	.enso-env-text__hint .is-pointer {
		display: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.enso-env-text__hint .is-touch {
			display: none;
		}

		.enso-env-text__hint .is-pointer {
			display: inline;
		}
	}

	.enso-env-text__rule {
		display: block;
		width: 1px;
		height: 36px;
		margin: 12px auto;
		background: var(--enso-ink);
		opacity: 0.55;
		transform-origin: top;
	}

	/* De kaart ligt tussen achter- en voorkant van de envelop. */
	.js-motion .enso-card {
		position: absolute;
		inset: 0;
		z-index: 2;
		min-height: 0;
		pointer-events: none;
	}

	.js-motion .enso-show__stage.is-open .enso-card {
		pointer-events: auto;
	}

	.js-motion .enso-card__sheet {
		position: absolute;
		inset: 0;
		min-height: 0;
		transform: translate(var(--sx, 0), var(--sy, 0)) scale(var(--ss, 1));
		clip-path: inset(var(--ct, 0) var(--cl, 0) var(--ct, 0) var(--cl, 0) round var(--cr, 0));
		will-change: transform, clip-path;
	}

	.js-motion .enso-card__layer {
		position: absolute;
		inset: 0;
		min-height: 0;
	}

	.js-motion .enso-show__cue {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 3vh;
		z-index: 5;
		width: 1px;
		height: 44px;
		overflow: hidden;
		opacity: 0;
		transition: opacity 0.6s var(--enso-ease);
	}

	.js-motion .enso-show__cue::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--enso-night-text);
		opacity: 0.7;
		transform-origin: top;
		animation: enso-cue 2.4s var(--enso-ease) infinite;
	}

	.js-motion .enso-show__stage.is-cue .enso-show__cue {
		opacity: 1;
	}

	/* --- binnenkomst: de envelop ligt klaar --- */
	.js-motion .enso-env-text--head > * {
		animation: enso-in-up 1.4s var(--enso-ease) both;
	}

	.js-motion .enso-env-text--head > * + * {
		animation-delay: 0.12s;
	}

	.js-motion .enso-env__back,
	.js-motion .enso-env__front {
		animation: enso-in-env 1.5s var(--enso-ease) 0.15s both;
	}

	.js-motion .enso-env__flap {
		animation: enso-in-env 1.5s var(--enso-ease) 0.15s both;
	}

	.js-motion .enso-env__seal {
		animation: enso-seal 1.1s var(--enso-ease) 0.95s both;
	}

	.js-motion .enso-env-text--foot > * {
		animation: enso-in-up 1.2s var(--enso-ease) 1.4s both;
	}

	.js-motion .enso-env-text__rule {
		animation: enso-draw 1.6s var(--enso-ease) 1.6s both;
	}

	/* --- de kaart komt vol in beeld: de tekst zet zich (één keer) --- */
	.js-motion .enso-show__stage.is-open .enso-card__line > span {
		animation: enso-rise 1.3s var(--enso-ease) both;
	}

	.js-motion .enso-show__stage.is-open .enso-card__line:nth-child(2) > span {
		animation-delay: 0.1s;
	}

	.js-motion .enso-show__stage.is-open .enso-card__line:nth-child(3) > span {
		animation-delay: 0.2s;
	}

	.js-motion .enso-show__stage.is-open .enso-card__date {
		animation: enso-track 1.8s var(--enso-ease) 0.35s both;
	}

	.js-motion .enso-show__stage.is-open .enso-card__motto em {
		display: inline-block;
		animation: enso-unblur 1.8s var(--enso-ease) 0.6s both;
	}
}

/* --- verschijnen tijdens het scrollen -------------------------------------------------------------
 *
 * Alleen met beweging. Zonder script of met minder beweging staat alles meteen op zijn plek.
 */
@media (prefers-reduced-motion: no-preference) {
	.js-motion [data-enso-reveal] {
		opacity: 0;
		translate: 0 18px;
		transition:
			opacity 1.1s var(--enso-ease) calc(var(--i, 0) * 90ms),
			translate 1.1s var(--enso-ease) calc(var(--i, 0) * 90ms);
	}

	.js-motion [data-enso-reveal].is-in {
		opacity: 1;
		translate: none;
	}

	/* Bij de tijdlijn blijft de band zelf staan (anders schemert wit door zwart heen); alleen de
	 * inhoud komt in beeld. */
	.js-motion .enso-tl[data-enso-reveal] {
		opacity: 1;
		translate: none;
	}

	.js-motion .enso-tl > :not(.enso-tl__dot) {
		opacity: 0;
		translate: 0 14px;
		transition:
			opacity 1s var(--enso-ease) 0.25s,
			translate 1s var(--enso-ease) 0.25s;
	}

	.js-motion .enso-tl.is-in > :not(.enso-tl__dot) {
		opacity: 1;
		translate: none;
	}

	/* De lijn van de tijdlijn tekent zich per onderdeel van boven naar beneden. */
	.js-motion .enso-tl::before {
		transform: scaleY(0);
		transition: transform 1.6s var(--enso-ease) 0.1s;
	}

	.js-motion .enso-tl.is-in::before {
		transform: scaleY(1);
	}

	.js-motion .enso-tl__dot {
		scale: 0;
		transition: scale 0.8s var(--enso-ease) 0.05s;
	}

	.js-motion .enso-tl.is-in .enso-tl__dot {
		scale: 1;
	}

	/* Bij "Ja" komen de onderdelen rustig tevoorschijn. */
	.js-motion .enso-when-yes:not([hidden]) {
		animation: enso-in-up 0.7s var(--enso-ease) both;
	}

	/* De dresscode valt in zijn spatiëring. */
	.js-motion .enso-dress__word {
		letter-spacing: 0.4em;
		transition: letter-spacing 2.2s var(--enso-ease) 0.2s;
	}

	.js-motion .is-in .enso-dress__word {
		letter-spacing: 0.04em;
	}
}

@keyframes enso-in-up {
	from {
		opacity: 0;
		translate: 0 16px;
	}
}

/* De envelop: snel zichtbaar (anders schemeren de lagen door elkaar), langzaam op zijn plek. */
@keyframes enso-in-env {
	0% {
		opacity: 0;
		translate: 0 40px;
	}

	22% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes enso-seal {
	0% {
		opacity: 0;
		scale: 1.6;
		rotate: -12deg;
	}

	60% {
		opacity: 1;
		scale: 0.96;
	}

	100% {
		scale: 1;
		rotate: 0deg;
	}
}

@keyframes enso-appear {
	from {
		visibility: hidden;
	}

	to {
		visibility: visible;
	}
}

@keyframes enso-draw {
	from {
		transform: scaleY(0);
	}
}

@keyframes enso-rise {
	from {
		transform: translateY(105%);
	}
}

@keyframes enso-track {
	from {
		opacity: 0;
		letter-spacing: 0.7em;
	}
}

@keyframes enso-unblur {
	from {
		opacity: 0;
		filter: blur(8px);
	}
}

@keyframes enso-cue {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	51% {
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* --- gewone pagina's ----------------------------------------------------------------------------- */

.entry {
	max-width: 680px;
	margin: 0 auto;
	padding: 32px 16px 64px;
}