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

html, body {
  margin: 0;
  padding: 0;
}


html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;
min-height: 100dvh;
background-color: #000000;
overflow-x: hidden;
}

svg {
transform:  translateY(4px);
color: #DC6A3C;

}

.ilon {
fill: #c9c9c9;

}

.ilon:hover {
fill: #2E2E2E;
}



.primary-navigation {

  /* oppure baseline */
list-style: none;

}

nav a{
display: flex;
text-decoration: none;
padding: 1.3em 2em;
transition: background-color 150ms ease;
font-family: orbitron;
margin: auto;

}


/* Assicurati che i link non vadano a capo a meno che tu non voglia */
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: space-between; /* Distribuisce lo spazio rimanente */
}

nav li {
    /* Rimuovi ogni margine indesiderato tra gli elementi */
    margin: 0; 
}



a { text-decoration: none;}


li:hover {
background-color: #2E2E2E ;

}


footer {
background-color: #212121;
opacity: 0.3;
color: #999999;
padding: 6rem 6vw;
margin-top: 1rem;
text-align: justify;
font-size: clamp(0.6rem, 1vw, 0.9rem);
font-family: obitron;
}



/* mediaquery dimensioni schermo */

@media (min-width: 1024px) {
.content{
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 100px;  padding: 0 5vw; padding-top: 6vh;
}
}




@media (max-width: 1155px) {
.content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;  padding: 0 5vw; padding-top: 6vh;
}
}




@media (max-width: 600px) {
.content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px; /* puoi ridurre il gap se serve */
  padding: 0 5vw;
  padding-top: 5vh;
  padding-bottom: 5vh;
}
}





/* display-grid, sezione "opere"*/

.pagina {
display: none;
}
.pagina.active {
display: block;
}


.artwork-title { 
  margin: 30px 0;
}


.art-card {
  padding: 3em;
  border: 0.0625rem solid #DC6A3C;
  text-align: center !important;
  transition: transform 0.3s ease;
}

.art-card img {
  opacity: 100%;
}

.art-card:hover {
transform: scale(1.03);
}


.grid-container{
  display: grid;
  padding-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax( 300px, 1fr));
  gap:1.25rem;
  justify-content: center;
  padding-right: 1.875rem;
  padding-left: 1.875rem;
    
}


.vaggio{
  font-family: 'baskerville';
  color:#A0A0A0;
  text-align: left;
  font-size: 0.7rem;
}

.mart  {
  font-family: baskerville;
  padding-top: 8px;
    padding-bottom: 8px;
    color:#c9c9c9 ;
    text-align: left;
    font-size: 1rem;
    
  
}

.artwork-list {
list-style-type: none;
padding-left: 0; /* opzionale, per rimuovere l’indentazione */
font-family: 'Baskerville'!important;
text-align: left;
padding-top: 2%;
padding-bottom: 2%;
font-size: small;
color: #c9c9c9;
}




.art-card {
position: relative;
margin-top: 20px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0.1875rem;
overflow: hidden;  
margin-bottom: 0.5rem;
}

.card-img {
width: 100% !important;
height: auto;
opacity: 0.15!important;
position: absolute;
top: 0;
left: 0;
z-index: 0;
object-fit: cover;
}


.contact-icons {
display: flex;
flex-direction: column;
justify-content: center;
gap: 7rem;
padding: 6rem;
}

.icon {
width: 60px;
height: 60px;
border: 2px solid #DC6A3C;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #DC6A3C;
background-color: transparent;
transition: background-color 0.3s ease, transform 0.3s ease;
text-decoration: none;
font-size: 1.2rem;
}

.icon:hover {
background-color: #A0A0A0;
color: #000000 }



/* dimensioni card, bottoni e logo */

.art-work {
display: flex;
flex-direction: column;
align-items:center;
width: 80%;               /* 👈 controlla la larghezza di tutto */
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}



/*important */
.content img {
height: 29.125rem;
object-fit: cover;
width: 95%;
margin: auto;

}



.hidden {
display: none;
opacity: 0;
}

.visible {
display: block;
opacity: 1;
transition: opacity 0.6s ease;

}



img {
transition: transform 0.3s ease;
}

img:hover {
transform: scale(1.03);
}


.cara {
color: #A0A0A0;
font-family: 'Libre Baskerville', serif;
font-size: 0.75rem;
letter-spacing: 0.04em;
margin-top: 0.3rem;
/* distanzia dal bottone, come pausa rituale */
}

.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem; /* distanza uniforme tra tutti gli elementi */
}


