/* Start:/include/motion/motion.css?17915624937941*/
/* Общие анимации страниц aspro.imagemark.ru · v1.1 · 09.10.2026
   Исходник: Страницы/22_Общие_анимации/ (README там же). Тайминги — по правкам дизайнера на dev /seo/ 08.10.2026.
   Подключение: в <head> (Asset::addCss), вместе с motion.js. Включается атрибутом data-motion на обёртке страницы:
   <div class="seoPage" data-motion>. Без JS всё видно сразу: прячет только motion.js и только то, что ниже первого экрана.
   Тайминги — переменные ниже; страница может переопределить любую у своей обёртки. */
:root{
 --m-ease:cubic-bezier(0.23,1,0.32,1);      /* основная кривая: быстрый старт, мягкая остановка */
 --m-ease-wave:cubic-bezier(0.4,0,0.2,1);   /* «волна» тегов и табов (Material ease-in-out) */
 --m-hero-dur:1.2s;--m-hero-shift:16rem;--m-hero-step:160ms;
 --m-reveal-dur:1s;--m-reveal-shift:40rem;
 --m-wave-dur:.8s;--m-wave-step:.15s;       /* теги, кнопки-табы */
 --m-facts-dur:.8s;--m-facts-step:.5s;      /* фактоиды (крупные цифры) по очереди */
 --m-tab-dur:.75s;--m-tab-shift:40rem;      /* смена карточки по клику на таб */
 --m-press:.97;--m-press-dur:.16s;
 --m-art-dur:1.65s;--m-art-delay:.25s
}
@keyframes mIn{from{opacity:0;transform:translateY(var(--m-hero-shift))}}
@keyframes mFade{from{opacity:0}}
@keyframes mArtIn{from{opacity:0;translate:0 40rem;scale:.94}}

/* 1. Первый экран при загрузке: крошки, заголовок, текст, кнопка поднимаются по очереди.
   Сдвиг шаблона (transition: padding у .firstSection) выключен, иначе заголовок едет дважды.
   data-motion="own-hero" — у страницы свой первый экран (главная: motion_head.html), здесь он не анимируется. */
[data-motion] .firstSection{transition:none}
/* v1.1, 09.10.2026: у .firstSection в шаблоне height:100%. Пока герой лежал прямо в main, это ничего не значило;
   внутри обёртки data-motion он растягивался на высоту всей страницы, футер вставал поверх секций */
[data-motion]>.firstSection{height:auto}
[data-motion]:not([data-motion~="own-hero"]) .firstSection .breadcrumbs,[data-motion]:not([data-motion~="own-hero"]) .firstSection__title,[data-motion]:not([data-motion~="own-hero"]) .firstSection__text,
[data-motion]:not([data-motion~="own-hero"]) .firstSection .green_link,[data-motion] [data-motion-hero]{animation:mIn var(--m-hero-dur) var(--m-ease) backwards}
[data-motion]:not([data-motion~="own-hero"]) .firstSection__text{animation-delay:var(--m-hero-step)}
[data-motion]:not([data-motion~="own-hero"]) .firstSection .green_link{animation-delay:calc(var(--m-hero-step) * 2)}

/* 2. Секции ниже первого экрана проявляются при прокрутке, один раз. Секция с подложкой (._grey) едет целиком,
   у остальных — только .container, фон стоит. Класс _m-anim на обёртке и data-m-reveal ставит motion.js. */
[data-motion]._m-anim [data-m-reveal]{transition:opacity var(--m-reveal-dur) var(--m-ease),transform var(--m-reveal-dur) var(--m-ease)}
[data-motion]._m-anim [data-m-reveal]:not(._in){opacity:0;transform:translateY(var(--m-reveal-shift))}

/* 3. Пункты внутри секции проявляются по очереди, когда секция вошла в экран.
   data-motion-items (или ="wave") — теги и кнопки-табы, волна; data-motion-items="facts" — фактоиды.
   Номер пункта (--m-i) ставит motion.js. Кнопки табов (.tabsBtns__wrapper) — волной без разметки. */
[data-motion]._m-anim [data-m-reveal]:not(._in) [data-motion-items]>*{opacity:0}
[data-motion]._m-anim [data-m-reveal]._in [data-motion-items]>*{animation:mFade var(--m-wave-dur) var(--m-ease-wave) both;animation-delay:calc(var(--m-i,0) * var(--m-wave-step))}
[data-motion]._m-anim [data-m-reveal]._in [data-motion-items="facts"]>*{animation-duration:var(--m-facts-dur);animation-timing-function:var(--m-ease);animation-delay:calc(var(--m-i,0) * var(--m-facts-step))}

