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

   BASE / RESET

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

html, body {

  margin: 0;

  padding: 0;

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

  scroll-behavior: smooth;

  box-sizing: border-box;

}



*, *::before, *::after {

  box-sizing: inherit;

}



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

   INTRO (FISSA + FADE OUT)

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



.studio-intro {

  position: fixed;

  top: 0; left: 0;

  width: 100%;

  min-height: 100svh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background-color: #eeeeee;

  padding: 2% 0 0 0; 

  z-index: 50;

  opacity: 1;

  transition: opacity 2s ease-in-out;

}



/* Quando diventa visibile */

.studio-intro.visible {

  opacity: 1;

}









body.scrolled .studio-intro,

body.intro-hidden .studio-intro {

  opacity: 0;

  pointer-events: none;

}



.studio-text,

.studio-image {

  max-width: 70%;

  margin: 0 auto;

  text-align: center;

}



.studio-text h1 {

  font-size: 3rem;

  margin: 1rem 0 1rem 0;

  font-weight: 300;

  line-height: 1.2;

}



.studio-text p {

  font-size: 1.8rem;

  line-height: 1.4;

  margin-bottom: 1.8rem;

  color: #222;

}



.studio-image img {

  width: 100%;

  height: auto;

  display: block;

}



.studio-intro-spacer {

  height: 100vh;

}



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

   STUDIO INTRO — LINK DEDICATI

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



.studio-intro-link {

  font-size: 1.1rem;          

  text-transform: uppercase;  

  letter-spacing: 0.06rem;     

  color: #000;               

  text-decoration: none;

  transition: all 0.2s ease;

  margin: 0 0.2rem;

}



.studio-intro-link:hover {

  text-shadow:

    0.3px 0 0 currentColor,

   -0.3px 0 0 currentColor;    

  color: #000;

}



.partners-line {

  width: 50%;       

  height: 1px;

  background: #000;

  margin: 50px auto 15px auto;  

}



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

   REVEAL (SEZIONE NERA + VIDEO)

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

.studio-reveal {

  position: relative;

  z-index: 101;

  min-height: 100vh;



  background: #141414;

  color: #fff;



  display: flex;

  flex-direction: column;

  align-items: center;



  padding: 6% 5%;

  text-align: center;



  opacity: 0;

  transform: translateY(100px);

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

}



.studio-reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal-text {

  max-width: 70%;

  margin: 0 auto 3rem auto;

  text-align: center;

}



.reveal-text h1 {

  font-size: 2.5rem;

  margin-bottom: 1.5rem;

}



.reveal-text h2 {

  font-size: 2rem;

  margin-bottom: 1rem;

  font-weight: 700;

}



.reveal-text p {

  font-size: 1.4rem;

  line-height: 1.8;

}



.reveal-image {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 60px;

}



.reveal-image img {

  width: 100%;

  height: auto;

  display: block;

}



.reveal-video-container {

  position: relative;

  width: 95%;

  margin: 0 auto;

  opacity: 0;

  transition: opacity 2s ease 0.5s;

}



.studio-reveal.visible .reveal-video-container {

  opacity: 1;

}



.reveal-video-container video {

  width: 100%;

  height: auto;

  border-radius: 8px;

  display: block;

  box-shadow: 0 0 40px rgba(0,0,0,0.4);

}





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

   SEZIONE CONTENT (BIANCA)

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

.studio-content {

  background-color: #f0f0f0;

  padding: 6% 5%;

}



.studio-content-inner {

  max-width: 70%;

  margin: 0 auto;

}



.studio-content-inner h3 {

  font-size: 1.8rem;

  margin-bottom: 1.5rem;

}



.studio-content-inner p {

  font-size: 1.4rem;

  line-height: 1.6;

}



/* Immagini in fade */

.studio-content-image {

  width: 100%;

  margin: 2rem 0 5rem auto;

  text-align: right;



  opacity: 0;

  transform: translateY(50px);

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

}



.studio-content-image.visible {

  opacity: 1;

  transform: translateY(0);

}



.studio-content-image img {

  width: 100%;

  border-radius: 6px;

  display: block;

}



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

   SEZIONE SOCI E PARTNERS

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

.soci-partners {

  max-width: 100%;

  margin: 0 auto;

  padding: 6% 5%;

}



/* --- SOCI --- */

.soci-titolo {

  font-size: 1.8rem;

  margin: 40px auto 4% auto;

  text-align: center;

}



.soci {

  display: grid;

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

  gap: 10px;

  margin-bottom: 60px;

}



.socio {

  display: flex;

  gap: 10px;

  align-items: flex-start;

}



.socio-foto img {

  width: 140px;

  height: 140px;

  object-fit: cover;

}



.socio-info h3 {

  margin: 0 0 10px;

  font-size: 1.2rem;

}



.socio-info p {

  margin: 0;

  font-size: 0.95rem;

  line-height: 1.5;

}









/* --- PARTNERS --- */

.partners {

  text-align: center;

  margin-top: 15%;

}



.partners-titolo {

  font-size: 1.8rem;

  margin: 4% auto 20px auto;

}



.partners-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

}



.partner {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 140px;

}



.partner img {

  max-width: 80%;

  height: auto;

  object-fit: contain;

}



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

   FADE SEZIONE GRIGIA

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

.studio-fade {

  padding: 6% 5%;

  opacity: 0;

  transform: translateY(50px);

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

  

  display: flex;

  flex-direction: column; /* 👈 Forza immagine sotto */

  align-items: center;

  text-align: center;

}



.studio-fade.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Testo */

.studio-fade-inner {

  max-width: 800px;

}



