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

   BASE HOMEPAGE

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

body.homepage {

  background-color: #000 !important;

  margin: 0;

  padding: 0;

  overflow-x: hidden !important;

  font-family: "Roboto", sans-serif;

}



body.homepage main {

  max-width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  width: 100vw !important;

  min-height: 100vh !important;

}



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

   HERO

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

.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #000;

  color: #fff;

}



body.homepage .hero__video {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  object-fit: cover !important;

  object-position: center center !important;

  background: #000 !important;

  z-index: 0 !important;

  opacity: 1 !important;

  pointer-events: none !important;

}



.hero__content {

  position: fixed !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

  z-index: 2 !important;

  text-align: center;

  color: #fff;

  width: 100%;

  padding: 0 4vw;

  box-sizing: border-box;

  pointer-events: none;

  transition: opacity 0.6s ease-out;

}



.hero__text-sequence {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 35vh;

}



.hero__phrase {

  position: absolute;

  top: 50%;

  left: 50%;

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

  opacity: 0;

  font-size: clamp(7rem, 8vw, 8rem);

  font-weight: 400;

  letter-spacing: -0.2rem;

  line-height: 1.2;

  max-width: 90%;

  margin: 0 auto;

  text-shadow: 0 3px 20px rgba(0,0,0,0.45);

  text-align: center;

  transition: opacity 1s ease-in-out;

}



.hero__phrase.active {

  opacity: 1;

}





.hero__arrow {

  opacity: 0;

  font-size: 3rem;

  letter-spacing: -2px;

  transform: translateY(-10px);

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

  animation: arrow-bounce 1.8s infinite ease-in-out;

}



.hero__arrow.show {

  opacity: 1;

  transform: translateY(0);

}





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

    videodopo reveal

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

/* Testi che appaiono con scroll - versione lenta */

.reveal {

  opacity: 0;

  transform: translateY(30px); /* un po' più distante per un effetto più morbido */

  transition: opacity 2s cubic-bezier(.25,.1,.25,1),

              transform 2s cubic-bezier(.25,.1,.25,1);

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Sequenza dei figli */

.reveal-seq > * {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 3s cubic-bezier(.25,.1,.25,1),

              transform 3s cubic-bezier(.25,.1,.25,1);

}



.reveal-seq.visible > * {

  opacity: 1;

  transform: translateY(0);

}





.reveal-video-container {

  width: 100%; /* Occupa tutta la larghezza disponibile */

  overflow: hidden; /* Assicura che il contenuto in eccesso non venga visualizzato */

}



.reveal-video-container video {

  width: 100%; /* Imposta il video a occupare tutta la larghezza */

  height: auto; /* Mantiene le proporzioni */

  object-fit: cover; /* Copre l'intero spazio disponibile senza deformazioni */

}



.reveal__links {

  margin: 2rem;

  gap: 2rem;

  justify-content: center;

  pointer-events: auto;

}



.reveal__links a {

  font-size: 1.1rem;          

  text-transform: uppercase;  

  letter-spacing: 0.06rem;     

  color: #000;               

  text-decoration: none;

  transition: all 0.2s ease;

  margin: 0 1rem;

}







.reveal__links a:hover {

  text-shadow:

    0.3px 0 0 currentColor,

   -0.3px 0 0 currentColor;    

  color: #000;

}



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

   SEZIONE REVEAL CON IMMAGINI

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

.reveal-section {

  position: relative;

  background-color: #fff;

  color: #000;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start; /* Allinea il contenuto al top */

  padding: 25% 5% 3% 5%;

  box-sizing: border-box;

  min-height: auto;

}



.reveal-section h2 {

  font-size: clamp(1.4rem, 3vw, 3rem);

  font-weight: 600;

  letter-spacing: -1.3px;

  line-height: 1.3;

  margin: 2rem 10% 3rem 10%; 

  text-align: center;



}



.reveal-section p{

  font-size: clamp(1rem, 2.4vw, 2.4rem);

  font-weight: 350;

  margin: 1rem 10% 1rem 10%; 

  text-align: center;

  max-width: 80%;

  line-height: 1.3;

}







/* Griglia dei progetti "In evidenza" */

.marked {

  display: grid;

  grid-template-columns: repeat(2, 1fr); /* 2 colonne */

  gap: 2rem;

  width: 100%;

  margin: 3rem 0;

}



/* Ogni elemento */

.marked-item {

  width: 100%;

  text-align: center; /* allinea caption sopra */

}



/* Caption sopra l'immagine */

.marked-item .caption {

  margin-bottom: 1rem;

  font-size: 1.2rem;

  font-weight: 300;

  color: #000;

  display: block;             /* rende il link un blocco */

  text-decoration: none;     

  cursor: pointer;

}



.marked-item .caption:hover {

  text-shadow:

    0.3px 0 0 currentColor,

   -0.3px 0 0 currentColor;    

}



/* Wrapper immagine */

.marked-item a {

  display: block;

}



/* Immagine */

.marked-item img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  transition: transform 0.3s ease;

}



