/**
 * ET Matrix — rendu public.
 *
 * Le canvas ne porte que la pluie. Le texte reste du texte : il est peint par
 * le navigateur, pas par le contexte 2D, donc il se sélectionne, s'indexe et
 * se lit à la synthèse vocale.
 */

.etm {
	position: relative;
	display: flex;
	align-items: center;
	width: var(--etm-width, 100%);
	min-height: var(--etm-height, 360px);
	padding: var(--etm-padding, 2rem);
	border-radius: var(--etm-radius, 12px);
	background: var(--etm-bg, #000);
	overflow: hidden;
	box-sizing: border-box;
}

.etm-align-left {
	justify-content: flex-start;
	text-align: left;
}

.etm-align-center {
	justify-content: center;
	text-align: center;
}

.etm-align-right {
	justify-content: flex-end;
	text-align: right;
}

.etm-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.etm-text {
	position: relative;
	z-index: 1;
	max-width: 100%;
	margin: 0;
	font-family: var(--etm-font, inherit);
	font-size: var(--etm-size, clamp(2rem, 7vw, 5rem));
	font-weight: var(--etm-weight, 700);
	letter-spacing: var(--etm-spacing, 0);
	line-height: 1.15;
	color: var(--etm-color, #ff8800);
	text-shadow: 0 0 var(--etm-glow, 8px) var(--etm-glow-tint, #ffd9a8);

	/* Le texte du shortcode peut contenir des retours à la ligne : ils sont
	   significatifs, y compris quand le script ne s'exécute pas. */
	white-space: pre-line;

	/*
	 * Aucun mot n'est coupé.
	 *
	 * `word-break` est une propriété héritée, et le thème pose
	 * `word-break: break-word` sur le contenu des pages pour qu'une URL ne
	 * fasse pas déborder la mise en page. Héritée ici, cette valeur autorise
	 * une coupure au milieu d'un mot : « appliquée » devenait
	 * « appli / quée ». On la neutralise.
	 *
	 * `overflow-wrap: break-word` reste, en filet : il ne coupe un mot que
	 * s'il ne tient pas à lui seul sur une ligne.
	 */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

/*
 * Modes lettre à lettre. Chaque caractère étant un bloc en ligne, la
 * ligne pourrait se couper entre deux caractères quelconques. Les
 * caractères d'un même mot sont donc regroupés ici : seules les espaces
 * restent des points de coupure.
 */
.etm-word {
	display: inline-block;
	white-space: nowrap;
}

.etm-line {
	display: block;
	white-space: pre-wrap;
}

.etm-ch {
	display: inline-block;
	white-space: pre;
	will-change: transform, opacity;
}

/* --- Glyphe : la pluie n'existe qu'à l'intérieur des lettres --- */

.etm-mode-glyph .etm-canvas {
	z-index: 2;
}

.etm-mode-glyph .etm-text {
	color: transparent;
	text-shadow: none;
}

/*
 * Sans script, un texte transparent serait un bloc vide. La couleur n'est
 * retirée qu'une fois le rendu pris en charge.
 */
.etm-mode-glyph:not(.is-ready) .etm-text {
	color: var(--etm-color, #ff8800);
}

/* --- Terminal : curseur de saisie --- */

.etm-mode-terminal .etm-text {
	white-space: pre-wrap;
}

.etm-cursor {
	display: inline-block;
	width: 0.6em;
	margin-left: 0.08em;
	background: currentColor;
	color: transparent;
	animation: etm-blink 1.05s steps(2, start) infinite;
}

@keyframes etm-blink {
	50% {
		opacity: 0;
	}
}

/* --- Cascade : chaque lettre tombe à sa place --- */

.etm-mode-cascade.is-ready .etm-ch {
	opacity: 0;
	transform: translateY(-0.9em);
	transition: opacity 0.42s ease-out, transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.etm-mode-cascade.is-ready .etm-ch.is-landed {
	opacity: 1;
	transform: none;
}

/* --- Glitch : décalage chromatique par pseudo-éléments --- */

.etm-mode-glitch .etm-text {
	position: relative;
}

.etm-mode-glitch.is-ready .etm-text::before,
.etm-mode-glitch.is-ready .etm-text::after {
	content: attr(data-etm-text);
	position: absolute;
	inset: 0;
	white-space: pre-line;
	pointer-events: none;
	opacity: var(--etm-glitch, 0);
}

.etm-mode-glitch.is-ready .etm-text::before {
	color: #ff4d6d;
	text-shadow: none;
	transform: translate(var(--etm-gx, 0), var(--etm-gy, 0));
	mix-blend-mode: screen;
}

.etm-mode-glitch.is-ready .etm-text::after {
	color: #4dd2ff;
	text-shadow: none;
	transform: translate(calc(var(--etm-gx, 0) * -1), calc(var(--etm-gy, 0) * -1));
	mix-blend-mode: screen;
}

/* --- Mouvement réduit --- */

/*
 * Le réglage système l'emporte : la pluie s'arrête sur une image fixe, les
 * lettres n'entrent plus en scène, le curseur cesse de battre. Le bloc reste
 * lisible, ce qui est tout ce qu'on lui demande.
 */
@media ( prefers-reduced-motion: reduce ) {

	.etm-cursor {
		animation: none;
	}

	.etm-mode-cascade.is-ready .etm-ch {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.etm-mode-glitch.is-ready .etm-text::before,
	.etm-mode-glitch.is-ready .etm-text::after {
		display: none;
	}
}