/*
 * Shared interaction and motion system for every plugin-owned public page.
 * Movement stays scoped to the plugin roots and never affects wp-admin.
 */
:where(
	.cpc-landing-root,
	.cpc-course-app-shell,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate,
	.cpc-verification-body
) {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate,
	.cpc-verification-body
) :where(
	button,
	.cpc-button,
	.cpc-hero-cta,
	.cpc-path-button,
	.cpc-landing-login,
	.cpc-consultation-primary-button
) {
	transition:
		background-color var(--duration-fast) var(--ease-in-out),
		border-color var(--duration-fast) var(--ease-in-out),
		box-shadow var(--duration-fast) var(--ease-in-out),
		color var(--duration-fast) var(--ease-in-out),
		opacity var(--duration-fast) var(--ease-in-out),
		transform var(--duration-fast) var(--ease-in-out);
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate
) :where(input, textarea, select) {
	transition:
		background-color var(--duration-fast) var(--ease-in-out),
		border-color var(--duration-fast) var(--ease-in-out),
		box-shadow var(--duration-fast) var(--ease-in-out),
		color var(--duration-fast) var(--ease-in-out);
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate
) :where(
	.cpc-path-card,
	.cpc-testimonial,
	.cpc-consultation-hero-panel,
	.cpc-consultation-problem-grid > p,
	.cpc-consultation-fit-grid > div,
	.cpc-consultation-form-panel,
	.cpc-module-card,
	.cpc-content-card,
	.cpc-auth-panel,
	.cpc-access-gate
) {
	transition:
		background-color var(--duration-base) var(--ease-in-out),
		border-color var(--duration-base) var(--ease-in-out),
		box-shadow var(--duration-base) var(--ease-in-out),
		transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	:where(
		.cpc-landing-root,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate,
		.cpc-verification-body
	) :where(
		button:not(:disabled),
		.cpc-button,
		.cpc-hero-cta,
		.cpc-path-button,
		.cpc-consultation-primary-button
	):hover {
		transform: translateY(-2px);
	}

	:where(
		.cpc-landing-root,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate
	) :where(
		.cpc-path-card,
		.cpc-testimonial,
		.cpc-consultation-problem-grid > p,
		.cpc-consultation-fit-grid > div,
		.cpc-module-card,
		.cpc-content-card
	):hover {
		transform: translateY(-3px);
	}
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate,
	.cpc-verification-body
) :where(
	button:not(:disabled),
	.cpc-button,
	.cpc-hero-cta,
	.cpc-path-button,
	.cpc-consultation-primary-button
):active {
	transform: scale(0.985);
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate
) button[aria-busy="true"] {
	cursor: wait;
	gap: 10px;
}

:where(
	.cpc-landing-root,
	.cpc-dashboard-root,
	.cpc-auth-shell,
	.cpc-access-gate
) button[aria-busy="true"]::after {
	animation: cpc-loading-dots 900ms var(--ease-in-out) infinite;
	background:
		radial-gradient(circle, currentColor 60%, transparent 62%) 0 50% / 4px 4px no-repeat,
		radial-gradient(circle, currentColor 60%, transparent 62%) 7px 50% / 4px 4px no-repeat,
		radial-gradient(circle, currentColor 60%, transparent 62%) 14px 50% / 4px 4px no-repeat;
	content: "";
	flex: 0 0 18px;
	height: 8px;
	width: 18px;
}

.cpc-dashboard-root .cpc-quiz-stage[aria-busy="true"] {
	isolation: isolate;
	position: relative;
}

.cpc-dashboard-root .cpc-quiz-stage[aria-busy="true"]::after {
	animation: cpc-skeleton-shimmer 1.2s var(--ease-in-out) infinite;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-100%);
	z-index: 2;
}

.cpc-consultation-root .cpc-consultation-faq details {
	overflow: clip;
	transition:
		background-color var(--duration-base) var(--ease-in-out),
		border-color var(--duration-base) var(--ease-in-out),
		box-shadow var(--duration-base) var(--ease-in-out);
}

.cpc-consultation-root .cpc-consultation-faq details:hover {
	background: color-mix(in srgb, var(--cpc-landing-panel) 64%, transparent);
	border-color: var(--cpc-landing-line-strong);
}

.cpc-consultation-root .cpc-consultation-faq summary::after {
	content: "+" !important;
	transform: rotate(0deg);
	transform-origin: center;
	transition:
		color var(--duration-fast) var(--ease-in-out),
		transform var(--duration-base) var(--ease-in-out);
}

.cpc-consultation-root .cpc-consultation-faq details[open] summary::after {
	transform: rotate(45deg);
}

.cpc-faq-animating {
	overflow: hidden !important;
}

@media (prefers-reduced-motion: no-preference) {
	.cpc-consultation-root .cpc-consultation-success:not([hidden]) {
		animation: cpc-page-enter var(--duration-base) var(--ease-out) both;
	}

	.cpc-page-enter {
		animation: cpc-page-enter var(--duration-base) var(--ease-out) both;
	}

	.cpc-reveal {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
		transition:
			opacity var(--duration-slow) var(--ease-out) var(--cpc-reveal-delay, 0ms),
			transform var(--duration-slow) var(--ease-out) var(--cpc-reveal-delay, 0ms);
		will-change: opacity, transform;
	}

	.cpc-reveal.is-visible {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes cpc-page-enter {
	from {
		opacity: 0.01;
		transform: translate3d(0, 6px, 0);
	}

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

@keyframes cpc-loading-dots {
	0%,
	100% {
		opacity: 0.45;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-1px);
	}
}

@keyframes cpc-skeleton-shimmer {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(
		.cpc-landing-root,
		.cpc-course-app-shell,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate,
		.cpc-verification-body
	),
	:where(
		.cpc-landing-root,
		.cpc-course-app-shell,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate,
		.cpc-verification-body
	) *,
	:where(
		.cpc-landing-root,
		.cpc-course-app-shell,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate,
		.cpc-verification-body
	) *::before,
	:where(
		.cpc-landing-root,
		.cpc-course-app-shell,
		.cpc-dashboard-root,
		.cpc-auth-shell,
		.cpc-access-gate,
		.cpc-verification-body
	) *::after {
		animation-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}

	.cpc-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}