/*
 * SOS 2026 Motion Foundation (Phase 1)
 * Source of truth: 2026 SOS motion doctrine
 *
 * Scope:
 * - Token layer: global custom properties
 * - Utility classes: reveal/stagger/split/sticky hooks
 * - Reduced motion contract
 * - Micro-interaction baseline for existing wrappers/shells
 *
 * Guardrails:
 * - No layout redesign
 * - No booking/payment logic changes
 * - No Elementor hash selector coupling
 */

:root {
	/* Motion tokens: durations */
	--motion-instant: 0ms;
	--motion-fast: 120ms;
	--motion-ui: 160ms;
	--motion-standard: 220ms;
	--motion-emphasis: 320ms;
	--motion-section: 420ms;
	--motion-stacked-card: 500ms;

	/* Motion tokens: easing */
	--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
	--ease-exit: cubic-bezier(0.4, 0, 1, 1);

	/* Motion tokens: vertical distance */
	--motion-y-xs: 8px;
	--motion-y-sm: 12px;
	--motion-y-md: 16px;
	--motion-y-lg: 24px;

	/* Reusable opacity + scale rule variables */
	--motion-opacity-reveal-start: 0;
	--motion-opacity-hover-min: 0.92;
	--motion-opacity-disabled: 0.5;
	--motion-scale-card-hover-max: 1.01;
	--motion-scale-button-press-min: 0.98;
	--motion-reduced-fade: 80ms;
}

/* Reveal utilities are visible by default so content is never hidden while waiting for JS. */
.reveal-fade-up,
.reveal-mask,
.hero-split-lines,
.reveal-stagger-group > * {
	opacity: 1;
	transform: none;
	clip-path: none;
}

/* Reveal activation hooks (only when JS enables motion). */
html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-fade-up,
html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-stagger-group > * {
	transition:
		opacity var(--motion-standard) var(--ease-standard),
		transform var(--motion-standard) var(--ease-standard);
	will-change: opacity, transform;
}

html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-fade-up:not(.is-revealed),
html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-stagger-group > *:not(.is-revealed) {
	opacity: var(--motion-opacity-reveal-start);
	transform: translateY(var(--motion-y-sm));
}

html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-stagger-group > * {
	transition-delay: calc(var(--stagger-index, 0) * 50ms);
}

html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-mask {
	transition:
		opacity var(--motion-section) var(--ease-standard),
		transform var(--motion-section) var(--ease-standard),
		clip-path var(--motion-section) var(--ease-standard);
	will-change: opacity, transform, clip-path;
}

html.sos-motion-foundation:not(.sos-reduced-motion) .reveal-mask:not(.is-revealed) {
	opacity: var(--motion-opacity-reveal-start);
	transform: translateY(var(--motion-y-md));
	clip-path: inset(0 0 100% 0 round 0);
}

/* Restrained split-lines utility: requires explicit line wrappers. */
html.sos-motion-foundation:not(.sos-reduced-motion) .hero-split-lines :where(.split-line, .line) {
	display: block;
	transition:
		opacity var(--motion-section) var(--ease-standard),
		transform var(--motion-section) var(--ease-standard);
	transition-delay: calc(var(--split-index, 0) * 50ms);
	will-change: opacity, transform;
}

html.sos-motion-foundation:not(.sos-reduced-motion) .hero-split-lines :where(.split-line, .line):not(.is-revealed) {
	opacity: var(--motion-opacity-reveal-start);
	transform: translateY(var(--motion-y-md));
}

/* Sticky CTA utility hook. */
.sticky-cta {
	transition:
		opacity var(--motion-standard) var(--ease-standard),
		transform var(--motion-standard) var(--ease-standard);
}

html.sos-motion-foundation:not(.sos-reduced-motion) .sticky-cta:not(.is-sticky-visible) {
	opacity: var(--motion-opacity-reveal-start);
	transform: translateY(var(--motion-y-md));
	pointer-events: none;
}