.title {
font-family: 'Libre Baskerville', serif;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color:#c9c9c9;
transition: all 0.3s ease;
}

.title:hover {opacity: 0.85;}



/* bottone backbutton sezione, opere*/

.button-wrapper { display: flex;
justify-content: center;
align-items: center;
margin-top: 1rem;
margin-bottom: 2rem;

}



/* sezione "scopri di più */
.art-work {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;               /* 👈 controlla la larghezza di tutto */
max-width: 50rem;
margin: 0 auto;
padding: 2.5rem;
box-sizing: border-box;
}

.art-work img {
width: 100%;                 /* immagine responsiva */
height: auto;
border-radius: 3px;
margin-bottom: 1rem;
}

/*non so cosa sia */
.profile {
width: 100%;              /* 👈 segue la larghezza dell'immagine */
font-size: 1rem;
line-height: 1.6;
text-align: justify;
padding: 0 10px; }



.back-button:hover {
background-color: #000000; /* resta nero */
border-color: rgba(220, 106, 60, 0.6); /* bordo più tenue */
}

.back-button:hover::before {
color: rgba(220,106,60, 0.6); /* freccia più delicata */
}


.titol {
font-family: 'Libre Baskerville', serif;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #c9c9c9;
transition: all 0.3s ease;
margin-bottom: 1.5rem; /* Spaziatura sotto il titolo */
margin-top: 1.5rem;
}

.allora {
font-family: 'Libre Baskerville', serif;
font-size: 0.8rem; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.05em;
line-height: 1.5rem;
color: #A0A0A0;

/* Spaziatura sopra la descrizione */
}



/* sezione "info */
.siteq {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;               /* 👈 controlla la larghezza di tutto */
max-width: 50rem;
margin: 0 auto;
padding: 2.5rem;
box-sizing: border-box;
}



.siteq img {
width: 100%;                 /* immagine responsiva */
height: auto;
border-radius: 2px;
margin-bottom: 1rem;

outline: 1px solid #A0A0A0; /* colore e spessore dello stroke */
outline-offset: 6px; }    




.titol2 {
font-family: 'orbitron', serif;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #c9c9c9;
transition: all 0.3s ease;
margin-bottom: 1.5rem; 
margin-top: 1.5rem;
}

.allora2 {
font-family: 'orbitron', serif;
font-size: 0.8rem; 
letter-spacing: 0.05em;
line-height: 1.5rem;
color: #A0A0A0;

/* Spaziatura sopra la descrizione */
}



/*importante-sparizione dell nav*/
.mobile-nav-toggle {
display: none;
}


.flex {
display: flex;
gap: var(--gap, 3rem)   
}



/* cambiamento border, spazi dentro la nav */
#primary-navigation a,
#primary-navigation a span {
text-decoration: none;
color: var(--accent-color);
}

.art {
color: #DC6A3C;
font-family: 'Baskerville', serif;
font-size: 1.5rem;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 0.08rem

}

.Project {
color: #c9c9c9;
font-family: 'Baskerville', serif;
font-size: 1.5rem;
font-weight: lighter;
text-transform: uppercase;
  letter-spacing: 0.08rem
}

.data {
color: #c9c9c9;
font-family: 'Orbitron', sans-serif;
font-size: 0.6rem;
margin-left}


.primary-header {
align-items: center;
justify-content:space-between ;
font-family: 'orbitron';
color: #c9c9c9;;
}


.primary-header {
height: 4rem; /* altezza fissa */
/* oppure */
min-height: 1vh; /* altezza relativa alla viewport */
padding: 0rem 3rem; /* spazio interno */

}

header
{
border-bottom:  0.15625rem  solid #DC6A3C;/* cambia colore e spessore a piacere */

}