/* Hover immagine */

.marked-item:hover img {

  transform: scale(1.01);

}





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

   RESPONSIVE

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



/* ---- TABLET (max-width: 1024px) ---- */

@media (max-width: 1024px) {



  /* Griglia dei progetti */

  .marked {

    grid-template-columns: 1fr 1fr; /* 2 colonne, come desktop, ma riduce gap se serve */

  }



  /* Hero */

  .hero__content {

    padding: 0 5vw;

  }



  .hero__phrase {

    font-size: clamp(5rem, 5vw, 5rem);

  }



  .hero__links a {

    font-size: 1.1rem;

  }

}



/* ---- MOBILE (max-width: 600px) ---- */

@media (max-width: 600px) {



  /* Griglia dei progetti */

  .marked {

    grid-template-columns: 1fr; /* Colonna unica su mobile */

    gap: 1.5rem;

  }

.marked-item .caption {

  font-size: 1rem;

}

  .marked-item img {

    height: auto;

    object-position: center;

  }



  /* Hero */

  .hero__content {

    padding: 0 4vw; /* Riduce padding su mobile */

  }



  .hero__phrase {

    font-size: clamp(3rem, 4vw, 4rem); /* Font più piccolo */

  }





  /* Reveal section testi */

  .reveal-section h2 {

    font-size: clamp(1.2rem, 5vw, 2.5rem);

    margin-bottom: 3rem;

  }



  .reveal-section p {

    font-size: clamp(0.9rem, 4vw, 1.8rem);

    margin: 0 10%;

    margin-bottom: 2rem;

  }

}





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

   PRE-FOOTER CENTRATO

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

.pre-footer {

  background-color: #000;

  color: #fff;

  text-align: center;

  padding: 15% 5% 3% 5%;

  font-size: 1rem;

  letter-spacing: 0.5px;

  position: relative;

  display: flex;

  flex-direction: column;      /* Niente più colonne */

  align-items: center;

  justify-content: center;

  gap: 3rem;

  font-family: "Roboto", sans-serif;

}





/* Contenitore testo */

.pre-footer .text-container {

  max-width: 90%;            /* Ideale per tipografia elegante */

  margin: 0 auto;

}



.pre-footer h2 {

  font-size: 2rem;

   line-height: 1.6;

  font-weight: 500;

  margin: 1rem 10% 3rem 10%; 

}



/* Paragrafi */

.pre-footer p {

  font-size: 1.5rem;

  font-weight: 400;

  margin: 1rem 10% 3rem 10%; 

  line-height: 1.6;

  font-style: italic;

}





/* Link */

.pre-footer .link-black {

  font-size: 1rem;

  text-transform: uppercase;

  color: #fff;

  font-weight: 400;

  letter-spacing: 1px;

  margin: 0 0.7rem;

  font-style: normal;

  text-decoration: none;

}



.pre-footer .link-black:hover {

    text-shadow:

    0.3px 0 0 currentColor,

   -0.3px 0 0 currentColor; 

}



/* Immagine */

.pre-footer .image-container {

  width: 100%;

}



.pre-footer .image-container img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  margin: 0 auto;

}





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

   MOBILE 

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

@media (max-width: 768px) {



  .pre-footer {

    padding: 3rem 1.2rem;

    gap: 2rem;

  }



  .pre-footer h2 {

    font-size: 1.4rem;

    margin-bottom: 1rem;

  }



  .pre-footer p {

    font-size: 1.1rem;

    margin-bottom: 1rem;

  }



  .pre-footer .names {

    font-size: 1rem;

  }



  .pre-footer .link-black {

    font-size: 0.9rem;

    margin: 0 0.4rem;

  }

}