/* Motion layer of the mosdisplay.ru design system (rework 28.09, part 3 of 3).
   The only CSS file with transition, animation, @keyframes and @starting-style (design-lint DS-M1a).
   It sits on top of md-components.css and changes no layout: states are attributes set by the markup and
   by md-components.js ([open], [hidden], :checked, aria-*, data-mds-state), this file only says how fast
   the change is shown. Research, numbers and the story of 03.09 — ~/Stands/mosdisplay-ds/ds-foundation/rework/motion.md.

   Three levels, one attribute on <body class="md-ds"> (PHP: mds_motion_attr()):
     no attribute or data-mds-motion="quiet" — 1 «Тихо»: colour of fills, borders and labels on hover,
       focus and press, duration.fast; the focus ring appears at once;
     data-mds-motion="store" — 2 «Как в Apple Store» (recommended, question М1): 1 plus motion that answers
       an action — a question opens, the sheet slides up, the selected segment slides, a variant is chosen,
       «Скопировано», the sticky bar comes and goes; duration.medium / duration.slow;
     data-mds-motion="web" — 3 «Как на apple.com» (showcase only, question М3): 2 plus blocks without
       prices and photos rising once while the page scrolls — CSS scroll timeline only, no script.

   Never, on any level (DS-M1f, design-rules.json → motion_forbidden_selectors): the first screen, a price,
   a photo. Nothing is hidden until a script runs: hidden starting states live only in @starting-style,
   @keyframes and closed states ([hidden], :not([open])) (DS-M1g). Durations and curves — only tokens
   (DS-M1b); with prefers-reduced-motion md-tokens.css sets every duration to 0ms, and the scroll timeline
   is inside (prefers-reduced-motion: no-preference) (DS-M1e). No rotation, no loops, no scroll hijacking.
   Browsers without @starting-style, ::details-content or scroll timelines show the same states at once.
   Not enqueued by any page yet. */

/* ---------- level 1 «Тихо» (and every level): colour only, duration.fast ---------- */
.mds-button,
.mds-chip,
.mds-variant,
.mds-field__input,
.mds-segmented__item {
	transition: background-color var(--mds-duration-fast) var(--mds-ease-standard),
		border-color var(--mds-duration-fast) var(--mds-ease-standard),
		color var(--mds-duration-fast) var(--mds-ease-standard);
}