/* 4. Табы портфолио: новая карточка проявляется и поднимается */
[data-motion] .tabs__item{transition:opacity var(--m-tab-dur) var(--m-ease),transform var(--m-tab-dur) var(--m-ease)}
@starting-style{[data-motion] .tabs__item{opacity:0;transform:translateY(var(--m-tab-shift))}}

/* 5. Нажатие кнопок и табов — лёгкое сжатие. data-motion-press — для других кнопок страницы */
[data-motion] .tabsBtns button{transition:background-color .2s ease,color .2s ease,transform var(--m-press-dur) var(--m-ease)}
[data-motion] a.green_link{transition:background-color .2s ease-in-out,transform var(--m-press-dur) var(--m-ease)}
[data-motion] [data-motion-press]{transition:color .2s ease,background-color .2s ease,box-shadow .2s ease,transform var(--m-press-dur) var(--m-ease)}
[data-motion] .tabsBtns button:active,[data-motion] a.green_link:active,[data-motion] [data-motion-press]:active{transform:scale(var(--m-press))}

/* 6. FAQ на details/summary раскрывается по высоте там, где браузер умеет, в остальных — сразу */
[data-motion]{interpolate-size:allow-keywords}
[data-motion] details.accordionItem::details-content{height:0;overflow:clip;transition:height .25s var(--m-ease),content-visibility .25s allow-discrete}
[data-motion] details.accordionItem[open]::details-content{height:auto}

/* 7. Картинка первого экрана по слоям: обёртка data-motion-art, предмет — data-depth="16" (сдвиг за мышью, px),
   внутри него data-motion-float — проявляется. Раскладка предметов и их парение — в стилях страницы. */
[data-motion-art]._wait img{opacity:0}
[data-motion-art]._go [data-motion-float]{animation:mArtIn var(--m-art-dur) var(--m-ease) var(--m-art-delay) backwards}
[data-motion-art]._paused,[data-motion-art]._paused *{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
 [data-motion]:not([data-motion~="own-hero"]) .firstSection .breadcrumbs,[data-motion]:not([data-motion~="own-hero"]) .firstSection__title,[data-motion]:not([data-motion~="own-hero"]) .firstSection__text,
 [data-motion]:not([data-motion~="own-hero"]) .firstSection .green_link,[data-motion] [data-motion-hero]{animation:mFade .3s ease backwards}
 [data-motion]._m-anim [data-m-reveal]{transition:opacity .3s ease}
 [data-motion]._m-anim [data-m-reveal]:not(._in){transform:none}
 [data-motion]._m-anim [data-m-reveal]._in [data-motion-items]>*,
 [data-motion]._m-anim [data-m-reveal]._in [data-motion-items="facts"]>*{animation:mFade .3s ease both;animation-delay:0s}
 [data-motion] .tabs__item{transition:opacity .2s ease}
 @starting-style{[data-motion] .tabs__item{transform:none}}
 [data-motion] .tabsBtns button:active,[data-motion] a.green_link:active,[data-motion] [data-motion-press]:active{transform:none}
 [data-motion] details.accordionItem::details-content{transition:none}
 [data-motion-art]._go [data-motion-float]{animation:mFade .4s ease backwards}
}
@media print{
 [data-motion]._m-anim [data-m-reveal]:not(._in),[data-motion]._m-anim [data-m-reveal]:not(._in) [data-motion-items]>*{opacity:1;transform:none}
}

/* End */


/* Start:/local/templates/aspro/assets/css/components/ksu/list.css?17848927343435*/
.ksuList {
	--column-count: 3;
	--list-gap: 80rem 40rem;
	/* ---- */
	--item-gap: 30rem;
	--item-img-height: 300rem;
	--item-img-padding: 20rem 30rem 30rem;

	--item-author-mb: 10rem;
	--item-author-img-size: 36rem;
	--item-author-gap: 10rem;
	--item-author-name-fz: 16rem;

	--item-name-fz: 20rem;

	--item-sticker-padding: 2rem 7rem;
	--item-sticker-fz: 12rem;
}

@media (max-width: 1200px) {
	.ksuList {
		--column-count: 2;
		--list-gap: 60rem 40rem;
		/* ---- */
	}
}

@media (max-width: 1024px) {
	.ksuList {
		--list-gap: 50rem 40rem;
		/* ---- */
		--item-img-height: 260rem;

		--item-gap: 20rem;
		--item-name-fz: 18rem;
	}
}

@media (max-width: 768px) {
	.ksuList {
		--list-gap: 40rem 30rem;
		/* ---- */
		--item-img-height: 220rem;
		--item-img-padding: 15rem 20rem 20rem;

		--item-gap: 15rem;
		--item-author-mb: 5rem;
		--item-author-img-size: 32rem;
		--item-author-name-fz: 14rem;
		--item-author-gap: 7rem;

		--item-name-fz: 16rem;
	}
}