.accent-link {
background-color: #DC6A3C;
}



.tool {
display: flex;
margin-top: 3rem;

}



.back-button {

width: 3.75rem;
height:3.75rem;
background-color: black;
color:rgb(220, 106, 60);
border: 2px solid rgb(220,106,60);
border-radius: 50%; /* rende il bottone perfettamente circolare */
display: flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1.5rem;
padding-bottom: 7px;
padding-left: 5.5px;
}

.back-batton {
width: 3.75rem;
height:3.75rem;
background-color: black;
color:rgb(220, 106, 60);
border: 2px solid rgb(220,106,60);
border-radius: 50%; /* rende il bottone perfettamente circolare */
display: flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 7px;
padding-left: 5.5px;
}


/*sezione artan */

.frase1 {
    margin-bottom: 1rem;
    font-family: orbitron;
    font-size: 8px;
      line-height: 1.5;
  letter-spacing: 3px;
    


}

.frase2 {
    margin-bottom: 1em;
    font-family: baskerville;
    
}

.iscrivere {
  /* colore e spessore del bordo */
    border: 2px solid #3e8f40;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 6PX;

    color: #000000;
    background-color:#0000;
   
    font-family: orbitron;
    letter-spacing: 2px;
     cursor: pointer;
    transition: background-color 0.5s ease; /* per un effetto più fluido */
}
    


.iscrivere:hover {
  background-color: #3e8f40; /* cambia colore quando ci passi sopra */
  color: #1a1a1a;           /* testo scuro sullo sfondo arancione */
}


.is-subscribed {
  background-color: #3e8f40; /* cambia colore quando ci passi sopra */
  color: #1a1a1a;           /* testo scuro sullo sfondo arancione */

}



/* Contenitore principale */
.container {
  
      /* serve per il posizionamento assoluto del bottone */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw; /* 100% della larghezza della finestra */
  margin: 0;
  padding: 0;
  margin-top: 6rem;
}

/* Immagine */
.photo1 {
  
  width: 900px;
  height: 550px;
  object-fit: cover;   
  transform: none !important;      /* riempie il box senza deformarsi */

}




.answer {
 
 font-family: 'Libre Baskerville', serif;
font-size: 0.8rem; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.05em;
line-height: 1.5rem;
color: #A0A0A0;
max-width: 800px;
margin-inline: auto;
padding-inline: 2rem;
margin-bottom: 1rem;

}


.answeri {
 
 font-family: 'Libre Baskerville', serif;
font-size: 0.8rem; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.05em;
line-height: 1.5rem;
color: #A0A0A0;
max-width: 800px;
margin-inline: auto;
padding-inline: 2rem;
margin-bottom: 1rem;
margin-top: 3rem;

}



.answeris {
 
font-family: 'baskerville', serif;
justify-content: center !important;
font-size: 0.9rem; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.12em;
line-height: 2rem;
color: #A0A0A0;
max-width: 100%;
padding-inline: 34rem;
margin:0;
padding-bottom: 0%;
margin-top: 2rem;
}




.answer1{
color: #c9c9c9;
max-width: 800px;
margin-inline: auto;
font-weight: 400;
margin-top: 3rem;
margin-bottom: 1rem;
padding-inline: 2rem;
font-family: 'Libre Baskerville', serif;
font-size: 0.8rem; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.05em;
line-height: 1.5rem;
}


.ronda {
width: 600px;

display: flex;
justify-content: center;
}



.ki {
  margin-top: 3rem;
  margin-bottom: 3rem; 
}




/* importante */

.prolungamento {
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100%;  
    margin-top: 3rem;
    margin-bottom: 3rem; 
     
}

.prolungamento img {
    width: 700px;            
    height: auto;
    transform: none !important;  }            



.contenitore-affiancato {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 8rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}




.tanimani{
 width: 40%; 
 height: auto; 
 display: block; /* Essenziale per poter applicare i margini automatici */
 margin-left: auto; /* Spinge l'immagine il più a destra possibile */
 margin-right: auto; /* Spinge l'immagine il più a sinistra possibile */
 transform: none !important;
border-radius: 3px;}

