/* Motion layer — subtle, compositor-only (opacity + transform), RTL-safe.
   Nothing here hides content unless JavaScript has added .on-anim to <html>,
   so with JS off (or if the script fails) every section stays visible. */

/* --- sticky, condensing header ---------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color .25s ease-out, box-shadow .25s ease-out, backdrop-filter .25s ease-out;
}

header.wp-block-template-part.is-stuck {
	background-color: rgba(7, 21, 34, .88);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 1px 0 rgba(37, 211, 193, .18), 0 10px 30px rgba(0, 0, 0, .35);
}

/* Anchor jumps should not land under the sticky bar. */
:target { scroll-margin-top: 6rem; }

/* --- hero entrance (runs on load, no JS needed) ------------------------ */
@keyframes on-hero-in { to { opacity: 1; transform: none; } }

.on-anim .on-hero .wp-block-column > * {
	opacity: 0;
	transform: translateY(10px);
	animation: on-hero-in .55s cubic-bezier(.22, .61, .36, 1) forwards;
}

.on-anim .on-hero .wp-block-column > *:nth-child(1) { animation-delay: .04s; }
.on-anim .on-hero .wp-block-column > *:nth-child(2) { animation-delay: .12s; }
.on-anim .on-hero .wp-block-column > *:nth-child(3) { animation-delay: .20s; }
.on-anim .on-hero .wp-block-column > *:nth-child(n+4) { animation-delay: .28s; }

/* --- scroll reveal ----------------------------------------------------- */
.on-anim [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}

.on-anim [data-reveal].is-in {
	opacity: 1;
	transform: none;
	/* arriving elements decelerate */
	transition: opacity .42s cubic-bezier(.22, .61, .36, 1), transform .42s cubic-bezier(.22, .61, .36, 1);
}

.on-anim [data-reveal].is-in > * { will-change: auto; }

/* Children stagger: small steps, capped so a long grid never feels slow. */
.on-anim [data-stagger] > * {
	opacity: 0;
	transform: translateY(10px);
}

.on-anim [data-stagger].is-in > * {
	opacity: 1;
	transform: none;
	transition: opacity .38s cubic-bezier(.22, .61, .36, 1), transform .38s cubic-bezier(.22, .61, .36, 1);
}

.on-anim [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.on-anim [data-stagger].is-in > *:nth-child(2) { transition-delay: 45ms; }
.on-anim [data-stagger].is-in > *:nth-child(3) { transition-delay: 90ms; }
.on-anim [data-stagger].is-in > *:nth-child(4) { transition-delay: 135ms; }
.on-anim [data-stagger].is-in > *:nth-child(5) { transition-delay: 180ms; }
.on-anim [data-stagger].is-in > *:nth-child(6) { transition-delay: 210ms; }
.on-anim [data-stagger].is-in > *:nth-child(n+7) { transition-delay: 240ms; }

/* --- micro-interactions ------------------------------------------------ */
.on-card {
	transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}

.on-card:hover {
	border-color: rgba(37, 211, 193, .55) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.wp-element-button:active { transform: translateY(1px); }

.on-brand img { transition: transform .25s ease-out; }
.on-brand:hover img { transform: translateY(-1px) scale(1.01); }

/* Underline that grows from the reading edge — mirrors itself in RTL. */
.on-card h3 a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: left bottom;
	text-decoration: none;
	transition: background-size .25s ease-out;
}
[dir="rtl"] .on-card h3 a { background-position: right bottom; }
.on-card h3 a:hover,
.on-card h3 a:focus-visible { background-size: 100% 1px; }

/* --- anyone who asked for less motion gets none of it ------------------- */
@media (prefers-reduced-motion: reduce) {
	.on-anim .on-hero .wp-block-column > * { animation: none !important; opacity: 1 !important; transform: none !important; }

	.on-anim [data-reveal],
	.on-anim [data-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	header.wp-block-template-part { transition: none; }
	.on-card, .on-brand img, .on-card h3 a { transition: none; }
}