/*
 * Motion that the original React site did with framer-motion ("motion/react"),
 * re-created in plain CSS. Layout and colours all come from main.css.
 */

/* ---- scroll reveal (once per visit, opacity + translate only) ---- */
.js .reveal:not(.is-in),
.js .reveal-x:not(.is-in) {
	opacity: 0;
}

.js .reveal.is-in {
	animation: ik-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--ik-d, 0s) both;
}

.js .reveal-x.is-in {
	animation: ik-reveal-x 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes ik-reveal {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes ik-reveal-x {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: none; }
}

/* ---- page + hero entrances ---- */
@media (prefers-reduced-motion: no-preference) {
	.ik-page {
		animation: ik-page 0.18s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.ik-hero-left {
		animation: ik-reveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.ik-hero-right {
		animation: ik-hero-right 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
	}

	.ik-rise {
		animation: ik-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--ik-d, 0s) both;
	}

	.ik-rise-menu {
		animation: ik-rise-menu 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--ik-d, 0s) both;
	}

	#mobile-menu:not([hidden]) {
		animation: ik-fade 0.3s ease both;
	}

	.ik-swap {
		animation: ik-swap 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes ik-page {
	from { opacity: 0.85; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

@keyframes ik-hero-right {
	from { opacity: 0; transform: translateX(30px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@keyframes ik-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes ik-rise-menu {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

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

@keyframes ik-swap {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* WordPress admin bar: keep the fixed nav below it. */
.admin-bar header.fixed { top: 32px; }
@media (max-width: 782px) {
	.admin-bar header.fixed { top: 46px; }
}