.ja {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.jo{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

 .tomskate {
    
    width: 80%; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 2em; 
    margin-bottom: 2em;
     position: static; 
    left: auto; 
    transform: none !important;
    float: none;
    max-height: 500px; 
 }




 .toskate {
    
    width: 80%; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 2em; 
    margin-bottom: 8rem;
     position: static; 
    left: auto; 
    transform: none !important;
    float: none;
  
 }


.pont {
  color: #A0A0A0;
  text-align: center;
  font-family: orbitron;
  font-size: 12px;
  letter-spacing: 0.8px;
  margin-top: 8px;
}

.vor {
  align-content: center;
  padding-top: 6px;
  padding-right: 6px;
}



.text-block img {
  max-width: 60%;
  height: auto;
  display: block;
  margin: 1rem auto;
}


.skate-vision {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 3rem;
  margin-bottom: 3rem;
  margin-top: 3rem;
  background-color: #000;
  color: #fff;
  font-family: 'Baskerville', serif;
    
}
.image-container img {
  
  height: 100px;
  width:100px;
  opacity: 30%;
  align-content: center;
  transform: rotate(360deg);
  transition: transform 2s ease-in-out;
  animation: rotateSticker 160s linear infinite;
}

@keyframes rotateSticker {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



.image-kontainer img {
  
  height: 100px;
  width:100px;
  opacity: 60%;
  align-content: center;
  transform: rotate(38deg);}
 

.image-lontainer img {
  
  height: 150px;
  width:130px;
  opacity: 30%;
  align-content: center;
  
}
 

.image-xontainer img {
  
  height: 150px;
  width:130px;
  opacity: 30%;
  position:relative;
  top: -90px;
  left: 85%;
  margin-bottom: 3rem;
  
}



/* 1. La classe iniziale: invisibile e con transizione */
.fade-in-hidden {
    opacity: 0;
    /* Aggiungiamo un leggero scorrimento verso l'alto per un effetto più gradevole */
    transform: translateY(20px); 
    /* La transizione definisce la durata e la fluidità dell'apparizione */
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* 2. La classe finale: visibile */
.fade-in-visible {
    opacity: 1;
    transform: translateY(0); /* Torna alla posizione normale */
}

/* Opzionale: Stili per il blocco immagine e testo */
.text-block {
    margin-bottom: 50px;
}


.ronda {
 display: block;
 margin: 30px auto;
 width: 50%;
 height: auto;
 transform: none !important;
 border-radius: 3px;
}

.impianto img {
  display: block;
 margin: 30px auto;
 width: 50%;
 height: auto;
 transform: none !important;
 border-radius: 3px;
}


.tanas {
  transform: none !important;
}

/* Stile base per il selettore */
#language-switcher {
    text-align: center;
    margin: 20px 0;
}

#language-switcher button {
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: transparent;
    transition: all 0.3s;
    color: #A0A0A0;
    border-radius: 3px;
    padding: 8px;
      
}

/* Stile per il bottone attivo */
#language-switcher button.active {
    background-color:transparent; /* Il tuo colore tema */
    color: white;
    border-color: #DC6A3C;
    font-family: orbitron;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    letter-spacing: 4px;
  
}

/* 1. Classe di occultamento: totalmente nascosta, usata per ENG all'inizio */
.hidden-lang {
    display: none; 
    opacity: 0; 
}

/* 2. Classe di visualizzazione: rende l'elemento visibile con una dissolvenza */
.active-lang {
    display: inline; /* O 'block' se il tag era un blocco intero */
    opacity: 1;
    /* La transizione è applicata all'opacità per l'effetto dissolvenza */
    transition: opacity 0.1s ease-in-out; 
}

/* Nota: Nel tuo HTML, all'inizio, tutte le span ITA devono avere .active-lang e tutte le span ENG devono avere .hidden-lang */


/* 1. Wrapper Esterno: GARANTISCE CENTRAGGIO TOTALE */
.super-centered-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
    
    
}

