/* ==========================================================================
   Moonrise — motion
   A layer over the finished design: delete this file and every section is
   complete and in place. Every rule is inside prefers-reduced-motion:
   no-preference; the reveal start states also need `.mr-motion` on <html>
   (added before first paint by inc/enqueue.php, removed if motion.js fails).

   Moves use the standalone `translate` / `scale` / `rotate` properties, never
   `transform`, so they compose with whatever a layout already transforms.

   Two kinds of section animate:
   - Moonrise elements mark their own pieces with [data-mr-reveal]; the
     section's data-mr-motion says rise, fade or none.
   - Stock rows with Row → Moonrise → Entrance set carry .mr-anim--rise or
     .mr-anim--fade; their pieces are found by position (the "units" below),
     since stock elements cannot carry an attribute.
   ========================================================================== */

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

	/* ----------------------------------------------------------------------
	   Hero rows — a CSS entrance on load, not a scroll reveal. The photo is
	   the LCP, and it must not wait for a script to decide it may appear.
	   ---------------------------------------------------------------------- */

	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_single_image img {
		animation: mr-settle 2.2s var(--mr-ease) both;
	}

	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > *,
	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .vc_btn3-container {
		animation: mr-rise 1s var(--mr-ease) both;
	}

	.mr-motion .mr-anim--fade:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > *,
	.mr-motion .mr-anim--fade:is(.mr-s--hero, .mr-s--hero-gradient) .vc_btn3-container {
		animation-name: mr-fade;
	}

	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > :nth-child(1) { animation-delay: 0.15s; }
	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > :nth-child(2) { animation-delay: 0.28s; }
	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > :nth-child(3) { animation-delay: 0.42s; }
	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > :nth-child(n + 4) { animation-delay: 0.5s; }
	.mr-motion .mr-anim:is(.mr-s--hero, .mr-s--hero-gradient) .vc_btn3-container { animation-delay: 0.6s; }

	/* ----------------------------------------------------------------------
	   Scroll reveals. motion.js adds .is-revealed as each piece arrives, and
	   numbers the pieces of a stock row (--mr-step) so they follow in turn.

	   Every selector is inside :where(), so each rule weighs one class
	   (.mr-motion) and the later rule wins: the revealed state after the
	   start states, and a card's own :hover lift above both.
	   ---------------------------------------------------------------------- */

	.mr-motion :where(
		[data-mr-motion="rise"] [data-mr-reveal],
		[data-mr-motion="fade"] [data-mr-reveal],
		.mr-anim:not(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > *,
		.mr-anim:not(.mr-s--hero, .mr-s--hero-gradient, .mr-s--cta) .vc_column-inner > .wpb_wrapper > :not(.wpb_text_column, .vc_row),
		.mr-anim.mr-s--cta .vc_column-inner > .wpb_wrapper > :not(.wpb_text_column, .vc_row, .wpb_single_image)
	) {
		opacity: 0;
		transition:
			opacity 0.9s var(--mr-ease),
			translate 1.1s var(--mr-ease),
			scale 1.4s var(--mr-ease),
			rotate 2s var(--mr-ease);
		transition-delay: calc(var(--mr-step, 0) * 110ms);
	}

	.mr-motion :where(
		[data-mr-motion="rise"] [data-mr-reveal="item"],
		.mr-anim--rise:not(.mr-s--hero, .mr-s--hero-gradient) .wpb_text_column > .wpb_wrapper > *,
		.mr-anim--rise:not(.mr-s--hero, .mr-s--hero-gradient) .vc_column-inner > .wpb_wrapper > :not(.wpb_text_column, .vc_row, .wpb_single_image)
	) {
		translate: 0 28px;
	}

	/* Photographs open out a touch as they fade in. */
	.mr-motion :where(
		[data-mr-motion="rise"] [data-mr-reveal="media"],
		.mr-anim--rise:not(.mr-s--hero, .mr-s--hero-gradient, .mr-s--cta) .vc_column-inner > .wpb_wrapper > .wpb_single_image
	) {
		scale: 0.97;
	}

	/* The Statement's moon rises into place, turning as it comes. */
	.mr-motion :where(.mr-anim--rise.mr-s--statement .vc_column-inner > .wpb_wrapper > .wpb_single_image) {
		translate: 0 36px;
		rotate: -35deg;
		scale: none;
		transition:
			opacity 1.2s var(--mr-ease),
			translate 1.6s var(--mr-ease),
			rotate 2s var(--mr-ease);
	}

	.mr-motion :where(.is-revealed) {
		opacity: 1;
		translate: none;
		scale: none;
		rotate: none;
	}

	/* The CTA photo is the parallax layer, not a reveal. */
	.mr-motion :where(.mr-s--cta .wpb_single_image) {
		translate: 0 var(--mr-parallax, 0);
		will-change: translate;
	}

	/* Cards follow one another along each row of the grid. The position is
	   read from the grid, so a card dragged elsewhere keeps the rhythm. */
	.mr-concerns__grid--3 > .mr-card:nth-child(3n + 2) { --mr-step: 1; }
	.mr-concerns__grid--3 > .mr-card:nth-child(3n + 3) { --mr-step: 2; }
	.mr-concerns__grid--2 > .mr-card:nth-child(2n + 2) { --mr-step: 1; }

	/* Once in, a card's own hover lift must not wait on the reveal delay. */
	.mr-motion .mr-card.is-revealed,
	.mr-motion .mr-step.is-revealed {
		transition:
			background-color 0.4s var(--mr-ease),
			box-shadow 0.4s var(--mr-ease),
			translate 0.4s var(--mr-ease),
			opacity 0.9s var(--mr-ease);
	}

	/* The wake/sleep dot drifts down the line once the photo is in view —
	   the night passing. */
	.mr-motion .mr-anim.mr-s--timeline .wpb_single_image .vc_figure::after {
		transition: top 3.2s var(--mr-ease) 0.6s;
	}

	.mr-motion .mr-anim.mr-s--timeline .wpb_single_image.is-revealed .vc_figure::after {
		top: 58%;
	}

	/* ----------------------------------------------------------------------
	   Parallax on a Moonrise element's photo ([data-mr-parallax]).
	   ---------------------------------------------------------------------- */

	.mr-motion [data-mr-parallax] {
		translate: 0 var(--mr-parallax, 0);
		will-change: translate;
	}

	/* ----------------------------------------------------------------------
	   Dawn panels (Concern Cards, Steps) — four radial glows orbiting on
	   different timings, so the light is always moving and never repeats in
	   step. The one ambient animation on the site; it runs whether or not the
	   reveal script does, and not at all for visitors who reduce motion.
	   ---------------------------------------------------------------------- */

	.mr-dawn__glow {
		animation: 22s ease-in-out infinite alternate;
		will-change: translate, scale;
	}

	.mr-dawn__glow--peach    { animation-name: mr-orbit-peach;    animation-duration: 11s; }
	.mr-dawn__glow--rose     { animation-name: mr-orbit-rose;     animation-duration: 14s; }
	.mr-dawn__glow--lavender { animation-name: mr-orbit-lavender; animation-duration: 12s; }
	.mr-dawn__glow--blush    { animation-name: mr-orbit-blush;    animation-duration: 16s; }

	/* ----------------------------------------------------------------------
	   Keyframes
	   ---------------------------------------------------------------------- */

	@keyframes mr-rise {
		from {
			opacity: 0;
			translate: 0 24px;
		}
	}

	@keyframes mr-fade {
		from {
			opacity: 0;
		}
	}

	@keyframes mr-orbit-peach {
		0%   { translate: 0 0;       scale: 1; }
		35%  { translate: 55% 30%;   scale: 1.25; }
		70%  { translate: 15% 65%;   scale: 0.85; }
		100% { translate: 75% 10%;   scale: 1.15; }
	}

	@keyframes mr-orbit-rose {
		0%   { translate: 0 0;       scale: 1; }
		30%  { translate: -60% -25%; scale: 1.3; }
		65%  { translate: 45% -45%;  scale: 0.8; }
		100% { translate: -30% 40%;  scale: 1.2; }
	}

	@keyframes mr-orbit-lavender {
		0%   { translate: 0 0;       scale: 1; }
		40%  { translate: -55% -40%; scale: 1.2; }
		75%  { translate: -85% 5%;   scale: 0.85; }
		100% { translate: -20% -60%; scale: 1.25; }
	}

	@keyframes mr-orbit-blush {
		/* Kept to the right and low, away from the white heading and intro. */
		0%   { translate: 0 0;       scale: 1; }
		50%  { translate: -25% 110%; scale: 1.2; }
		100% { translate: 10% 60%;   scale: 0.9; }
	}

	@keyframes mr-settle {
		from {
			opacity: 0.6;
			scale: 1.06;
		}
	}

}