/* VERDE — базовый слой анимаций.
   Элементы помечаются атрибутом data-vd-anim="..." и активируются классом is-in. */

[data-vd-anim] {
	--vd-anim-dur: 1150ms;
	--vd-anim-delay: 0ms;
	will-change: opacity, transform;
	transition:
		opacity var(--vd-anim-dur) var(--vd-ease) var(--vd-anim-delay),
		transform var(--vd-anim-dur) var(--vd-ease) var(--vd-anim-delay),
		clip-path var(--vd-anim-dur) var(--vd-ease) var(--vd-anim-delay);
}

[data-vd-anim="fade"] {
	opacity: 0;
}
[data-vd-anim="up"] {
	opacity: 0;
	transform: translate3d(0, 34px, 0);
}
[data-vd-anim="down"] {
	opacity: 0;
	transform: translate3d(0, -28px, 0);
}
[data-vd-anim="left"] {
	opacity: 0;
	transform: translate3d(-40px, 0, 0);
}
[data-vd-anim="right"] {
	opacity: 0;
	transform: translate3d(40px, 0, 0);
}
[data-vd-anim="zoom"] {
	opacity: 0;
	transform: scale(1.06);
}
[data-vd-anim="mask"] {
	/* Полный клип (100%) даёт нулевую видимую область — IntersectionObserver
	 * никогда не считал элемент пересекающимся, и заголовки ниже первого экрана
	 * оставались скрытыми навсегда. 80% + opacity: наблюдатель срабатывает,
	 * глазу элемент до появления по-прежнему не виден. */
	opacity: 0;
	clip-path: inset(0 80% 0 0);
}
[data-vd-anim="line"] {
	transform: scaleX(0);
	transform-origin: left center;
}

[data-vd-anim].is-in {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}
[data-vd-anim="line"].is-in {
	transform: scaleX(1);
}

/* Последовательное появление дочерних элементов */
[data-vd-stagger] > * {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition:
		opacity 760ms var(--vd-ease),
		transform 760ms var(--vd-ease);
}
[data-vd-stagger].is-in > * {
	opacity: 1;
	transform: none;
}

/* Hover-увеличение карточек проектов */
.vd-zoom {
	overflow: hidden;
}
.vd-zoom img,
.vd-zoom .vd-zoom__media {
	transition: transform 1.1s var(--vd-ease);
}
@media (hover: hover) {
	.vd-zoom:hover img,
	.vd-zoom:hover .vd-zoom__media {
		transform: scale(1.06);
	}
}

/* Счётчики */
.vd-counter {
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	[data-vd-anim],
	[data-vd-stagger] > * {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.vd-zoom img,
	.vd-zoom .vd-zoom__media {
		transition: none !important;
	}
}

html.vd-anim-off [data-vd-anim],
html.vd-anim-off [data-vd-stagger] > * {
	transition: none !important;
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
}


/* VERDE 1.36.2: critical project and contact titles are always visible. */
[data-vd-static],
.verde-contact-banner h2,
.verde-project-contact h2,
.verde-project-related__meta h2,
.verde-project-card__title,
.verde-mportfolio__title {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
	animation: none !important;
	will-change: auto !important;
}