/* ==================================================================== */
/* Fiona Lebre — LE CARROUSEL DE LA HOME : SON RYTHME                    */
/* ==================================================================== */
/*
 * theme.css décrit le montage AU REPOS et le mécanisme de la bascule
 * (.fl-home-img, ses trois états, ses courbes). Ce fichier-ci ne décrit
 * qu'une chose : COMBIEN DE TEMPS elle dure, et ce qui floute avec.
 *
 * Fichier à part pour la raison déjà invoquée par overview.css, about.css
 * et transition-project.css, et qui est écrite dans functions.php : un
 * geste se règle à l'œil, par retouches successives, et republier 47 Ko
 * de mise en page pour changer un nombre rend chaque essai coûteux. Le
 * carrousel vient d'entrer dans cette catégorie.
 *
 * Chargé APRÈS theme.css, dont il redéfinit des tokens — et, pour la
 * durée de la mise au point, un raccourci entier. Voir le pavé
 * correspondant : c'est le seul endroit délicat du fichier.
 */

/* ==================================================================== */
/* LE CARROUSEL SANS PASSAGE PAR LE BLANC                               */
/* ==================================================================== */
/*
 * La séquence d'origine séparait les deux photos dans le temps :
 *   0 -> 0,9s     la sortante se dissout dans le flou ;
 *   0,9 -> 1,4s   le carton est VIDE — la respiration ;
 *   1,4 -> 3,8s   l'entrante arrive floue et fait sa mise au point.
 * Soit 3,8s. C'est cette longueur qui a été jugée excessive, et le vide au
 * milieu en était la cause : il ne montre rien pendant une demi-seconde,
 * mais il DÉCALE tout ce qui suit de 1,4s.
 *
 * Délai à zéro, les deux photos se recouvrent, et pendant les 0,9s de
 * recouvrement LES DEUX SONT FLOUES : l'une part dans le flou, l'autre en
 * sort. On ne lit jamais deux images nettes l'une sur l'autre — c'est un
 * fondu dans le flou, pas une superposition.
 *
 * CE QU'ON ABANDONNE. Le passage par le blanc était une règle du site, pas
 * un effet : "on retire un tirage, on en pose un autre", jamais "A devient
 * B". Elle valait ici parce que le carrousel enchaîne des projets SANS
 * RAPPORT — deux photos superposées invitent à comparer ce qui n'a rien à
 * voir. C'est pour ça qu'on l'avait gardée sur la home et retirée du
 * passage vers un projet, où c'est la même photo des deux côtés.
 *
 * REVENIR EN ARRIÈRE : remettre 1.4s ci-dessous, rien d'autre.
 */
body.fl-home {
	--fl-gap-delay: 0s;
}

/* ==================================================================== */
/* LE CARTON PART DANS LE FLOU AVEC SA PHOTO                            */
/* ==================================================================== */
/*
 * L'IDÉE. Un vrai changement de mise au point ne floute pas la photo en
 * laissant son montage net : l'objet entier part. Jusqu'ici seul
 * .fl-home-img floutait, et le bord blanc parfaitement net autour d'une
 * photo floue trahissait le procédé.
 *
 * CE QUE ÇA CHANGE VRAIMENT, ET CE N'EST PAS CE QU'ON CROIT. Flouter un
 * aplat uniforme ne se voit pas — du blanc flou reste du blanc. Le flou
 * d'un carton n'a d'effet visible que sur SES ARÊTES. Toute la question
 * était donc là : les bords du carton deviennent-ils mous, oui ou non.
 *
 * LE BÉNÉFICE, au-delà de la justesse : le carton flou rend l'échange des
 * deux photos beaucoup moins lisible. On récupère en partie la règle
 * abandonnée plus haut — ne jamais donner deux photos à comparer — sans
 * repayer le passage par le blanc.
 *
 * LE RISQUE ASSUMÉ. Le carton est l'objet le plus stable du site : c'est
 * la table, la constante, ce qui tient la grille. Ramollir ses bords fait
 * respirer la composition au moment précis où rien d'autre ne bouge, et le
 * beige derrière n'a aucune texture pour absorber ça.
 *
 * D'OÙ UNE VALEUR TRÈS INFÉRIEURE À CELLE DE LA PHOTO : 5px contre 16.
 * Une arête se lit beaucoup plus vite qu'un contenu — à flou égal, le bord
 * paraîtrait deux fois plus mou que l'image. Les deux flous se composent
 * d'ailleurs en racine des carrés : 16 et 5 donnent 16,8. Autant dire rien
 * de plus sur l'image, et tout sur le bord. C'est le partage cherché.
 */
:root {
	--fl-frame-blur: 5px;
	/* DOIT RESTER ÉGAL à --fl-focus ci-dessous. Le carton et sa photo
	   refont le point ensemble, sinon on verrait le bord redevenir net
	   autour d'une image encore floue. */
	--fl-frame-refocus: 1.6s;
}