.studio-fade-inner h2 {

  font-size: 2.5rem;

  margin-bottom: 1rem;

}



.studio-fade-inner p {

  font-size: 1.2rem;

  line-height: 1.7;

}



/* Immagine sotto 100% */

.studio-fade-image {

  width: 100%;

  margin-top: 2rem;

}



.studio-fade-image img {

  width: 100%;          /* 👈 Riempie tutta la sezione */

  height: auto;

  object-fit: cover;

  display: block;

  border-radius: 8px;

}



.servizi-list {

  list-style: none;

  padding: 0;

  margin: 1.5rem 0;

  text-align: left;

  font-weight: 500;

  font-size: 1.3rem;

  line-height: 1.5;

}



.servizi-list li {

  margin-bottom: 0.6rem;

  padding-left: 1.2rem;

  position: relative;

  color: #333;

}



/* pallino elegante */

.servizi-list li::before {

  content: "•";

  position: absolute;

  left: 0;

  top: 0;

  color: #000;

  font-size: 1.2rem;

}



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

   RESPONSIVE UNIFICATO

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



/* ------------------------------------------------------------

   TABLET (max-width: 1024px)

------------------------------------------------------------ */

@media (max-width: 1024px) {



  /* Griglie */

  .soci {

    grid-template-columns: 1fr; /* dal primo blocco */

  }



  .partners-grid {

    grid-template-columns: repeat(2, 1fr); /* dal primo blocco */

  }



  /* Titoli + testo */

  .studio-text h1 {

    font-size: 2rem;

    line-height: 1.2;

  }



  .studio-text p {

    font-size: 1.2rem;

    line-height: 1.6;

  }



  .studio-intro-link {

    font-size: 0.9rem;

  }



  .reveal-text h2 {

    font-size: 1.2rem;

  }



  .reveal-text p {

    font-size: 1.3rem;

    line-height: 1.8;

  }



  .studio-content-inner h3 {

    font-size: 1.1rem;

  }



  .studio-content-inner p {

    font-size: 1.1rem;

    line-height: 1.7;

  }



  .soci-titolo,

  .partners-titolo {

    font-size: 1.1rem;

    margin-bottom: 1rem;

  }



  /* Partners */

  .partner {

    height: 90px;

  }



  .partner img {

    max-width: 55%;

  }



  /* Padding generalizzato dal secondo blocco */

  .studio-intro,

  .studio-reveal,

  .studio-content,

  .studio-fade {

    padding-left: 5%;

    padding-right: 5%;

  }

}



/* ------------------------------------------------------------

   MOBILE (max-width: 600px)

------------------------------------------------------------ */

@media (max-width: 600px) {



  /* INTRO */

  .studio-intro {

    padding-top: 15%;

  }



  .studio-text h1 {

    font-size: 1.7rem;

    line-height: 1.2;

    margin-top: 1.5rem; /* aggiunta dal secondo blocco */

  }



  .studio-text p {

    font-size: 1.1rem;

    line-height: 1.5;

  }



  .studio-intro-link {

    font-size: 0.7rem;

    letter-spacing: 0.05rem;

  }



  /* REVEAL */

  .reveal-text {

    max-width: 90%;

    text-align: center;

  }



  .reveal-text h2,

  .reveal-text h1 {

    font-size: 1.5rem; /* unificato */

  }



  .reveal-text p {

    font-size: 1rem;

    line-height: 1.6;

  }



  .reveal-video-container {

    width: 90%;

  }



  .reveal-image {

    grid-template-columns: 1fr;

  }



  /* CONTENT */

  .studio-content {

    padding: 10% 5%;

  }



  .studio-content-inner {

    max-width: 90%;

    text-align: center;

  }



  .studio-content-inner h3 {

    font-size: 1.4rem;

  }



  .studio-content-inner p {

    font-size: 1rem;

    line-height: 1.6;

  }



  .studio-content-image {

    width: 100%;

    margin: 2rem auto 3rem;

    text-align: center;

  }



  /* FADE */

  .studio-fade {

    padding: 10% 5%;

  }



  .studio-fade-inner {

    max-width: 90%;

    margin: 0 auto 2rem auto;

    text-align: center;

  }



  .studio-fade-inner h2 {

    font-size: 1.4rem;

  }



  .studio-fade-inner p {

    font-size: 1rem;

    line-height: 1.6;

  }



  .studio-fade-image {

    width: 100%;

    margin: 2rem auto 0;

  }



  .servizi-list {

  list-style: none;

  padding: 0;

  margin: 1.3rem 0;

  text-align: left;

  font-weight: 500;

  font-size: 1rem;

  line-height: 1.2;

}

  /* SOCI */

  .soci-partners {

    padding: 10% 5%;

  }



  .soci-titolo {

    font-size: 1.4rem;

    margin-bottom: 1.5rem;

  }



  .soci {

    grid-template-columns: 1fr;

    gap: 25px;

  }



  .socio {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 15px;

  }



  .socio-foto img {

    width: 100px;

    height: 100px;

    border-radius: 100px;

  }



  .socio-info h3 {

    font-size: 1.1rem;

  }



  .socio-info p {

    font-size: 0.9rem;

    line-height: 1.5;

  }



  /* PARTNERS */

  .partners {

    margin-top: 12%;

    text-align: center;

  }



  .partners-titolo {

    font-size: 1.4rem;

    margin-bottom: 15px;

  }



  .partners-grid {

    grid-template-columns: 1fr;

    gap: 18px;

  }



  .partner {

    height: 90px;

  }



  .partner img {

    max-width: 55%;

  }

}