/* =========================================================
   Motion: soft entrances, scroll reveals, gentle drift.
   Only active on the live site (not in the editor), and only
   when the visitor hasn't asked their device to reduce motion.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* ---------- hero: slow drifting background ---------- */
	.ar-js .ar-hero { overflow: hidden; isolation: isolate; background-image: none; }
	.ar-js .ar-hero::before {
		content: "";
		position: absolute;
		inset: -4%;
		z-index: -1;
		background: var(--ar-hero-bg) center / cover no-repeat;
		transform: scale(1.02);
		/* drift starts together with the fade, so there's never a jump */
		animation:
			ar-fade 1.8s ease-out both,
			ar-drift 38s ease-in-out infinite alternate both;
		will-change: transform;
	}

	/* ---------- hero: staggered entrance ---------- */
	.ar-js .ar-hero .ar-hero__title   { animation: ar-rise 1.3s cubic-bezier(.2,.7,.2,1) .25s both; }
	.ar-js .ar-hero .ar-hero__tagline { animation: ar-rise 1.3s cubic-bezier(.2,.7,.2,1) .55s both; }
	.ar-js .ar-hero .ar-hero__photo   { animation: ar-bloom 1.6s cubic-bezier(.2,.7,.2,1) .8s both; }
	.ar-js .ar-hero .ar-logo          { animation: ar-fade 1.6s ease-out 1.2s both; }
	.ar-js .ar-hero .ar-hero__link    { animation: ar-rise 1.2s cubic-bezier(.2,.7,.2,1) 1.45s both; }
	.ar-js .ar-hero .ar-hero__link--right { animation-delay: 1.6s; }

	/* ---------- scroll cue: appears after the hero, then bobs gently ---------- */
	.ar-js .ar-scroll-cue {
		animation:
			ar-fade 1.2s ease-out 2.1s backwards,
			ar-bob 2.6s ease-in-out 3.3s infinite;
	}

	/* ---------- scroll reveals ---------- */
	.ar-js .ar-reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
		transition:
			opacity 1.1s cubic-bezier(.2,.7,.2,1),
			transform 1.1s cubic-bezier(.2,.7,.2,1);
		transition-delay: var(--ar-delay, 0s);
	}
	.ar-js .ar-reveal.ar-photo,
	.ar-js .ar-reveal.ar-hero__photo {
		transform: translate3d(0, 36px, 0) scale(.97);
		transition-duration: 1.5s;
	}
	.ar-js .ar-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* ---------- photos drift gently inside their frames ---------- */
	.ar-js .ar-frame img {
		position: relative;
		height: 112% !important;
		top: -6%;
		transform: translate3d(0, var(--ar-shift, 0%), 0);
		will-change: transform;
	}
}

@keyframes ar-bob   { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 7px, 0); } }
@keyframes ar-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-rise  { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes ar-bloom { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ar-drift {
	from { transform: scale(1.02) translate3d(0, 0, 0); }
	to   { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}