/* ============================================================================
   Mindward Collective — Motion
   ----------------------------------------------------------------------------
   Scroll reveals and the reduced-motion contract.

   Two hard rules govern everything in this file:

   1. Content is never hidden by CSS alone. Elements carrying .mw-reveal are
      fully visible until the script adds .mw-js on <html>. If JavaScript fails,
      is blocked, or the browser has no IntersectionObserver, the page renders
      complete and opaque. Nothing is ever permanently hidden.

   2. Reveals move opacity and transform only. Neither property triggers layout,
      so a revealing element cannot shift anything around it and cannot
      contribute to Cumulative Layout Shift.
   ========================================================================= */

/* Only opt in once the script has confirmed it is running and motion is
   permitted. The .mw-js class is set by assets/js/site.js. */
.mw-js .mw-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--mw-dur-reveal) var(--mw-ease-out),
		transform var(--mw-dur-reveal) var(--mw-ease-out);
	/* Reserve the composited layer up front so the first frame of the
	   transition does not cause a paint hitch on mobile. */
	will-change: opacity, transform;
}

.mw-js .mw-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Stagger delays for sibling elements within one section. */
.mw-reveal-d1 { transition-delay: 0.08s; }
.mw-reveal-d2 { transition-delay: 0.16s; }
.mw-reveal-d3 { transition-delay: 0.24s; }

/* ---------------------------------------------------------------------------
   Reduced motion
   The script also checks the media query and skips observing entirely, so this
   block is the second of two independent guarantees rather than the only one.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.mw-js .mw-reveal,
	.mw-reveal {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	.mw-marquee-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.mw-marquee img:hover {
		transform: none;
	}

	/* Buttons render as core/button blocks carrying a registered block style,
	   so they must be named that way here — a .mw-btn selector alone matches
	   nothing the package actually emits. */
	.mw-btn,
	.wp-block-button .wp-block-button__link,
	.mw-arrow-link::after,
	.main-navigation .main-nav ul li > a::after,
	.mw-faq summary::after,
	.mw-anchor-map a,
	.mw-marquee img,
	.mw-post-card .mw-post-title a {
		transition: none;
	}

	.mw-btn:hover,
	.mw-btn:focus,
	.mw-btn-primary:hover,
	.wp-block-button .wp-block-button__link:hover,
	.wp-block-button .wp-block-button__link:focus,
	.main-navigation .main-nav ul li.mw-nav-cta > a:hover,
	.main-navigation .main-nav ul li.mw-nav-cta > a:focus {
		transform: none;
	}

	.mw-arrow-link:hover::after {
		transform: none;
	}
}