/* Слой «fx»: прежние появления сайта, доведённые до плавности витрины Номерики,
   плюс 3D у карточек, мягкий параллакс фото, текст по словам, парящие плашки, наклон за курсором.
   Отдельный от основного CSS, чтобы откатить разом: FX = False в tools/v05.py и пересборка.
   Классы ставит js/fx.js; без него и при prefers-reduced-motion страница как раньше.
   Ничего не привязано к CSS-шкале прокрутки: появления срабатывают один раз по времени,
   поэтому работают во всех браузерах и не застревают в полусостоянии. */

/* ---------- появления: длиннее путь, длиннее и мягче выход (как data-reveal у Номерики) ---------- */
html.fx.lite .fade,
html.fx.lite .rv {
	transform: translateY(48px) scale(.98);
	transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1);
}
/* карточки встают из лёгкого наклона, как плитки на столе */
html.fx.lite .fx-rise.fade,
html.fx.lite .fx-rise.rv {
	transform: perspective(1000px) translateY(48px) rotateX(16deg) scale(.98);
	transform-origin: 50% 100%;
}
html.fx.lite .fade.in,
html.fx.lite .rv.in { transform: none; }

/* ---------- фото: кадр внутри рамки идёт чуть медленнее страницы (скрипт задаёт --fx-cp от -1 до 1) ---------- */
html.fx .fx-depth { overflow: hidden; }
html.fx .fx-depth > img:first-child,
html.fx .fx-depth > picture:first-child > img {
	scale: 1.1;
	translate: 0 calc(var(--fx-cp, 0) * 4%);
}

/* ---------- вводный текст загорается по словам, пока абзац поднимается ---------- */
html.fx .fx-words .fx-w { opacity: .14; transition: opacity 350ms ease-out; }
html.fx .fx-words .fx-w.on { opacity: 1; }

/* ---------- парящие плашки: медленное покачивание ---------- */
@keyframes fx-bob {
	from { translate: 0 0; }
	to { translate: 0 -10px; }
}
html.fx .fx-float { animation: fx-bob 5.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: var(--fx-d, 0s); }

/* ---------- наклон за курсором: только с настоящей мышью ---------- */
@media (hover: hover) and (pointer: fine) {
	/* без своего transition: он перебил бы переход появления .fade на тех же карточках */
	html.fx .fx-tilt.is-tilting { will-change: transform; filter: drop-shadow(0 22px 28px rgba(10, 15, 13, .28)); }  /* по контуру фото, а не по пустому краю рамки */
	html.fx .fx-glare {
		position: absolute; inset: 0; z-index: 3; pointer-events: none;
		background: radial-gradient(circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(255, 244, 222, .2), rgba(255, 244, 222, 0) 55%);
		opacity: 0; transition: opacity 300ms var(--ease-out);
	}
	html.fx .fx-tilt.is-tilting > .fx-glare { opacity: 1; }
}

/* копия абзаца для читалки */
.fx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* настройку включили уже на открытой странице: всё останавливаем */
@media (prefers-reduced-motion: reduce) {
	html.fx .fx-float, html.fx .fx-depth img { animation: none !important; scale: none !important; translate: none !important; }
	html.fx .fx-tilt { transform: none !important; filter: none !important; }
	html.fx .fx-glare { display: none; }
}
@media (prefers-reduced-motion: reduce), print {
	html.fx .fx-words .fx-w { opacity: 1 !important; }
}