/* ==========================================================================
   Jedi-Robe shared page motion
   ========================================================================== */

/**
 * Shared Jedi-Robe editorial page motion system.
 *
 * Provides:
 * - smooth top-down interface power-on;
 * - delayed secondary hero activation;
 * - optional technical-frame corner locking;
 * - viewport-triggered editorial section activation;
 * - staggered action-grid loading;
 * - London Store handoff loading;
 * - final page CTA rail activation.
 *
 * Pages opt in with the `jr-page-motion` body class.
 *
 * The primary animation uses opacity and transform to keep rendering light.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 * @since 1.0.0
 */

body.jr-dark-commerce.jr-page-motion {
	--jr-page-motion-ease:
		cubic-bezier(0.25, 0.46, 0.45, 0.94);

	--jr-page-motion-duration: 1100ms;
	--jr-page-motion-distance: -0.75rem;
}


/* ==========================================================================
   Core animations
   ========================================================================== */

/**
 * Smooth top-down interface power-on.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

@keyframes jrPageMotionBootIn {
	0% {
		opacity: 0;

		transform:
			translate3d(
				0,
				var(--jr-page-motion-distance),
				0
			);
	}

	35% {
		opacity: 0.38;
	}

	70% {
		opacity: 0.82;
		transform: translate3d(0, -0.125rem, 0);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}


/**
 * Softer internal component power-on.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

@keyframes jrPageMotionDataBoot {
	0% {
		opacity: 0;
		transform: translate3d(0, -0.5rem, 0);
	}

	45% {
		opacity: 0.55;
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}


/**
 * Lock an existing technical corner into position.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

@keyframes jrPageMotionCornerLock {
	0% {
		opacity: 0;
		transform: scale(0.45);
	}

	70% {
		opacity: 1;
		transform: scale(1.03);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}


/**
 * Draw an existing interface rail into position.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

@keyframes jrPageMotionRailLock {
	0% {
		opacity: 0;
		transform: scaleX(0);
	}

	45% {
		opacity: 0.7;
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
	}
}


/* ==========================================================================
   Manual motion targets
   ========================================================================== */

/**
 * Hold initial motion targets in their dormant state before first paint.
 *
 * The prepaint selector prevents hero content from rendering normally before
 * page-motion.js has initialised. The jr-motion-enabled selector then takes
 * ownership once the full motion system is running.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 * @since 1.0.0
 */
