@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');





@font-face {

  font-family: 'Blacklisted';

  src: url('fonts/Blacklisted.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}

html,body {

  margin: 0;

  padding: 0;

  height: 100%;

  background-color: #000;

  display: flex;

  flex-direction: column;

}



main{

	flex:1;

	  min-height: 250vh;

}

.site-title {

  position: sticky;

  top: 0;

  width: 100%;

  text-align: center;

  font-family: 'Blacklisted', sans-serif;

  font-size: 2rem;

  color: #fff;

  letter-spacing: 0.2em;

  z-index: 1000;

  pointer-events: none;

  text-shadow: 2px 2px 8px #000;

  background-color: rgba(0, 0, 0, 0.8); /* sfondo per leggibilità */

  padding: 20px 0;

  transition: transform 0.3s ease;

}



.site-title.hidden {

  transform: translateY(-100%);

}





.cursor {

  display: inline-block;

  color: #fff;

  margin-left: 5px;

  animation: blink 0.7s steps(2, start) infinite;

}



@keyframes blink {

  to {

    visibility: hidden;

  }

}

.logo-wrapper {

  position: fixed;

  top: 50%;

  left: 50%;

  width: 200px;

  height: 200px;

  transform: translate(-50%, -50%) scale(1);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 999;

  pointer-events: none;

  overflow: hidden;

  

  opacity: 0; 

  visibility: hidden;

  

  transition: opacity 0.5s ease; /* solo fade-in */

  /* Non includere trasformazioni transizionate su scale, solo su opacity */

}

#logo {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  transform: scale(1);

  transition: none; /* niente trasformazione animata */

  opacity:0.25;

}









.title-logo {

  width: 90px;

  height: auto;

  vertical-align: middle;

  margin: 0 10px;

  opacity: 0;

  transform: scale(0.8);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.title-logo.show {

  opacity: 1;

  transform: scale(1);

}

.site-title h1 {

  white-space: nowrap; /* 🧠 Impedisce il ritorno a capo */

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: nowrap;

  gap: 8px;

  overflow: hidden;

  text-overflow: ellipsis;

}



section {

  max-width: 600px;

  margin: 100px 0 100px 60px; /* mantiene allineamento a sinistra */

  padding: 0 20px;

  color: #fff;

  font-family: 'Cinzel', serif;

  line-height: 1.6;

  text-align: left;

  z-index: 10;

  position: relative;

  font-size: 0.9rem; /* DIMINUITO rispetto al default */

}



.why-section h2 {

  font-size: 1.5rem; /* RIDOTTO da 2rem */

  margin-bottom: 20px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  border-bottom: 1px solid #555;

  padding-bottom: 5px;

  display: inline-block;



}

.about-section {

  max-width: 600px;

  margin: 35vh auto 100px auto; /* margini verticali e centratura orizzontale */

  padding: 0 20px;

  color: #fff;

  font-family: 'Cinzel', serif;

  line-height: 1.6;

  text-align: center; /* centratura del testo */

  font-size: 0.9rem;

  position: relative;

  z-index: 10;

  

}



.site-title h1 {

  margin: 0;

}



.site-subtitle {

  font-family: 'Cinzel', serif;

  font-size: 1.1rem;

  color: #ccc;

  letter-spacing: 0.1em;

  margin-top: 8px;

  text-shadow: 1px 1px 4px #000;

  pointer-events: none;

}

.scroll-spacer {

  height: 2500px; /* Puoi aumentare a piacere */

}



.why-section li {

  margin: 8px 0;

  font-size: 0.95rem; /* anche i punti elenco un po' più piccoli */

}

.site-footer {



  

   background-color: #111;

  color: #fff;

  padding: 30px 20px;

  text-align: center;

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.site-footer.visible {

  opacity: 1;

  transform: translateY(0);

}



.footer-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}



.footer-text p {

  margin: 0;

  line-height: 1.4;

}



.footer-icons {

  margin-top: 10px;

}



.footer-icons a {

  color: #aaa;

  text-decoration: none;

  margin: 0 10px;

  font-size: 1.2rem;

  transition: color 0.3s ease, transform 0.3s ease;

}



.footer-icons a:hover {

  color: #fff;

  transform: scale(1.1);

}



.hero-text-intro {

  max-width: 800px;

  margin: 20vh auto 0 auto;

  text-align: center;

  color: #fff;

  font-family: 'Cinzel', serif;

  font-size: 1.1rem;

  text-shadow: 1px 1px 4px #000;

  margin-top: 70px;  

  opacity: 0;

  transform: translateX(-50px);

  transition: opacity 1s ease, transform 1s ease;

}



.hero-text-intro.visible {

  opacity: 1;

  transform: translateX(0);

}







.welcome-section {

  max-width: 600px;

  margin: 35vh 0 100px 60px;

  padding: 0 20px;

  color: #ccc;

  font-family: 'Cinzel', serif;

  font-size: 1rem;

  line-height: 1.6;

  text-align: left;

  text-shadow: 1px 1px 4px #000;

  opacity: 0;

  transform: translateX(-40px);

  transition: opacity 1s ease, transform 1s ease;

}



.welcome-section.visible {

  opacity: 1;

  transform: translateX(0);

}



.about-right-section {

  max-width: 600px;

  margin: 20vh 60px 100px auto;

  padding: 0 20px;

  color: #ccc;

  font-family: 'Cinzel', serif;

  font-size: 1rem;

  line-height: 1.6;

  text-align: right;

  text-shadow: 1px 1px 4px #000;



  opacity: 0;

  transform: translateX(40px); /* da destra */

  transition: opacity 1s ease, transform 1s ease;

}



.about-right-section.visible {

  opacity: 1;

  transform: translateX(0);

}

/* ============================= */

/* 📱 Stili responsive mobile */

/* ============================= */



@media (max-width: 768px) {

  .site-title {

    font-size: 1.2rem;

    padding: 10px 0;

	padding-top: env(safe-area-inset-top, 30px); /* compatibile con iPhone notch */

    padding-bottom: 10px;

  }



  .title-logo {

    width: 50px;

    margin: 0 5px;

  }



  .site-subtitle {

    font-size: 0.9rem;

  }



  section,

  .welcome-section,

  .about-right-section {

    max-width: 100%;

    margin: 40px 20px;

    padding: 0 10px;

	transition: opacity 2s ease, transform 2s ease;

	 transition-delay: 0.6s;

  

  }



  .info-sections {

    flex-direction: column;

   

    align-items: center;

	  display: flex;

  justify-content: space-between;

  gap: 60px;

  padding: 60px;

  }



  .logo-wrapper {

    width: 150px;

    height: 150px;

  }



  .footer-content {

    text-align: center;

    padding: 20px;

  }



  .footer-icons a {

    font-size: 1.5rem;

    margin: 0 8px;

  }

}





@media (max-width: 768px) {

  .info-sections {

    flex-direction: column;

    padding: 20px;

    gap: 30px;

  }

}

.footer-dedication {

  text-align: center;

  padding: 1rem 2rem;

}



.handwriting-effect {

  font-weight: 700;

  text-align: center;

  font-size: 1.5rem;

  font-family: 'Crimson Text', serif;

  

  background: linear-gradient(90deg, #000, #fff, #000);

  letter-spacing: 5px;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  background-repeat: no-repeat;

  background-size: 80%;

  animation: shine 5s linear infinite;

  position: relative;

}



@keyframes shine {

  0% {

    background-position-x: -500%;

  }

  100% {

    background-position-x: 500%;

  }

}



.fade-in-on-scroll {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 2s ease-out, transform 2s ease-out;

   transition-delay: 0.4s;

}



.fade-in-on-scroll.visible {

  opacity: 1;

  transform: translateY(0);

}

.fade-right {

  opacity: 0;

  transform: translateX(50px);

transition: opacity 2s ease, transform 2s ease;

   transition-delay: 0.6s;

}



.fade-right.visible {

  opacity: 1;

  transform: translateX(0);

}



.slider-section {

  max-width: 100%;

  margin: 60px auto;

  padding: 0 20px;

  text-align: center;

  color: #fff;

  font-family: 'Cinzel', serif;

}

.slider-container {

  width: 100%;

  max-width: 1200px;  /* ancora più largo */

  height: 600px;      /* più alto */

  margin: 0 auto;

  overflow: hidden;

  position: relative;

  border-radius: 10px;

  border: 1px solid #444;

  box-shadow: 0 0 10px rgba(255,255,255,0.15);

  display: flex;

  align-items: center;

}



.slider-track {

  display: flex;

  animation: slide 45s linear infinite;

  width: max-content;

  height: 100%;

}



.slider-track img {

   width: 1200px;   /* uguale alla larghezza contenitore */

  height: 600px;   /* uguale all’altezza contenitore */

  object-fit: cover; /* così copre tutta l’area senza spazi */

  margin-right: 0;  /* tolto margine */

  border-radius: 0; /* niente bordi arrotondati per evitare spazi */

  flex-shrink: 0;

  transition: transform 0.3s ease;

}



.slider-track img:hover {

  transform: scale(1.05);

}



@keyframes slide {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-100%);

  }

}



@media (max-width: 768px) {

  .slider-container {

    max-width: 100%;

    height: 400px; /* più grande su mobile */

  }



  .slider-track img {

    width: 100vw;

    height: 400px;

    margin-right: 10px;

  }

}