/* Reset base per evitare margini e padding indesiderati */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  position: relative;
  padding-top: 20px;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 50% 45%,
      #1c1c20 0%,
      #141417 35%,
      #0e0e11 70%,
      #08080a 100%
    );
  overflow-x: hidden;
}

a {
  color: inherit;        /* eredita il colore dal testo intorno */
  text-decoration: none; /* rimuove la sottolineatura */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../Immagini-GENERAL/Seamless_1Sfondi.svg");
  background-repeat: repeat;
  background-size: 12vw;      /* più grande = meno ripetizioni */
  opacity: 0.025;             /* quasi invisibile */
  filter: grayscale(100%) contrast(60%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,0.4) 75%,
      rgba(0,0,0,0.75) 100%
    );
  pointer-events: none;
  z-index: 1;
}




.wrapper {
  position: relative;
  top: 150px;
  display: flex;
  width: 100%;
  height: 1370px; /* esempio */
}





/* Esempio di body e pagina principale */
body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
}



/* Wrapper contenuti principali */
.page-wrapper {
  position: relative;
  z-index: 1; /* sopra tutto */
}



section {
  min-height: 850px;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
}




/* Sezione iniziale con gradiente come le altre */
.hero-section {
    /*height: 100vh;*/
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
    padding-top: 70px;
    /*background: linear-gradient(to left, #141e30, #121212); Sfondo uguale alle altre sezioni */
    display: flex;
    justify-content: center;
    align-items: center;
}



.bg-ratio {
  width: 100%;
  height: auto;
  display: block;
  opacity: 100%;        /* invisibile */
  pointer-events: none;
}


/* Parti che richiedono scorrimento */





/* Testo centrato nella sezione Hero */
.hero-text {
  color: #8E8E8E;
  font-family: 'EB Garamon', serif;
  font-size: 1.3rem;
  font-weight: 500;
  height: 100px;
  font-style: italic; 
  opacity: 60%;
  margin: 0;
  z-index: 1;                  /* sopra il background */
  /* Gradient da destra verso sinistra */
  /*background: linear-gradient(to left, #000000, #787878); /* giallo → arancione */
  /*-webkit-background-clip: text;  /* necessario per WebKit */
  /*-webkit-text-fill-color: transparent;*/
  /*background-clip: text;          /* standard */
  /*color: transparent;             /* fallback */
}




.gallery-header {
    padding: 40px 20px 10px;
}

.gallery-header h1 {
    margin: 0;
    font-size: 42px; /* Dimensione originale */
    font-weight: 300;
    color: #a58019;
    text-transform: uppercase;
    font-family: 'Cormorant SC', sans-serif;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Spaziatura bilanciata */
    letter-spacing: 1.2em;
    padding-left: 1.2em; 
    
    width: 100%;
    box-sizing: border-box;
}





/* AREA GALLERIA */
.gallery-stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Spazio di sicurezza per i bordi su mobile */
  box-sizing: border-box;
  overflow: hidden; /* Evita che il bagliore dell'opera crei scroll orizzontale */
}

/* MODIFICA QUESTO */
.artwork {
  position: relative;
  width: min(90vw, 900px);
  overflow: hidden; /* Fondamentale: non fa uscire il velo nero dai bordi */
  cursor: pointer;   /* Fa capire che l'opera è interattiva */
  transition: opacity 0.5s ease;
}



.artwork::before {
  content: "";
  position: absolute;
  /* Riduciamo l'espansione su mobile per non "sporcare" troppo lo sfondo */
  inset: -10%; 
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.12), /* Leggermente più visibile */
    transparent 70%
  );
  filter: blur(60px);
  z-index: -1;
}

/* VIDEO */
.film {
    width: 100%;
    height: auto;      /* Mantiene il rapporto d'aspetto dell'immagine */
    aspect-ratio: 16 / 9; /* Opzionale: forza l'immagine alla stessa forma del video */
    object-fit: cover; /* Se l'immagine ha proporzioni diverse, la taglia senza schiacciarla */
    display: block;
    
    /* Manteniamo lo stile della galleria */
    border: 1px solid rgba(212, 175, 55, 0.2); 
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Effetto hover per mantenere la coerenza della galleria */
.film:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    border-color: rgba(212, 175, 55, 0.6);
}

