/* Reset base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo pagina + sfondo */
body, html {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0d0d0d; /* fallback nero */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%23141414'%3e%3c/rect%3e%3cpath d='M0%2c383.172C82.012%2c393.136%2c167.462%2c411.73%2c242.766%2c377.752C322.659%2c341.703%2c381.682%2c270.544%2c422.044%2c192.741C463.726%2c112.393%2c494.037%2c20.127%2c474.095%2c-68.165C454.649%2c-154.264%2c366.821%2c-201.74%2c316.559%2c-274.3C258.221%2c-358.518%2c255.518%2c-507.778%2c155.193%2c-528.538C51.886%2c-549.915%2c-6.54%2c-396.301%2c-106.23%2c-361.786C-198.237%2c-329.932%2c-320.937%2c-406.321%2c-391.521%2c-339.255C-460.633%2c-273.588%2c-423.826%2c-156.147%2c-422.99%2c-60.817C-422.273%2c20.923%2c-426.996%2c105.448%2c-386.995%2c176.735C-348.455%2c245.418%2c-277.09%2c285.967%2c-207.602%2c323.035C-142.721%2c357.645%2c-72.998%2c374.303%2c0%2c383.172' fill='%231c1c1c'%3e%3c/path%3e%3cpath d='M1440 1142.405C1546.982 1149.749 1634.936 1058.057 1712.484 983.9929999999999 1779.9180000000001 919.5889999999999 1815.687 834.058 1852.538 748.4 1888.58 664.623 1937.049 580.671 1924.8809999999999 490.28499999999997 1912.673 399.608 1851.31 324.369 1786.7269999999999 259.559 1725.335 197.95 1641.969 172.95800000000003 1566.169 130.308 1464.684 73.20600000000002 1381.154-48.79899999999998 1265.703-33.601 1152.51-18.700000000000045 1095.6779999999999 110.839 1026.149 201.39600000000002 960.5219999999999 286.871 892.569 372.525 872.576 478.41700000000003 852.076 586.997 851.063 709.1659999999999 913.003 800.672 972.943 889.2239999999999 1100.824 889.983 1190.5430000000001 948.162 1280.795 1006.6859999999999 1332.687 1135.038 1440 1142.405' fill='%23292929'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fadeInBody 1.5s ease-out;
}

/* Overlay per animazione uscita */
#overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}

.fadeout {
  animation: fadeToBlack 1.5s forwards;
}

/* Container */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 10;
  text-align: center;
}

/* Elementi base */
h1, p, logo, #enter-button {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s forwards;
}

/* Ritardo delle animazioni */
h1 {
  font-size: 3em;
  color: #ffffff;
  margin-bottom: 20px;
  animation-delay: 0.5s;
}

p {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: #b3b3b3;
  letter-spacing: 0.1rem;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.8s;
}

#enter-button {
  font-family: 'Bebas Neue', sans-serif;
  background-color: #e50914;
  color: white;
  font-size: 2rem;
  letter-spacing: 0.15rem;
  padding: 15px 40px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.4s, transform 0.3s;

  /* Animazioni */
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: fadeInUpButton 1s forwards, pulse 2s infinite;
  animation-delay: 1.2s, 2.2s;
}

/* Hover bottone */
#enter-button:hover {
  background-color: #f40612;
  transform: scale(1.1);
}

/* Animazione entrata bottone */
@keyframes fadeInUpButton {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Animazione comune di salita + fade */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animazione overlay in uscita */
@keyframes fadeToBlack {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Animazione pulsazione bottone */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(229, 9, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* Responsive per mobile */
@media (max-width: 600px) {
  h1 { font-size: 2em; }
  p { font-size: 1em; }
  #enter-button { font-size: 1.2em; padding: 10px 30px; }
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 5rem;
  color: #e50914;
  letter-spacing: 0.3rem;
  text-shadow: 0 0 3px rgba(229, 9, 20, 0.7); 
  
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: fadeInUpLogo 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* Animazione dedicata al logo */
@keyframes fadeInUpLogo {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}