/*
  ============================================================================
  EFFETS — apparitions au défilement, lueur qui suit le curseur
  ============================================================================
  Ce fichier regroupe les effets "décoratifs" qui ne changent ni la structure
  ni le sens du contenu — on doit pouvoir supprimer ce fichier sans rien
  casser fonctionnellement, seulement rendre le site plus statique.
*/

/* Les sections apparaissent en fondu + léger décalage vertical quand elles
   entrent dans l'écran (voir l'IntersectionObserver dans 10-navigation.js). */
.apparition{ opacity: 0; transform: translateY(16px) }
.apparition.apparition--visible{
  opacity: 1; transform: none;
  transition: opacity .7s var(--transition-douce), transform .7s var(--transition-douce);
}

/*
  Petite lueur ambrée qui suit le curseur, façon lanterne qu'on promènerait
  sur le dégradé nocturne. Purement cosmétique et réservée aux appareils à
  curseur précis (souris) : sur tactile, le concept n'a pas de sens et
  gênerait plutôt qu'autre chose (voir 04-arriere-plan-anime.js).
*/
.lueur-curseur{
  position: fixed; inset: 0; z-index: 55; pointer-events: none; display: none;
  opacity: 0; transition: opacity .6s var(--transition-douce);
  mix-blend-mode: screen;
  background:
    radial-gradient(170px 170px at var(--curseur-x, -999px) var(--curseur-y, -999px), rgba(248,198,132,.20), rgba(244,168,84,.08) 42%, transparent 70%),
    radial-gradient(70px 70px at var(--curseur-x, -999px) var(--curseur-y, -999px), rgba(255,228,186,.30), transparent 74%);
}
.lueur-curseur.lueur-curseur--visible{ opacity: 1 }
@media (hover: hover) and (pointer: fine){ .lueur-curseur{ display: block } }