/* Nascondi controlli (già presente, ottimizzato) */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure {
    display: none !important;
    appearance: none;
}

/* Effetto Zoom sul Video al passaggio del mouse */
.artwork:hover .film {
    transform: scale(1.05);
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1); /* Movimento setoso */
}

/* --- NUOVO: Overlay con Titolo Opera --- */

.artwork-overlay {
  position: absolute;
  inset: 0; /* Copre tutto il video */
  background: rgba(0, 0, 0, 0.7); /* Velo nero trasparente */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Invisibile all'inizio */
  transition: opacity 0.6s ease-in-out;
  z-index: 10;
}

.artwork:hover .artwork-overlay {
  opacity: 0.9; /* Appare quando passi il mouse */
}

.artwork-info {
  text-align: center;
  transform: translateY(20px); /* Parte un po' più in basso */
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.artwork:hover .artwork-info {
  transform: translateY(0); /* Sale in posizione */
}

.artwork-title {
  font-family: 'Cormorant SC', serif;
  color: #a58019;
  font-size: clamp(22px, 3.5vw, 32px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 8px 0;
}

.artwork-year, .artwork-category {
  font-family: 'Cormorant SC', serif;
  color: rgba(165, 128, 25, 0.7);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.artwork-line {
  width: 30px;
  height: 1px;
  background: #a58019;
  margin: 12px auto;
  opacity: 0.4;
}

.artwork-link {
    text-decoration: none;
    display: block; /* Fondamentale perché il link occupi tutto lo spazio */
    cursor: pointer;
}

/* Evita che il browser colori i testi di blu/viola tipico dei link */
.artwork-link:visited, .artwork-link:active {
    color: inherit;
}







/* Gestione "Safe Area" per iPhone (Notch) */
@supports (padding-top: env(safe-area-inset-top)) {
  .top-bar {
    padding-top: env(safe-area-inset-top);
    height: calc(clamp(60px, 8vh, 75px) + env(safe-area-inset-top));
  }
}





/* Adattamento specifico per Desktop */
@media (min-width: 1024px) {
  .artwork {
    width: 60vw;
  }
}

/* --- TABLET (Schermi sotto i 1024px) --- */
@media (max-width: 1024px) {
    .gallery-header h1 {
        font-size: 32px;      /* Riduciamo leggermente il font */
        letter-spacing: 0.8em; /* Riduciamo lo spazio per farlo stare in riga */
        padding-left: 0.8em;
    }
}

/* --- MOBILE (Smartphone sotto i 480px) --- */
@media (max-width: 480px) {
    .gallery-header h1 {
        font-size: 20px;       /* Font molto più piccolo per piccoli schermi */
        letter-spacing: 0.4em; /* Spaziatura minima per mantenere la leggibilità */
        padding-left: 0.4em;
        line-height: 1.5;      /* Maggiore respiro verticale se va su due righe */
    }
}



/* --- RESPONSIVE OPERA & TITOLO --- */
@media (max-width: 768px) {
  
  /* Riduciamo leggermente lo zoom per non far "sbattere" il video contro i bordi */
  .artwork:hover .film {
    transform: scale(1.02);
  }

  /* Rendiamo il velo nero un po' più leggero su mobile per mantenere la visibilità */
  .artwork-overlay {
    background: rgba(0, 0, 0, 0.6);
  }

  /* Adattiamo il testo per schermi piccoli */
  .artwork-title {
    font-size: 20px;       /* Più piccolo e leggibile */
    letter-spacing: 0.2em; /* Meno spazio tra lettere per evitare che il testo si spezzi */
    margin: 6px 0;
  }

  .artwork-year, .artwork-category {
    font-size: 10px;       /* Raffiniamo i dettagli secondari */
    letter-spacing: 0.15em;
  }

  .artwork-line {
    width: 25px;           /* Accorciamo la linea decorativa */
    margin: 10px auto;
  }
}

/* Ottimizzazione per smartphone molto piccoli (sotto i 380px) */
@media (max-width: 380px) {
  .artwork-title {
    font-size: 18px;
  }
  
  .gallery-stage {
    padding: 10px; /* Riduciamo il padding esterno per dare più respiro al video */
  }
}