/**
 * 08 - Mouvement
 *
 * Le mouvement est motive : il hierarchise l arrivee des sections et donne
 * un retour tactile aux commandes. Rien ne boucle, rien ne detourne le
 * defilement, et seules transform et opacity sont animees afin de rester
 * a soixante images par seconde.
 *
 * Le masquage initial est conditionne a la classe otb-js posee par le head.
 * Sans JavaScript, ou pour un robot d indexation, tout le contenu est
 * visible immediatement.
 */

.otb-js .otb-reveal {
	opacity: 0;
	transform: translateY(22px);
	will-change: opacity, transform;
	transition:
		opacity var(--otb-lent) var(--otb-courbe),
		transform var(--otb-lent) var(--otb-courbe);
}

.otb-js .otb-reveal.est-visible {
	opacity: 1;
	transform: none;
}

/* Arrivee en cascade a l interieur d un meme groupe. Le decalage reste
   court pour ne jamais donner l impression que la page rame. */
.otb-js .otb-reveal[data-delai="1"] { transition-delay: 70ms; }
.otb-js .otb-reveal[data-delai="2"] { transition-delay: 140ms; }
.otb-js .otb-reveal[data-delai="3"] { transition-delay: 210ms; }
.otb-js .otb-reveal[data-delai="4"] { transition-delay: 280ms; }
.otb-js .otb-reveal[data-delai="5"] { transition-delay: 350ms; }

/* Le titre du hero monte depuis le bas, masque par un cadre.
   Deux precautions importantes :
   1. l animation est une animation CSS avec le mode both, et non une
      transition declenchee par une classe. Elle joue donc toujours, meme
      si le JavaScript echoue, et le titre finit toujours visible ;
   2. le cadre qui masque recoit une reserve basse, sinon les jambages
      des lettres q, y, p et g sont rognes par overflow hidden a cette
      interligne tres courte. La reserve est reprise par une marge
      negative pour ne pas ecarter les deux lignes.
 */
.otb-hero__titre .otb-ligne {
	display: block;
	overflow: hidden;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.otb-hero__titre .otb-ligne > span {
	display: block;
}

.otb-js .otb-hero__titre .otb-ligne > span {
	animation: otb-monte 880ms var(--otb-courbe) both;
}

.otb-js .otb-hero__titre .otb-ligne:nth-child(2) > span {
	animation-delay: 120ms;
}

@keyframes otb-monte {
	from { transform: translateY(104%); }
	to   { transform: translateY(0); }
}

/* Le reste du hero suit le titre, meme logique d animation autonome. */
.otb-js .otb-hero__ligue,
.otb-js .otb-hero__texte,
.otb-js .otb-hero__actions,
.otb-js .otb-hero__cote {
	animation: otb-apparait 700ms var(--otb-courbe) both;
}

.otb-js .otb-hero__ligue { animation-delay: 80ms; }
.otb-js .otb-hero__texte { animation-delay: 320ms; }
.otb-js .otb-hero__actions { animation-delay: 400ms; }
.otb-js .otb-hero__cote { animation-delay: 480ms; }

@keyframes otb-apparait {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}
/* Compteurs animes : la valeur finale est deja dans le HTML, le script
   ne fait que compter jusqu a elle. Sans JavaScript, le chiffre est bon. */
.otb-stat__valeur { transition: none; }

/* ------------------------------------------------------------------
   Respect des preferences systeme.
   Non negociable : toute animation devient instantanee.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }

	.otb-js .otb-reveal,
	.otb-js .otb-hero__ligue,
	.otb-js .otb-hero__texte,
	.otb-js .otb-hero__actions,
	.otb-js .otb-hero__cote,
	.otb-js .otb-hero__titre .otb-ligne > span {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* A l impression, tout est visible et sur fond clair. */
@media print {
	.otb-header, .otb-footer, .otb-burger, .otb-hero__media, .otb-hero__voile { display: none; }
	.otb-reveal { opacity: 1 !important; transform: none !important; }
	body { background: #FFFFFF; color: #070C1E; }
}