/*
 * Effecten bij het klikken op download en doneren.
 *
 * Alles ligt in een laag over de pagina heen die geen muisklikken opvangt en
 * die na afloop weer wordt weggehaald. Er wordt niets aan de pagina zelf
 * veranderd, zodat een mislukt effect nooit een werkende knop in de weg zit.
 */

.up-fx {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity .18s ease;
	/* Een laag over de hele pagina die de site erachter wegdrukt. Zonder dit
	   vallen de strepen en de hartjes weg tegen de tekst en de panelen: op een
	   donkere achtergrond met veel contrast zie je een dun lichtstreepje
	   nauwelijks. De laag dimt alles eronder, waardoor het effect het enige is
	   dat nog oplicht. */
	background: rgba(4, 8, 14, .82);
	-webkit-backdrop-filter: blur(3px) saturate(.6);
	backdrop-filter: blur(3px) saturate(.6);
}

.up-fx.is-on { opacity: 1; }

/* --- hyperspace ---------------------------------------------------------- */

.up-fx-hyper::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%,
		rgba(61, 155, 212, .20) 0%,
		rgba(61, 155, 212, .05) 35%,
		transparent 65%);
}

/* Elke streep begint in het midden en schiet naar buiten. De hoek staat in
   --a, de vertraging in --d; die zet effects.js per streep. */
.up-fx-hyper i {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 3px;
	width: 0;
	border-radius: 3px;
	transform-origin: 0 50%;
	transform: rotate(var(--a)) translateX(var(--r, 40px));
	/* Naar wit toe aan de kop, niet naar de accentkleur: een streep die eindigt
	   in de kleur van de site valt daar juist tegen weg. */
	background: linear-gradient(90deg, transparent, var(--o1, #3d9bd4) 55%, #dff1ff);
	box-shadow: 0 0 8px rgba(61, 155, 212, .9);
	animation: up-warp .85s cubic-bezier(.55, 0, 1, .45) var(--d, 0s) forwards;
	opacity: 0;
}

@keyframes up-warp {
	0%   { width: 0;      opacity: 0; }
	25%  { opacity: 1; }
	100% { width: 70vmax; opacity: 0; }
}

.up-fx-msg {
	position: absolute;
	left: 50%;
	top: 50%;
	white-space: nowrap;
	font-family: var(--font, "Segoe UI", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(30px, 8vw, 78px);
	line-height: 1;
	letter-spacing: .01em;
	color: #eef3fa;
	text-shadow: 0 0 34px rgba(61, 155, 212, .8);
	transform: translate(-50%, -50%) scale(.7);
	opacity: 0;
	animation: up-msg 1s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes up-msg {
	0%   { transform: translate(-50%, -50%) scale(.7);   opacity: 0; }
	35%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
	75%  { opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
}

/* --- hartjes ------------------------------------------------------------- */

.up-fx-love::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 100%,
		rgba(200, 145, 42, .22) 0%,
		transparent 62%);
}

.up-fx-love b {
	position: absolute;
	bottom: -50px;
	font-size: var(--s, 28px);
	line-height: 1;
	color: #f0b33c;
	text-shadow: 0 0 14px rgba(200, 145, 42, .8);
	opacity: 0;
	animation: up-heart 1.25s cubic-bezier(.35, .6, .4, 1) var(--d, 0s) forwards;
}

@keyframes up-heart {
	0%   { transform: translateY(0) scale(.5) rotate(var(--rot, 0deg));       opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translateY(-78vh) scale(1.1) rotate(var(--rot, 0deg));  opacity: 0; }
}

.up-fx-love .up-fx-msg {
	font-size: clamp(22px, 4.5vw, 44px);
	color: var(--o2, #c8912a);
	text-shadow: 0 0 30px rgba(200, 145, 42, .55);
}

/* Wie bewegende beelden heeft uitgezet krijgt niets te zien; effects.js slaat
   het effect dan sowieso over, dit is de tweede zekering. */
@media (prefers-reduced-motion: reduce) {
	.up-fx { display: none; }
}