/*
 * LK Scroll Reveal v2 — гармоничная поява фото при скролле.
 *
 * Архитектура «вуаль»: тема рендерит секцию полностью как обычно
 * (фото-подложка + затемнения + контент), а сверху кладётся
 * абсолютный слой-вуаль цвета усреднённого тона фотографии,
 * который растворяется при входе секции в экран. Ни фоны, ни
 * псевдоэлементы, ни порядок слоёв темы не трогаются вообще.
 *
 * Вся пластика в одном месте: одна кривая, две длительности.
 */
:root {
	/* ровная S-кривая: движение распределено по всей длительности */
	--lkr-ease: cubic-bezier(0.35, 0, 0.15, 1);
	--lkr-bg-dur: 2400ms;      /* растворение вуали секций */
	--lkr-img-dur: 1600ms;     /* обычные фото */
	--lkr-img-zoom: 1.06;      /* стартовый «вдох» фото */
	--lkr-veil-default: #0e0d0b; /* тон вуали, пока не вычислен тон фото */
}

/* ---------- вуаль фото-подложек ----------
   Якорь: только position:relative через :where() с нулевой
   специфичностью — любое правило темы сильнее. Layout не меняется. */
:where(.lkr-anchor) {
	position: relative;
}
.lkr-veil {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background-color: var(--lkr-veil-default);
	opacity: 1;
	transition:
		opacity var(--lkr-bg-dur) var(--lkr-ease),
		background-color 600ms ease;
}
.lkr-veil.lkr-out {
	opacity: 0;
}

/* ---------- обычные фото в контенте ----------
   Scale стартует >1 и садится в 1 — внутри обрезающих обёрток
   (карточки, слайды) никогда не появляются щели. После анимации
   классы снимаются, hover-эффекты темы не задеты. */
html.lkr-on img.lkr-photo {
	opacity: 0;
	transform: scale(var(--lkr-img-zoom));
	transition:
		opacity var(--lkr-img-dur) var(--lkr-ease),
		transform calc(var(--lkr-img-dur) * 1.35) var(--lkr-ease);
	transition-delay: var(--lkr-delay, 0ms);
}
html.lkr-on img.lkr-photo.lkr-in {
	opacity: 1;
	transform: none;
}

/* Страховка: при reduced-motion JS не запускается вовсе,
   но даже если что-то успело появиться — всё видно сразу */
@media (prefers-reduced-motion: reduce) {
	.lkr-veil {
		display: none;
	}
	html.lkr-on img.lkr-photo {
		opacity: 1;
		transform: none;
		transition: none;
	}
}