/**
 * Image en rotation injectée dans le bloc #presentation.
 *
 * Visible uniquement en desktop (>= 782px).
 * Positionnée en bas à gauche, décalée hors cadre pour effet coupé.
 * L'ensemble du wrapper tourne — l'image entière tourne comme un tout.
 * Rotation désactivée si prefers-reduced-motion.
 */

@media (min-width: 782px) {
	/* Empêche la barre de scroll horizontale créée par l'image qui
	   dépasse volontairement à gauche du viewport. */
	body:has(.tof-rotating-image) {
		overflow-x: clip;
	}

	#presentation {
		position: relative;
		isolation: isolate;
	}

	#presentation > :not(.tof-rotating-image) {
		position: relative;
		z-index: 1;
	}

	.tof-rotating-image {
		--tof-rotating-image-width: 480px;
		--tof-rotating-image-size: min(40vw, var(--tof-rotating-image-width));
		/* Proportion de l'image masquée par le bord gauche du viewport
		   (0.15 = 15 % hors cadre, quelle que soit la taille). */
		--tof-rotating-image-cut: 0.15;
		position: absolute;
		width: var(--tof-rotating-image-size);
		aspect-ratio: 1 / 1;
		bottom: calc(var(--tof-rotating-image-size) * -0.25);
		/* Ancrage au bord gauche du viewport : (50% - 50vw) ramène
		   le référentiel de #presentation au bord gauche de la fenêtre.
		   On soustrait ensuite la part de l'image qu'on veut voir coupée. */
		left: calc(50% - 50vw - var(--tof-rotating-image-size) * var(--tof-rotating-image-cut));
		pointer-events: none;
		z-index: 0;
		transform-origin: center center;
		animation: tof-rotate 15s linear infinite;
		will-change: transform;
	}

	.tof-rotating-image__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

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

	@media (prefers-reduced-motion: reduce) {
		.tof-rotating-image {
			animation: none;
		}
	}
}

@media (max-width: 781px) {
	.tof-rotating-image {
		display: none;
	}
}