/* ===========================================================================
   Homepage motion — jumla-child
   Подключать ПОСЛЕ homepage.css.

   Механика:
   1. Появление по таймеру (transition), а не по прокрутке. Привязка к
      скроллу давала «дымку»: блок висел полупрозрачным, пока его
      дотягивали до середины экрана.
   2. Состояние двустороннее. Класс .is-in ставится и снимается, поэтому
      блок уезжает обратно и при возврате играет снова.
      Появление длиннее, откат короче — так уход не мешает читать.
   3. Анимируются только opacity и transform.
   4. Всё под классом .tmk-anim на <html> — его ставит инлайн-скрипт в
      <head>, и только если есть IntersectionObserver. Нет JS — нет
      скрытых блоков.
   5. Гасится при prefers-reduced-motion, в режимах Pojo Accessibility
      и при печати.
   =========================================================================== */

.home.tmk-home-redesign {
	--tmk-r-y: 18px;             /* подъём при появлении */
	--tmk-r-x: 28px;             /* выезд вбок */
	--tmk-r-in: 0.5s;            /* появление */
	--tmk-r-out: 0.28s;          /* откат */
	--tmk-r-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: no-preference) {

	/* -----------------------------------------------------------------------
	   1. Появление блока
	   Transition в базовом состоянии — это откат. В .is-in — появление.
	   Поэтому туда и обратно идут с разной скоростью.
	   ----------------------------------------------------------------------- */

	.tmk-anim .tmk-r {
		opacity: 0;
		transform: translate3d(0, var(--tmk-r-y), 0);
		transition:
			opacity var(--tmk-r-out) var(--tmk-r-ease),
			transform var(--tmk-r-out) var(--tmk-r-ease);
	}

	.tmk-anim .tmk-r.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--tmk-r-in) var(--tmk-r-ease),
			transform var(--tmk-r-in) var(--tmk-r-ease);
	}

	/* Слой под анимацию готовится заранее — иначе первый кадр уходит на
	   его создание и появление начинается с рывка. Класс .is-near JS
	   ставит, когда блок подошёл к экрану, и снимает после показа:
	   держать will-change на всей странице нельзя, это память. */
	.tmk-anim .tmk-r.is-near:not(.is-in) {
		will-change: opacity, transform;
	}

	/* Боковые панели: двухколоночные секции собираются, а не всплывают
	   стопкой. Сетка «ТМК в цифрах» тоже едет целиком, без каскада. */
	.tmk-anim .tmk-r--left  { transform: translate3d(calc(var(--tmk-r-x) * -1), 0, 0); }
	.tmk-anim .tmk-r--right { transform: translate3d(var(--tmk-r-x), 0, 0); }

	/* У «Поступления» и «Студентам» обрезка своя, а у секции цифр нет:
	   без неё выезд сетки вправо растягивал бы страницу по горизонтали. */
	.tmk-anim .tmk-figures {
		overflow: hidden;
	}

	@supports (overflow: clip) {
		.tmk-anim .tmk-figures {
			overflow: clip;
		}
	}

	/* -----------------------------------------------------------------------
	   2. Hero
	   Заголовок не анимируется намеренно: он кандидат в LCP, а элемент с
	   opacity: 0 браузер не считает отрисованным.
	   ----------------------------------------------------------------------- */

	.tmk-anim .tmk-hero__photo-wrap,
	.tmk-anim .tmk-hero__logo {
		animation: tmk-hero-photo 0.8s var(--tmk-r-ease) both;
	}

	@keyframes tmk-hero-photo {
		from { opacity: 0; transform: translate3d(2%, 0, 0); }
		to   { opacity: 1; transform: none; }
	}

	/* -----------------------------------------------------------------------
	   3. Микровзаимодействия
	   ----------------------------------------------------------------------- */

	/* Зум картинки внутри карточки. Контейнер с overflow: hidden и
	   aspect-ratio уже есть в homepage.css, так что сдвига вёрстки нет. */
	.tmk-news-card__img img,
	.tmk-life-card__img img,
	.tmk-board-card__media img {
		transition: transform 0.5s var(--tmk-r-ease);
	}

	.tmk-news-card:hover .tmk-news-card__img img,
	.tmk-news-card:focus-visible .tmk-news-card__img img,
	.tmk-life-card:hover .tmk-life-card__img img,
	.tmk-life-card:focus-visible .tmk-life-card__img img,
	.tmk-board-card:hover .tmk-board-card__media img,
	.tmk-board-card:focus-visible .tmk-board-card__media img {
		transform: scale(1.045);
	}

	/* Карточка чуть приподнимается. box-shadow не трогаем — его анимация
	   это перерисовка большой области на каждом кадре. */
	.tmk-news-card,
	.tmk-life-card,
	.tmk-board-card,
	.tmk-extra__card {
		transition: transform 0.25s var(--tmk-r-ease);
	}

	.tmk-news-card:hover,
	.tmk-life-card:hover,
	.tmk-board-card:hover {
		transform: translate3d(0, -3px, 0);
	}

	/* Шапка при скролле садится плотнее. Класс ставит JS по сентинелу,
	   без обработчика scroll. */
	.tmk-site-header {
		transition: box-shadow 0.25s var(--tmk-r-ease);
	}

	.tmk-site-header.is-stuck {
		box-shadow: 0 6px 24px -12px rgba(16, 58, 62, 0.35);
	}
}

/* ---------------------------------------------------------------------------
   4. Заголовки секций, крестик и пунктир — всегда на месте.
   Их появление читалось как пустота внизу экрана.
   --------------------------------------------------------------------------- */

.tmk-anim .shead,
.tmk-anim .shead.tmk-r,
.tmk-anim .tmk-shead__title,
.tmk-anim .tmk-shead__link {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

/* ---------------------------------------------------------------------------
   5. content-visibility намеренно не используется.
   Экономия на отрисовке была, но лейаут секции считался ровно в тот
   момент, когда до неё долистали, — то есть поверх анимации. Рывок
   заметнее, чем выигрыш.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   6. Отключение
   --------------------------------------------------------------------------- */

/* Системная настройка «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
	.tmk-anim .tmk-r {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* Режимы плагина доступности: человек включил их, чтобы читать было проще,
   движение тут только мешает. */
body.pojo-a11y-high-contrast .tmk-r,
body.pojo-a11y-negative-contrast .tmk-r,
body.pojo-a11y-light-background .tmk-r,
body.pojo-a11y-grayscale .tmk-r {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

/* Печать: страница должна лечь на бумагу целиком */
@media print {
	.tmk-r {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}