html.sos-motion-foundation:not(.sos-reduced-motion) .sticky-cta.is-sticky-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Reduced motion contract */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.reveal-fade-up,
	.reveal-mask,
	.reveal-stagger-group > *,
	.hero-split-lines :where(.split-line, .line) {
		transition: opacity var(--motion-reduced-fade) linear !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	/* Disable stagger and split effects under reduced motion. */
	.reveal-stagger-group > * {
		transition-delay: 0ms !important;
	}

	/* Disable stacked-card behavior hook in reduced motion. */
	.stacked-card,
	.stacked-cards,
	[data-stacked-card],
	[data-stacked-cards] {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
		position: static !important;
	}

	/* Sticky CTA appears statically when reduced motion is on. */
	.sticky-cta,
	.sticky-cta.is-sticky-visible,
	.sticky-cta:not(.is-sticky-visible) {
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
}

html.sos-reduced-motion .reveal-fade-up,
html.sos-reduced-motion .reveal-mask,
html.sos-reduced-motion .reveal-stagger-group > *,
html.sos-reduced-motion .hero-split-lines :where(.split-line, .line),
html.sos-reduced-motion .sticky-cta,
html.sos-reduced-motion .sticky-cta:not(.is-sticky-visible) {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition-duration: var(--motion-reduced-fade) !important;
	transition-delay: 0ms !important;
	pointer-events: auto !important;
}

/* Micro-interaction baseline (restrained, transform/opacity-centric). */
:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(
	a.elementor-button,
	.elementor-button,
	.sos-cta,
	.sos-home-hero__cta,
	.sos-home-final-cta__secondary,
	button,
	input[type='submit'],
	input[type='button'],
	.wpforms-submit
) {
	transition:
		transform var(--motion-ui) var(--ease-soft),
		opacity var(--motion-ui) var(--ease-soft),
		box-shadow var(--motion-ui) var(--ease-soft),
		color var(--motion-ui) var(--ease-soft),
		background-color var(--motion-ui) var(--ease-soft),
		border-color var(--motion-ui) var(--ease-soft);
}

:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(
	a.elementor-button,
	.elementor-button,
	.sos-cta,
	.sos-home-hero__cta,
	.sos-home-final-cta__secondary,
	button,
	input[type='submit'],
	input[type='button'],
	.wpforms-submit
):hover {
	transform: translateY(-1px);
	opacity: var(--motion-opacity-hover-min);
}

:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(
	a.elementor-button,
	.elementor-button,
	.sos-cta,
	.sos-home-hero__cta,
	.sos-home-final-cta__secondary,
	button,
	input[type='submit'],
	input[type='button'],
	.wpforms-submit
):active {
	transform: translateY(0) scale(var(--motion-scale-button-press-min));
}

:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(a, button, input, select, textarea, summary):focus-visible {
	transition:
		outline-color var(--motion-fast) var(--ease-soft),
		outline-offset var(--motion-fast) var(--ease-soft);
}

/* Nav/action links and chips (if present). */
:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(#masthead a, .menu-item > a, .elementor-icon-list-item a, .sos-chip, .chip) {
	transition:
		color var(--motion-ui) var(--ease-soft),
		opacity var(--motion-ui) var(--ease-soft),
		transform var(--motion-ui) var(--ease-soft);
}

:where(
	body.sos-home-elevation,
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959,
	body.page-id-254
) :where(.sos-chip, .chip):hover {
	transform: translateY(-1px) scale(var(--motion-scale-card-hover-max));
}

/* Accordion interactions. */
:where(
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959
) :where(
	.elementor-accordion .elementor-tab-title,
	.elementor-toggle .elementor-tab-title,
	details > summary
) {
	transition:
		color var(--motion-ui) var(--ease-soft),
		background-color var(--motion-ui) var(--ease-soft),
		border-color var(--motion-ui) var(--ease-soft);
}

:where(
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959
) :where(
	.elementor-accordion .elementor-tab-content,
	.elementor-toggle .elementor-tab-content,
	details > *:not(summary)
) {
	transition: opacity var(--motion-fast) var(--ease-soft);
}

/* Input baseline: focus, validation timing, and disabled opacity. */
:where(
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959
) :where(input, select, textarea) {
	transition:
		border-color var(--motion-fast) var(--ease-soft),
		background-color var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft);
}

:where(
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959
) :where(input, select, textarea, button):disabled,
:where(
	body.sos-services-shell,
	body.sos-booking-shell,
	body.sos-authority-shell,
	body.page-id-959
) :where([aria-disabled='true']) {
	opacity: var(--motion-opacity-disabled);
}

/* Booking safety: no reveal theatrics inside current booking popup/drawer container. */
body.sos-booking-shell .jet-popup :where(
	.reveal-fade-up,
	.reveal-mask,
	.reveal-stagger-group,
	.hero-split-lines,
	.sticky-cta
),
body.sos-booking-shell .jet-popup__container-content :where(
	.reveal-fade-up,
	.reveal-mask,
	.reveal-stagger-group,
	.hero-split-lines,
	.sticky-cta
) {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
	animation: none !important;
}

/* Booking hardening: reduce popup instability without enhancing theatrics. */
body.sos-booking-shell .jet-popup.jet-popup--animation-zoom-out .jet-popup__container,
body.sos-booking-shell .jet-popup.jet-popup--animation-zoom-out .jet-popup__container-inner {
	animation: none !important;
	transform: none !important;
	transition:
		opacity var(--motion-ui) var(--ease-soft),
		visibility var(--motion-instant) linear;
}

body.sos-booking-shell .jet-popup .jet-popup__overlay {
	transition: opacity var(--motion-ui) var(--ease-soft);
}

body.sos-booking-shell .sos-booking-form.sos-form-skin .wpforms-submit {
	transition:
		opacity var(--motion-fast) var(--ease-soft),
		transform var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft),
		background-color var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft);
}

body.sos-booking-shell .sos-booking-form.sos-form-skin .wpforms-submit:disabled,
body.sos-booking-shell .sos-booking-form.sos-form-skin .wpforms-submit[aria-disabled='true'] {
	opacity: var(--motion-opacity-disabled);
	transform: none;
}

body.sos-booking-shell .sos-booking-form.sos-form-skin :where(.wpforms-error, .wpforms-field-error) {
	transition:
		opacity var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft);
}

