/*
Survol des liens du menu plein écran (#modal-1) : chaque lettre déroule.

Le découpage en lettres est fait par assets/js/menu-letters.js. Sans lui, le
menu reste un menu normal — ces règles ne s'appliquent alors à rien.

Chaque lettre est une fenêtre qui montre deux exemplaires empilés du même
caractère. Au survol la pile monte d'exactement une hauteur de fenêtre : la
lettre du haut sort, sa copie prend sa place. Un délai croissant par lettre
donne la cascade.
*/

#modal-1 .menu-roll {
	/* La fenêtre coupe : elle doit laisser passer accents et jambages. */
	--roll-height: 1.3em;
	--roll-step: 28ms;

	display: inline-flex;
	flex-wrap: wrap;
	vertical-align: bottom;
}

#modal-1 .menu-roll__letter {
	display: inline-block;
	overflow: hidden;
	height: var(--roll-height);
}

#modal-1 .menu-roll__faces {
	display: block;
	transition: translate 0.4s cubic-bezier(0.6, 0, 0.2, 1);
	transition-delay: calc(var(--letter-index) * var(--roll-step));
}

#modal-1 .menu-roll__face {
	display: block;
	height: var(--roll-height);
	line-height: var(--roll-height);
}

#modal-1 a:hover .menu-roll__faces,
#modal-1 a:focus-visible .menu-roll__faces {
	translate: 0 calc(var(--roll-height) * -1);
}

@media (prefers-reduced-motion: reduce) {
	#modal-1 .menu-roll__faces {
		transition: none;
	}
}