/* ---------- level 2: a chosen variant — the frame changes over duration.medium. The price in the total
   and in the sticky bar and the photo change at once (lessons «кружится» and «вспышка» of 03.09) ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-variant {
	transition: border-color var(--mds-duration-medium) var(--mds-ease-standard),
		background-color var(--mds-duration-medium) var(--mds-ease-standard);
}

/* ---------- level 2: segmented control — a white thumb slides to the selected segment.
   md-components.js writes --js-index / --js-count and data-mds-state="ready" (only when a segment is
   selected); without the script the selected segment keeps its own white fill (md-components.css). ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-segmented__track[data-mds-state="ready"] {
	position: relative;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-segmented__track[data-mds-state="ready"]::before {
	content: "";
	position: absolute;
	top: var(--mds-space-1);
	bottom: var(--mds-space-1);
	left: var(--mds-space-1);
	box-sizing: border-box;
	width: calc((100% - var(--mds-space-1) * (var(--js-count, 2) + 1)) / var(--js-count, 2));
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	background-color: var(--mds-color-surface-base);
	translate: calc(var(--js-index, 0) * (100% + var(--mds-space-1))) 0;
	transition: translate var(--mds-duration-medium) var(--mds-ease-standard);
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-segmented__track[data-mds-state="ready"] .mds-segmented__item.mds-segmented__item {
	border-color: transparent;
	background-color: transparent;
}

/* ---------- level 2: questions and «Подробнее» — the answer opens over duration.slow.
   The panel is a one-row grid (md-components.css): the row goes 0fr → 1fr, the height is laid out by the
   browser. Opening needs @starting-style (Safari 17.5+) and md-components.js (data-mds-state): a question
   open in the server HTML is shown open at load, it does not unfold by itself. Closing needs
   ::details-content (Safari 18.4+, Chrome 131+) — older browsers close at once. The chevron flips at once:
   no turn. The rows of the price table open at once — there are prices inside. ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-disclosure > .mds-disclosure__panel {
	overflow-y: clip;
	transition: grid-template-rows var(--mds-duration-slow) var(--mds-ease-standard);
}

@starting-style {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-disclosure[data-mds-state][open] > .mds-disclosure__panel {
		grid-template-rows: minmax(0, 0fr);
	}
}

@supports selector(::details-content) {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-disclosure::details-content {
		transition: content-visibility var(--mds-duration-slow) var(--mds-ease-standard) allow-discrete;
	}

	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-disclosure:not([open]) > .mds-disclosure__panel {
		grid-template-rows: minmax(0, 0fr);
	}
}

/* ---------- level 2: the sheet «Запись через Telegram» — slides up from the bottom over duration.slow
   and leaves downwards, where it came from, over duration.medium; the backdrop fades. From 768 it is a
   window: it rises by distance.reveal and fades in. ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet {
	transition: translate var(--mds-duration-medium) var(--mds-ease-standard),
		opacity var(--mds-duration-medium) var(--mds-ease-standard),
		display var(--mds-duration-medium) allow-discrete,
		overlay var(--mds-duration-medium) allow-discrete;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet[open] {
	transition: translate var(--mds-duration-slow) var(--mds-ease-enter),
		opacity var(--mds-duration-slow) var(--mds-ease-enter),
		display var(--mds-duration-slow) allow-discrete,
		overlay var(--mds-duration-slow) allow-discrete;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet:not([open]) {
	translate: 0 100%;
}

@starting-style {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet[open] {
		translate: 0 100%;
	}
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet::backdrop {
	transition: background-color var(--mds-duration-medium) var(--mds-ease-standard),
		display var(--mds-duration-medium) allow-discrete,
		overlay var(--mds-duration-medium) allow-discrete;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet:not([open])::backdrop {
	background-color: transparent;
}

@starting-style {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet[open]::backdrop {
		background-color: transparent;
	}
}

@media (min-width: 768px) {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet:not([open]) {
		opacity: 0;
		translate: 0 var(--mds-distance-reveal);
	}

	@starting-style {
		:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sheet[open] {
			opacity: 0;
			translate: 0 var(--mds-distance-reveal);
		}
	}
}

/* ---------- level 2: the sticky bar — comes up from below when the first-screen button has scrolled
   away and goes back down; only the bar that the page script shows (data-mds-sticky="auto"): a bar
   visible from the start never moves. ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sticky-bar[data-mds-sticky="auto"] {
	transition: translate var(--mds-duration-medium) var(--mds-ease-enter),
		display var(--mds-duration-medium) allow-discrete;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sticky-bar[data-mds-sticky="auto"][hidden] {
	translate: 0 100%;
}

@starting-style {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-sticky-bar[data-mds-sticky="auto"]:not([hidden]) {
		translate: 0 100%;
	}
}

/* ---------- level 2: «Скопировано» and other toasts — rise by distance.reveal and fade, leave the same
   way; a toast shown in the page from the start (--static) never moves. ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-toast:not(.mds-toast--static) {
	transition: translate var(--mds-duration-medium) var(--mds-ease-enter),
		opacity var(--mds-duration-medium) var(--mds-ease-enter),
		display var(--mds-duration-medium) allow-discrete;
}

:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-toast:not(.mds-toast--static)[hidden] {
	opacity: 0;
	translate: 0 var(--mds-distance-reveal);
}

@starting-style {
	:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-toast:not(.mds-toast--static):not([hidden]) {
		opacity: 0;
		translate: 0 var(--mds-distance-reveal);
	}
}

/* ---------- level 2: a row of the repair list opens its place and closes it — md-motion.js (Motion mini)
   animates grid-template-rows of .mds-repair-list__row; here only the clip of the row while it moves.
   The total changes at once. ---------- */
:where([data-mds-motion="store"], [data-mds-motion="web"]) .mds-repair-list__row[data-mds-state="moving"] {
	overflow-y: clip;
}

/* ---------- level 3 «Как на apple.com» (showcase only, М3): blocks below the first screen without prices
   and photos rise by distance.reveal once while the page scrolls in; fully visible when their top has
   passed a fifth of the screen. CSS scroll timeline only (Safari 26+, Chrome 115+); elsewhere — static. ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		[data-mds-motion="web"] :is(.mds-review, .mds-quote, .mds-case:not(:has(img)), .mds-checklist, .mds-not-list, .mds-agree, .mds-callout, .mds-accordion, .mds-guarantee) {
			animation: mds-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 20vh;
		}
	}
}

@keyframes mds-reveal {
	from {
		opacity: 0;
		translate: 0 var(--mds-distance-reveal);
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ---------- «Уменьшить движение» (iPhone: Настройки → Универсальный доступ → Движение): md-tokens.css sets
   every --mds-duration-* to 0ms, so each change above happens at once; the scroll timeline is off by its
   own media query. Here — the same once more for the blocks of level 3, in case a page adds its own. ---------- */
@media (prefers-reduced-motion: reduce) {
	[data-mds-motion="web"] :is(.mds-review, .mds-quote, .mds-case, .mds-checklist, .mds-not-list, .mds-agree, .mds-callout, .mds-accordion, .mds-guarantee) {
		animation: none;
	}
}