/* Parallaxe de defilement, telephone uniquement.
 *
 * Le JavaScript ne fait que publier une valeur : `--parallaxe-y`, le nombre de
 * pixels dont le fond doit reculer. C'est ici que cette valeur devient un
 * mouvement, ce qui permet a chaque fond de garder la transformation qu'il
 * avait deja (un centrage, une echelle pilotee par le moteur de scroll) sans
 * qu'elles s'ecrasent l'une l'autre.
 *
 * Le desktop n'est touche par aucune de ces regles : elles vivent toutes sous
 * la meme requete de largeur, et la souris continue d'y piloter la profondeur
 * comme avant. */

@media (max-width: 760px) {
  /* Le plan de fond commun. L'agrandissement vient AVANT le deplacement dans
     la liste : l'image est d'abord elargie, puis glissee a l'interieur de son
     cadre. Sans cet agrandissement, la glisser laisserait apparaitre une bande
     vide en haut ou en bas. */
  [data-parallaxe-scroll="plan"] {
    transform: translate3d(0, var(--parallaxe-y, 0px), 0) scale(var(--parallaxe-debord, 1.14));
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Le couloir de la section 3 porte deja son propre centrage horizontal et une
     echelle que le moteur de scroll anime. Sa regle compose les trois au lieu
     de les remplacer : le centrage reste, l'echelle du moteur reste, et le
     glissement s'y ajoute. */
  #systeme .systeme-bed img[data-parallaxe-scroll="plan"] {
    transform: translate3d(0, var(--parallaxe-y, 0px), 0)
               scale(calc((1.08 - var(--sc-p, 0) * 0.04) * var(--parallaxe-debord, 1.14)));
    transform-origin: 50% 50%;
  }

  /* La chambre et l'archive sont des conteneurs qui debordent deja leur cadre
     (inset negatif). Leur agrandissement est donc plus mesure : le debord
     existant fait deja une partie du travail. */
  #probleme .charge-bed[data-parallaxe-scroll="plan"],
  #histoire .story-bed[data-parallaxe-scroll="plan"] {
    transform: translate3d(0, var(--parallaxe-y, 0px), 0) scale(var(--parallaxe-debord, 1.12));
  }

  /* Le marbre du guide est peint en fond d'un pseudo-element : on deplace son
     point d'ancrage, pas l'element. Le degrade de fermeture qui ferme la page
     en noir vit sur ::after et ne bouge pas d'un pixel. */
  .guide-footer-scene[data-parallaxe-scroll="peint"]::before {
    background-position: center calc(50% + var(--parallaxe-fond-y, 0px));
    will-change: background-position;
  }

  /* Le portrait du hero est deja pose en couverture dans son etage clippe. */
  #home-hero .hero-live-mobile[data-parallaxe-scroll="plan"],
  #home-hero .hero-poster--mobile[data-parallaxe-scroll="plan"] {
    transform-origin: 50% 45%;
  }
}

/* Mouvement reduit : aucune de ces transformations ne s'applique, sur aucune
   largeur. Le respect de ce reglage passe avant l'effet. */
@media (prefers-reduced-motion: reduce) {
  [data-parallaxe-scroll="plan"] {
    transform: none !important;
    will-change: auto !important;
  }
  .guide-footer-scene[data-parallaxe-scroll="peint"]::before {
    background-position: center !important;
  }
}