/* Звук: точкові ефекти, атмосфера і глобальний тумблер. */

/* --- Звукова іконка / слово --- */
.ddt-ix-sfx {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	vertical-align: baseline;
	cursor: pointer;
	/* Формат «звук на слові» не має класу .ddt-ix, тож потрібен подвійний запас. */
	color: var(--ddt-ix-accent, var(--accent-color, currentColor));
	border-bottom: 1px dotted currentColor;
	line-height: inherit;
	transition: opacity .2s ease;
}

.ddt-ix-sfx:hover,
.ddt-ix-sfx:focus-visible { opacity: .75; }

.ddt-ix-sfx .ddt-ix__icon {
	width: 1.05em;
	height: 1.05em;
}

.ddt-ix-sfx__ico { display: inline-flex; }
.ddt-ix-sfx__ico--stop { display: none; }
.ddt-ix-sfx__ico--stop .ddt-ix__icon { fill: currentColor; stroke: none; }

/* Поки звук грає — на місці іконки квадратик «стоп». */
.ddt-ix-sfx.is-playing .ddt-ix-sfx__ico--play { display: none; }
.ddt-ix-sfx.is-playing .ddt-ix-sfx__ico--stop { display: inline-flex; }

.ddt-ix-sfx.is-playing .ddt-ix-sfx__ico--play .ddt-ix__icon {
	animation: ddt-ix-sfx-beat .5s ease;
}

