/* --- REGOLA ANTI-RIMBALZO E FIX DEFINITIVO SAFARI iOS --- */
html {
  background-color: #000000; 
}

html, body {
  height: 100vh; 
  height: -webkit-fill-available; 
  height: 100dvh; 
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed; 
  top: 0;
  left: 0;
  overflow: hidden; 
  overscroll-behavior: none; 
  background-color: #000000; 
}

/* --- IL TUO FONT --- */
@font-face {
  font-family: 'santafont';
  src: url('augustus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* --- 1. LO SFONDO LIQUIDO --- */
.sfondo-liquido {
  position: fixed;
  top: -50%; 
  left: -50%;
  width: 200%; 
  height: 200%; 
  z-index: 0;
  background-color: #000000; 
  filter: blur(90px);
  -webkit-filter: blur(90px);
  transform: translateZ(0); 
}

/* Base per i colori fluidi */
.blob {
  position: absolute;
  border-radius: 50%;
  /* OTTIMIZZAZIONE GPU: Rende le animazioni super fluide senza affaticare il processore */
  will-change: transform; 
}

.blob-blu {
  background: #0033ff; 
  width: 85vw; 
  height: 85vw;
  top: 5%; 
  left: 10%;
  animation: muoviBlu 7s infinite alternate ease-in-out;
}

.blob-bianco {
  background: #ffffff;
  width: 80vw; 
  height: 80vw;
  top: 40%; 
  left: 40%;
  animation: muoviBianco 9s infinite alternate-reverse ease-in-out;
}

.blob-nero {
  background: #000000;
  width: 90vw; 
  height: 90vw;
  top: 0%; 
  left: -10%;
  animation: muoviNero 11s infinite alternate ease-in-out;
}

@keyframes muoviBlu {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30vw, 20vh) scale(1.2); }
}

@keyframes muoviBianco {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30vw, -20vh) scale(1.4); }
}

@keyframes muoviNero {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40vw, 40vh) scale(1.1); }
}

/* --- 2. DISPOSIZIONE CONTENUTO CENTRALE --- */
.hero {
  height: 100%; 
  display: flex;
  justify-content: center; 
  align-items: center;     
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
  z-index: -1;
  pointer-events: none;
}

/* --- 3. IL TUO PNG ADATTATO ALLO SFONDO --- */
.logo-wrapper {
  margin: 0; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 600px; 
  max-width: 85vw; 
  height: auto;
  filter: invert(1) 
          drop-shadow(0 0 10px rgba(0, 0, 0, 0.9)) 
          drop-shadow(0 8px 25px rgba(0, 0, 0, 0.7)); 
}

/* --- 4. SCHERMATA DI INGRESSO (AUDIO UNLOCK) --- */
#start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; 
  cursor: pointer;
  transition: opacity 1s ease-in-out; 
}

#start-overlay p {
  font-family: 'santafont'; 
  font-size: 40px; 
  letter-spacing: 8px;
  text-align: center;
  padding: 0 20px;
  animation: pulse 2s infinite alternate; 
}

@keyframes pulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* --- 5. REGOLE PER IL CELLULARE (RESPONSIVE) --- */
@media (max-width: 768px) {
  .logo { 
    width: 320px; 
  }
  
  .sfondo-liquido {
    filter: blur(75px);
    -webkit-filter: blur(75px);
  }
  
  .blob-blu { 
    width: 80vmax; 
    height: 80vmax; 
  }
  .blob-bianco { 
    width: 80vmax; 
    height: 80vmax; 
  }
  .blob-nero { 
    width: 100vmax; 
    height: 100vmax; 
  }

  #start-overlay p {
    font-size: 16px; 
    letter-spacing: 4px;
  }
}