/**
 * F45 UI v2 — Motion System (Sprint 1)
 *
 * ЦЕЛЬ: единая система токенов длительности/easing + subtle micro-interactions
 * для кнопок, карточек, табов, диалогов. Никакого ripple, никакого «украшательства».
 *
 * ПРИНЦИПЫ:
 * 1. Motion подтверждает действие, связывает экраны, маскирует ожидание. Не украшение.
 * 2. GPU-only свойства: transform, opacity, filter. Никаких width/height/top/left анимаций.
 * 3. Всё уважает prefers-reduced-motion и body.reduce-motion (пользовательский тумблер).
 * 4. Baseline-only. Нет фолбеков — только browsers c поддержкой (см. Baseline Newly 2024).
 * 5. Инкрементально: скоупим селекторы к .lk-* и .f45-btn-v2 чтобы старый UI не сломать.
 *
 * ОТКАТ: выключить опцию f45_ui_v2_enabled в WP-админке. Этот файл вообще не грузится.
 */

/* ============================================================
   1. MOTION TOKENS
   ============================================================ */

:root {
	/* Длительности. Категория задаёт silhouette переходов.
	   Не увеличиваем без нужды — короткое движение = быстрый UX. */
	--f45-dur-instant: 80ms;    /* focus, tap-down, highlight подсветка   */
	--f45-dur-fast:    140ms;   /* button/card hover, tap-up, tab switch  */
	--f45-dur-base:    220ms;   /* большинство UI переходов               */
	--f45-dur-slow:    360ms;   /* sheet/dialog появление, morph          */
	--f45-dur-lazy:    520ms;   /* большие layout смены (VT hero morph)   */

	/* Easings. Три семейства покрывают всё:
	   - standard: обычные UI переходы
	   - emphasized: акцент, exit/entrance с ускорением (Material 3)
	   - overshoot: только для success moments (маленький bounce) */
	--f45-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
	--f45-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
	--f45-ease-overshoot:  cubic-bezier(0.34, 1.56, 0.64, 1);
	--f45-ease-out:        cubic-bezier(0, 0, 0.2, 1);
	--f45-ease-in:         cubic-bezier(0.4, 0, 1, 1);

	/* Interaction scale — subtle. Не «growable», не заметно на глаз, только чувствуется. */
	--f45-scale-hover:  1.015;
	--f45-scale-tap:    0.985;
	--f45-scale-focus:  1.0;

	/* Depth (shadow) — три уровня. Меняется на hover/active, не появляется из ниоткуда. */
	--f45-depth-rest:   0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 3px rgba(10, 10, 10, 0.04);
	--f45-depth-hover:  0 3px 8px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.04);
	--f45-depth-active: 0 1px 2px rgba(10, 10, 10, 0.08), 0 1px 1px rgba(10, 10, 10, 0.04);

	/* Light highlight — заменяет ripple. Верхняя грань чуть светлеет на hover. */
	--f45-highlight-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ============================================================
   2. GLOBAL RESPECT FOR REDUCED MOTION
   ============================================================
   Два переключателя: OS-level prefers-reduced-motion и user-level body.reduce-motion
   (тумблер в /lk/profile «Уменьшить анимации»). Оба обнуляют длительности. */

