/* Switch Peinture en lettres / Handpoke tattoo : le personnage tourne sur lui-même (axe vertical).
   Transition native entre pages (View Transitions) ; navigateurs non compatibles : navigation normale. */

@view-transition {
  navigation: auto;
}

.hero__illu-img {
  view-transition-name: hero-perso;
}

/* Reste de la page (menu compris) : pas de fondu, remplacement instantané pour éviter tout clignotement */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-old(root) {
  display: none;
}

/* Premier quart de tour : l'ancien personnage pivote jusqu'à être vu de profil */
::view-transition-old(hero-perso) {
  animation: hero-spin-out 0.26s cubic-bezier(0.55, 0, 1, 0.45) both;
}

/* Fin du tour : le nouveau personnage revient de face, avec un léger rebond */
::view-transition-new(hero-perso) {
  animation: hero-spin-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.26s both;
}

@keyframes hero-spin-out {
  from {
    transform: perspective(900px) rotateY(0deg);
  }
  to {
    transform: perspective(900px) rotateY(90deg);
  }
}

@keyframes hero-spin-in {
  from {
    transform: perspective(900px) rotateY(-90deg);
  }
  to {
    transform: perspective(900px) rotateY(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Arrivée par le switch : pas d'animation d'entrée du haut de page (évite l'effet de « rechargement »).
   La classe from-switch est posée par le petit script en tête de page. */
html.from-switch .hero__content,
html.from-switch .hero__arc {
  animation: none;
  opacity: 1;
}

/* Les cartes, elles, rejouent leur animation d'entrée à chaque switch. */