/*
 * Motion: how the whole site moves.
 *
 *  - buttons, cards, links and fields ease instead of snapping;
 *  - sections rise into place as they scroll into view (assets/js/motion.js
 *    marks them; the list of what rises is under "Reveal" below);
 *  - headings at the top of a page arrive in sequence;
 *  - one page fades into the next (where the browser supports it).
 *
 * Movement uses the translate and scale properties, not transform, so it
 * adds to whatever transform an element already has. Everything here is off
 * for visitors who ask for reduced motion.
 */

:root {
	--cr-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--cr-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--cr-rise: 1.5rem;

	/* Lets "height: auto" animate (the FAQ on the pricing page). */
	interpolate-size: allow-keywords;
}

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

	/* ---------- Buttons ------------------------------------------------ */
	.btn,
	.cr-btn,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #payment #place_order,
	.cr-receipt-step__provider button {
		transition:
			background-color 0.35s var(--cr-ease-soft),
			color 0.35s var(--cr-ease-soft),
			border-color 0.35s var(--cr-ease-soft),
			box-shadow 0.5s var(--cr-ease-out),
			filter 0.35s var(--cr-ease-soft),
			transform 0.5s var(--cr-ease-out),
			translate 0.5s var(--cr-ease-out),
			scale 0.5s var(--cr-ease-out);
	}

	.btn:hover,
	.cr-btn:hover,
	.wp-block-button__link:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover:not(:disabled),
	.woocommerce input.button:hover,
	.woocommerce #payment #place_order:hover,
	.cr-receipt-step__provider button:hover {
		box-shadow: 0 14px 26px -14px color-mix(in oklab, var(--dl-color-brand, #c0266d) 75%, #000);
		translate: 0 -2px;
	}

	/* Outlined and ghost buttons lift on a quieter shadow. */
	.btn--ghost:hover,
	.btn--outline:hover,
	.cr-btn--outline:hover,
	.cr-btn--ghost:hover,
	.cr-btn--light:hover,
	.woocommerce a.button.cr-button--ghost:hover,
	.cr-coupon button.button:hover {
		box-shadow: 0 12px 22px -16px rgb(21 21 21 / 45%);
	}

	/* The press: quick down, slow back. */
	.btn:active,
	.cr-btn:active,
	.wp-block-button__link:active,
	.woocommerce a.button:active,
	.woocommerce button.button:active:not(:disabled),
	.woocommerce input.button:active,
	.woocommerce #payment #place_order:active,
	.cr-receipt-step__provider button:active {
		box-shadow: none;
		transition-duration: 0.12s;
		translate: 0 0;
		scale: 0.97;
	}

	/* The parent's entrance animations (GSAP) leave "translate: none" and
	   "scale: none" on the buttons they moved; those need a firmer word. */
	:is(.btn, .cr-btn)[style*="translate"]:hover {
		translate: 0 -2px !important;
	}

	:is(.btn, .cr-btn)[style*="scale"]:active {
		translate: 0 0 !important;
		scale: 0.97 !important;
	}

	/* A light crosses the main buttons as the pointer arrives. Not on magnetic
	   buttons (their label moves) nor while WooCommerce shows its spinner or
	   tick in the same place. */
	.btn--primary:not([data-dl-magnetic]),
	.cr-btn:not(.cr-btn--outline, .cr-btn--ghost),
	.woocommerce a.button.alt:not(.loading, .added),
	.woocommerce button.button.alt:not(.loading, .added),
	.woocommerce #payment #place_order {
		position: relative;
		overflow: hidden;
	}

	.btn--primary:not([data-dl-magnetic])::after,
	.cr-btn:not(.cr-btn--outline, .cr-btn--ghost)::after,
	.woocommerce a.button.alt:not(.loading, .added)::after,
	.woocommerce button.button.alt:not(.loading, .added)::after,
	.woocommerce #payment #place_order::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 28%) 50%, transparent 62%);
		translate: -110% 0;
		pointer-events: none;
	}

	.btn--primary:not([data-dl-magnetic]):hover::after,
	.cr-btn:not(.cr-btn--outline, .cr-btn--ghost):hover::after,
	.woocommerce a.button.alt:not(.loading, .added):hover::after,
	.woocommerce button.button.alt:not(.loading, .added):hover::after,
	.woocommerce #payment #place_order:hover::after {
		translate: 110% 0;
		transition: translate 0.75s var(--cr-ease-out);
	}

	/* An arrow in a button leans forward. */
	.btn [data-magnetic-inner] > svg,
	.cr-btn > svg:last-child {
		transition: translate 0.4s var(--cr-ease-out);
	}

	.btn:hover [data-magnetic-inner] > svg,
	.cr-btn:hover > svg:last-child {
		translate: 3px 0;
	}

	/* ---------- Links, fields ------------------------------------------ */
	a {
		transition: color 0.25s var(--cr-ease-soft), text-decoration-color 0.25s var(--cr-ease-soft), opacity 0.25s var(--cr-ease-soft);
	}

	input:not([type="checkbox"], [type="radio"], [type="range"]),
	select,
	textarea,
	.select2-container .select2-selection--single {
		transition: border-color 0.25s var(--cr-ease-soft), box-shadow 0.3s var(--cr-ease-soft), background-color 0.25s var(--cr-ease-soft);
	}

	/* ---------- Cards -------------------------------------------------- */
	a.cr-card,
	.cr-plan,
	.pricing-card,
	.cr-account-card,
	.woocommerce ul.products li.product {
		transition:
			border-color 0.35s var(--cr-ease-soft),
			background-color 0.35s var(--cr-ease-soft),
			box-shadow 0.55s var(--cr-ease-out),
			transform 0.55s var(--cr-ease-out),
			translate 0.55s var(--cr-ease-out);
	}

	a.cr-card:hover,
	.cr-plan:hover,
	.pricing-card:hover,
	.cr-account-card:hover,
	.woocommerce ul.products li.product:hover {
		box-shadow: 0 26px 44px -30px rgb(53 19 34 / 45%);
		translate: 0 -4px;
	}

	.woocommerce ul.products li.product a img {
		transition: scale 0.7s var(--cr-ease-out);
	}

	.woocommerce ul.products li.product:hover a img {
		scale: 1.03;
	}

	/* ---------- FAQ ---------------------------------------------------- */
	/* Opens and closes at its own height, where the browser can do that. */
	details::details-content {
		overflow: clip;
		block-size: 0;
		opacity: 0;
		transition: block-size 0.45s var(--cr-ease-out), opacity 0.35s var(--cr-ease-soft), content-visibility 0.45s allow-discrete;
	}

	details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}

	details > summary::marker,
	details > summary::after {
		transition: rotate 0.35s var(--cr-ease-out), transform 0.35s var(--cr-ease-out);
	}

	/* ---------- Arriving at the top of a page -------------------------- */
	/* Pure CSS, so it starts with the first paint and needs no script. */
	.cr-hero__inner > *,
	.cr-product-hero .summary > *,
	.cr-product-hero .images,
	.cr-auth__panel,
	.cr-auth__aside,
	.cr-desk__sticky > *,
	.cr-desk__body > *,
	.cr-shell--plain .cr-shell__main > .woocommerce {
		animation: cr-fade 0.3s linear backwards, cr-rise 0.55s var(--cr-ease-out) backwards;
	}

	/* The page title is there from the first paint and only rises: it is the
	   largest thing on screen, and a browser counts the page as shown when a
	   fade on it ends, not when it starts. */
	.cr-hero__inner > .cr-hero__title,
	.cr-product-hero .summary > .product_title,
	.cr-desk__body > .cr-desk__head,
	.cr-auth__aside {
		animation: cr-rise 0.8s var(--cr-ease-out) backwards;
	}

	.cr-hero__inner > :nth-child(2),
	.cr-product-hero .summary > :nth-child(2),
	.cr-desk__sticky > :nth-child(2),
	.cr-desk__body > :nth-child(2) {
		animation-delay: 0.07s;
	}

	.cr-hero__inner > :nth-child(3),
	.cr-product-hero .summary > :nth-child(3),
	.cr-desk__sticky > :nth-child(3),
	.cr-desk__body > :nth-child(3) {
		animation-delay: 0.14s;
	}

	.cr-hero__inner > :nth-child(4),
	.cr-product-hero .summary > :nth-child(4),
	.cr-desk__sticky > :nth-child(4),
	.cr-desk__body > :nth-child(4) {
		animation-delay: 0.21s;
	}

	.cr-hero__inner > :nth-child(n + 5),
	.cr-product-hero .summary > :nth-child(n + 5),
	.cr-desk__sticky > :nth-child(n + 5),
	.cr-desk__body > :nth-child(n + 5),
	.cr-product-hero .images,
	.cr-auth__aside {
		animation-delay: 0.28s;
	}

	/* The fade is short and the rise carries on after it. */
	@keyframes cr-fade {
		from {
			opacity: 0;
		}
	}

	@keyframes cr-rise {
		from {
			translate: 0 var(--cr-rise);
		}
	}

	/* ---------- Reveal on scroll --------------------------------------- */
	/* Hidden only once the script in <head> has said it will show them
	   (html.cr-motion); motion.js adds .cr-in as each one scrolls into view.
	   Keep this list in step with TARGETS in assets/js/motion.js. */
	html.cr-motion :is(
		.cr-section__head,
		.cr-cards > *,
		.cr-plans > *,
		.cr-stats > *,
		.cr-band,
		.cr-page > details,
		.dl-block-section__inner > .wp-block-heading,
		.woocommerce ul.products > li.product,
		.cr-tiers .pricing-card,
		.cr-tiers__note,
		.cr-section-title,
		.cr-prose,
		.cr-glance,
		.cr-account-card,
		.cr-next__step,
		.cr-footer__inner > *
	):not(.cr-in) {
		opacity: 0;
		translate: 0 var(--cr-rise);
	}

	html.cr-motion .cr-revealing {
		transition:
			opacity 0.4s var(--cr-ease-soft) var(--cr-delay, 0ms),
			translate 0.9s var(--cr-ease-out) var(--cr-delay, 0ms) !important;
	}

	/* Already on screen when the page opens: a short arrival, so the page
	   counts as shown sooner (a browser waits for the end of the move). */
	html.cr-motion .cr-revealing.cr-revealing--first {
		transition:
			opacity 0.3s var(--cr-ease-soft) var(--cr-delay, 0ms),
			translate 0.3s var(--cr-ease-out) var(--cr-delay, 0ms) !important;
	}

	/* ---------- From one page to the next ------------------------------ */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: cr-page-out 0.22s var(--cr-ease-soft) both;
	}

	::view-transition-new(root) {
		animation: cr-page-in 0.45s var(--cr-ease-out) both;
	}

	@keyframes cr-page-out {
		to {
			opacity: 0;
		}
	}

	@keyframes cr-page-in {
		from {
			opacity: 0;
			translate: 0 0.75rem;
		}
	}

	/* The header and the admin bar stay put while the page changes under them. */
	.site-header {
		view-transition-name: cr-header;
	}

	#wpadminbar {
		view-transition-name: cr-adminbar;
	}
}

@media print {
	html.cr-motion :not(.cr-in) {
		opacity: 1 !important;
		translate: none !important;
	}
}