/**
 * Transizioni ingresso/uscita pagine statiche (Chi siamo / Contattaci).
 * Applicato solo quando il body ha data-page-fade="1".
 */

html[data-page-fade='1'] body.page-fade-enter {
  animation: page-fade-slide-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-page-fade='1'] body.page-fade-leave {
  animation: page-fade-slide-out 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    /* `none` e non `translateY(0)`: un transform sul body crea un containing block
       e rompe `position:fixed` del cursore custom (#spisa-cursor) durante lo scroll. */
    transform: none;
  }
}

@keyframes page-fade-slide-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}