body {
  font-family: Hepta Slab, sans-serif;
  font-weight: 500;
  background: #000000;
  color: #ffffff;
  margin: 0;
  overflow: hidden; 
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar { width: 1px; height: 1px; }
::-webkit-scrollbar-button { width: 1px; height: 1px; }

/* =========================================
   UI FISSA (SCROLL DOWN & INSTAGRAM)
========================================= */
.scroll-info {
  position: fixed;
  top: 1.5rem;
  align-content: flex-end;
  display: flex;
  align-items: center;
  z-index: 1000;
  margin: 0;
}

.icon svg {
  width: 50px;
  fill: currentcolor;
}

/* Contenitore delle icone in basso a destra */
.social-links {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem; 
  display: flex;
  gap: 1.5rem; 
  z-index: 1000;
  align-items: center;
}

.social-icon {
  display: block;
}

.social-icon svg {
  width: 40px;
  height: 40px;
  fill: #ffffff; 
  transition: transform 0.3s ease; 
}

.social-icon:hover svg {
  transform: scale(1.2); 
}

/* =========================================
   STRUTTURA SCROLL VERTICALE (3D)
========================================= */
.external {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.vertical-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 1px; 
  transform-style: preserve-3d;
  padding-bottom: 10rem;
}

/* =========================================
   SLIDE A SCHERMO INTERO (INTRO & OUTRO)
========================================= */
.fullscreen-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; 
  width: 100vw;
  transform: translateZ(0); 
  z-index: 10;
}

.fullscreen-slide.intro-slide {
  margin-bottom: 20vh; 
}

.fullscreen-slide.outro-slide {
  min-height: 90vh; 
  margin-bottom: 5vh;
}

.fullscreen-slide.girl-shifted {
  justify-content: center; 
  padding-right: 5vw; 
}

.fullscreen-slide img {
  max-width: 80vw; 
  max-height: 70vh; 
  object-fit: contain;
  border: solid thin #FFFFFF; 
  cursor: zoom-in;
}

.fade-in {
  animation: fadeInEffect 3.5s ease-in-out forwards;
}

@keyframes fadeInEffect {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* =========================================
   GALLERIA EFFETTO 3D PARALLASSE
========================================= */
.img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh; 
  transform-origin: 50% 50%;
  transform: translateZ(.1px) scale(0.9) translateX(0) translateY(0);
  transition: 1s;
}

.img-wrapper:hover {
  min-height: 50vh;
}

.img-wrapper img {
  max-width: 45vh;
  max-height: 50vh;
  transition: .5s;
  vertical-align: top;
  border: solid thin #FFFFFF;
  cursor: zoom-in;
}

/* Posizionamenti Variabili Desktop */
.slower { transform: translateZ(-.2px) scale(1.1) translateX(-15vw) translateY(-5vh); }
.slower-right { transform: translateZ(-.2px) scale(1.1) translateX(25vw) translateY(-5vh); } 
.slower1 { transform: translateZ(-.25px) scale(1.05) translateX(15vw) translateY(5vh); }
.slower2 { transform: translateZ(-.3px) scale(1.3) translateX(10vw) translateY(-2vh); }
.slower-down { transform: translateZ(-.2px) scale(1.1) translateX(-20vw) translateY(10vh); }
.faster { transform: translateZ(.15px) scale(0.8) translateX(20vw) translateY(5vh); }
.faster1 { transform: translateZ(.05px) scale(0.8) translateX(-15vw) translateY(-5vh); }
.fastest { transform: translateZ(.22px) scale(0.7) translateX(-25vw) translateY(-10vh); }
.vertical { transform: translateZ(-.15px) scale(1.15) translateX(0) translateY(0); }
.last { transform: translateZ(-.2px) scale(1.1) translateX(0) translateY(5vh); }

/* --- Nuove classi dedicate al blocco Gradiva/Sanremo --- */
.gradiva-text { transform: translateZ(-.1px) scale(1.1) translateX(15vw) translateY(-5vh); }
.gradiva-flower { transform: translateZ(.15px) scale(0.8) translateX(-10vw) translateY(2vh); }
.sanremo-img { transform: translateZ(-.2px) scale(1.1) translateX(-15vw) translateY(8vh); }

a { color: inherit; font-weight: 500; }
a:hover img { filter: none; }

/* =========================================
   LIGHTBOX (Effetto Zoom)
========================================= */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  transform: none; 
  border: none;
}

/* =========================================
   OTTIMIZZAZIONE MOBILE & IPAD
========================================= */
@media (max-width: 1024px) {
  
  /* Altezza ridotta da 60vh a 45vh per riavvicinare le immagini */
  .img-wrapper {
    min-height: 45vh;
  }

  .img-wrapper img {
    max-width: 40vw; 
    max-height: 40vh; 
  }
  
  .fullscreen-slide img {
    max-height: 55vh; 
    max-width: 90vw;
  }

  .fullscreen-slide.girl-shifted {
    padding-right: 2vw; 
  }

  /* Valori di translateY (spostamento verticale) ridotti per farle "stringere" un po' */
  .slower { transform: translateZ(-.2px) scale(1) translateX(-5vw) translateY(-1vh); }
  .slower-right { transform: translateZ(-.2px) scale(1) translateX(10vw) translateY(-1vh); } 
  .slower1 { transform: translateZ(-.25px) scale(1) translateX(5vw) translateY(1vh); }
  .slower2 { transform: translateZ(-.3px) scale(1) translateX(8vw) translateY(0); }
  .slower-down { transform: translateZ(-.2px) scale(1) translateX(-10vw) translateY(2vh); }
  .faster { transform: translateZ(.15px) scale(0.8) translateX(10vw) translateY(1vh); }
  .faster1 { transform: translateZ(.05px) scale(0.8) translateX(-5vw) translateY(-1vh); }
  .fastest { transform: translateZ(.22px) scale(0.7) translateX(-10vw) translateY(-2vh); }
  .vertical { transform: translateZ(-.15px) scale(1) translateX(0) translateY(0); }
  .last { transform: translateZ(-.2px) scale(1) translateX(0) translateY(1vh); }
  
  /* Effetti moderati anche per le nuove classi */
  .gradiva-text { transform: translateZ(-.1px) scale(1) translateX(8vw) translateY(-1vh); }
  .gradiva-flower { transform: translateZ(.15px) scale(0.8) translateX(-5vw) translateY(0); }
  .sanremo-img { transform: translateZ(-.2px) scale(1) translateX(-10vw) translateY(1vh); }
}

@media (max-width: 768px) {
  /* Su smartphone le avviciniamo ancora un pochino di più */
  .img-wrapper {
    min-height: 38vh; 
  }

  .img-wrapper img {
    max-width: 55vw; 
  }
}