/* ==================================================================== */
/* LA MISE AU POINT SE TERMINE PLUS FRANCHEMENT                         */
/* ==================================================================== */
/*
 * LE DÉFAUT : "l'image met un peu de temps à devenir net net". C'est vrai,
 * et ce n'est pas la durée totale qui est en cause — c'est la QUEUE DE LA
 * COURBE.
 *
 * Avec cubic-bezier(0.2, 0.55, 0.35, 1), la valeur atteint ~90% de son
 * trajet à la moitié du temps, puis rampe. Sur un flou, ça donne : 16px
 * -> 1,5px en moins d'une seconde, puis encore 1,2s pour faire les 1,5px
 * restants. Or 1,5px de flou, ça se VOIT. On passait donc la moitié de la
 * séquence dans un "presque net" qui n'est pas net.
 *
 * On raccourcit donc le trajet : 2,4s -> 1,6s. La courbe est conservée —
 * c'est la même dans tout le site, et son attaque rapide est ce qui donne
 * son caractère au geste. Seule la traîne est comprimée.
 *
 * POURQUOI CE BLOC EST SI LOURD POUR UN SEUL NOMBRE. La durée est écrite
 * en dur dans le raccourci "transition" de theme.css, pas dans un token.
 * La redéfinir d'ici oblige à réécrire le raccourci entier — et un
 * raccourci REMPLACE, il n'ajoute pas.
 *
 * D'où les trois règles défensives qui suivent. body.fl-home .fl-home-img
 * est PLUS SPÉCIFIQUE que .fl-home-img.is-leaving et que
 * .fl-home-img.fl-no-anim : sans les redire ici, notre raccourci écraserait
 * en silence la dissolution de la sortante ET la remise à zéro sans
 * animation, qui est le mécanisme dont dépend tout l'enchaînement. Ce
 * piège a déjà coûté une soirée entre about.css et overview.css ; c'est
 * exactement le même.
 *
 * SI CES VALEURS SE STABILISENT, elles doivent remonter dans theme.css et
 * tout ce bloc disparaît. Il n'existe que parce qu'on règle encore.
 */
:root {
	--fl-focus:    1.6s;  /* mise au point de l'entrante — était 2,4s */
	--fl-fade-in:  1.1s;  /* son opacité, inchangée */
	--fl-fade-out: 0.9s;  /* dissolution de la sortante, inchangée */
}

body.fl-home .fl-home-img {
	transition:
		opacity var(--fl-fade-in) cubic-bezier( 0.4, 0, 0.2, 1 ),
		filter var(--fl-focus) cubic-bezier( 0.2, 0.55, 0.35, 1 ),
		transform var(--fl-focus) cubic-bezier( 0.2, 0.55, 0.35, 1 );
}

/* Le raccourci ci-dessus remet transition-delay à zéro. On le redonne à
   l'entrante, sinon --fl-gap-delay n'aurait plus aucun effet — et on ne
   pourrait plus remettre le passage par le blanc en changeant un nombre. */
body.fl-home .fl-home-img.is-active {
	transition-delay: var(--fl-gap-delay);
}

/* La sortante : dissolution immédiate, sans délai. Redite ici parce que
   notre règle de base l'aurait écrasée. */
body.fl-home .fl-home-img.is-leaving {
	transition:
		opacity var(--fl-fade-out) cubic-bezier( 0.4, 0, 1, 1 ),
		filter var(--fl-fade-out) cubic-bezier( 0.4, 0, 1, 1 );
}

/* LA PLUS IMPORTANTE DES TROIS. js/main.js pose fl-no-anim pour ramener la
   couche entrante à l'état de repos SANS animation avant de la relancer.
   Si notre raccourci l'écrasait, la couche repartirait de là où elle en
   était et l'enchaînement se déréglerait au bout de quelques tours. */
body.fl-home .fl-home-img.fl-no-anim {
	transition: none;
}

/* theme.css coupe le mouvement sous ce réglage, mais ses règles sont
   moins spécifiques que les nôtres : sans cette redite, une image
   resterait floue pour toujours chez quelqu'un qui a demandé qu'on ne
   l'anime pas. */
@media ( prefers-reduced-motion: reduce ) {
	body.fl-home .fl-home-img,
	body.fl-home .fl-home-img.is-active,
	body.fl-home .fl-home-img.is-leaving {
		transition: none;
		transition-delay: 0s;
		filter: none;
		transform: none;
	}
}

/* La classe est posée par js/main.js au moment de la bascule, et retirée
   sur animationend. C'est une ANIMATION et pas une transition, pour une
   raison précise : une animation se déclenche par sa seule présence et
   annonce sa fin. Une transition aurait demandé de poser un état, puis de
   le retirer après un délai — donc d'écrire la durée une deuxième fois en
   JS, ce que ce projet s'interdit (cf. le commentaire de swapImageLayer). */
body.fl-home .fl-home-frame.fl-refocus {
	animation: fl-frame-refocus var(--fl-frame-refocus)
		cubic-bezier( 0.2, 0.55, 0.35, 1 );
}

/* Le pic est à 25%, pas au milieu : le flou doit être installé quand les
   deux photos se croisent — c'est-à-dire tôt, la sortante ne durant que
   0,9s — puis se résorber au rythme de la mise au point de l'entrante.
   Même asymétrie que la photo elle-même : on part vite, on revient
   doucement. */
@keyframes fl-frame-refocus {
	0% {
		filter: blur( 0px );
	}
	25% {
		filter: blur( var(--fl-frame-blur) );
	}
	100% {
		filter: blur( 0px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.fl-home .fl-home-frame.fl-refocus {
		animation: none;
	}
}