/*
 * Animazioni di ingresso applicate dagli elementi con l'attributo
 * data-env-animation quando entrano nel viewport (vedi animations.js).
 *
 * Di default gli elementi sono visibili (nessun opacity:0 sull'attributo
 * da solo): è animations.js ad aggiungere la classe "env-gjs-animate-pending"
 * prima di osservarli, così se JS non parte per qualunque motivo il
 * contenuto resta comunque visibile invece di sparire per sempre.
 *
 * Il tipo di effetto (dissolvenza/scorri/zoom/rimbalzo/rotazione/flip) e la
 * direzione non hanno una keyframe dedicata ciascuno: animations.js calcola
 * la trasformazione di partenza in base a tipo+direzione e la passa via
 * custom property "--env-gjs-anim-from", così un'unica keyframe (due per il
 * rimbalzo, che aggiunge uno step di "overshoot") copre tutte le
 * combinazioni.
 */

[data-env-animation].env-gjs-animate-pending {
  opacity: 0;
  transform: var(--env-gjs-anim-from, none);
}

[data-env-animation].env-gjs-animate-in {
  animation-name: envGjsAnimateIn;
  animation-duration: var(--env-gjs-anim-duration, 700ms);
  animation-delay: var(--env-gjs-anim-delay, 0ms);
  animation-timing-function: var(--env-gjs-anim-easing, ease-out);
  animation-fill-mode: both;
}

[data-env-animation="bounce"].env-gjs-animate-in {
  animation-name: envGjsBounceIn;
}

@keyframes envGjsAnimateIn {
  from {
    opacity: 0;
    transform: var(--env-gjs-anim-from, none);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes envGjsBounceIn {
  0% {
    opacity: 0;
    transform: var(--env-gjs-anim-from, none);
  }
  60% {
    opacity: 1;
    transform: var(--env-gjs-anim-overshoot, none);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/*
 * Taglio dell'eccedenza orizzontale mentre almeno un elemento è ancora fuori
 * posto: la classe la mette e la toglie animations.js (vedi setOffset).
 * Sta sull'elemento radice perché è il suo overflow a decidere le barre di
 * scorrimento della finestra; l'asse verticale resta intatto.
 */
html.env-gjs-anim-clip {
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  [data-env-animation].env-gjs-animate-pending {
    opacity: 1;
    transform: none;
  }

  [data-env-animation].env-gjs-animate-in {
    animation: none;
  }
}