/**
 * Les decors vectoriels des bandeaux.
 *
 * Cette feuille ne peint rien : les couleurs sont ecrites dans le dessin
 * lui-meme, parce qu'un SVG sans peinture n'est pas invisible mais noir, et
 * qu'un dessin ne doit pas dependre d'un fichier tiers pour etre un dessin.
 * Ce qui reste ici est le mouvement, qui n'a pas sa place dans un attribut.
 *
 * Elle est chargee des deux cotes : au front, ou le decor s'affiche, et dans
 * l'ecran de reglages, ou les vignettes sont le meme trace. Une feuille
 * absente d'un des deux cotes fait mentir l'apercu.
 *
 * Trois regles tiennent tout le reste :
 *
 * 1. Rien ne bouge en meme temps. Chaque element porte son retard `--eta-d` et
 *    sa duree `--eta-t`, tires dans la meme suite que ses coordonnees. Sans
 *    cela, cent-cinquante points clignotent ensemble et l'on ne voit plus un
 *    mouvement mais un defaut d'affichage.
 *
 * 2. Ce qui se deplace se deplace, ce qui s'allume s'allume. Une opacite qui
 *    monte et descend n'est pas un mouvement : c'est un clignotement, et c'est
 *    exactement ce qui donne l'air amateur a une animation de fond.
 *
 * 3. Toute duree et tout retard passent par `--eta-vitesse`, un facteur sans
 *    unite pose sur le SVG par PHP. Un reglage qui n'agirait que sur les durees
 *    laisserait les retards en place : les elements se rattraperaient les uns
 *    les autres, et la choregraphie se refermerait sur elle-meme.
 *
 * 4. `transform-box: fill-box` sur tout ce qui tourne ou grandit. Sans elle,
 *    l'origine d'une transformation SVG est le coin de la boite de dessin, et
 *    un point qui « grandit sur place » part en diagonale vers la droite.
 */

.eta-bandeau-svg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * Le decor est un calque compose a part.
 *
 * Sans cela, chaque image du mouvement redessine le bandeau, son voile et son
 * titre. La promotion coute de la memoire video : elle n'est demandee que
 * lorsque quelque chose bouge vraiment.
 */
