:root {
	--rpm-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rpm-fill: #ffb829;      /* kleur van de vul-animatie */
	--rpm-fill-text: #000;    /* tekstkleur tijdens vullen */
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Reveal (fade + omhoog + blur) ---------- */
.rpm-js .rpm-reveal,
.rpm-js .rpm-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
}

/* ---------- Split-tekst (regels/woorden schuiven omhoog) ---------- */
.rpm-split .rpm-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rpm-split .rpm-word > span { display: inline-block; will-change: transform; }

/* ---------- Letter-roll (menu-links, tekstlinks) ---------- */
.rpm-roll { display: inline-block; position: relative; overflow: hidden; line-height: 1.15; }
.rpm-roll .rpm-roll-a,
.rpm-roll .rpm-roll-b { display: flex; }
.rpm-roll .rpm-roll-b { position: absolute; inset: 0; color: var(--rpm-fill); }
.rpm-roll .rpm-ch { display: inline-block; white-space: pre; transition: transform .5s var(--rpm-ease); transition-delay: calc(var(--i) * 22ms); }
.rpm-roll .rpm-roll-b .rpm-ch { transform: translateY(100%); }
.rpm-roll-host:hover .rpm-roll-a .rpm-ch,
.rpm-roll-host:focus-visible .rpm-roll-a .rpm-ch { transform: translateY(-100%); }
.rpm-roll-host:hover .rpm-roll-b .rpm-ch,
.rpm-roll-host:focus-visible .rpm-roll-b .rpm-ch { transform: translateY(0); }

/* ---------- Vul-knop (kleur komt van onder omhoog, tekst rolt door) ---------- */
.rpm-fill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; transition: box-shadow .3s var(--rpm-ease), transform .3s var(--rpm-ease); }
.rpm-fill::before {
	content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 220%;
	background: var(--rpm-fill); border-radius: 50%; z-index: -1;
	transform: translateY(100%); transition: transform .7s var(--rpm-ease);
}
.rpm-fill:hover::before, .rpm-fill:focus-visible::before { transform: translateY(35%); }
.rpm-fill:hover { color: var(--rpm-fill-text); }
.rpm-fill:active { transform: scale(.96); }
.rpm-fill .rpm-label { position: relative; display: block; overflow: hidden; }
.rpm-fill .rpm-label > span { display: block; transition: transform .5s var(--rpm-ease); }
.rpm-fill .rpm-label > span + span { position: absolute; inset: 0; transform: translateY(100%); color: var(--rpm-fill-text); }
.rpm-fill:hover .rpm-label > span:first-child { transform: translateY(-100%); }
.rpm-fill:hover .rpm-label > span + span { transform: translateY(0); }

/* ---------- Magnetisch / parallax ---------- */
.rpm-magnetic, .rpm-parallax { will-change: transform; }

/* ---------- Vonkjes ---------- */
.rpm-spark { position: fixed; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--rpm-fill); pointer-events: none; z-index: 9999; }

@media (prefers-reduced-motion: reduce) {
	.rpm-js .rpm-reveal, .rpm-js .rpm-stagger > * { opacity: 1; transform: none; filter: none; }
	.rpm-fill::before, .rpm-roll .rpm-ch, .rpm-fill .rpm-label > span { transition: none; }
}

/* ---------- Particles ---------- */
.rpm-particles-canvas { position: sticky !important; top: 0; left: 0; display: block; width: 100% !important; z-index: 0; pointer-events: none; }
.rpm-particles > *:not(.rpm-particles-canvas) { position: relative; z-index: 1; }