@media (max-width: 560px) {
	.ksuList {
		--column-count: 1;
		--list-gap: 30rem;
		/* ---- */
		--item-img-height: 200rem;
		--item-img-padding: 10rem 15rem 15rem;

	}
}

.ksuList {
	display: grid;
	grid-template-columns: repeat(var(--column-count), 1fr);
	gap: var(--list-gap);

	--light: var(--on-toggle);
	--dark: var(--off-toggle);
}

.ksuItem {
	display: flex;
	flex-direction: column;
	gap: var(--item-gap);
}

.ksuItem__img {
	display: flex;
	border-radius: var(--border-radius);
	overflow: hidden;
	width: 100%;
	height: var(--item-img-height);
	position: relative;
}

.ksuItem__img::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(360deg, rgba(23, 23, 23, 0) 66.63%, #171717 100%);
	z-index: 1;
}

.ksuItem__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
	z-index: 0;
}

.ksuItem__category {
	--light: var(--off-toggle);
	--dark: var(--on-toggle);
	inset: var(--item-img-padding);
	bottom: auto;
	right: auto;
	width: fit-content;
	position: absolute;
	font-weight: 700;
	font-size: 12rem;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	--opacity-lvl: 0.8;
	color: var(--opacity-color);
	z-index: 2;
}

.ksuItem__sticker {
	position: absolute;
	inset: var(--item-img-padding);
	top: auto;
	right: auto;
	width: fit-content;
	font-weight: 700;
	font-size: var(--item-sticker-fz);
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: var(--item-sticker-padding);
	border-radius: 5rem;

	display: flex;
	align-items: center;
	gap: 5rem;
	z-index: 2;

	--icon-width: 12rem;
	--icon-height: 13rem;
}

.ksuItem__sticker._vc {
	color: var(--white-color);
	background-color: #E65C77;
}

.ksuItem__sticker._vc .icon::before {
	background-color: var(--white-color);
	transform: translateY(-2rem);
}

.ksuItem__author {
	margin-bottom: var(--item-author-mb);
}

.ksuItem__author .account {
	--account-img-size: var(--item-author-img-size);
	--accuont-gap: var(--item-author-gap);
	--accuont-name-fz: var(--item-author-name-fz);

	flex-direction: row;
	align-items: center;
}

.ksuItem .account__name {
	color: var(--inner-color);
}


.ksuItem__name {
	font-weight: 600;
	font-size: var(--item-name-fz);
	line-height: 1.4;
	color: var(--inner-color);
	transition: color 0.2s ease;
}

@media (min-width: 1025px) {
	.ksuItem:hover .ksuItem__img img {
		transform: scale(1.1);
	}

	.ksuItem:hover .ksuItem__name {
		color: var(--main-color);
	}
}
/* End */


/* Start:/local/templates/aspro/assets/css/ui/account.css?17848927341520*/
.account {
	--account-img-size: 72rem;
	--accuont-gap: 10rem;

	--accuont-name-fz: 22rem;
	--accuont-job-fz: 16rem;
}

@media (max-width: 1200px) {
	.account {
		--account-img-size: 72rem;
		--accuont-gap: 15rem;

		--accuont-name-fz: 20rem;
		--accuont-job-fz: 16rem;
	}
}

@media (max-width: 1024px) {
	.account {
		--account-img-size: 64rem;
		--accuont-gap: 15rem;

		--accuont-name-fz: 20rem;
		--accuont-job-fz: 16rem;
	}
}

@media (max-width: 768px) {
	.account {
		--account-img-size: 48rem;
		--accuont-gap: 15rem;

		--accuont-name-fz: 16rem;
		--accuont-job-fz: 16rem;
	}
}

@media (max-width: 560px) {
	.account {
		--account-img-size: 42rem;
		--accuont-gap: 5rem;

		--accuont-name-fz: 14rem;
		--accuont-job-fz: 14rem;
	}
}

.account {
	display: flex;
	flex-direction: column;
	gap: var(--accuont-gap);
	align-items: start;
}

.account__img {
	width: var(--account-img-size);
	height: var(--account-img-size);
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
}

.account__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.account__wrapper {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.account__name {
	font-size: var(--accuont-name-fz);
	font-weight: 700;
	line-height: 150%;
}

.account__job {
	font-size: var(--accuont-job-fz);
	font-weight: 400;
	line-height: 140%;
	opacity: 0.6;
}


@media (max-width: 1200px) {
	.account {
		flex-direction: row;
		align-items: center;
	}
}

@media (max-width: 560px) {
	.account {
		flex-direction: column;
		align-items: start;
	}
}
/* End */
/* /include/motion/motion.css?17915624937941 */
/* /local/templates/aspro/assets/css/components/ksu/list.css?17848927343435 */
/* /local/templates/aspro/assets/css/ui/account.css?17848927341520 */