*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:#000;       /* niente verde: se lo vedi, vuol dire che qualcosa NON copre */
  overflow:hidden;
}

/* FULL SCREEN, sempre */
.scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;          /* fallback */
  height:100dvh;         /* mobile safe: barra browser */
  overflow:hidden;
}

/* immagini full screen */

.img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;          /* default */
  object-position: center;
}

/* portrait: riduci ritaglio */
@media (orientation: portrait) and (max-width: 600px){
  .img{
    object-fit: contain;
    background:#000;          /* bande nere pulite (se appaiono) */
  }
}


.img--gray{
  z-index:1;
  filter: contrast(1.05) brightness(0.95);
}

.img--color{
  z-index:2;
  will-change: clip-path;
  visibility:hidden;     /* sbloccata da JS quando ready */
}

/* finestra/logo */
.window{
  position:absolute;
  z-index:4;
  pointer-events:none;
}

.logo{
  width:100%;
  height:100%;
  object-fit: contain;
  opacity:0;
  transform: scale(.95);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition: opacity 650ms ease, transform 650ms ease;
}

.scene.logo-on .logo{
  opacity:1;
  transform: scale(1);
}

/* rain */
.rain{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:1;
  transition: opacity 900ms ease;
}

.scene.rain-off .rain{ opacity:0; }