/**
 * Effet « TIME / OUT » au scroll — page d'accueil.
 *
 * Le SVG « texte-time-out-factory » est dupliqué : la moitié gauche (TIME)
 * et la moitié droite (OUT) sont clippées puis translatées en dehors de
 * l'écran à l'état initial. L'animation est pilotée par la position du
 * bloc dans le viewport via les CSS scroll-driven animations
 * (`animation-timeline: view()`), comme #la-carte.
 *
 * Le `clip-path` étant exprimé dans le repère local de l'élément, il
 * accompagne la translation : chaque <img> reste un bloc cohérent qui
 * vient se mettre en place au centre.
 */

.tof-time-out {
	position: relative;
	display: block;
	overflow: visible;
	line-height: 0; /* évite l'espace réservé au baseline sous l'<img> */
}

.tof-time-out__half {
	display: block;
	width: 100%;
	height: auto;
}

/* La moitié gauche garde le flux normal et porte la hauteur du conteneur. */
.tof-time-out__half--left {
	clip-path: inset( 0 50% 0 0 );
}

/* La moitié droite vient se superposer à la gauche pour reformer le logo
   complet à l'arrivée (translateX:0). */
.tof-time-out__half--right {
	position: absolute;
	inset: 0;
	clip-path: inset( 0 0 0 50% );
}

/* Animation : par défaut TIME sort à gauche, OUT sort à droite ;
   les deux convergent vers translateX(0) au fil du scroll. */
@supports ( animation-timeline: view() ) {
	.tof-time-out__half--left {
		transform: translateX( -100vw );
		animation: tof-time-out-slide-left linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 50%;
		will-change: transform;
	}

	.tof-time-out__half--right {
		transform: translateX( 100vw );
		animation: tof-time-out-slide-right linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 50%;
		will-change: transform;
	}

	@keyframes tof-time-out-slide-left {
		to { transform: translateX( 0 ); }
	}

	@keyframes tof-time-out-slide-right {
		to { transform: translateX( 0 ); }
	}
}

/* Évite la barre de scroll horizontale pendant que les moitiés sont
   hors-écran. `clip` ne crée pas de contexte de défilement et
   n'interfère pas avec `position: sticky`. Scopé via `:has()` à la
   page concernée — même schéma que `body:has(.tof-rotating-image)`. */
@supports ( animation-timeline: view() ) {
	body:has( .tof-time-out ) {
		overflow-x: clip;
	}
}

/* Accessibilité : on n'impose pas l'effet aux utilisateurs qui demandent
   moins d'animations. Les deux moitiés restent en place. */
@media ( prefers-reduced-motion: reduce ) {
	.tof-time-out__half--left,
	.tof-time-out__half--right {
		transform: none;
		animation: none;
	}
}