/* Pagime motion effects. Loaded only on pages that use them. */
html.rp-js [data-rp-anim]:not(.rp-anim-in) { opacity: 0; }
.rp-anim-in {
	animation-duration: var(--rp-dur, 800ms);
	animation-delay: var(--rp-delay, 0ms);
	animation-timing-function: var(--rp-ease, cubic-bezier(.2, .7, .2, 1));
	/* backwards only: once finished, the element returns to its own styles. */
	animation-fill-mode: backwards;
}
.rp-a-fadeIn { animation-name: rp-fadeIn; }
.rp-a-fadeInUp { animation-name: rp-fadeInUp; }
.rp-a-fadeInDown { animation-name: rp-fadeInDown; }
.rp-a-fadeInLeft { animation-name: rp-fadeInLeft; }
.rp-a-fadeInRight { animation-name: rp-fadeInRight; }
.rp-a-zoomIn { animation-name: rp-zoomIn; }
.rp-a-zoomOut { animation-name: rp-zoomOut; }
.rp-a-slideInUp { animation-name: rp-slideInUp; }
.rp-a-slideInDown { animation-name: rp-slideInDown; }
.rp-a-slideInLeft { animation-name: rp-slideInLeft; }
.rp-a-slideInRight { animation-name: rp-slideInRight; }
.rp-a-bounceIn { animation-name: rp-bounceIn; }
.rp-a-rotateIn { animation-name: rp-rotateIn; }
.rp-a-flipInX { animation-name: rp-flipInX; }
.rp-a-flipInY { animation-name: rp-flipInY; }
.rp-a-blurIn { animation-name: rp-blurIn; }
@keyframes rp-fadeIn { from { opacity: 0; } }
@keyframes rp-fadeInUp { from { opacity: 0; translate: 0 40px; } }
@keyframes rp-fadeInDown { from { opacity: 0; translate: 0 -40px; } }
@keyframes rp-fadeInLeft { from { opacity: 0; translate: -40px 0; } }
@keyframes rp-fadeInRight { from { opacity: 0; translate: 40px 0; } }
@keyframes rp-zoomIn { from { opacity: 0; scale: .8; } }
@keyframes rp-zoomOut { from { opacity: 0; scale: 1.2; } }
@keyframes rp-slideInUp { from { translate: 0 100%; } }
@keyframes rp-slideInDown { from { translate: 0 -100%; } }
@keyframes rp-slideInLeft { from { translate: -100% 0; } }
@keyframes rp-slideInRight { from { translate: 100% 0; } }
@keyframes rp-bounceIn { 0% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1.06; } 70% { scale: .96; } 100% { scale: 1; } }
@keyframes rp-rotateIn { from { opacity: 0; rotate: -15deg; } }
@keyframes rp-flipInX { from { opacity: 0; transform: perspective(600px) rotateX(80deg); } }
@keyframes rp-flipInY { from { opacity: 0; transform: perspective(600px) rotateY(80deg); } }
@keyframes rp-blurIn { from { opacity: 0; filter: blur(14px); } }

/* Hover animations; a parent with Join Childs (data-pg-join) plays them for everything inside it. */
[data-rp-hover-anim] { transition: scale .3s ease, translate .3s ease, rotate .3s ease, box-shadow .3s ease; }
[data-rp-hover-anim="grow"]:hover, [data-pg-join]:hover [data-rp-hover-anim="grow"] { scale: 1.06; }
[data-rp-hover-anim="shrink"]:hover, [data-pg-join]:hover [data-rp-hover-anim="shrink"] { scale: .94; }
[data-rp-hover-anim="float"]:hover, [data-pg-join]:hover [data-rp-hover-anim="float"] { translate: 0 -8px; }
[data-rp-hover-anim="sink"]:hover, [data-pg-join]:hover [data-rp-hover-anim="sink"] { translate: 0 8px; }
[data-rp-hover-anim="rotate"]:hover, [data-pg-join]:hover [data-rp-hover-anim="rotate"] { rotate: 3deg; }
[data-rp-hover-anim="shadow"]:hover, [data-pg-join]:hover [data-rp-hover-anim="shadow"] { box-shadow: 0 14px 34px rgba(24, 0, 36, .25); }
[data-rp-hover-anim="pulse"]:hover, [data-pg-join]:hover [data-rp-hover-anim="pulse"] { animation: rp-pulse 1s ease-in-out infinite; }
@keyframes rp-pulse { 50% { scale: 1.05; } }
.rp-motion-off[data-rp-hover-anim]:hover, [data-pg-join]:hover .rp-motion-off[data-rp-hover-anim] { scale: none; translate: none; rotate: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
	html.rp-js [data-rp-anim] { opacity: 1 !important; animation: none !important; }
	[data-rp-hover-anim]:hover, [data-pg-join]:hover [data-rp-hover-anim] { scale: none; translate: none; rotate: none; animation: none; }
}

/* Sticky: hook for "when stuck" styling, e.g. .rp-is-stuck { box-shadow: … } in custom CSS. */
.rp-is-stuck { transition: box-shadow .2s ease, background-color .2s ease; }