/* 2. Contenitore delle Immagini (Larghezza Fissa) */
.header-image-container {
    position: relative; 
    
    /* Larghezza fissa e massima */
    width: 600px; 
    max-width: 100%; 
    
    /* Il centraggio è gestito da .super-centered-wrapper, non serve margin: auto qui */
    margin: 0; 
    
    height: auto; 
    overflow: hidden;
}

/* 3. Regole Generali per le Immagini Sovrapposte */
.header-image-container img {
    object-fit: contain; 
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out; 
    z-index: 1; 
       
}

/* 4. Ancora di Altezza */
#img-consiglieri {
    position: relative; 
    height: auto; 

}

/* 5. Immagine in Sovrapposizione */
#img-skate {
    position: absolute;
    top: 0;
    left: 0;
    transform: none !important;  
}

/* 6. Classi di Animazione (Gestite da JavaScript) */
.header-image-container .hidden-image {
    opacity: 0;
    z-index: 0;
}

.header-image-container .active-image {
    opacity: 1;
    z-index: 2;
}

/* 3. Stile del Titolo */
.article-title {
    width: 400px;
    text-transform: uppercase;
    color: #A0A0A0; /* Colore scuro */
    font-family: 'Baskerville';
    font-size: 16px; 
    line-height: 1.8;
    letter-spacing: 1px;
    font-weight: 200;  
}



/* Testo sopra l’immagine */
.title-overlay {
  position: absolute;
  width: 400px;
  left: 38%;
  transform: translateX(-50%);
  color: #000000;
  bottom: 11rem;
  }


.wi{
  font-family: 'Baskerville';
   font-size: 16px; 
   text-transform: uppercase;
    line-height: 1.8;
    letter-spacing: 1px;
    font-weight: 200;  
}




.button-savona {
  
  margin-top: 1rem;
  padding: 8px 35px;
  font-family: 'orbitron', serif;
  color: #A0A0A0; /* Colore testo */
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  border: 1px solid #CEC65D;
  letter-spacing: 3px;
 font-size: small;
 background: transparent;
  transition: all 0.3s ease;
}



.button-savona:hover {
  color: #000;
  background: #D0C069;
}

.button-savona:hover::before {
  /* Al passaggio del mouse l'interno diventa pieno */
  background: #D0C069;
}




.wee {
  margin-top: 1rem;
}




 .btn-overlay {
  position: absolute;
  text-transform: uppercase;
  margin-top: 16rem;              /* distanza dal fondo */
  left: 32%;                 /* centrato orizzontalmente */
  transform: translateX(-50%);
  background-color: transparent;
  color: #000000;
  border: solid 2px #DC6A3C;
  border-radius: 0px;
  padding: 8px 35px;
  font-size: small;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.8s ease;
  font-family: orbitron;
  letter-spacing: 3px;
  transition: all 0.3s ease;

}

.btn-overlay:hover {
  color: #c9c9c9;
  background: #DC6A3C;
}

.btn-overlay:hover::before {
  /* Al passaggio del mouse l'interno diventa pieno */
  background: #DC6A3C;
}


.first-letter {
  float: left;
  font-family: 'Aclonica', serif;
  font-size: 70px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  color: #c9c9c9;
}


/* Responsivo per smartphone */
@media (max-width: 768px) {
  .container {
    width: 90vw;
    height: 100vw;
  }

  .btn-overlay {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    
  }

  .photo1 {
    width: 100vw;   /* più largo in proporzione allo schermo */
    height: 100;  /* mantiene proporzioni quadrate */
    border-radius: 3px;
    margin-top: 3rem;
  }
}


.video-skater-loop video {
  width: 100%;
  max-width: 600px; /* Ad esempio, per non farlo diventare troppo grande su desktop */
  height: auto;
  display: block;
  transform: none !important;  

}

.prolung {
 margin-bottom: 0.5rem;
 margin-top: auto;
 transform: none !important;  
 }


.ex {
  color: #DC6A3C;
}


/* Il contenitore principale */
.image-row {
  display: flex;
  justify-content: space-between; /* Spazio uguale tra le immagini */
  align-items: flex-start;        /* Allinea gli elementi in alto */
  gap: 60px;                      /* Distanza tra le immagini */
  padding: 90px;
  background-color: #000;         /* Sfondo nero come l'originale */

}