body.sos-booking-shell .sos-booking-form.sos-form-skin :where(.wpforms-confirmation-container-full, .wpforms-error-container) {
	transition:
		opacity var(--motion-standard) var(--ease-soft),
		transform var(--motion-standard) var(--ease-soft);
}

/* Phase 3 (Services only): restrained choreography for decision clarity. */
body.sos-services-shell .sos-services-stack-wrap {
	display: none;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack-wrap {
	display: block;
	position: relative;
	min-height: var(--services-stack-scroll-length, 1900px);
	margin-top: 0.75rem;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-choose__options .elementor-widget-container {
	display: none;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__sticky {
	position: sticky;
	top: max(18vh, 92px);
	height: min(100vh, 920px);
	display: grid;
	align-items: center;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack {
	position: relative;
	height: 100%;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__card {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	gap: 0.8rem;
	padding: clamp(1rem, 2vw, 1.4rem);
	border-radius: 24px;
	border: 1px solid rgba(42, 52, 79, 0.16);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 16px 40px rgba(17, 25, 46, 0.08);
	transform: scale(0.985);
	opacity: 0.82;
	transition:
		transform var(--motion-stacked-card) var(--ease-standard),
		opacity var(--motion-stacked-card) var(--ease-standard);
	pointer-events: none;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__card.is-active {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__card-title {
	margin: 0;
	font-size: clamp(1.15rem, 1.55vw, 1.45rem);
	line-height: 1.2;
	color: #1f2f4f;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__card-copy {
	margin: 0;
	color: #334b73;
	line-height: 1.6;
	max-width: 55ch;
}

body.sos-services-shell.sos-services-stack-enabled .sos-services-stack__card-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 42px;
	padding: 0.6rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(42, 52, 79, 0.2);
	background: #ffffff;
	color: #1f2f4f;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* FAQ refinement: 180ms expand, 120ms content opacity, max 45deg icon rotation. */
body.sos-services-shell .sos-faq.sos-faq-motion .elementor-toggle .elementor-tab-content {
	display: block !important;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	transition:
		max-height 180ms var(--ease-standard),
		opacity 120ms var(--ease-soft),
		padding-top 180ms var(--ease-standard),
		padding-bottom 180ms var(--ease-standard);
}

body.sos-services-shell .sos-faq.sos-faq-motion .elementor-toggle .elementor-tab-title.elementor-active + .elementor-tab-content {
	max-height: 900px;
	opacity: 1;
	visibility: visible;
	padding-top: 0.2rem;
	padding-bottom: 1.1rem;
}

body.sos-services-shell .sos-faq.sos-faq-motion .elementor-toggle-icon :where(i, svg) {
	transition: transform 180ms var(--ease-standard);
	transform: rotate(0deg);
}

body.sos-services-shell .sos-faq.sos-faq-motion .elementor-tab-title.elementor-active .elementor-toggle-icon :where(i, svg) {
	transform: rotate(45deg);
}

/* Services sticky booking CTA: appears after first service block, hides near footer. */
body.sos-services-shell .sos-services-sticky-cta {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 40;
	transform: translate(-50%, 16px);
	width: min(calc(100vw - 2rem), 360px);
}

body.sos-services-shell .sos-services-sticky-cta .sos-services-sticky-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 0.72rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(42, 52, 79, 0.2);
	background: #ffffff;
	color: #1f2f4f;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 12px 26px rgba(17, 25, 46, 0.18);
}

body.sos-services-shell .sos-services-sticky-cta.is-footer-blocked {
	opacity: 0 !important;
	pointer-events: none !important;
	transform: translate(-50%, 120%) !important;
	display: none !important;
}

@media (max-width: 1023px) {
	body.sos-services-shell .sos-services-stack-wrap {
		display: none !important;
	}

	body.sos-services-shell .sos-services-choose__options .elementor-widget-container {
		display: block;
	}
}

@media (max-width: 767px) {
	body.sos-services-shell .sos-services-sticky-cta {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sos-services-shell .sos-services-stack-wrap,
	body.sos-services-shell.sos-services-stack-enabled .sos-services-stack-wrap {
		display: none !important;
	}

	body.sos-services-shell .sos-services-choose__options .elementor-widget-container {
		display: block !important;
	}

	body.sos-services-shell .sos-faq.sos-faq-motion .elementor-toggle .elementor-tab-content {
		transition: none !important;
		max-height: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding-top: 0.2rem !important;
		padding-bottom: 1.1rem !important;
	}

	body.sos-booking-shell .jet-popup .jet-popup__container,
	body.sos-booking-shell .jet-popup .jet-popup__container-inner,
	body.sos-booking-shell .jet-popup .jet-popup__overlay,
	body.sos-booking-shell .sos-booking-form.sos-form-skin .wpforms-submit,
	body.sos-booking-shell .sos-booking-form.sos-form-skin :where(.wpforms-error, .wpforms-field-error, .wpforms-confirmation-container-full, .wpforms-error-container) {
		transition: none !important;
		animation: none !important;
	}
}