html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  overflow: hidden;
  background: black;
}

#presentation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    
}


#presentation-image {
    max-width: 100%;
    max-height: 100%;
}

#start-button {
    position: absolute;
    width: 20%;
    height: auto;
    bottom: 20%;
    cursor: pointer;
    transition: opacity 0.5s;
}

#video-container {
  position: fixed;   /* meglio di absolute per coprire la viewport */
  inset: 0;          /* top:0; right:0; bottom:0; left:0; */
  z-index: 10;
}


#image-buttons {
    position: relative;
    width: 100%;
    height: 100%;
   
}

.button {
    position: absolute;
    cursor: pointer;
    transition: opacity 0.5s;
}

.button:nth-child(1) {
    width: 30.73%;
    height: 16.48%;
    left: 33.02%;
    top: 26.48%;
}

.button:nth-child(2) {
    width: 29.43%;
    height: 15.74%;
    left: 4.22%;
    top: 56.76%;
}

.button:nth-child(3) {
    width: 29.43%;
    height: 15.74%;
    left: 35.36%;
    top: 56.85%;
}

.button:nth-child(4) {
    width: 29.43%;
    height: 15.74%;
    left: 66.41%;
    top: 56.85%;
}

.button:nth-child(5) {
    width: 29.43%;
    height: 15.74%;
    left: 18.96%;
    top: 76.30%;
}

.button:nth-child(6) {
    width: 29.43%;
    height: 15.74%;
    left: 50.05%;
    top: 76.30%;
}



.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

#back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    cursor: pointer;
    transition: opacity 1s ease-in-out; /* Matches the transition duration */
}
.container_visible {  
    opacity: 1;
    pointer-events: auto;
    transition: opacity 1s ease-in-out;
}
.container_hidden { 
     
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

/* Adattamento per dispositivi mobili */
@media screen and (max-width: 768px) {
    .button {
        width: 35%; /* Aumenta la dimensione dei pulsanti su schermi medi */
        height: auto; /* Mantiene il rapporto d'aspetto */
    }

    #start-button {
        width: 30%; /* Aumenta la dimensione del pulsante start su schermi medi */
    }
}

@media screen and (max-width: 480px) {
    .button {
        width: 45%; /* Aumenta ulteriormente la dimensione dei pulsanti su schermi piccoli */
        height: auto;
    }

    #start-button {
        width: 40%; /* Aumenta la dimensione del pulsante start su schermi piccoli */
    }
}
.hide-cursor {
    cursor: none;
}

.vimeo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* niente barre strane */
}
.vimeo-video iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Gestione piani (z-index) chiara e prevedibile */
#presentation { z-index: 30; }
#image-buttons { z-index: 20; position: fixed; inset: 0; }
#video-container { z-index: 10; }

#loading-video {
  position: fixed;        /* copre la viewport */
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;    /* usa 'cover' se lo vuoi riempito (anche con taglio) */
  object-position: center center;
  background: black;      /* nessun bordo trasparente */
  display: block;
  z-index: 25;            /* sopra ai video, sotto all’eventuale presentation cover */
}