/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL
   Sections start hidden and fade up when they enter the viewport.
   JS adds .is-visible via IntersectionObserver.
   Fully disabled when the user prefers reduced motion.
   NOTE: .page-hero is intentionally excluded — it is always above the fold
   and must never be hidden at page load. Hero image fade-in is handled
   separately in page-hero.css via .is-loaded on the <img> element.
   ═══════════════════════════════════════════════════════════════════════════ */

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

	/* Fade up — content sections with padding/cards */
	.page-split,
	.home-what,
	.ce-mae-hook,
	.ce-feature-list,
	.ce-mae-reporting,
	.ce-steps,
	.ce-benefits,
	.ce-checklist-section {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	/* Fade only — full-bleed coloured sections where translateY would cause a gap.
	   Combined with the fade-up visible states since they share the same
	   revealed property values. */
	.home-banner,
	.home-cta,
	.logo-ticker,
	.ce-mae-overview,
	.ce-mae-cta-small,
	.ce-mae-compare,
	.ce-mae-testimonials,
	.ce-mae-testimonial-featured,
	.testimonials,
	.testimonial-pull,

	/* Visible states — fade up */
	.page-split.is-visible,
	.home-what.is-visible,
	.ce-mae-hook.is-visible,
	.ce-feature-list.is-visible,
	.ce-mae-reporting.is-visible,
	.ce-steps.is-visible,
	.ce-benefits.is-visible,
	.ce-checklist-section.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Visible states — fade only */
	.home-banner.is-visible,
	.home-cta.is-visible,
	.logo-ticker.is-visible,
	.ce-mae-overview.is-visible,
	.ce-mae-cta-small.is-visible,
	.ce-mae-compare.is-visible,
	.ce-mae-testimonials.is-visible,
	.ce-mae-testimonial-featured.is-visible,
	.testimonials.is-visible,
	.testimonial-pull.is-visible {
		opacity: 1;
	}

}


/* ═══════════════════════════════════════════════════════════════════════════
   MODAL ENTRANCE

   Defined here rather than in a page stylesheet because more than one modal
   uses them and they must stay identical. The Ofsted framework modals are the
   reference implementation — the behaviour that reads best on a phone — and
   the Maestro video modal now uses the same two.

   The point of the pair is that they run TOGETHER, on the one class, with no
   staging and nothing waiting on anything else: the screen dims and the panel
   arrives as a single event. Both are `animation`, not `transition`, so they
   fire the moment the element goes from display: none to display: flex —
   which is what makes "add one class" enough.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes ce-modal-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ce-modal-panel-in {
	from { transform: scale(0.96) translateY(12px); opacity: 0; }
	to   { transform: scale(1) translateY(0);       opacity: 1; }
}