* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; cursor: none; }

#stage { position: fixed; inset: 0; overflow: hidden; }

.layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade, 800ms) ease-in-out;
}
.layer.visible { opacity: 1; }

.layer .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(40px) brightness(0.5);
  transform: scale(1.1);
}
.layer .fg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.layer .fg img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
/* Video orizzontali a schermo pieno (riempi e ritaglia). */
.layer .fg video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Video verticali: interi (niente ritaglio), centrati; i lati li riempie il bg sfocato. */
.layer .fg.video-contain video { object-fit: contain; }

.bgvideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.5);
  transform: scale(1.1);
}

/* Modalità scroll (foto verticali): immagine a larghezza piena, ancorata in alto,
   il movimento verticale viene clippato dal contenitore. */
.layer .fg.motion-scroll { align-items: flex-start; }
.layer .fg.motion-scroll img {
  width: 100%; height: auto;
  max-width: none; max-height: none;
  object-fit: fill;
}

#start-overlay {
  position: fixed; inset: 0; z-index: 10;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#start-overlay.hidden { display: none; }
.start-title {
  color: #fff; font-family: system-ui, sans-serif;
  font-size: 4vw; letter-spacing: 0.1em; opacity: 0.9;
}