.intro { display: none; }
html.intro-si .intro {
  display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #efebdd;
  animation: intro-riserva 0.6s 9s forwards;
}
.intro__fermo, .intro__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.intro__video { opacity: 0; pointer-events: none; }
.intro.gira .intro__video { opacity: 1; }

html.intro-si .fondo { background: transparent; }
html.intro-si .fondo::after { opacity: 0; }
html.intro-si .riquadro__velo { opacity: 0; }
.riquadro__velo { transition: opacity 0.6s; }
html.intro-si .testa, html.intro-si .piede, html.intro-si .riquadro {
  opacity: 0; visibility: hidden;
  animation: intro-riserva-sito 0.6s 9s forwards;
}
html.intro-si.intro-arriva .testa, html.intro-si.intro-arriva .piede, html.intro-si.intro-arriva .riquadro {
  opacity: 1; visibility: visible;
}
html.intro-si.intro-arriva .testa, html.intro-si.intro-arriva .piede {
  transition: opacity 0.6s var(--curva-tendina) var(--intro-attesa, 0ms), visibility 0s var(--intro-attesa, 0ms);
}
html.intro-si .riquadro { pointer-events: none; }
@keyframes intro-riserva { to { opacity: 0; visibility: hidden; } }
@keyframes intro-riserva-sito { to { opacity: 1; visibility: visible; pointer-events: auto; } }

@media (prefers-reduced-motion: reduce) {
  html.intro-si .intro { display: none; }
}