/* ================================
   FLUID SLIDE TRANSITIONS
   durata: 800ms
   curve: smooth ease-out
   NO OPACITY (solo transform)
   NO GLITCH iniziale (visibility hidden)
================================ */

:root {
  --slide-duration: 800ms;
  --slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slide-offset: 64px;
}

/* ================================
   BASE (chiuso)
================================ */

main .view {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  pointer-events: none;
  visibility: hidden;

  transform: translate3d(0, 0, 0);
  will-change: transform;

  transition: transform var(--slide-duration) var(--slide-ease);
}

/* ================================
   POSIZIONI DI PARTENZA (chiuso)
================================ */

/* dal basso */
main .view.more-about {
  transform: translate3d(0, var(--slide-offset), 0);
}

/* da destra */
main .view.move-in-side {
  transform: translate3d(var(--slide-offset), 0, 0);
}

/* dall’alto verso il basso (NON-nav) */
main .view.move-out-down {
  transform: translate3d(0, calc(var(--slide-offset) * -1), 0);
}

/* da sinistra verso destra (solo more-about-out-side) */
main .view.more-about-out-side {
  transform: translate3d(calc(var(--slide-offset) * -1), 0, 0);
}

/* ================================
   STATO ATTIVO (aperto)
================================ */

main .view.active {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

/* ================================
   USCITA (slide out)
================================ */

main .view.closing {
  visibility: visible;
  pointer-events: none;
}

/* uscita coerente con la direzione */

/* verso il basso */
main .view.more-about.closing {
  transform: translate3d(0, var(--slide-offset), 0);
}

/* verso destra */
main .view.move-in-side.closing {
  transform: translate3d(var(--slide-offset), 0, 0);
}

/* verso il basso */
main .view.move-out-down.closing {
  transform: translate3d(0, var(--slide-offset), 0);
}

/* verso sinistra (more-about-out-side) */
main .view.more-about-out-side.closing {
  transform: translate3d(calc(var(--slide-offset) * -1), 0, 0);
}

/* ================================
   SWITCH ISTANTANEO (NAV)
================================ */

body.instant-switch main .view {
  transition: none !important;
}

/* ================================
   ACCESSIBILITY
================================ */

@media (prefers-reduced-motion: reduce) {
  main .view {
    transition: none !important;
    transform: none !important;
    visibility: visible !important;
  }
}


/* ================================
   WAITING SVG – sequential reveal/hide
   (JS applica le animazioni via WAAPI)
================================ */

#waiting svg,
.wait svg {
  overflow: visible;
}

/* migliora resa del disegno (se hai stroke) */
#waiting svg [data-wait-part],
.wait svg [data-wait-part] {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  will-change: opacity, stroke-dashoffset;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #waiting svg [data-wait-part],
  .wait svg [data-wait-part] {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}