/* Indicatore di caricamento comune a tutte le pagine. */
#overlay,
#overlay-vis {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

#overlay {
  display: none;
}

#overlay-vis {
  display: flex;
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.telaio-spinner {
  position: relative;
  width: 10rem;
  height: 10rem;
  overflow: hidden;
}

.telaio-spinner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Ritagli del logo senza margini esterni (1028 x 1028).
   Se cambia il ritaglio di telaio.png, queste coordinate vanno riallineate. */
.telaio-spinner-frame {
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    17% 18%, 17% 85%, 86% 85%,
    86% 18%, 17% 18%, 0 0);
}

.telaio-spinner-square {
  animation: telaio-quadrato-scende 2.4s ease-in-out infinite;
}

.telaio-spinner-green {
  /* La parte coperta dal quadrato giallo appartiene al livello davanti. */
  clip-path: polygon(17% 18%, 56% 18%, 56% 40.47%,
    33.37% 40.47%, 33.37% 57%, 17% 57%);
  animation-delay: 0s;
}

.telaio-spinner-red {
  clip-path: polygon(60% 28%, 86% 28%, 86% 53%,
    74.32% 53%, 74.32% 40.47%, 60% 40.47%);
  animation-delay: .15s;
}

.telaio-spinner-yellow {
  clip-path: inset(40.47% 25.68% 15% 33.37%);
  animation-delay: .3s;
}

@keyframes telaio-quadrato-scende {
  0%, 20%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  55% {
    transform: translateY(24%);
    opacity: 0;
  }
  56% {
    transform: translateY(-24%);
    opacity: 0;
  }
  85% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telaio-spinner-square {
    animation: none;
  }
}