@media (prefers-reduced-motion: reduce) {
	:root {
		--f45-dur-instant: 0ms;
		--f45-dur-fast:    0ms;
		--f45-dur-base:    0ms;
		--f45-dur-slow:    0ms;
		--f45-dur-lazy:    0ms;
		--f45-scale-hover: 1.0;
		--f45-scale-tap:   1.0;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body.reduce-motion {
	--f45-dur-instant: 0ms;
	--f45-dur-fast:    0ms;
	--f45-dur-base:    0ms;
	--f45-dur-slow:    0ms;
	--f45-dur-lazy:    0ms;
	--f45-scale-hover: 1.0;
	--f45-scale-tap:   1.0;
}
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
}

/* ============================================================
   3. BUTTON INTERACTION LAYER (.f45-btn-v2)
   ============================================================
   Новый класс — не трогаем существующие .f45-btn / .lk-*.
   Использование: <button class="f45-btn-v2 f45-btn-v2--primary">Записаться</button>

   БЕЗ RIPPLE: используем scale + shadow depth + light highlight сверху. */

.f45-btn-v2 {
	/* база */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--f45-radius-md, 8px);
	background: var(--f45-navy, #1B2A4E);
	color: var(--f45-white, #fff);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	/* motion: transform + shadow, всё GPU */
	transform: scale(var(--f45-scale-focus));
	box-shadow: var(--f45-depth-rest);
	transition:
		transform var(--f45-dur-fast) var(--f45-ease-standard),
		box-shadow var(--f45-dur-fast) var(--f45-ease-standard),
		background-color var(--f45-dur-fast) var(--f45-ease-standard),
		border-color var(--f45-dur-fast) var(--f45-ease-standard),
		color var(--f45-dur-fast) var(--f45-ease-standard);

	/* will-change только для родителей hover (не глобально) */
}

/* subtle top highlight — заменяет ripple */
.f45-btn-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: var(--f45-highlight-hover);
	opacity: 0;
	transition: opacity var(--f45-dur-fast) var(--f45-ease-standard);
}

/* HOVER: чуть-чуть вверх + глубже тень + highlight появляется */
@media (hover: hover) {
	.f45-btn-v2:hover:not(:disabled):not([aria-disabled="true"]) {
		transform: scale(var(--f45-scale-hover));
		box-shadow: var(--f45-depth-hover);
	}
	.f45-btn-v2:hover:not(:disabled):not([aria-disabled="true"])::before {
		opacity: 1;
	}
}

/* ACTIVE (mouse down / tap down): scale в противоположную сторону */
.f45-btn-v2:active:not(:disabled):not([aria-disabled="true"]) {
	transform: scale(var(--f45-scale-tap));
	box-shadow: var(--f45-depth-active);
	transition-duration: var(--f45-dur-instant);
}

/* FOCUS-VISIBLE: keyboard-only outline */
.f45-btn-v2:focus-visible {
	outline: 2px solid var(--f45-red, #E30613);
	outline-offset: 2px;
}

/* DISABLED */
.f45-btn-v2:disabled,
.f45-btn-v2[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Варианты цвета */
.f45-btn-v2--primary { background: var(--f45-red, #E30613); color: #fff; }
@media (hover: hover) {
	.f45-btn-v2--primary:hover:not(:disabled):not([aria-disabled="true"]) {
		background: var(--f45-red-hover, #B10510);
	}
}

.f45-btn-v2--secondary {
	background: transparent;
	color: var(--f45-navy, #1B2A4E);
	border-color: var(--f45-line, #E5E5E7);
}
@media (hover: hover) {
	.f45-btn-v2--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
		background: var(--f45-bg-alt, #F5F5F7);
		border-color: var(--f45-navy, #1B2A4E);
	}
}

.f45-btn-v2--ghost {
	background: transparent;
	color: var(--f45-body, #2C2C2C);
	box-shadow: none;
}
@media (hover: hover) {
	.f45-btn-v2--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
		background: rgba(10, 10, 10, 0.04);
		box-shadow: none;
	}
}

/* ============================================================
   4. CARD INTERACTION LAYER (.lk-card-v2)
   ============================================================
   Класс для будущих Overview-виджетов. Только hover/active — без ripple.
   Аналогично кнопке: subtle scale + shadow depth. */

.lk-card-v2 {
	position: relative;
	display: block;
	background: var(--f45-bg, #fff);
	border: 1px solid var(--f45-line, #E5E5E7);
	border-radius: var(--f45-radius-lg, 16px);
	padding: 20px;
	text-decoration: none;
	color: inherit;

	transform: translateZ(0);
	box-shadow: var(--f45-depth-rest);
	transition:
		transform var(--f45-dur-base) var(--f45-ease-standard),
		box-shadow var(--f45-dur-base) var(--f45-ease-standard),
		border-color var(--f45-dur-base) var(--f45-ease-standard);
}

/* Только если сама карточка кликабельна */
.lk-card-v2[data-clickable="true"],
a.lk-card-v2,
button.lk-card-v2 {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
	.lk-card-v2[data-clickable="true"]:hover,
	a.lk-card-v2:hover,
	button.lk-card-v2:hover {
		transform: translateY(-2px);
		box-shadow: var(--f45-depth-hover);
		border-color: color-mix(in srgb, var(--f45-line, #E5E5E7) 40%, var(--f45-navy, #1B2A4E) 60%);
	}
}

.lk-card-v2[data-clickable="true"]:active,
a.lk-card-v2:active,
button.lk-card-v2:active {
	transform: translateY(0);
	box-shadow: var(--f45-depth-active);
	transition-duration: var(--f45-dur-instant);
}

.lk-card-v2:focus-visible {
	outline: 2px solid var(--f45-red, #E30613);
	outline-offset: 2px;
}

/* ============================================================
   5. NATIVE <dialog> / BOTTOM SHEET
   ============================================================
   Native <dialog> Widely 2024-09-14. Backdrop анимируется через
   @starting-style + transition-behavior: allow-discrete (Newly 2024-08).

   Использование:
     <dialog class="f45-sheet" id="booking-sheet">…</dialog>
     dialog.showModal()  — modal
     dialog.show()       — non-modal (popover)
*/

.f45-sheet {
	/* база */
	border: none;
	padding: 0;
	background: var(--f45-bg, #fff);
	color: var(--f45-body, #2C2C2C);
	color-scheme: light;
	overscroll-behavior: contain;
	max-height: 92dvh;
	overflow: hidden auto;
	width: 100%;
	max-width: 640px;
	border-radius: var(--f45-radius-lg, 16px) var(--f45-radius-lg, 16px) 0 0;

	/* Ниже мобильного края экрана изначально. */
	transform: translateY(24px);
	opacity: 0;
	transition:
		transform var(--f45-dur-slow) var(--f45-ease-emphasized),
		opacity var(--f45-dur-slow) var(--f45-ease-emphasized),
		overlay var(--f45-dur-slow) var(--f45-ease-emphasized) allow-discrete,
		display var(--f45-dur-slow) var(--f45-ease-emphasized) allow-discrete;
}

/* Стейт: sheet открыт */
.f45-sheet[open] {
	transform: translateY(0);
	opacity: 1;
}

/* Entrance state: браузеры с поддержкой @starting-style плавно enter'ят */
@starting-style {
	.f45-sheet[open] {
		transform: translateY(24px);
		opacity: 0;
	}
}

/* Backdrop */
.f45-sheet::backdrop {
	background: rgba(10, 10, 10, 0);
	backdrop-filter: blur(0px);
	transition:
		background-color var(--f45-dur-slow) var(--f45-ease-standard),
		backdrop-filter var(--f45-dur-slow) var(--f45-ease-standard),
		overlay var(--f45-dur-slow) var(--f45-ease-standard) allow-discrete,
		display var(--f45-dur-slow) var(--f45-ease-standard) allow-discrete;
}
.f45-sheet[open]::backdrop {
	background: rgba(10, 10, 10, 0.48);
	backdrop-filter: blur(4px);
}
@starting-style {
	.f45-sheet[open]::backdrop {
		background: rgba(10, 10, 10, 0);
		backdrop-filter: blur(0px);
	}
}

/* Bottom-sheet layout на мобильных: приклеиваем к низу */
@media (max-width: 640px) {
	.f45-sheet {
		margin: auto auto 0 auto;
		max-height: 88dvh;
	}
}

/* Sheet skeleton */
.f45-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--f45-line, #E5E5E7);
}
.f45-sheet__body {
	padding: 20px;
}
.f45-sheet__grabber {
	display: block;
	width: 40px;
	height: 4px;
	margin: 8px auto 0;
	background: var(--f45-line, #E5E5E7);
	border-radius: 999px;
}
.f45-sheet__close {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--f45-muted, #595960);
	border-radius: 8px;
	transition: background-color var(--f45-dur-fast) var(--f45-ease-standard);
}
.f45-sheet__close:hover { background: var(--f45-bg-alt, #F5F5F7); }
.f45-sheet__close:focus-visible { outline: 2px solid var(--f45-red, #E30613); outline-offset: 2px; }

/* ============================================================
   6. VIEW TRANSITIONS — LK TABS
   ============================================================
   VT SPA Baseline Newly 2025-10-14. В браузерах без поддержки —
   переходы без анимации, но контент меняется мгновенно (см. lk.js). */

@supports (view-transition-name: none) {
	/* Активная зона — только контент вкладок LK, не header/footer. */
	#f45-lk[data-vt-ready="true"] {
		view-transition-name: lk-content;
	}
}

/* Анимация pseudo-elements ::view-transition-* */
::view-transition-old(lk-content),
::view-transition-new(lk-content) {
	animation-duration: var(--f45-dur-base);
	animation-timing-function: var(--f45-ease-standard);
}
::view-transition-old(lk-content) {
	animation-name: f45-vt-fade-out;
}
::view-transition-new(lk-content) {
	animation-name: f45-vt-fade-in;
}

@keyframes f45-vt-fade-out {
	to { opacity: 0; transform: translateY(-4px); }
}
@keyframes f45-vt-fade-in {
	from { opacity: 0; transform: translateY(4px); }
}

/* ============================================================
   7. PROGRESSIVE ENHANCEMENT для существующих кнопок и карточек
   ============================================================
   Под UI v2 (html[data-ui-v2="1"]) добавляем subtle motion к уже
   существующим классам без изменения main.css. Это даёт
   видимый эффект Sprint 1 для Славы, не трогая базовый дизайн.
   При выключении флага motion.css вообще не грузится. */

@media (prefers-reduced-motion: no-preference) {
	/* ---------- КНОПКИ ЗАПИСИ НА КЛАСС (главные CTA в Расписании) ---------- */
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-slot__btn {
		transition:
			background-color var(--f45-dur-fast) var(--f45-ease-standard),
			border-color var(--f45-dur-fast) var(--f45-ease-standard),
			transform var(--f45-dur-fast) var(--f45-ease-standard),
			box-shadow var(--f45-dur-base) var(--f45-ease-standard);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-slot__btn:not(:disabled):not([aria-busy="true"]):hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 6px 14px rgba(227, 6, 19, 0.28),
			0 2px 4px rgba(227, 6, 19, 0.14);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-slot__btn:not(:disabled):not([aria-busy="true"]):active {
		transform: translateY(0) scale(0.98);
		box-shadow: 0 2px 4px rgba(227, 6, 19, 0.20);
		transition-duration: var(--f45-dur-instant);
	}

	/* ---------- СТАРЫЕ f45-btn (модалки, чекаут, абонементы) ---------- */
	html[data-ui-v2="1"] body:not(.reduce-motion) .f45-btn:not(:disabled):not([aria-disabled="true"]) {
		transition:
			transform var(--f45-dur-fast) var(--f45-ease-standard),
			box-shadow var(--f45-dur-base) var(--f45-ease-standard),
			filter var(--f45-dur-fast) var(--f45-ease-standard);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .f45-btn:not(:disabled):not([aria-disabled="true"]):hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 6px 14px rgba(10, 10, 10, 0.18),
			0 2px 4px rgba(10, 10, 10, 0.08);
		filter: brightness(1.05);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .f45-btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
		box-shadow:
			0 6px 14px rgba(227, 6, 19, 0.32),
			0 2px 4px rgba(227, 6, 19, 0.16);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .f45-btn:not(:disabled):not([aria-disabled="true"]):active {
		transform: translateY(0) scale(0.98);
		box-shadow: var(--f45-depth-rest);
		transition-duration: var(--f45-dur-instant);
	}

	/* focus-visible — мягкий ring только при клавиатурной навигации */
	html[data-ui-v2="1"] .f45-btn:focus-visible,
	html[data-ui-v2="1"] .lk-slot__btn:focus-visible,
	html[data-ui-v2="1"] .lk-tab:focus-visible {
		outline: 2px solid var(--f45-focus-ring, #4A90E2);
		outline-offset: 2px;
		border-radius: 4px;
	}

	/* ---------- ТАБЫ ЛК: аккуратная indicator-линия + hover фон ---------- */
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-tab {
		position: relative;
		transition:
			background-color var(--f45-dur-fast) var(--f45-ease-standard),
			color var(--f45-dur-fast) var(--f45-ease-standard);
	}
	/* Ненавязчивый hover без смены фона (в теме hover меняет только color) — добавим мягкий фон */
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-tab:not(.is-active):hover {
		background: rgba(10, 10, 10, 0.045);
	}
	/* Красное подчеркивание под активным табом убрано по запросу клиента (2026-07-28).
	   Активный таб выделяется базовым цветом текста (чёрный) и более толстым
	   начертанием — этого достаточно. */

	/* ---------- СТАРТОВАЯ LOGIN КНОПКА (единственная видимая анониму) ---------- */
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-login__submit:not([disabled]) {
		transition:
			transform var(--f45-dur-fast) var(--f45-ease-standard),
			box-shadow var(--f45-dur-base) var(--f45-ease-standard),
			background var(--f45-dur-fast) var(--f45-ease-standard);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-login__submit:not([disabled]):hover {
		transform: translateY(-2px) scale(1.02);
		box-shadow:
			0 8px 20px rgba(227, 6, 19, 0.35),
			0 2px 4px rgba(227, 6, 19, 0.18);
	}
	html[data-ui-v2="1"] body:not(.reduce-motion) .lk-login__submit:not([disabled]):active {
		transform: translateY(0) scale(0.98);
		box-shadow: 0 2px 6px rgba(227, 6, 19, 0.24);
		transition-duration: var(--f45-dur-instant);
	}
}

/* ============================================================
   8. UTILITY: motion.css enabled marker для DevTools
   ============================================================ */

/* Небольшой маркер для отладки — можно проверить в DevTools "computed":
   body > * будет иметь inherited motion tokens */
:root { --f45-motion-v2: 1; }