/*
 * WorkingPrint WP 02 — scroll animation on every page (assets/js/parallax.js).
 * Only active once the script has switched it on (html.px-on), so without JavaScript,
 * with reduced motion or in the block editor every page looks exactly as designed.
 */

.px-on .w2-main { overflow-x: clip; }

/* ---- pinned sections: the next section slides over them ---- */
.px-on .px-pin-parent { background: var(--c-black); } /* shows around a pinned section as it shrinks back */
.px-on .px-stack { position: relative; z-index: 1; }
/* scaled as a whole (not its inner box) so blended words (e.g. "Director") keep blending with its background */
.px-on .px-pin { position: sticky; top: var(--px-stick, 0px); z-index: 0; scale: calc(1 - .07 * var(--px-cover, 0)); transform-origin: 50% 100%; }
.px-on .px-pin::after {
	content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none;
	background: var(--c-black); opacity: calc(.65 * var(--px-cover, 0));
}
/* the section that covers a pinned one gets rounded top corners and a soft edge */
.px-on .px-over {
	border-radius: calc(40 * var(--u)) calc(40 * var(--u)) 0 0;
	box-shadow: 0 calc(-20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .25);
}

/* ---- reveals (parallax.js adds .px-rv, then .is-in when the item enters) ---- */
.px-on .px-rv {
	transition:
		opacity .9s cubic-bezier(.16, 1, .3, 1) calc(var(--px-i, 0) * 90ms),
		transform 1.1s cubic-bezier(.16, 1, .3, 1) calc(var(--px-i, 0) * 90ms),
		clip-path 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--px-i, 0) * 90ms);
}
.px-on .px-rv:not(.is-in) { opacity: 0; transform: translateY(calc(70 * var(--u))); }
.px-on .px-rv--fade:not(.is-in) { transform: none; }
.px-on .px-rv--line:not(.is-in) { opacity: 1; transform: scaleX(0); }
.px-on .px-rv--line { transform-origin: 0 50%; }
.px-on .px-rv--mask:not(.is-in) { opacity: 1; transform: translateY(calc(40 * var(--u))); clip-path: inset(0 0 100% 0); }
.px-on .px-rv--mask { clip-path: inset(0 0 -10% 0); }

/* the first section plays as soon as the page opens */
.px-on .px-pin .px-rv { transition-delay: calc(200ms + var(--px-i, 0) * 110ms); }