/* Stile per i contenitori delle singole immagini */
.image-item {
  flex: 1; /* Forza le 3 immagini ad avere la stessa larghezza base */

}

.image-item img {
  width: 100%;    /* L'immagine occupa tutto il suo contenitore */
  height: auto;   /* Mantiene le proporzioni */
  display: block;
    transform: none !important;
    border-radius: 3px;
      

}

/* Effetto sfalsato (opzionale) per richiamare lo stile Ferrari */
.offset-down {
  margin-top: 50px; /* Abbassa l'immagine centrale */
}






/* RESET E CONTENITORE PRINCIPALE */
.gallery-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0; /* Rimuove lo spazio ai lati su smartphone */
  margin: 0;
}

/* IL BLOCCO IMMAGINE + TITOLO */
.item {
  margin: 0 0 40px 0; /* Spazio solo sotto ogni blocco */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* L'IMMAGINE A TUTTO SCHERMO */
.item img {
  width: 100%;       /* Forza l'immagine a coprire tutta la larghezza */
  display: block;    /* Toglie lo spazio vuoto sotto le immagini */
  height: auto;      /* Mantiene le proporzioni */
  object-fit: cover;
  border-radius: 3px;
  transform: none !important;
}



/* --- LOGICA DESKTOP --- */
@media (min-width: 768px) {
  .gallery-container {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10%;   /* Ridà un po' di respiro ai lati su desktop */
  }

  .item {
    width: 45%;      /* Su desktop le immagini tornano affiancate */
  }

  .offset-down {
    margin-top: 150px; /* Crea l'effetto scalato a destra */
  }


  .offsety-down {
    margin-top: -80px; /* Crea l'effetto scalato a destra */
    
  }
}


/* RESPONSIVE: Sul cellulare le mette una sotto l'altra */
@media (max-width: 768px) {
  .image-row {
    flex-direction: column;
    align-items: center; 
    width: 100%;       /* Forza il contenitore a occupare tutto lo spazio */
    padding: 0;   /* Rimuove eventuali margini interni che stringono le foto */
    margin-top: 3rem;
     
  }
  
.item {
  
  margin-bottom:6rem;
}


  .image-item {
    width: 100%;
    margin: 0;         /* Rimuove margini laterali che potrebbero creare bordi bianchi */
  }

  .image-item img {
    width: 100%;       /* Forza l'immagine a essere larga quanto il div .image-item */
    display: block;    /* Toglie lo spazio vuoto che a volte compare sotto le immagini */
    height: auto;      /* Fondamentale per non deformarle */
   
  }

  .offset-down {
    margin-top: 0; 
  }
}


/* mediaqueries-smartphone */

@media (max-width: 55em) {

  .icon {
width: 60px;
height: 60px;
border: 0.0625rem solid #DC6A3C;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #DC6A3C;
background-color: transparent;
transition: background-color 0.3s ease, transform 0.3s ease;
text-decoration: none;
font-size: 1.2rem;
}



.primary-navigation {

position: fixed;
inset: 0 0 0 30%;
--gap: 4em;

flex-direction: column;
z-index: 1000;
padding: min(30vh, 10rem)2em;
background: rgb(71, 133, 184);

background: hsl(0 0% 20% / 0.8);
backdrop-filter: blur(2rem);

transform: translateX(100%);
transition: transform 350ms ease-out;
}


.primary-navigation[data-visible="true"] {
transform: translateX(0%);
}

.primary-header {
align-items: center;
justify-content:space-between ;
font-family: orbitron;
padding: 2rem 2rem;
color: #A0A0A0;
letter-spacing: 1px;

}


header{
border-bottom: 0.0625rem solid #DC6A3C;/* cambia colore e spessore a piacere */
}

.accent-link {
background-color: #010101;
border-radius: 30px;
color: #A0A0A0;
letter-spacing: 6px;
}



.mobile-nav-toggle {
display: block;
position: absolute;
z-index: 9999;
background-color: transparent;
background-image: url('/assets/menu_31dp_DC6A3C_FILL0_wght400_GRAD0_opsz24.svg');
color: #DC6A3C;
background-repeat: no-repeat;
width:2rem;
border: 0;
aspect-ratio: 1;
top:1.5rem;
right: 2rem;
} 

.mobile-nav-toggle[aria-expanded="true"] {
background-image: url("/assets/close_31dp_DC6A3C_FILL0_wght400_GRAD0_opsz24.svg");
}

.art {
color: #DC6A3C;
font-family: 'Baskerville', serif;
font-size: 1rem;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 0.08rem

}

.Project {
color: #c9c9c9;
font-family: 'Baskerville', serif;
font-size: 1rem;
font-weight: lighter;
text-transform: uppercase;
  letter-spacing: 0.08rem
}

.data {
color: #c9c9c9;
font-family: 'Orbitron', sans-serif;
font-size: 0.5rem;
}



.container {
  
  position: relative;        /* serve per il posizionamento assoluto del bottone */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw; /* 100% della larghezza della finestra */
  margin: 0;
  padding: 0;
  margin-top: 2rem;
  margin-bottom: 6rem;
}

/* Immagine */
.photo1 {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* riempie il box senza deformarsi */
  display: block;
  margin-top: 3rem;
}

   
  .tomskate {
     width: 100vw; 
    margin-top: 2rem;
  }


  .toskate {
     width: 100vw; 
    margin-top: 2rem;
    margin-bottom: 6rem;
  }

  .camskate.wobble-active {
    width: 100%;
  }

  .impianto img {
    width: 100vw; 
  margin-top: 2.5rem;
    
}


.prolungamento img {
    width: 100vw; 
  margin-top: 1rem;
    
}


.prolungamento {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;     /* Centra verticalmente (opzionale) */
    width: 100%;  
    margin-top:-3rem ;
  
    margin-bottom: 6rem;        /* Assicura che il contenitore occupi tutto lo spazio */
}





/* Bottone sopra l’immagine sezione intervista*/
.btn-overlay {
  position: absolute;
  bottom: 3rem;              /* distanza dal fondo */
  left: 25%;                 /* centrato orizzontalmente */
  transform: translateX(-50%);
  background-color: transparent;
  color: #000;
  border: solid 2px #DC6A3C;
  text-transform: uppercase;
  border-radius: 0px;
   padding: 0.4em 1rem;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.8s ease;
  font-family: orbitron;
  letter-spacing: 3px;
  font-size: small;
}


.blank {
  position: absolute;
  bottom: 1.8rem;              /* distanza dal fondo */
  left: 25%;                 /* centrato orizzontalmente */
  transform: translateX(-50%);
  background-color: transparent;
  color:#c9c9c9;
  border: solid 2px #DC6A3C;
  border-radius: 6px;
   padding: 0.4em 1rem;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.8s ease;
  font-family: orbitron;
  letter-spacing: 1px;;
}


/* Titoli sopra e sotto’immagine */
.title-overlay {
  position: absolute;
  width: 200px;
  left: 30%;
  color: #000000;
  text-transform: uppercase;
  bottom: 6rem;
}


.wi {

  font-family: 'Baskerville';
   font-size: 12px; 
   text-transform: uppercase;
    line-height: 1.8;
    letter-spacing: 0.7px;
    font-weight: 100;  
}




.article-title {
    width: 300px;
    max-width: 100%;
    text-align:start; /* Centra il testo all'interno del blocco di 600px */
    color: #c9c9c9; /* Colore scuro */
    font-family: 'Baskerville';
    font-size: 12px; 
    text-transform: uppercase;
    line-height: 1.8;
    letter-spacing: 0.7px;
    font-weight: 100;
  
  }



.tita {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #DC6A3C;
  font-size: 8px;
  line-height: 2;
  letter-spacing: 1px;
  bottom: 5rem;
  padding: 10px 15px;
  border-radius: 6px;
  width: 60%;
  font-family: Baskerville;
}



.tanimani{
 width: 100%; 
 height: auto; 
 display: block; 
 
}


img.tanas {
    width: 100%;
    max-width: none;
    padding: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    border-radius: 3px;
}


.video-skater-loop video {
    width: 100vw; 
    
}


/* 🎯 Definisce la sequenza di oscillazione circolare */
@keyframes wobble-circular {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(2deg); }
    40% { transform: rotate(-3deg); }
    60% { transform: rotate(1.5deg); }
    80% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0deg); } /* Torna alla posizione di riposo */
}

