/* Parallax layer for the hero image (driven from site.js). */
.parallax-layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}
.parallax-layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Browser-driven parallax: smooth even during iOS momentum scrolling, where
   scroll events arrive in bursts. site.js only takes over where this is missing. */
@supports (animation-timeline: scroll()) {
	.hero .parallax-layer {
		animation: hero-parallax linear both;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
	@keyframes hero-parallax {
		to {
			transform: translate3d(0, 50vh, 0);
		}
	}
}

/* Scroll reveals, ported from the old theme's "entrance" and "hatch". */
.js .reveal {
	opacity: 0;
}
.js .reveal.is-visible {
	opacity: 1;
	animation: 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.js .reveal.is-visible[data-reveal="entrance"] {
	animation-name: reveal-entrance;
}
.js .reveal.is-visible[data-reveal="hatch"] {
	animation-name: reveal-hatch;
}
@keyframes reveal-entrance {
	from {
		transform: scale(0.3) rotate(6deg) translate(-30%, 30%);
		opacity: 0.2;
	}
}
@keyframes reveal-hatch {
	from {
		transform: scaleY(0);
	}
}