/* ==========================================================================
   Скрытый текст «как в Telegram» — строчный формат «Spoiler text» в TinyMCE:
   <span class="text-spoiler">…</span>
   Пока текст скрыт, поверх него мерцает «пыль» (canvas из js/text-spoiler.js),
   курсор — «рука». После раскрытия это обычный текст: текстовый курсор, выделение.
   Вид в редакторе — css/text-spoiler-editor.css.
   ========================================================================== */

.text-spoiler {
	-webkit-text-fill-color: transparent;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 7px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	/* Пока скрипт не запустился (или без JS) — неподвижная россыпь точек цветом текста */
	background-image:
		radial-gradient(circle at 1px 1px, currentColor 0.6px, transparent 1.1px),
		radial-gradient(circle at 3px 4px, currentColor 0.5px, transparent 1px);
	background-image:
		radial-gradient(circle at 1px 1px, color-mix(in srgb, currentColor 70%, transparent) 0.6px, transparent 1.1px),
		radial-gradient(circle at 3px 4px, color-mix(in srgb, currentColor 70%, transparent) 0.5px, transparent 1px);
	background-size: 5px 5px, 7px 6px;
}
.text-spoiler * { -webkit-text-fill-color: transparent; }
.text-spoiler .text-spoiler { background-image: none; }

/* Оформление вложенных элементов (ссылки, выделения, подчёркивания) не просвечивает */
.text-spoiler:not(.is-revealed) * {
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	text-decoration-color: transparent !important;
}
.text-spoiler img,
.text-spoiler svg { opacity: 0; transition: opacity 0.25s ease-out; }

/* Частицы рисует скрипт — статичная россыпь больше не нужна */
.text-spoiler.is-live { background-image: none; }
.text-spoiler__dust {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
}

.text-spoiler:focus { outline: none; }
.text-spoiler:focus-visible { outline: 2px solid #53bd35; outline-offset: 2px; border-radius: 4px; }

/* Раскрытие: символы проявляются волной от точки клика (задержки ставит скрипт) */
.text-spoiler.is-opening,
.text-spoiler.is-revealed {
	cursor: auto;
	-webkit-user-select: auto;
	user-select: auto;
	background-image: none;
}
.text-spoiler.is-opening,
.text-spoiler.is-opening *,
.text-spoiler.is-revealed,
.text-spoiler.is-revealed * { -webkit-text-fill-color: currentColor; }
.text-spoiler__ch { opacity: 0; transition: opacity 0.18s ease-out; }
.text-spoiler.is-showing .text-spoiler__ch,
.text-spoiler.is-showing img,
.text-spoiler.is-showing svg,
.text-spoiler.is-revealed img,
.text-spoiler.is-revealed svg { opacity: 1; }
.text-spoiler.is-revealed:focus-visible { outline: none; }

@media print {
	.text-spoiler,
	.text-spoiler * { -webkit-text-fill-color: currentColor; background-image: none; }
	.text-spoiler img,
	.text-spoiler svg { opacity: 1; }
	.text-spoiler__dust { display: none; }
}