/* Scroll reveal for the About Us pages.
 *
 * Georgina liked the way the sections on zenithchildcare.com/about-us fade in,
 * and asked for a fade in from the side.
 *
 * WHY THIS IS NOT IN THE OXYGEN STYLESHEET. It needs @supports and
 * prefers-reduced-motion, and the Oxygen importer only carries rules at the
 * site's five registered breakpoints. Putting it here keeps the full CSS.
 *
 * WHY IT IS NOT THE BUILDER'S OWN ENTRANCE ANIMATION, AND NOT THE REFERENCE
 * SITE'S. The reference is Elementor, and its animation is JavaScript driven:
 * the elements are set to opacity 0 and are revealed on scroll. Loading that
 * page cold and screenshotting it before any scroll returns a BLANK PAGE - the
 * copy is simply not there until the script runs. That is a real failure mode
 * for a childcare site: no script, a slow connection or a reader-mode tool and
 * the parent sees nothing.
 *
 * So this is pure CSS and it fails safe in both directions:
 *   - browsers WITH scroll-driven animation support get the scroll reveal,
 *     because animation-timeline: view() overrides the duration;
 *   - browsers WITHOUT it ignore animation-timeline and simply run the same
 *     keyframes once over 0.7s on load, which still ends with the content
 *     visible;
 *   - "both" fill means the end state persists either way;
 *   - and if the whole rule is dropped, the content was never hidden to begin
 *     with, because nothing sets opacity 0 outside the animation.
 *
 * There is no state in which the copy is unreadable. */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bc-reveal {
			animation: bc-reveal-left 0.7s ease-out both;
			animation-timeline: view();
			animation-range: entry 4% cover 32%;
		}

		.bc-reveal-r {
			animation-name: bc-reveal-right;
		}

		.bc-reveal-up {
			animation-name: bc-reveal-up;
		}
	}

	/* No scroll-driven support: one gentle entrance on load instead. The
	   reference site's own animation is an on-load fade too, so this is the
	   same impression, just not tied to the scroll position. */
	@supports not (animation-timeline: view()) {
		.bc-reveal {
			animation: bc-reveal-left 0.7s ease-out both;
		}

		.bc-reveal-r {
			animation-name: bc-reveal-right;
		}

		.bc-reveal-up {
			animation-name: bc-reveal-up;
		}
	}
}

@keyframes bc-reveal-left {
	from {
		opacity: 0;
		transform: translate3d(-46px, 0, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bc-reveal-right {
	from {
		opacity: 0;
		transform: translate3d(46px, 0, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bc-reveal-up {
	from {
		opacity: 0;
		transform: translate3d(0, 34px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}