/* 🎯 Classe da attivare su click */
.camskate.wobble-active {
    animation: wobble-circular 0.9s ease-out; /* Durata 0.8 secondi */
    transform-origin: center; /* Assicura la rotazione dal centro */
}


.super-centered-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
    
    
}

/* 2. Contenitore delle Immagini (Larghezza Fissa) */
.header-image-container {
    position: relative; 
    width: 100vh; 
    max-width: 100%; 
    margin: 0; 
    overflow: hidden;
}

/* 3. Regole Generali per le Immagini Sovrapposte */
.header-image-container img {
    object-fit: contain; 
   height: 100%;
    transition: opacity 1s ease-in-out; 
    z-index: 1; 
       
}

/* 4. Ancora di Altezza */
#img-consiglieri {
    position: relative; 
    height: auto; 
        

}

/* 5. Immagine in Sovrapposizione */
#img-skate {
    position: absolute;
    top: 0;
    left: 0;
    transform: none !important;  
}

/* 6. Classi di Animazione (Gestite da JavaScript) */
.header-image-container .hidden-image {
    opacity: 0;
    z-index: 0;
}

.header-image-container .active-image {
    opacity: 1;
    z-index: 2;
}



/* 4. Stile del Bottone "Leggi di Più" */
.read-more-btn {
    width: 180px; /* Larghezza fissa per il bottone */
    padding: 10px 20px;
    background-color: transparent; /* Colore primario (es. blu) */
    color: #c9c9c9;
    border: none;
    border-top-right-radius: 0px;
    cursor: pointer;
    text-transform: uppercase;
    font-family: orbitron;
    border: solid 1px #CEC65D;
    margin-top: 12px;
    margin-bottom: 12px; /* Spazio sotto il bottone */
    letter-spacing: 3px;
    
    /* Nota: Questo bottone è già centrato grazie ad align-items: center sul .super-centered-wrapper */
}



