/* =========================================================
   accueil-fonds.css : Page d'accueil : images de fond et animations de chaque thème
   ========================================================= */

/* ----- image de fond : Stranger (sombre), Timber Hearth (clair), planètes (Outer Wilds) -----
   index.md contient une image .gif-sombre, une image .gif-clair et plusieurs images .gif-ow */
.homepage .col-md-9 img.background-gif {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: -1;
	margin: 0;
	border: none;
	border-radius: 0;
}
.homepage .col-md-9 img.gif-clair,
.homepage .col-md-9 img.gif-ow,
[data-bs-theme="light"] .homepage .col-md-9 img.gif-sombre,
[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-sombre {
	display: none;
}
/* image centrée et entière (images transparentes) : Stranger en mode sombre, Timber Hearth en mode clair */
[data-bs-theme="dark"] .homepage .col-md-9 img.gif-sombre,
[data-bs-theme="light"] .homepage .col-md-9 img.gif-clair {
	display: block;
	top: 50%;
	left: 50%;
	width: min(46vmin, 520px);
	height: auto;
	animation: tourne 50s linear infinite;
}
/* rotation lente de l'image (supprimer la ligne animation ci-dessus pour l'arrêter) */
@keyframes tourne {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
[data-bs-theme="light"] body.homepage::before {
	background: radial-gradient(circle at 50% 50%, #dbe8f6 0%, #eaf1f9 40%, #f6f3ee 100%);
}

/* ----- accueil en mode Outer Wilds : planètes et comète qui traversent un ciel étoilé -----
   index.md contient les images .gif-ow superposées. js/theme.js choisit au hasard la planète suivante
   toutes les --duree-passage et lui ajoute la classe .passe, qui lance la traversée.
   Pour ajouter une planète : ajouter une ligne <img … class="background-gif gif-ow"> dans index.md */
/* durée d'une traversée, lue aussi par theme.js (définie hors du thème pour être lisible quel que soit le thème) */
.homepage img.gif-ow {
	--duree-passage: 8s;
}
[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow {
	--taille: min(52vmin, 600px);
	display: block;
	width: var(--taille);
	height: var(--taille);
	/* centrage par marges négatives (planètes carrées) plutôt que par transform :
	   un transform serait entraîné par la rotation et ferait dériver la planète */
	top: 50%;
	left: 50%;
	margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2);
	object-fit: contain;
	opacity: 0;
	filter: drop-shadow(0 0 40px rgba(255, 125, 37, 0.2));
	animation: flotte 8s ease-in-out infinite, tourne-planete 60s linear infinite;
}
[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow.passe {
	animation: defile var(--duree-passage) linear both, flotte 8s ease-in-out infinite, tourne-planete 60s linear infinite;
}
/* la comète traverse et flotte, mais ne tourne pas sur elle-même (sa queue doit rester derrière elle) */
[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow.gif-comete {
	animation: flotte 8s ease-in-out infinite;
}
[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow.gif-comete.passe {
	animation: defile var(--duree-passage) linear both, flotte 8s ease-in-out infinite;
}
/* traversée : part entièrement hors de la fenêtre à gauche et finit entièrement hors de la fenêtre à droite.
   Marge de 50px en plus de la demi-taille pour le halo (drop-shadow).
   (animation de left : la position de départ est la même à chaque passage, quelle que soit la rotation) */
@keyframes defile {
	from { left: calc(var(--taille) / -2 - 50px); opacity: 1; }
	to   { left: calc(100% + var(--taille) / 2 + 50px); opacity: 1; }
}
/* flottaison douce (propriété translate : appliquée après la rotation, elle n'est pas entraînée par elle) */
@keyframes flotte {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -10px; }
}
/* rotation sur elles-mêmes, autour de leur centre */
@keyframes tourne-planete {
	from { rotate: 0deg; }
	to   { rotate: 360deg; }
}
/* les planètes qui sortent sur les côtés ne doivent pas créer de défilement horizontal */
[data-bs-theme="outerwilds"] body.homepage {
	overflow-x: hidden;
}
/* si l'ordinateur demande de réduire les animations : première image seule, fixe (theme.js ne lance pas le défilement) */
@media (prefers-reduced-motion: reduce) {
	[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow {
		animation: none;
	}
	[data-bs-theme="outerwilds"] .homepage .col-md-9 img.gif-ow-premiere {
		opacity: 1;
	}
}
[data-bs-theme="outerwilds"] body.homepage::before {
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 27% 72%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 41% 11%, #faeedb 50%, transparent 51%),
		radial-gradient(1px 1px at 63% 83%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 78% 22%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 88% 61%, #faeedb 50%, transparent 51%),
		radial-gradient(2px 2px at 6% 88%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 55% 40%, #fff 50%, transparent 51%),
		radial-gradient(ellipse at 50% 50%, #174e7d 0%, #0b1e26 55%, #06121a 100%);
}