/*
 * DDT Інтерактив — спільна основа.
 * Кольори беремо зі змінних теми Newsfy: тоді темна тема (html[scheme="dark"])
 * працює без жодного окремого правила.
 */

.ddt-ix {
	--ddt-ix-accent: var(--accent-color, #d92c2c);
	--ddt-ix-fg: var(--body-color, #23282d);
	--ddt-ix-bg: var(--card-bg, #ffffff);
	--ddt-ix-muted: var(--second-color, #6d7378);
	--ddt-ix-radius: var(--soft-radius, 10px);
	--ddt-ix-shadow: var(--shadow-soft, 0 6px 24px rgba(0, 0, 0, .14));
	--ddt-ix-ease: cubic-bezier(.2, .6, .2, 1);

	color: var(--ddt-ix-fg);
	margin-block: 1.8em;
}

.ddt-ix *,
.ddt-ix *::before,
.ddt-ix *::after {
	box-sizing: border-box;
}

.ddt-ix figure,
figure.ddt-ix {
	margin: 0;
}

.ddt-ix__caption {
	margin-top: .6em;
	font-size: .85em;
	line-height: 1.5;
	color: var(--ddt-ix-muted);
	text-align: center;
}

.ddt-ix__icon {
	width: 1em;
	height: 1em;
	flex: none;
	display: block;
}

/* Запасне визначення, якщо тема раптом не оголосила клас. */
.ddt-ix .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Спільна «сцена» з фіксованим співвідношенням сторін.
   Задає розміри ще до завантаження JS — картинка не стрибає. */
.ddt-ix-anim__stage,
.ddt-ix-cmp__stage,
.ddt-ix-hs__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--ddt-ix-radius);
	aspect-ratio: var(--ddt-ix-ar, 16 / 9);
	background: rgba(127, 127, 127, .12);
}

.ddt-ix-anim__stage > img,
.ddt-ix-anim__stage > video,
.ddt-ix-cmp__stage img,
.ddt-ix-hs__stage > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* --------------------------------------------------------------
 * Поява при скролі (reveal) — надбудова над будь-яким блоком.
 * Початковий стан вмикається лише коли ядро справді працює.
 * ------------------------------------------------------------ */

html.ddt-ix-js [data-reveal] {
	opacity: 0;
	transition:
		opacity .7s cubic-bezier(.2, .6, .2, 1),
		transform .7s cubic-bezier(.2, .6, .2, 1),
		filter .7s cubic-bezier(.2, .6, .2, 1),
		clip-path .8s cubic-bezier(.2, .6, .2, 1);
	transition-delay: var(--ddt-ix-delay, 0ms);
	will-change: opacity, transform;
}

html.ddt-ix-js [data-reveal][data-reveal="up"] { transform: translateY(28px); }
html.ddt-ix-js [data-reveal][data-reveal="down"] { transform: translateY(-28px); }
html.ddt-ix-js [data-reveal][data-reveal="left"] { transform: translateX(32px); }
html.ddt-ix-js [data-reveal][data-reveal="right"] { transform: translateX(-32px); }
html.ddt-ix-js [data-reveal][data-reveal="scale"] { transform: scale(.94); }
html.ddt-ix-js [data-reveal][data-reveal="blur"] { filter: blur(8px); }
html.ddt-ix-js [data-reveal][data-reveal="mask"] {
	opacity: 1;
	clip-path: inset(0 0 100% 0);
}

html.ddt-ix-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	html.ddt-ix-js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}