/*
 * NONA scroll animations (includes/class-motion.php, assets/motion/motion.js).
 * Timing measured on the reference site webbedrijf.nl (11 Nov 2026):
 *   fades        1 s, ease (Bricks' own fadeIn / fadeInUp)
 *   heading lines 0.6 s, circ-out, +0.05 s per line, after 0.2 s
 *   image mask   1.2 s, power2-out
 * Elements are hidden before they animate only while html.nm-js is set (see the head script).
 */

:root {
	/* GSAP circ.out and power2.out as exact curves (fallbacks: closest cubic-bezier). */
	--nm-circ-out: cubic-bezier(0, 0.55, 0.45, 1);
	--nm-power2-out: cubic-bezier(0.33, 1, 0.68, 1);
}

@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--nm-circ-out: linear(0, 0.0707 0.25%, 0.1411 1%, 0.2109 2.25%, 0.28 4%, 0.348 6.25%, 0.4146 9%, 0.4359 10%, 0.4796 12.25%, 0.5426 16%, 0.6 20%, 0.6033 20.25%, 0.6614 25%, 0.7141 30%, 0.7166 30.25%, 0.7684 36%, 0.8 40%, 0.8164 42.25%, 0.8602 49%, 0.866 50%, 0.8992 56.25%, 0.9165 60%, 0.933 64%, 0.9539 70%, 0.9607 72.25%, 0.9798 80%, 0.9818 81%, 0.995 90%, 0.9952 90.25%, 1);
		--nm-power2-out: linear(0, 0.176, 0.3301, 0.4636, 0.5781, 0.675, 0.7559, 0.822, 0.875, 0.9163, 0.9473, 0.9695, 0.9844, 0.9934, 0.998, 0.9998, 1);
	}
}

@keyframes nm-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes nm-fade-in-up {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes nm-line-up {
	from { transform: translate3d(0, 100%, 0); }
	to { transform: none; }
}

@keyframes nm-mask {
	from { opacity: 0; clip-path: inset(100% 0 0 0); }
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/*
 * Revealed: every animation plays once. "backwards" keeps the start state during a delay and lets
 * go at the end, so the element's own styles (hover transforms, transitions) apply again afterwards.
 */
.nm-in.nm-fade { animation: nm-fade-in 1s ease var(--nm-delay, 0s) backwards; }
.nm-in.nm-fade-up { animation: nm-fade-in-up 1s ease var(--nm-delay, 0s) backwards; }
.nm-in.nm-image { animation: nm-mask 1.2s var(--nm-power2-out) var(--nm-delay, 0s) backwards; }
/* Shown without animating (its group stopped applying after a resize, see motion.js). */
.nm-in.nm-shown { animation: none; }

/* Section headings: the heading fades in while its lines rise into their masks. */
.nm-split .nm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* room for descenders while masked */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
/* The words exist only during the animation (motion.js puts the plain text back afterwards). */
.nm-split .nm-wi { display: inline-block; }
.nm-in.nm-split .nm-wi { animation: nm-line-up 0.6s var(--nm-circ-out) calc(var(--nm-delay, 0s) + 0.2s + var(--nm-line, 0) * 0.05s) both; }

/*
 * Phones (≤ 767 px; docs/scroll-animaties.md §8): the same reveals, shorter and smaller. On a phone
 * content comes into view at thumb speed; a 1 s fade, a rise over the element's own height and
 * staggers up to 1.25 s kept the visitor waiting. Here: 0.5 s fades, a 20 px rise in 0.55 s, delays
 * and staggers at a third (eyebrow 0.1 s, cards 0.08 s apart, at most 0.4 s), heading lines 0.45 s.
 * Desktop and tablet keep the timing of the reference (above).
 */
@keyframes nm-fade-in-up-m {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.nm-in.nm-fade {
		animation-duration: 0.5s;
		animation-delay: calc(var(--nm-delay, 0s) * 0.32);
	}
	.nm-in.nm-fade-up {
		animation: nm-fade-in-up-m 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--nm-delay, 0s) * 0.32) backwards;
	}
	.nm-in.nm-split .nm-wi {
		animation-duration: 0.45s;
		animation-delay: calc(var(--nm-delay, 0s) * 0.32 + 0.08s + var(--nm-line, 0) * 0.04s);
	}
}

/* Phones with motion: the GSAP layer (assets/motion/mobile.js). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	/* Photos are zoomed from the first paint, so the parallax (yPercent ±3.5) never shows an edge or a jump. */
	html.nm-js .nt-placeholder--photo > .nt-photo-cover {
		transform: scale(1.08);
	}
	/* Stacked cards: each card sticks under the header while the next one slides over it. A card taller
	   than the screen below the header (phone held sideways, long card) sticks higher: only when its
	   bottom edge is 12 px above the bottom of the smallest viewport (100svh), so nothing of it is
	   covered unread. --nm-h is the card's height (mobile.js keeps it current). Doubled class: Bricks'
	   own ".nt-card.brxe-div { position: relative }" has the same weight and comes after this file on
	   the Next.js pages. */
	.nt-m-stack.nt-m-stack[data-nm-stack] > * {
		position: sticky;
		top: min(var(--nm-stack-top, 77px), calc(100svh - var(--nm-h, 0px) - 12px));
	}
	/* Process steps and core values (made by mobile.js): the coloured line that draws itself over a
	   step's grey top border, the ring that pulses once around a step's diamond (20 px at top -11 px)
	   and the drawn N of a core value, laid over its image. */
	.nm-m-line {
		position: absolute;
		left: 0;
		right: 0;
		top: -2px;
		height: 2px;
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
	}
	/* Lower weight than the stacked cards' "sticky" above: a value that sticks stays sticky. */
	:where(.nt-values > .nt-value)[data-nm-value] {
		position: relative;
	}
	.nt-value > .nm-m-letter {
		position: absolute;
		overflow: visible;
		pointer-events: none;
	}
	.nt-step > .nm-m-ring {
		position: absolute;
		top: -11px;
		left: 0;
		width: 20px;
		height: 20px;
		box-sizing: border-box;
		border: 2px solid;
		border-radius: 4px;
		transform: rotate(45deg);
		opacity: 0;
		pointer-events: none;
	}
	/* Reading progress on long text pages: right under the header, below it and the mobile menu (header z-index 998). */
	.nm-m-progress {
		position: fixed;
		left: 0;
		right: 0;
		height: 2px;
		background-color: var(--zeegroen-500, #2a9d8f);
		transform: scaleX(0);
		transform-origin: 0 50%;
		z-index: 997;
		pointer-events: none;
	}
	html:has(.show-mobile-menu) .nm-m-progress {
		visibility: hidden;
	}
}

/* Lenis (only active with a mouse wheel; native scrolling on touch). */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.nm-in.nm-fade,
	.nm-in.nm-fade-up,
	.nm-in.nm-image,
	.nm-in.nm-split .nm-wi { animation: none; }
}

/* Printing shows everything (the hide-before-reveal rules are screen-only, see class-motion.php). */
@media print {
	.nm-in,
	.nm-in .nm-wi { animation: none !important; }
}