/* Cyclopedia Masonica — scroll motion.
   Modern browsers: CSS scroll-driven animations (no JavaScript).
   Others: site.js adds .cm-io to <html> and toggles .is-in with IntersectionObserver.
   Visitors who ask for reduced motion get none of it. */

@keyframes cm-rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes cm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cm-drift { to { transform: translateY(160px) scale(1.06); } }
@keyframes cm-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

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

	@supports (animation-timeline: view()) {
		.wp-block-post-content > *:not(.alignfull),
		.cm-reveal {
			animation: cm-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}
		.cm-progress {
			animation: cm-progress linear both;
			animation-timeline: scroll(root);
		}
		.cm-drift {
			animation: cm-drift linear both;
			animation-timeline: scroll(root);
		}
	}

	/* Fallback driven by site.js */
	.cm-io .wp-block-post-content > *:not(.alignfull),
	.cm-io .cm-reveal {
		opacity: 0;
		transform: translateY(42px);
		transition: opacity 0.8s ease, transform 0.8s ease;
	}
	.cm-io .wp-block-post-content > .is-in,
	.cm-io .cm-reveal.is-in { opacity: 1; transform: none; }

	/* Page-load entrance for hero / warning pages */
	.cm-enter { animation: cm-fade 1.1s ease both; }
	.cm-enter-2 { animation: cm-fade 1.1s 0.3s ease both; }
	.cm-enter-3 { animation: cm-fade 1.1s 0.6s ease both; }
}

/* Home hero: background drifts and zooms slightly as you scroll */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.cm-hero .wp-block-cover__image-background,
		.cm-oath .wp-block-cover__image-background {
			animation: cm-drift linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		.cm-oath .wp-block-cover__image-background { animation-range: cover 0% cover 100%; }
	}
}

/* Fix: tall sections looked dark at the top because the fade-in was tied to the element's
   height. Every reveal now completes within a fixed ~200px of scrolling, and big containers do not fade at all —
   their individual cards do. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-block-post-content > *:not(.alignfull),
		.cm-reveal {
			animation-range: entry 0px entry 200px;
		}
		.wp-block-post-content > .cm-book-grid,
		.wp-block-post-content > .wp-block-group,
		.wp-block-post-content > .wp-block-query,
		.wp-block-post-content > .wp-block-list,
		.wp-block-post-content > .wp-block-table {
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
		}
		.cm-book-grid > .wp-block-image,
		.cm-claim-grid .wp-block-post,
		.wp-block-post-content > .wp-block-group > * {
			animation: cm-rise linear both;
			animation-timeline: view();
			animation-range: entry 0px entry 160px;
		}
	}
	/* Fallback path (site.js IntersectionObserver): never hide large containers */
	.cm-io .wp-block-post-content > .cm-book-grid,
	.cm-io .wp-block-post-content > .wp-block-group,
	.cm-io .wp-block-post-content > .wp-block-query { opacity: 1 !important; transform: none !important; }
}