.answer1{
color: #c9c9c9;

 max-width: 700px;
 font-weight: 100;
margin-inline: auto;
margin-top: 3rem;
margin-bottom: 1rem;
padding-inline: 2rem;
 font-family: 'Libre Baskerville', serif;
font-size: 0.8rem; 
letter-spacing: 0.05em;
line-height: 1.5rem;
}


.super-centered-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 1rem;
    }


  

.ronda {
 display: block;
 margin: 30px auto;
 margin-top: 3rem;
 width: 100%;
 height: auto;
 transform: none !important;
 border-radius: 3px;
}


.answeris {
 font-family: 'baskerville', serif;
justify-content: center !important;
font-size: 16px; /* Hai un piccolo errore: "1.rem" va corretto */
letter-spacing: 0.1em;
line-height: 2rem;
color: #A0A0A0;
max-width: 100%;
padding-inline: 3rem;
margin:0;
padding-bottom: 0%;
margin-top: 2rem;
}



.back-button {
width: 3.75rem;
height:3.75rem;
background-color: black;
color:rgb(220, 106, 60);
border: 1px solid rgb(220,106,60);
border-radius: 50%; /* rende il bottone perfettamente circolare */
display: flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
margin-bottom: 1rem;
padding-bottom: 7px;
padding-left: 5.5px;
}




.back-batton {
width: 3.75rem;
height:3.75rem;
background-color: black;
color:rgb(220, 106, 60);
border: 1px solid rgb(220,106,60);
border-radius: 50%; /* rende il bottone perfettamente circolare */
display: flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: all 0.3s ease;
margin-top: -2rem;
margin-bottom: 1rem;
padding-bottom: 7px;
padding-left: 5.5px;
}

.contenitore-affiancato {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 3rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}


}