/* Wakoo Motion effects + sticky */

/* Reveal: CSS keeps the element visible so that if JS is disabled or fails the
   content is never lost (progressive enhancement). motion.js hides it inline
   (opacity:0) and then animates it in when it scrolls into view. */
.wakoo-reveal {
	opacity: 1;
}

.wakoo-tilt {
	transform-style: preserve-3d;
	will-change: transform;
}

/* vanilla-tilt glare element */
.wakoo-tilt .js-tilt-glare {
	border-radius: inherit;
}

/* Sticky: the inline style sets position/offset/z-index; this guards the
   element from collapsing and keeps it above neighbours. */
.wakoo-sticky {
	align-self: flex-start;
}

/* Sticky scroll effects (data-wakoo-sticky-fx): classes wk-stuck / wk-hidden come from motion.js. */
.wakoo-sticky[data-wakoo-sticky-fx] {
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, filter .35s ease;
}
.wakoo-sticky[data-wakoo-sticky-fx].wk-stuck {
	box-shadow: 0 10px 30px -12px rgba(8, 20, 38, .45);
}
.wakoo-sticky[data-wakoo-sticky-fx="smart"].wk-hidden {
	transform: translateY(calc(-100% - 6px));
}
.wakoo-sticky[data-wakoo-sticky-progress] {
	isolation: isolate;
}
.wakoo-sticky > .wk-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(var(--wk-scroll, 0));
	background: linear-gradient(90deg, var(--wk-progress-color, #C5A15B), color-mix(in srgb, var(--wk-progress-color, #C5A15B) 40%, #fff));
	box-shadow: 0 0 10px var(--wk-progress-color, #C5A15B);
	pointer-events: none;
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
	.wakoo-sticky[data-wakoo-sticky-fx] { transition: none; }
}