/* =========================================================
   Поведінка: паралакс для кадрів у рамці

   Розмітка:
     <div class="…" data-phm-parallax="14">      ← рамка з overflow:hidden
       <img data-phm-parallax-img …>             ← кадр із запасом по висоті
     </div>

   Запас (--phm-parallax-depth) — це те, наскільки зображення вище за
   рамку. Половина запасу виступає вгору, половина вниз, тож у спокої
   кадр стоїть точно посередині, а скрипт лише возить його в цих межах.
   Без JS усе лишається на місці — рамка виглядає як звичайне фото.
   ========================================================= */

[data-phm-parallax] {
	position: relative;
	overflow: hidden;
}

[data-phm-parallax] [data-phm-parallax-img] {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(100% + var(--phm-parallax-depth, 12%));
	top: calc(var(--phm-parallax-depth, 12%) / -2);
	object-fit: cover;
	/* Аспект задає рамка — знімаємо той, що міг лишитись від компонента. */
	aspect-ratio: auto;
}

/* Підказка браузеру — тільки коли ефект справді працює. */
[data-phm-parallax].is-parallax [data-phm-parallax-img] {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	[data-phm-parallax] [data-phm-parallax-img] {
		height: 100%;
		top: 0;
		transform: none !important;
		will-change: auto;
	}
}