/* AR Hypnose — point d'entrée CSS.
   L'ordre des couches est déclaré ici et nulle part ailleurs.
   Grâce à @layer, aucune règle n'a besoin de !important.
   Les compositions de page restent séparées des composants. */

@layer reset, tokens, base, layout, components;

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: var(--duration-page);
}

::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: page-enter var(--transition-page) both;
  mix-blend-mode: normal;
}

@keyframes page-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}