/* Bargaon motion (demo, home page): light scroll reveals. Only opacity and transform are animated, so layout never shifts.
   Nothing is hidden unless assets/js/motion.js has run (html.m-on), and nothing moves for visitors who ask for reduced motion. */

/* Side slides must never create a sideways scrollbar on phones. */
.m-on #main { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
	.m-on [data-m] {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
		transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
		transition-delay: calc(var(--m-i, 0) * 80ms);
	}
	.m-on [data-m="left"]  { transform: translate3d(-56px, 0, 0); }
	.m-on [data-m="right"] { transform: translate3d(56px, 0, 0); }
	.m-on [data-m="line"]  { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition-duration: 1s; }
	.m-on [data-m].is-in   { opacity: 1; transform: none; }
	.m-prep [data-m]       { transition: none !important; }

	/* Hero copy eases up and fades a little as it scrolls away (Chrome/Edge native, no JS). */
	@supports (animation-timeline: view()) {
		.m-exit {
			animation: m-exit linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		@keyframes m-exit { to { opacity: .2; transform: translate3d(0, -48px, 0); } }
	}
}

/* Reduced motion (e.g. Windows "Animation effects" off): a gentle fade only, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.m-on [data-m] {
		opacity: 0;
		transition: opacity .7s ease;
		transition-delay: calc(var(--m-i, 0) * 80ms);
	}
	.m-on [data-m="line"]  { opacity: 1; }
	.m-on [data-m].is-in   { opacity: 1; }
	.m-prep [data-m]       { transition: none !important; }
}

/* Print and Save as PDF always show everything. */
@media print {
	.m-on [data-m] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.m-exit { animation: none !important; }
	.m-progress { display: none !important; }
}

/* Reading progress bar along the top of the page. */
.m-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none;
	background: #C2410C; transform-origin: 0 50%; transform: scaleX(var(--m-p, 0));
}
@supports (animation-timeline: scroll()) {
	.m-progress { animation: m-grow linear both; animation-timeline: scroll(root); }
	@keyframes m-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}