@media (prefers-reduced-motion: no-preference) {

	html.jr-motion-prepaint
		body.jr-dark-commerce.jr-page-motion
		.jr-motion-target:not(.is-visible),
	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-motion-target:not(.is-visible) {
		opacity: 0;

		transform:
			translate3d(
				0,
				var(--jr-page-motion-distance),
				0
			);
	}


	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-motion-target.is-visible {
		animation:
			jrPageMotionBootIn
			var(--jr-page-motion-duration)
			var(--jr-motion-delay, 0ms)
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Secondary initial target
   ========================================================================== */

/**
 * Delay a secondary hero/interface surface slightly behind the primary one.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

body.jr-dark-commerce.jr-page-motion
	.jr-motion-target--secondary {
	--jr-motion-delay: 140ms;
}


/* ==========================================================================
   Optional technical-frame lock
   ========================================================================== */

/**
 * Animate existing ::before and ::after corner markers.
 *
 * Add `jr-motion-frame` only to components whose pseudo-elements already
 * provide top-left and bottom-right technical corners.
 *
 * The motion component does not create or style the corners themselves.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-motion-frame.jr-motion-target:not(.is-visible)::before,
	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-motion-frame.jr-motion-target:not(.is-visible)::after {
		opacity: 0;
		transform: scale(0.45);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-motion-frame::before {
		transform-origin: top left;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-motion-frame::after {
		transform-origin: bottom right;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-motion-frame.jr-motion-target.is-visible::before {
		animation:
			jrPageMotionCornerLock
			600ms
			calc(
				var(--jr-motion-delay, 0ms)
				+ 430ms
			)
			var(--jr-page-motion-ease)
			both;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-motion-frame.jr-motion-target.is-visible::after {
		animation:
			jrPageMotionCornerLock
			600ms
			calc(
				var(--jr-motion-delay, 0ms)
				+ 520ms
			)
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Editorial section boot
   ========================================================================== */

/**
 * Keep inactive sections slightly visible so fast scrolling never produces
 * a completely empty part of the page.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible) {
		opacity: 0.16;
		transform: translate3d(0, -0.75rem, 0);
	}


	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target.is-visible {
		animation:
			jrPageMotionBootIn
			1150ms
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Section heading rail
   ========================================================================== */

/**
 * Activate the existing editorial heading accent after its section begins
 * powering on.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-page-section__heading
		h2.elementor-heading-title::after {
		opacity: 0;
		transform: scaleX(0);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section__heading
		h2.elementor-heading-title::after {
		transform-origin: left center;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section__heading.jr-heading_center
		h2.elementor-heading-title::after {
		transform-origin: center;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-page-section__heading
		h2.elementor-heading-title::after {
		animation:
			jrPageMotionRailLock
			780ms
			300ms
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Action-grid cascade
   ========================================================================== */

/**
 * Populate reusable action-grid cells in reading order.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-action-grid__item {
		opacity: 0;
		transform: translate3d(0, -0.5rem, 0);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-action-grid__item {
		animation:
			jrPageMotionDataBoot
			850ms
			var(--jr-page-motion-grid-delay, 180ms)
			var(--jr-page-motion-ease)
			both;
	}
}


/**
 * Action-grid item timing.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(1) {
	--jr-page-motion-grid-delay: 180ms;
}

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(2) {
	--jr-page-motion-grid-delay: 285ms;
}

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(3) {
	--jr-page-motion-grid-delay: 390ms;
}

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(4) {
	--jr-page-motion-grid-delay: 495ms;
}

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(5) {
	--jr-page-motion-grid-delay: 600ms;
}

body.jr-dark-commerce.jr-page-motion
	.jr-action-grid__item:nth-child(6) {
	--jr-page-motion-grid-delay: 705ms;
}


/* ==========================================================================
   Action-grid corner lock
   ========================================================================== */

/**
 * Lock each action-grid diagnostic corner after its cell begins resolving.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-action-grid__item::after {
		opacity: 0;
		transform: scale(0.45);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-action-grid__item::after {
		transform-origin: bottom right;

		animation:
			jrPageMotionCornerLock
			500ms
			calc(
				var(--jr-page-motion-grid-delay, 180ms)
				+ 300ms
			)
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Store handoff
   ========================================================================== */

/**
 * Resolve the shared store viewport before its information panel.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-store-handoff__map,
	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-store-handoff__panel {
		opacity: 0;
		transform: translate3d(0, -0.5rem, 0);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-store-handoff__map {
		animation:
			jrPageMotionDataBoot
			900ms
			220ms
			var(--jr-page-motion-ease)
			both;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-store-handoff__panel {
		animation:
			jrPageMotionDataBoot
			900ms
			340ms
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Page CTA rail
   ========================================================================== */

/**
 * Activate the existing shared page-CTA rail after its section powers on.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

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

	body.jr-dark-commerce.jr-page-motion.jr-motion-enabled
		.jr-page-section.jr-motion-target:not(.is-visible)
		.jr-page-cta::before {
		opacity: 0;
		transform: scaleX(0);
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-cta::before {
		transform-origin: center;
	}


	body.jr-dark-commerce.jr-page-motion
		.jr-page-section.jr-motion-target.is-visible
		.jr-page-cta::before {
		animation:
			jrPageMotionRailLock
			850ms
			380ms
			var(--jr-page-motion-ease)
			both;
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

/**
 * Present all enhanced interface elements immediately when reduced motion is
 * requested.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */

@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce.jr-page-motion
		.jr-motion-target,
	body.jr-dark-commerce.jr-page-motion
		.jr-action-grid__item,
	body.jr-dark-commerce.jr-page-motion
		.jr-store-handoff__map,
	body.jr-dark-commerce.jr-page-motion
		.jr-store-handoff__panel {
		opacity: 1;
		transform: none;
		animation: none;
	}
}