@keyframes ddt-ix-sfx-beat {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* Коли звук вимкнено — точкові ефекти виглядають як звичайний текст. */
html.ddt-ix-muted .ddt-ix-sfx {
	color: inherit;
	border-bottom-style: dashed;
	opacity: .75;
}

/* --- Атмосфера --- */
.ddt-ix-amb.is-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ddt-ix-amb__btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 9px 16px;
	border: 1px solid rgba(127, 127, 127, .35);
	border-radius: var(--btn-radius, 999px);
	background: var(--ddt-ix-bg, #fff);
	color: inherit;
	font: inherit;
	font-size: .9em;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.ddt-ix-amb__btn:hover,
.ddt-ix-amb__btn[aria-pressed="true"] {
	border-color: var(--ddt-ix-accent);
	color: var(--ddt-ix-accent);
}

.ddt-ix-amb__ico { display: grid; place-items: center; }
.ddt-ix-amb__ico .ddt-ix__icon { width: 1.1em; height: 1.1em; }

.ddt-ix-amb__wave {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}

.ddt-ix-amb__wave i {
	width: 3px;
	height: 4px;
	border-radius: 2px;
	background: currentColor;
	opacity: .45;
}

.ddt-ix-amb__btn[aria-pressed="true"] .ddt-ix-amb__wave i {
	opacity: 1;
	animation: ddt-ix-wave 1.1s ease-in-out infinite;
}

.ddt-ix-amb__btn[aria-pressed="true"] .ddt-ix-amb__wave i:nth-child(2) { animation-delay: .15s; }
.ddt-ix-amb__btn[aria-pressed="true"] .ddt-ix-amb__wave i:nth-child(3) { animation-delay: .3s; }
.ddt-ix-amb__btn[aria-pressed="true"] .ddt-ix-amb__wave i:nth-child(4) { animation-delay: .45s; }

@keyframes ddt-ix-wave {
	0%, 100% { height: 4px; }
	50% { height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ddt-ix-amb__btn[aria-pressed="true"] .ddt-ix-amb__wave i { animation: none; height: 9px; }
}

/* --- Плаваючий тумблер звуку --- */
/* Зона 55px і відступ від краю — як у кнопки «нагору» в темі, тож центри
   обох кнопок збігаються. Сама кнопка кругла. Тіні немає, кільця
   прогортання — теж. */
.ddt-ix-sound-toggle {
	position: fixed;
	z-index: 999;
	width: 55px;
	height: 55px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--accent-color, #ff3c3c);
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-out, visibility .3s ease-out;
}

/* Теми зазвичай розмальовують усі <button> — на ховері звідти приїжджала
   чужа рамка на всю зону 55px. Гасимо це явно. */
.ddt-ix-sound-toggle:hover,
.ddt-ix-sound-toggle:focus,
.ddt-ix-sound-toggle:focus-visible,
.ddt-ix-sound-toggle:active {
	background: transparent;
	border: 0;
	outline: 0;
	box-shadow: none;
	color: var(--accent-color, #ff3c3c);
}

.ddt-ix-sound-toggle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	border: 2px solid #55596e17;
	transition: border-color .2s ease;
}

/* Уся реакція на ховер — на самому кружку, а не поверх зони кнопки. */
.ddt-ix-sound-toggle:hover::before,
.ddt-ix-sound-toggle:focus-visible::before {
	border-color: var(--accent-color, #ff3c3c);
}

html[scheme="dark"] .ddt-ix-sound-toggle::before {
	background: var(--body-bg-color, #262b31);
	border-color: rgba(255, 255, 255, .16);
}

.ddt-ix-sound-toggle .ddt-ix__icon {
	position: relative;
	width: 22px;
	height: 22px;
}

.ddt-ix-sound-toggle.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Кнопка «нагору» стоїть у правому нижньому куті — стаємо над нею. */
.ddt-ix-sound-toggle.pos-bottom-right { right: 40px; bottom: 103px; }
.ddt-ix-sound-toggle.pos-bottom-left { left: 40px; bottom: 40px; }
.ddt-ix-sound-toggle.pos-top-right { right: 40px; top: 100px; }

/* Нижче 1024px тема ховає кнопку «нагору» — місце вивільняється. */
@media screen and (max-width: 1024px) {
	.ddt-ix-sound-toggle.pos-bottom-right { bottom: 40px; }
}

@media screen and (max-width: 600px) {
	.ddt-ix-sound-toggle.pos-bottom-right { right: 16px; bottom: 22px; }
	.ddt-ix-sound-toggle.pos-bottom-left { left: 16px; bottom: 22px; }
}

/* Двійник, який перелітає з блоку попередження на місце кнопки. */
.ddt-ix-sound-ghost {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none;
	z-index: 1000;
	transition: none !important;
}

/* --- Попередження про інтерактив --- */
.ddt-ix-consent {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border: 1px solid rgba(127, 127, 127, .28);
	border-radius: var(--ddt-ix-radius, 10px);
	background: var(--ddt-ix-bg, #fff);
}

/* Той самий вигляд, що й у плаваючої кнопки: саме звідси вона «вилітає». */
.ddt-ix-consent__ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #55596e17;
	color: var(--accent-color, #ff3c3c);
}

html[scheme="dark"] .ddt-ix-consent__ico {
	background: var(--body-bg-color, #262b31);
	border-color: rgba(255, 255, 255, .16);
}

.ddt-ix-consent__ico .ddt-ix__icon { width: 22px; height: 22px; }

.ddt-ix-consent__body {
	flex: 1 1 260px;
	min-width: 0;
}

.ddt-ix-consent__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.35;
	color: var(--headings-color, inherit);
}

.ddt-ix-consent__text {
	margin: .3em 0 0;
	font-size: .9em;
	line-height: 1.5;
	color: var(--ddt-ix-muted);
}

/* Перемикач автоматичного звуку. */
.ddt-ix-consent__switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	padding: 6px 8px;
	border: 0;
	border-radius: var(--btn-radius, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .9em;
	cursor: pointer;
	text-align: left;
}

.ddt-ix-consent__switch:hover,
.ddt-ix-consent__switch:focus,
.ddt-ix-consent__switch:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
}

.ddt-ix-consent__switch:focus-visible {
	outline: 2px solid var(--ddt-ix-accent);
	outline-offset: 2px;
}

.ddt-ix-consent__track {
	position: relative;
	width: 44px;
	height: 26px;
	flex: none;
	border-radius: 999px;
	background: rgba(127, 127, 127, .38);
	transition: background-color .25s ease;
}

.ddt-ix-consent__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	transition: transform .25s var(--ddt-ix-ease, ease);
}

.ddt-ix-consent__switch[aria-checked="true"] .ddt-ix-consent__track {
	background: var(--ddt-ix-accent);
}

.ddt-ix-consent__switch[aria-checked="true"] .ddt-ix-consent__knob {
	transform: translateX(18px);
}

.ddt-ix-consent__name { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.ddt-ix-consent__knob,
	.ddt-ix-consent__track,
	.ddt-ix-consent__ico { transition: none; }
}

@media (max-width: 600px) {
	.ddt-ix-consent__switch { width: 100%; }
}