.eta-bandeau-svg.is-anime {
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {

	/* ───────── Constellation ───────── */

	/*
	 * Le signal parcourt le lien, le trace reste dessous.
	 *
	 * Deux traces superposes : le lien, immobile, et par-dessus un pointille
	 * court qui court d'un bout a l'autre. Anime seul, le lien aurait disparu
	 * entre deux passages — on aurait vu clignoter un reseau au lieu d'un
	 * reseau parcouru. L'opacite s'ouvre et se referme aux extremites, sinon
	 * le signal apparait et disparait d'un coup au milieu de nulle part.
	 */
	.eta-bandeau-svg--constellation.is-anime .eta-d-signaux line {
		stroke-dasharray: 26 400;
		animation: eta-signal calc(var(--eta-t, 3s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	.eta-bandeau-svg--constellation.is-anime .eta-d-points circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-noeud calc(var(--eta-t, 4s) * var(--eta-vitesse, 1)) ease-in-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* Une derive lente de tout le champ : la profondeur vient de la. */
	.eta-bandeau-svg--constellation.is-anime .eta-d-traits,
	.eta-bandeau-svg--constellation.is-anime .eta-d-signaux,
	.eta-bandeau-svg--constellation.is-anime .eta-d-points {
		animation: eta-derive calc(34s * var(--eta-vitesse, 1)) ease-in-out infinite alternate;
	}

	.eta-bandeau-svg--constellation.is-anime .eta-d-points {
		animation-duration: calc(27s * var(--eta-vitesse, 1));
		animation-direction: alternate-reverse;
	}

	/* ───────── Maille ───────── */

	/*
	 * La houle traverse la grille d'arriere en avant : chaque rangee reprend
	 * le mouvement de la precedente avec un temps de retard, et l'amplitude
	 * croit avec la proximite — une houle s'aplatit a l'horizon.
	 */
	.eta-bandeau-svg--maille.is-anime .eta-d-rangee {
		animation: eta-houle calc(6.5s * var(--eta-vitesse, 1)) ease-in-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Circuit et puce ───────── */

	.eta-bandeau-svg--circuit.is-anime .eta-d-signaux path,
	.eta-bandeau-svg--puce.is-anime .eta-d-signaux path {
		stroke-dasharray: 34 1400;
		animation: eta-courant calc(var(--eta-t, 3.5s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/*
	 * La pastille s'allume au depart du courant : meme retard que le signal
	 * de sa piste. C'est ce qui fait lire les deux comme une seule chose.
	 */
	.eta-bandeau-svg--circuit.is-anime .eta-d-pads rect {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-pastille calc(var(--eta-t, 3.5s) * var(--eta-vitesse, 1)) ease-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	.eta-bandeau-svg--puce.is-anime .eta-d-halo-groupe {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-respire calc(5.5s * var(--eta-vitesse, 1)) ease-in-out infinite;
	}

	.eta-bandeau-svg--puce.is-anime .eta-d-puce {
		animation: eta-veille calc(5.5s * var(--eta-vitesse, 1)) ease-in-out infinite;
	}

	/* ───────── Ondes ───────── */

	/*
	 * Deux mouvements composes : la courbe glisse horizontalement et monte en
	 * meme temps, a des durees premieres entre elles. Le motif ne se repete
	 * donc pas a l'oeil, alors qu'un seul deplacement se reconnait au bout de
	 * deux passages.
	 */
	.eta-bandeau-svg--ondes.is-anime .eta-d-ondes path {
		animation:
			eta-onde-glisse calc(var(--eta-t, 18s) * var(--eta-vitesse, 1)) linear infinite,
			eta-onde-monte calc(var(--eta-t, 18s) * 0.37 * var(--eta-vitesse, 1)) ease-in-out infinite alternate;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Flux ───────── */

	/*
	 * La navette traverse la bande et repart de l'autre bord. Le trait et son
	 * point de tete sont dans le meme groupe : ils se deplacent ensemble, et
	 * ne peuvent pas se separer.
	 */
	.eta-bandeau-svg--flux.is-anime .eta-d-navette {
		animation: eta-navette calc(var(--eta-t, 10s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Orbites ───────── */

	/*
	 * Chaque anneau tourne autour du centre du systeme, a sa vitesse et dans
	 * son sens. L'origine est ecrite en unites de la boite de dessin : c'est
	 * le meme point que celui ou les ellipses ont ete tracees, et `view-box`
	 * est la seule reference ou les deux coincident.
	 */
	.eta-bandeau-svg--orbites.is-anime .eta-d-anneau {
		transform-box: view-box;
		transform-origin: 1404px 100px;
		animation: eta-orbite calc(var(--eta-t, 60s) * var(--eta-vitesse, 1)) linear infinite;
	}

	.eta-bandeau-svg--orbites.is-anime .eta-d-anneau[style*="--eta-sens:-1"] {
		animation-direction: reverse;
	}

	/* Le satellite s'allume en passant : il ne fait pas que tourner. */
	.eta-bandeau-svg--orbites.is-anime .eta-d-satellite {
		animation: eta-noeud calc(4.5s * var(--eta-vitesse, 1)) ease-in-out infinite;
	}

	/* ───────── Reseau de neurones ───────── */

	/*
	 * L'information traverse le reseau : le retard suit la couche, pas le
	 * hasard. Les noeuds s'allument couche par couche, dans le meme ordre.
	 */
	.eta-bandeau-svg--reseau.is-anime .eta-d-signaux line {
		stroke-dasharray: 30 500;
		animation: eta-signal calc(var(--eta-t, 2.8s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	.eta-bandeau-svg--reseau.is-anime .eta-d-points circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-noeud calc(var(--eta-t, 3.4s) * var(--eta-vitesse, 1)) ease-in-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Spectre ───────── */

	/*
	 * La barre grandit depuis le bas : `transform-origin: bottom` sur une
	 * boite de remplissage. Centree, elle s'allongerait des deux cotes et
	 * quitterait le sol — un spectre tient a son ancrage.
	 */
	.eta-bandeau-svg--spectre.is-anime .eta-d-spectre rect {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: eta-barre calc(var(--eta-t, 2.6s) * var(--eta-vitesse, 1)) ease-in-out infinite alternate;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Horizon ───────── */

	.eta-bandeau-svg--horizon.is-anime .eta-d-signaux line {
		stroke-dasharray: 120 3000;
		animation: eta-signal calc(var(--eta-t, 6.5s) * var(--eta-vitesse, 1)) linear infinite;
	}

	/* La graduation s'allume quand la lueur passe devant elle. */
	.eta-bandeau-svg--horizon.is-anime .eta-d-graduations line {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: eta-graduation calc(var(--eta-t, 6.5s) * var(--eta-vitesse, 1)) ease-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	.eta-bandeau-svg--horizon.is-anime .eta-d-halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-respire calc(7s * var(--eta-vitesse, 1)) ease-in-out infinite;
	}

	/* ───────── Trames ───────── */

	/*
	 * Le motif glisse d'exactement un pas, puis recommence : la couture tombe
	 * sur elle-meme et ne se voit pas. Toute autre distance ferait sauter le
	 * motif a chaque tour.
	 */
	.eta-bandeau-svg--trames.is-anime .eta-d-trames {
		animation: eta-trame calc(9s * var(--eta-vitesse, 1)) linear infinite;
	}

	/* ───────── Pluie ───────── */

	.eta-bandeau-svg--pluie.is-anime .eta-d-colonne {
		animation: eta-chute calc(var(--eta-t, 4s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Courbes de niveau ───────── */

	.eta-bandeau-svg--contours.is-anime .eta-d-contours path {
		animation:
			eta-onde-glisse calc(var(--eta-t, 14s) * var(--eta-vitesse, 1)) linear infinite,
			eta-onde-monte calc(var(--eta-t, 14s) * 0.43 * var(--eta-vitesse, 1)) ease-in-out infinite alternate;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Radar ───────── */

	/*
	 * Le faisceau tourne autour du meme point que les orbites : c'est la
	 * constante PHP, ecrite une fois, reprise ici.
	 */
	.eta-bandeau-svg--radar.is-anime .eta-d-balayage {
		transform-box: view-box;
		transform-origin: 1404px 100px;
		animation: eta-orbite calc(7s * var(--eta-vitesse, 1)) linear infinite;
	}

	.eta-bandeau-svg--radar.is-anime .eta-d-traits circle {
		animation: eta-echo calc(var(--eta-t, 7s) * var(--eta-vitesse, 1)) ease-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Matrice ───────── */

	/*
	 * Le point grossit, la colonne ne se dilate pas.
	 *
	 * Le retard est pose sur le groupe et l'animation sur chaque point : une
	 * propriete personnalisee s'herite, ce qui permet de grouper le rythme
	 * sans grouper le mouvement. Posee sur le groupe, la mise a l'echelle
	 * ecartait les points les uns des autres — une colonne qui se dilate, pas
	 * une onde qui passe.
	 */
	.eta-bandeau-svg--matrice.is-anime .eta-d-colonne circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-vague calc(3.6s * var(--eta-vitesse, 1)) ease-in-out infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}

	/* ───────── Poussiere ───────── */

	/*
	 * Chaque grain monte de sa propre hauteur, en sa propre duree, et
	 * s'eteint aux deux bouts de sa course : il entre et sort du champ sans
	 * qu'on voie ni son depart ni son arrivee.
	 */
	.eta-bandeau-svg--poussiere.is-anime .eta-d-poussiere circle {
		transform-box: fill-box;
		transform-origin: center;
		animation: eta-grain calc(var(--eta-t, 14s) * var(--eta-vitesse, 1)) linear infinite;
		animation-delay: calc(var(--eta-d, 0s) * var(--eta-vitesse, 1));
	}
}

/* ───────── Les mouvements ───────── */

@keyframes eta-signal {
	0%       { stroke-dashoffset: 420; stroke-opacity: 0; }
	12%      { stroke-opacity: .9; }
	70%      { stroke-opacity: .9; }
	82%, 100% { stroke-dashoffset: 0; stroke-opacity: 0; }
}

@keyframes eta-noeud {
	0%, 100% { opacity: .34; transform: scale(.82); }
	50%      { opacity: 1; transform: scale(1.18); }
}

@keyframes eta-derive {
	from { transform: translate3d(-14px, 6px, 0); }
	to   { transform: translate3d(14px, -6px, 0); }
}

@keyframes eta-houle {
	0%, 100% { transform: translateY(calc(var(--eta-y, 6px) * -1)); }
	50%      { transform: translateY(var(--eta-y, 6px)); }
}

@keyframes eta-courant {
	0%        { stroke-dashoffset: 1434; stroke-opacity: 0; }
	8%        { stroke-opacity: 1; }
	76%       { stroke-opacity: 1; }
	88%, 100% { stroke-dashoffset: 0; stroke-opacity: 0; }
}

@keyframes eta-pastille {
	0%, 70%  { opacity: .3; transform: scale(1); }
	78%      { opacity: 1; transform: scale(1.6); }
	100%     { opacity: .3; transform: scale(1); }
}

@keyframes eta-respire {
	0%, 100% { transform: scale(.94); opacity: .55; }
	50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes eta-veille {
	0%, 100% { stroke-opacity: .55; }
	50%      { stroke-opacity: 1; }
}

@keyframes eta-onde-glisse {
	from { transform: translateX(0); }
	to   { transform: translateX(-240px); }
}

@keyframes eta-onde-monte {
	from { transform: translateY(calc(var(--eta-y, 10px) * -1)); }
	to   { transform: translateY(var(--eta-y, 10px)); }
}

/*
 * La navette part hors cadre a gauche et sort hors cadre a droite : le trait
 * est trace en negatif de sa longueur, la course couvre donc toute la bande
 * plus sa propre longueur.
 */
@keyframes eta-navette {
	0%       { transform: translateX(0); opacity: 0; }
	6%       { opacity: 1; }
	88%      { opacity: 1; }
	100%     { transform: translateX(1560px); opacity: 0; }
}

@keyframes eta-orbite {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes eta-barre {
	from { transform: scaleY(.28); opacity: .55; }
	to   { transform: scaleY(1); opacity: 1; }
}

@keyframes eta-graduation {
	0%, 60%  { opacity: .25; transform: scaleY(.5); }
	72%      { opacity: 1; transform: scaleY(1); }
	100%     { opacity: .25; transform: scaleY(.5); }
}

/*
 * Un pas exactement : la trame revient sur elle-meme, et la boucle est
 * invisible. La valeur vient du dessin, qui l'écrit en propriété.
 */
@keyframes eta-trame {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--eta-pas, 34px)); }
}

/*
 * La chute se mesure en unites de dessin, pas en pourcentage.
 *
 * Un pourcentage de transformation SVG se rapporte a la boite de dessin
 * entiere et non a la colonne : la goutte partait de deux cent vingt unites
 * au-dessus pour finir a deux cent vingt en dessous, et n'etait dans le cadre
 * qu'un tiers du temps. On voyait une pluie qui s'arrete, ce qui ressemble a
 * une animation cassee.
 */
@keyframes eta-chute {
	0%   { transform: translateY(calc(var(--eta-y, 240px) * -1)); opacity: 0; }
	12%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { transform: translateY(var(--eta-y, 240px)); opacity: 0; }
}

@keyframes eta-echo {
	0%, 55%  { opacity: .3; }
	68%      { opacity: 1; }
	100%     { opacity: .3; }
}

@keyframes eta-vague {
	0%, 100% { transform: scale(1); opacity: .5; }
	50%      { transform: scale(1.45); opacity: 1; }
}

@keyframes eta-grain {
	0%       { transform: translateY(0) scale(.7); opacity: 0; }
	14%      { opacity: 1; }
	72%      { opacity: .85; }
	100%     { transform: translateY(var(--eta-y, -60px)) scale(1.15); opacity: 0; }
}