/* 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 con tre quadrati (1254 x 1254).
   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,
    22% 24%, 22% 76%, 79% 76%,
    79% 24%, 22% 24%, 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(22% 24%, 54% 24%, 54% 40.59%,
    34.61% 40.59%, 34.61% 54%, 22% 54%);
  animation-delay: 0s;
}

.telaio-spinner-red {
  clip-path: polygon(57% 30%, 79% 30%, 79% 51%,
    68.26% 51%, 68.26% 40.59%, 57% 40.59%);
  animation-delay: .15s;
}

.telaio-spinner-yellow {
  clip-path: inset(40.59% 31.74% 24% 34.61%);
  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;
  }
}