/* PMPro motion layer: hero choreography, product tour, logo marquee, micro-interactions, button hovers. */

:root {
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-press: 160ms;
	--dur-hover: 200ms;
	--dur-ui: 240ms;
	--dur-enter: 420ms;
	--dur-hero: 520ms;
	--dur-settle: 700ms;
}

@keyframes pmpro-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes pmpro-settle {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

@keyframes pmpro-star {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}

/* ---- 1: hero choreography (only hidden when html.pmpro-js:not(.pmpro-motion-failed) is present) ---- */
@media (prefers-reduced-motion: no-preference) {
	.pmpro-js .pmpro-home-hero h1,
	.pmpro-js .pmpro-home-hero h1 + p,
	.pmpro-js .pmpro-home-hero .wp-block-group:has(.pmpro-count):not(:has(h1)),
	.pmpro-js .pmpro-home-hero .wp-block-buttons {
		animation: pmpro-rise var(--dur-hero) var(--ease-out) backwards;
	}
	.pmpro-js .pmpro-home-hero h1 + p { animation-delay: 70ms; }
	.pmpro-js .pmpro-home-hero .wp-block-group:has(.pmpro-count):not(:has(h1)) { animation-delay: 140ms; }
	.pmpro-js .pmpro-home-hero .wp-block-buttons { animation-delay: 210ms; }

	.pmpro-js .pmpro-home-hero .wp-block-column:not(:has(h1)) {
		animation: pmpro-settle var(--dur-settle) var(--ease-out) 120ms backwards;
	}

	.pmpro-js .pmpro-home-hero i.fa-star {
		animation: pmpro-star 320ms var(--ease-out) backwards;
		display: inline-block;
	}
	.pmpro-js .pmpro-home-hero i.fa-star:nth-of-type(1) { animation-delay: 260ms; }
	.pmpro-js .pmpro-home-hero i.fa-star:nth-of-type(2) { animation-delay: 320ms; }
	.pmpro-js .pmpro-home-hero i.fa-star:nth-of-type(3) { animation-delay: 380ms; }
	.pmpro-js .pmpro-home-hero i.fa-star:nth-of-type(4) { animation-delay: 440ms; }
	.pmpro-js .pmpro-home-hero i.fa-star:nth-of-type(5) { animation-delay: 500ms; }
}

.pmpro-count {
	font-variant-numeric: tabular-nums;
}

/* ---- 2: product tour ---- */
.pmpro-tour__frame {
	aspect-ratio: 1125 / 875;
	position: relative;
}

.pmpro-tour__pane {
	margin: 0;
}

.pmpro-tour__pane img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* White image backgrounds knock out against the hero background. */
.pmpro-home-hero .pmpro-tour__frame,
.pmpro-home-hero .pmpro-tour__pane {
	background: transparent;
}

.pmpro-home-hero .pmpro-tour__pane img {
	mix-blend-mode: darken;
}

.pmpro-tour.is-enhanced .pmpro-tour__pane {
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: scale(0.985);
	transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}

.pmpro-tour.is-enhanced .pmpro-tour__pane.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.pmpro-tour__tabs {
	border-bottom: 1px solid var(--memberlite-color-borders, #dbe6ed);
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	justify-content: safe center;
	margin-top: var(--wp--preset--spacing--10, 16px);
	overflow-x: auto;
	position: relative;
	scrollbar-width: none;
}

.pmpro-tour__tabs::-webkit-scrollbar {
	display: none;
}

.pmpro-tour .pmpro-tour__tabs [role="tab"] {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #556;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	padding: 10px 14px;
	transition: color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}

.pmpro-tour__tabs [role="tab"]:active {
	transform: scale(0.97);
}

.pmpro-tour__tabs [role="tab"][aria-selected="true"] {
	color: var(--memberlite-color-primary, #0c3d54);
	font-weight: 600;
}

.pmpro-tour__tabs [role="tab"]:focus:not(:focus-visible) {
	outline: none;
}

.pmpro-tour__tabs [role="tab"]:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--memberlite-color-action, #e87102);
	outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
	.pmpro-tour__tabs [role="tab"]:hover {
		color: var(--memberlite-color-primary, #0c3d54);
	}
}

@media (max-width: 1100px) {
	.pmpro-tour .pmpro-tour__tabs [role="tab"] {
		flex: none;
		font-size: 14px;
		padding: 8px 9px;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.pmpro-tour .pmpro-tour__tabs [role="tab"] {
		font-size: 13.5px;
		padding: 8px 6px;
	}
}

.pmpro-tour__ind {
	background: var(--memberlite-color-action, #e87102);
	bottom: -1px;
	height: 2px;
	left: 0;
	pointer-events: none;
	position: absolute;
	transform-origin: left center;
	transition: transform 260ms var(--ease-in-out);
	width: 100px;
}

.pmpro-tour__caption {
	color: #556;
	font-size: 14px;
	margin-top: 10px;
	min-height: 1.5em;
	text-align: center;
}

/* ---- 3: logo marquee (greyscale at rest works without JS) ---- */
.pmpro-logo-marquee img {
	filter: grayscale(1);
	opacity: 0.85;
	transition: filter var(--dur-hover) ease, opacity var(--dur-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
	.pmpro-logo-marquee img:hover {
		filter: none;
		opacity: 1;
	}
}

.pmpro-logo-marquee .pmpro-marquee.pmpro-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	display: block;
	overflow: hidden;
	padding: 10px 0;
}

.pmpro-marquee__track {
	align-items: center;
	animation: pmpro-marquee 40s linear infinite;
	display: flex;
	flex-wrap: nowrap;
	gap: 56px;
	width: max-content;
}

.pmpro-marquee__track > * {
	flex: none;
	margin: 0;
}

.pmpro-marquee--reverse .pmpro-marquee__track {
	animation-direction: reverse;
}

.pmpro-marquee:hover .pmpro-marquee__track {
	animation-play-state: paused;
}

@keyframes pmpro-marquee {
	to { transform: translateX(-50%); }
}

/* ---- 5: micro-interactions ---- */
.wp-element-button,
.pmpro_btn {
	transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-hover) ease, background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}

.wp-element-button:active,
.pmpro_btn:active {
	transform: scale(0.97);
}

.is-style-rounded-card-box {
	transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.is-style-rounded-card-box:hover {
		box-shadow: 0 14px 30px -18px rgba(12, 61, 84, 0.35), 2px 1px 12px rgba(0, 0, 0, 0.05);
		transform: translateY(-3px);
	}
}

.pmpro-reveal--armed .is-style-rounded-card-box {
	opacity: 0;
	transform: translateY(10px);
}

.pmpro-reveal--armed.is-revealed .is-style-rounded-card-box {
	opacity: 1;
	transform: none;
	transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
	transition-delay: calc(var(--pmpro-reveal-i, 0) * 60ms);
}

/* ---- 7: button hovers, Nudge + Halo ---- */
.wp-element-button i.fa-heart,
.pmpro_btn i.fa-heart,
.pmpro-btn-arrow {
	display: inline-block;
	transition: transform var(--dur-hover) var(--ease-out);
}

.wp-element-button:focus-visible,
.pmpro_btn:not(.pmpro_btn-plain):focus-visible {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pmpro-btn-bg, #e87102) 45%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.wp-element-button:hover,
	.pmpro_btn:not(.pmpro_btn-plain):hover {
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--pmpro-btn-bg, #e87102) 28%, transparent);
	}
	.wp-element-button:active,
	.pmpro_btn:not(.pmpro_btn-plain):active {
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--pmpro-btn-bg, #e87102) 28%, transparent);
	}
	.wp-element-button:hover i.fa-heart,
	.pmpro_btn:hover i.fa-heart {
		transform: scale(1.18);
	}
	.wp-element-button:hover .pmpro-btn-arrow,
	.pmpro_btn:hover .pmpro-btn-arrow {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmpro-marquee__track { animation: none; }
	.pmpro-tour.is-enhanced .pmpro-tour__pane { transform: none; transition: opacity 100ms linear; }
	.pmpro-tour__ind,
	.wp-element-button,
	.pmpro_btn,
	.pmpro-btn-arrow,
	.wp-element-button i.fa-heart,
	.is-style-rounded-card-box { transition-duration: 0.01ms; }
	.wp-element-button:active,
	.pmpro_btn:active,
	.pmpro-tour__tabs [role="tab"]:active { transform: none; }
	.is-style-rounded-card-box:hover { transform: none; }
}