/* ==========================================================================
   Site customizations (non-template)
   ========================================================================== */

/* Scroll-reveal (replaces WOW + Animate.css).
   Targets stay visible by default: reveal.js arms the hidden start state
   (.reveal-armed) and an IntersectionObserver adds .reveal-in on approach;
   CSS owns the motion. No JS = content visible, FCP/LCP never gated.
   Motion matches the hero: 0.7s ease, 12px translateY.
   Disabled below 992px (mirrors the old responsive.css Animate.css kill)
   and under prefers-reduced-motion. */

.reveal-d1 {
	--reveal-delay: 0.3s;
}
.reveal-d2 {
	--reveal-delay: 0.6s;
}
.reveal-d3 {
	--reveal-delay: 0.9s;
}
.reveal-d4 {
	--reveal-delay: 1.2s;
}

/* Benefits row: tighter stagger than the default 0.3s steps */
#benefits .reveal-d1 {
	--reveal-delay: 0.1s;
}
#benefits .reveal-d2 {
	--reveal-delay: 0.2s;
}
#benefits .reveal-d3 {
	--reveal-delay: 0.3s;
}

/* Stacked benefits: the template only gives margin-bottom to .fbox-4.fb-1
   and .fb-2 (originally the first two cards). Our first card is .fb-3, so
   its copy sat flush against the next image below the 3-column breakpoint.
   Match the 480–767 template value; last card has no extra gap — section
   padding is tightened so the divider doesn’t sit far below the copy. */
@media (max-width: 991.98px) {
	#benefits {
		padding-bottom: 40px;
	}

	#benefits .fbox-4 {
		margin-bottom: 35px;
	}

	#benefits .row > .col:last-child .fbox-4 {
		margin-bottom: 0;
	}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
	.reveal.reveal-armed {
		opacity: 0;
	}

	.reveal.reveal-armed.reveal-in {
		animation: reveal-enter 0.7s ease var(--reveal-delay, 0s) both;
	}

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