/**
 * Stichting Evi Verbindt: de balk bovenin en de teller
 *
 * Hoort bij swipe-teller.php en swipe-teller.js. De balk staat boven de header en
 * telt af naar de kick-off; het tellerblok toont de stand van de actie.
 *
 * De smalle weergave hangt aan de breedte van de houder, niet aan het venster.
 * Zet daarom container-type: inline-size op het element eromheen, dan klopt het
 * blok ook in een smalle kolom. Onderaan staat dezelfde regel nog een keer als
 * media query, voor browsers zonder container queries.
 */

/* ---- de balk boven de header ---- */

.swipe-balk {
	background: var(--swipe-petrol-balk, #1E3D4E);
	color: #DDE3E6;
	font-size: 14px;

	/*
	 * De balk is ruim 40,5 px hoog: dat volgt uit de tekstgrootte en komt
	 * zelden op een hele pixel uit. De browser tekent hem dan tot de ene pixel
	 * en de hero vanaf de volgende, en op die tussenrij zie je de creme
	 * achtergrond van de pagina. Deze schaduw schildert twee pixels extra in
	 * zijn eigen kleur, dus daar valt niets meer tussen te zien. Twee pixels en
	 * niet een, want bij een browserzoom van bijvoorbeeld 125 procent wordt die
	 * halve pixel groter dan een.
	 */
	box-shadow: 0 2px 0 0 var(--swipe-petrol-balk, #1E3D4E);
}

.swipe-balk__binnen {
	max-width: 1440px;
	margin: 0 auto;
	padding: 9px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.swipe-balk p { margin: 0; }

.swipe-balk__links {
	display: flex;
	gap: 22px;
	align-items: center;
	color: #A9B6BD;
}

.swipe-balk__links a {
	color: #DDE3E6;
	text-decoration: none;
}

.swipe-balk__links a:hover { color: #fff; }

.swipe-balk__klok {
	display: flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}

.swipe-balk__klok b {
	font-family: "Rubik", system-ui, sans-serif;
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
	font-size: 15px;
}

.swipe-balk__label { color: #A9B6BD; }

.swipe-balk__eenheid {
	color: #7E939F;
	font-size: 12px;
	margin-right: 7px;
}

/* Op een telefoon is er geen ruimte voor allebei; de klok wint. */
@media (max-width: 720px) {
	.swipe-balk__binnen {
		padding: 8px 20px;
		justify-content: center;
	}

	.swipe-balk__links { display: none; }
	.swipe-balk__klok { font-size: 13px; }
}
/* ==================================================================
   De donatiebalk: bedrag links, de laatste giften in het midden, het
   logo van het Huis rechts. Hij hangt met zijn bovenkant over de
   herofoto heen.
   ================================================================== */

.swipe-teller {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 38px;
	/* Hij hangt met zijn bovenkant over de herofoto. Hoe verder omhoog, hoe
	   eerder het hele blok in beeld staat en de teller zichtbaar oploopt. */
	margin: -104px var(--swipe-rand, 80px) 0;
	padding: 32px 44px 34px;
	border-radius: var(--swipe-rond, 30px);
	background: var(--swipe-petrol, #264A5E);
	color: var(--swipe-creme, #F7F3E6);
}

/* ---- links: het bedrag met de balk ---- */

.swipe-teller__opbrengst {
	flex: 1 1 0;
	min-width: 0;
}

.swipe-teller__bedrag {
	margin: 0;
	/* "Swipe euro" levert alleen het euroteken, de rest komt uit Rubik */
	font-family: "Swipe euro", "Rubik", system-ui, sans-serif;
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--swipe-creme, #FFFCF0);
	font-variant-numeric: tabular-nums;
}

.swipe-teller__kop {
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--swipe-op-donker-zacht, #9FAAB2);
}

.swipe-teller__balk {
	position: relative;
	height: 14px;
	margin-top: 16px;
	border-radius: 999px;
	background: var(--swipe-petrol-lijn, #365160);
}

/*
 * De vulling is het rood van het logo, 50 procent doorzichtig (Tim,
 * 8 september; stond eerst op 5 procent en dat was te vol). Daardoor komt de
 * petrol van de lege balk er goed doorheen en staat het rood niet hard op het
 * donkere vlak.
 */
.swipe-teller__vulling {
	height: 100%;
	border-radius: 999px;
	background: rgba(225, 71, 87, 0.5);
	transition: width 1.2s cubic-bezier(.22, .61, .36, 1),
		opacity .35s ease;
}

/*
 * Het hartje loopt met de vulling mee. De verschuiving hangt van de stand af:
 * op 0 staat de linkerrand tegen het begin van de balk, op 100 de rechterrand
 * tegen het eind. Zo steekt het nooit buiten de balk, ook niet bij een lege of
 * volle stand. --swipe-stand is het percentage als kaal getal.
 */
.swipe-teller__hart {
	position: absolute;
	top: 50%;
	transform: translate(calc(var(--swipe-stand, 50) * -1%), -50%);
	color: var(--swipe-rood, #E14757);
	transition: left 1.2s cubic-bezier(.22, .61, .36, 1),
		transform 1.2s cubic-bezier(.22, .61, .36, 1),
		opacity .35s ease;
	line-height: 0;
}

/*
 * De baan en het hartje wachten net zo goed als de hartjes bij de giften.
 *
 * Stond de vulling er al op zijn eindstand, dan zag je op een telefoon eerst de
 * volle balk en sprong die terug naar nul zodra de animatie begon. Dat is
 * dezelfde dubbeling als bij de hartjes: je ziet het eindbeeld, het verdwijnt,
 * en dan komt het nog een keer. De lege baan eromheen blijft wel staan, dus er
 * valt geen gat in het blok.
 *
 * swipe-teller--loopt komt erbij op het moment dat de vulling op nul staat en
 * gaat lopen. Vanaf dan mag je hem zien. Deze regel staat na de vorige omdat ze
 * even zwaar wegen en allebei op het blok staan zolang de animatie speelt.
 */
.swipe-teller--speelt .swipe-teller__vulling,
.swipe-teller--speelt .swipe-teller__hart { opacity: 0; }

.swipe-teller--loopt .swipe-teller__vulling,
.swipe-teller--loopt .swipe-teller__hart { opacity: 1; }

.swipe-teller__hart svg {
	display: block;
	width: 34px;
	height: auto;
}

/* een klopje zodra het bedrag omhoog gaat */
.swipe-teller__hart.klopt { animation: swipe-klop .9s ease; }

@keyframes swipe-klop {
	0%, 100% { transform: translate(calc(var(--swipe-stand, 50) * -1%), -50%) scale(1); }
	30%      { transform: translate(calc(var(--swipe-stand, 50) * -1%), -50%) scale(1.28); }
	60%      { transform: translate(calc(var(--swipe-stand, 50) * -1%), -50%) scale(.94); }
}

.swipe-teller__meta {
	margin: 14px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--swipe-op-donker-zacht, #9FAAB2);
}

.swipe-teller__meta b {
	font-weight: 600;
	color: #fff;
}

/* ---- midden: de laatste giften ---- */

.swipe-teller__laatste {
	flex: 0 0 auto;
	padding: 0 38px;
	border-left: 1px solid var(--swipe-petrol-lijn, #365160);
	border-right: 1px solid var(--swipe-petrol-lijn, #365160);
}

.swipe-teller__titel {
	margin: 0 0 16px;
	font-family: "Rubik", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--swipe-groen, #3DBEB0);
	white-space: nowrap;
}

.swipe-teller__giften {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swipe-teller__giften li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	color: var(--swipe-op-donker, #DDE3E6);
	white-space: nowrap;
}

/*
 * Alleen de hartjes bewegen; de bedragen en de namen blijven staan. Ze vallen
 * als blaadjes naar hun plek en ze wachten op de balk.
 *
 * Zolang de teller speelt staat swipe-teller--speelt op het blok en zijn de
 * hartjes er nog niet. Als de balk zijn plek bijna bereikt heeft komt
 * swipe-teller--vallen erbij en komen ze een voor een naar beneden, nog terwijl
 * het laatste cijfer oploopt.
 *
 * Draait er geen javascript, dan staat geen van beide klassen er en zijn de
 * hartjes gewoon zichtbaar zonder animatie.
 */
.swipe-teller--speelt .swipe-teller__giften .swipe-hart { opacity: 0; }

/* both: vóór de vertraging staat het hartje al hoog en onzichtbaar klaar, en na
   afloop houdt het zijn plek. Zonder dat laatste valt het terug op de regel
   hierboven en verdwijnt het weer zodra het geland is. */
.swipe-teller--vallen .swipe-teller__giften .swipe-hart {
	animation: swipe-blad-een 1.7s ease-in-out .1s both;
}

.swipe-teller--vallen .swipe-teller__giften li:nth-child(2) .swipe-hart {
	animation-name: swipe-blad-twee;
	animation-duration: 1.9s;
	animation-delay: .45s;
}

.swipe-teller--vallen .swipe-teller__giften li:nth-child(3) .swipe-hart {
	animation-name: swipe-blad-drie;
	animation-duration: 1.6s;
	animation-delay: .8s;
}

/*
 * Vallen als een blaadje: van hoog boven het blok naar beneden, steeds de
 * andere kant op zwenkend en meedraaiend, en aan het eind bijna stilvallend.
 * De drie banen verschillen van elkaar, zodat het er niet mechanisch uitziet.
 */
/*
 * Het kantelen zit in rotateY en rotateX: daarmee draait het hartje om zijn
 * eigen as en zie je het afwisselend vlak en bijna op zijn kant, net als een
 * blaadje dat door de lucht draait. Zonder de perspective ervoor blijft dat een
 * platte samendrukking; mét perspective krijgt het diepte. De draai blijft onder
 * de negentig graden, want daarboven verdwijnt het hartje even helemaal.
 *
 * De uitgangsstand staat er aan het eind voluit in plaats van als "none", zodat
 * de browser tussen dezelfde reeks bewerkingen rekent en er niets verspringt.
 */
@keyframes swipe-blad-een {
	0%   { opacity: 0; transform: perspective(620px) translate(-62px, -96px) rotate(-28deg) rotateY(-72deg) rotateX(18deg); }
	10%  { opacity: 1; }
	28%  { transform: perspective(620px) translate(-24px, -68px) rotate(18deg) rotateY(34deg) rotateX(-14deg); }
	50%  { transform: perspective(620px) translate(-34px, -42px) rotate(-16deg) rotateY(-58deg) rotateX(12deg); }
	70%  { transform: perspective(620px) translate(-14px, -22px) rotate(13deg) rotateY(30deg) rotateX(-8deg); }
	87%  { transform: perspective(620px) translate(-6px, -7px) rotate(-6deg) rotateY(-14deg) rotateX(4deg); }
	100% { opacity: 1; transform: perspective(620px) translate(0, 0) rotate(0) rotateY(0) rotateX(0); }
}

@keyframes swipe-blad-twee {
	0%   { opacity: 0; transform: perspective(620px) translate(64px, -104px) rotate(25deg) rotateY(66deg) rotateX(-20deg); }
	10%  { opacity: 1; }
	26%  { transform: perspective(620px) translate(22px, -76px) rotate(-17deg) rotateY(-40deg) rotateX(16deg); }
	48%  { transform: perspective(620px) translate(36px, -48px) rotate(19deg) rotateY(62deg) rotateX(-12deg); }
	68%  { transform: perspective(620px) translate(13px, -25px) rotate(-12deg) rotateY(-28deg) rotateX(9deg); }
	86%  { transform: perspective(620px) translate(7px, -8px) rotate(7deg) rotateY(16deg) rotateX(-5deg); }
	100% { opacity: 1; transform: perspective(620px) translate(0, 0) rotate(0) rotateY(0) rotateX(0); }
}

@keyframes swipe-blad-drie {
	0%   { opacity: 0; transform: perspective(620px) translate(30px, -88px) rotate(-14deg) rotateY(-54deg) rotateX(22deg); }
	12%  { opacity: 1; }
	32%  { transform: perspective(620px) translate(-14px, -62px) rotate(15deg) rotateY(46deg) rotateX(-16deg); }
	54%  { transform: perspective(620px) translate(19px, -38px) rotate(-12deg) rotateY(-38deg) rotateX(11deg); }
	76%  { transform: perspective(620px) translate(-8px, -17px) rotate(9deg) rotateY(22deg) rotateX(-7deg); }
	91%  { transform: perspective(620px) translate(4px, -5px) rotate(-4deg) rotateY(-10deg) rotateX(3deg); }
	100% { opacity: 1; transform: perspective(620px) translate(0, 0) rotate(0) rotateY(0) rotateX(0); }
}

/* "Swipe euro" ervoor, anders staat bij de laatste giften alsnog het euroteken
   van Rubik met één streepje (opgemerkt door Tim, 8 september) */
.swipe-teller__giften b {
	font-family: "Swipe euro", "Rubik", system-ui, sans-serif;
	font-weight: 700;
	color: #fff;
}

.swipe-teller__giften .swipe-hart { color: var(--swipe-rood, #E14757); }


/* ---- rechts: het huis waar het voor is ---- */

.swipe-teller__huis {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 168px;
}

.swipe-teller__huis img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
	.swipe-teller {
		flex-wrap: wrap;
		gap: 28px;
	}

	.swipe-teller__opbrengst { flex: 1 1 100%; }

	.swipe-teller__laatste {
		flex: 1 1 auto;
		padding: 0;
		border: 0;
	}

	.swipe-teller__meta { font-size: 19px; }
}

@media (max-width: 720px) {
	.swipe-teller {
		margin-top: -40px;
		padding: 26px 26px 30px;
	}

	.swipe-teller__bedrag { font-size: 36px; }
	.swipe-teller__meta { font-size: 17px; }
	.swipe-teller__giften li { white-space: normal; }
	.swipe-teller__huis { width: 140px; }
}
/* ------------------------------------------------------------------
   Plekken vrij, bij een clinic of een toernooi.
   Komt uit [evi_plekken id="..."]; de kleur zegt hoe dringend het is.
   ------------------------------------------------------------------ */

.swipe-plekken {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--swipe-kop, "Rubik", system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: #31A99C;
	white-space: nowrap;
}

/* Nog maar een paar plekken: dat mag opvallen. */
.swipe-plekken--bijna {
	color: #E14757;
}

/* Vol: geen kleur die tot klikken uitnodigt, wel duidelijk leesbaar. */
.swipe-plekken--vol {
	color: #7A8C96;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(122, 140, 150, 0.14);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
}