/**
 * DarCommerce — движение витрины.
 *
 * Появление товаров каскадом (как у WP Grid Builder), плавная замена
 * выдачи при фильтре и пагинации, скелетоны загрузки, полёт товара в
 * корзину, отклик кнопки и уведомление. Двигаются только opacity,
 * transform и filter: сетка не пересчитывается, соседние элементы стоят
 * на месте.
 *
 * Скрытое до появления состояние включает класс html.dc-js (ставится в
 * <head> до отрисовки), поэтому карточки не мигают «видно → скрыто →
 * анимация». Если скрипт не загрузился, страховочная анимация через
 * 2,5 секунды показывает всё как есть.
 */

:root {
	--dc-m-dur: 700ms;
	--dc-m-stagger: 70ms;
	--dc-m-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dc-m-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Появление --- */

html.dc-js [data-dc-motion]:not([data-dc-motion="none"]) :is(.dc-card, .dc-list-item, .dc-related__card, .dc-term-card, .dc-table tbody tr):not(.is-in):not(.dc-m-done) {
	opacity: 0;
}

/* Страховка только пока motion.js не пришёл: иначе карточка ниже экрана,
   показанная страховкой, мигнула бы при появлении. */
html.dc-js:not(.dc-motion-js) [data-dc-motion]:not([data-dc-motion="none"]) :is(.dc-card, .dc-list-item, .dc-related__card, .dc-term-card, .dc-table tbody tr):not(.is-in):not(.dc-m-done) {
	animation: dc-m-failsafe 0.01s linear 2.5s forwards;
}

.is-in[data-dc-m] {
	animation-duration: var(--dc-m-dur);
	animation-timing-function: var(--dc-m-ease);
	animation-delay: calc(var(--dc-m-i, 0) * var(--dc-m-stagger));
	animation-fill-mode: both;
}

.is-in[data-dc-m="rise"] {
	animation-name: dc-m-rise;
}

.is-in[data-dc-m="fade-up"] {
	animation-name: dc-m-fade-up;
}

.is-in[data-dc-m="fade"] {
	animation-name: dc-m-fade;
}

.is-in[data-dc-m="zoom"] {
	animation-name: dc-m-zoom;
}

.is-in[data-dc-m="blur"] {
	animation-name: dc-m-blur;
}

.is-in[data-dc-m="flip"] {
	transform-origin: 50% 0;
	animation-name: dc-m-flip;
}

.is-in[data-dc-m="slide"] {
	animation-name: dc-m-slide;
}

@keyframes dc-m-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 36px, 0) scale(0.97);
		filter: blur(6px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes dc-m-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dc-m-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes dc-m-zoom {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dc-m-blur {
	from {
		opacity: 0;
		filter: blur(14px);
		transform: scale(1.03);
	}

	to {
		opacity: 1;
		filter: none;
		transform: none;
	}
}

@keyframes dc-m-flip {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateX(-16deg) translate3d(0, 32px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dc-m-slide {
	from {
		opacity: 0;
		transform: translate3d(-32px, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dc-m-failsafe {
	to {
		opacity: 1;
	}
}

/* --- Замена выдачи: старые карточки гаснут, высота держится --- */

.dc-m-out {
	opacity: 0 !important;
	filter: blur(3px);
	transition: opacity 0.2s var(--dc-m-ease-out), filter 0.2s var(--dc-m-ease-out) !important;
}

.dc-listing.dc-motion-on.dc-loading {
	opacity: 1;
}

.dc-listing.dc-motion-on.dc-loading::after {
	display: none;
}

/* --- Скелетоны --- */

.dc-skel {
	--dc-skel-a: color-mix(in srgb, currentColor 6%, transparent);
	--dc-skel-b: color-mix(in srgb, currentColor 12%, transparent);

	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.9rem;
	border: 1px solid var(--dc-border, var(--dag-line-2, rgba(11, 26, 51, 0.08)));
	border-radius: var(--dc-radius, var(--dag-r, 12px));
	pointer-events: none;
}

.dc-skel__block,
.dc-skel__line {
	border-radius: 8px;
	background: linear-gradient(90deg, var(--dc-skel-a) 0%, var(--dc-skel-b) 45%, var(--dc-skel-a) 90%);
	background-size: 220% 100%;
	animation: dc-shimmer 1.3s linear infinite;
}

.dc-skel__block {
	aspect-ratio: 1 / 1;
}

.dc-skel__line {
	height: 12px;
}

.dc-skel__line--short {
	width: 55%;
}

.dc-skel__line--price {
	width: 35%;
	height: 16px;
	margin-top: auto;
}

.dc-skel__line--button {
	height: var(--dc-h, 40px);
}

.dc-skel--row {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.dc-skel--row .dc-skel__block {
	width: 72px;
	flex: none;
}

.dc-skel--row .dc-skel__line {
	flex: 1 1 auto;
}

@keyframes dc-shimmer {
	from {
		background-position: 120% 0;
	}

	to {
		background-position: -120% 0;
	}
}

/* --- Кнопка «в корзину»: занято → готово, ширина не прыгает --- */

.dc-is-busy,
.dc-is-done {
	position: relative;
	pointer-events: none;
}

.dc-is-busy {
	color: transparent !important;
}

.dc-is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-color: var(--dc-btn-spin, rgba(255, 255, 255, 0.9)) transparent var(--dc-btn-spin, rgba(255, 255, 255, 0.9)) transparent;
	border-radius: 50%;
	animation: dc-m-spin 0.7s linear infinite;
}

.dc-is-done .dc-done-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
}

.dc-is-done .dc-done-check path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: dc-m-draw 0.45s var(--dc-m-ease) 0.05s forwards;
}

@keyframes dc-m-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes dc-m-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* --- Полёт в корзину и отклик счётчика --- */

.dc-fly {
	position: fixed;
	z-index: 100000;
	margin: 0;
	border-radius: 14px;
	object-fit: cover;
	pointer-events: none;
	box-shadow: 0 18px 40px -12px rgba(11, 26, 51, 0.45);
	will-change: transform, opacity;
}

.dc-bump {
	animation: dc-m-bump 0.5s cubic-bezier(0.3, 1.6, 0.4, 1);
}

@keyframes dc-m-bump {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.22);
	}

	100% {
		transform: scale(1);
	}
}

/* --- Уведомление --- */

.dc-toast {
	--dc-toast-bg: var(--dag-ink-0, #fff);
	--dc-toast-tx: var(--dag-tx, #15181d);
	--dc-toast-line: var(--dag-line, #e2e5ea);
	--dc-toast-acc: var(--dag-acc, #1a63d8);

	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(420px, calc(100vw - 32px));
	padding: 10px 12px 10px 10px;
	border: 1px solid var(--dc-toast-line);
	border-radius: 16px;
	background: var(--dc-toast-bg);
	color: var(--dc-toast-tx);
	box-shadow: 0 24px 48px -20px rgba(11, 26, 51, 0.35);
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.35s var(--dc-m-ease), transform 0.35s var(--dc-m-ease);
	pointer-events: none;
}

.dc-toast.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.dc-toast__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dag-ink-2, #f6f7f9);
}

.dc-toast__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dc-toast__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dc-toast__title {
	font-size: 13px;
	font-weight: 700;
}

.dc-toast__name {
	overflow: hidden;
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0.7;
}

.dc-toast__go {
	flex: none;
	margin-left: auto;
	padding: 8px 12px;
	border: 1px solid var(--dc-toast-acc);
	border-radius: 10px;
	color: var(--dc-toast-acc);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dc-toast__go:hover {
	background: var(--dc-toast-acc);
	color: #fff;
}