/* =====================================================
   RESET / BASE
===================================================== */

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: contain;
  font-synthesis: none; /* evita finti bold/italic */
}

/* Applica lo stile alla selezione di testo */
::selection {
  background-color: rgb(0, 0, 0); 
  color: rgb(236, 235, 235); 
}

/* Opzionale: per Firefox */
::-moz-selection {
  background-color: rgb(0, 0, 0); 
  color: rgb(236, 235, 235);  
}


/* ----------- TEXT STYLES ----------- */

@font-face {
  font-family: 'SF-Pro';
  src: url('fonts/SF-Pro-Display-Bold.woff2') format('woff2'),
       url('fonts/SF-Pro-Display-Bold.woff2') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Notinter';
  src: url('fonts/Notinter-Regular.woff2') format('woff2'),
       url('fonts/Notinter-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* H1 */
h1 {
  font-family: 'Notinter', sans-serif;
  font-size: clamp(22px, 1.6vw, 32px);
  line-height: 1vw;
  letter-spacing: 0em;
  color: rgb(0, 0, 0);
  position: relative;
  margin: 0;
  display: flex;
    flex-wrap: nowrap; 
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  -webkit-user-drag: none;    
  user-select: none; 
  -webkit-user-select: none;

}

#text {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.letter {
  display: inline-block;
  position: relative;
  white-space: pre;
}


/* Body dafault */
body, .text-main {
  font-family: 'SF-Pro', sans-serif;
  font-weight: 800;
  font-size: clamp(10pt, 0.75vw, 15.5pt);
  line-height: 1.20;
  letter-spacing: 0.03em;
  color: rgb(224, 224, 224); 
  display: block;
}

/* Link nello stile body */
body a {
  color: rgb(0, 0, 0);
  text-decoration: underline;
}

body a:hover {
}

/* Variante body */
.text-alt {
  font-family: 'SF-Pro', sans-serif;
  font-weight: 300; /* ExtraBold */
  font-size: clamp(10.5pt, 0.80vw, 16pt);
  line-height: 1.20;
  letter-spacing: 0.03em;
  color: rgb(0, 0, 0);
  display: block;
}

.text-alt p {
  margin: 0;          /* elimina spazio sopra e sotto */
  padding: 0;         /* opzionale, solo se ci fosse padding di default */
  display: block;     /* resta a capo ma senza spazio aggiuntivo */
}

/* Variante body indent */
.text-alt p:nth-of-type(even) {
  margin-left: 80pt;
}

.placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1); /* scala di partenza */
  color: rgb(0, 0, 0);
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease; /* transizioni separate */
  pointer-events: none;
  opacity: 1;
    -webkit-user-drag: none;    
  user-select: none; 
  -webkit-user-select: none;
}

#copy-feedback {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#copy-feedback.active {
  position: relative;
  display: inline-flex;
  justify-content: center;
  z-index:1100;
  opacity: 1;
}


/* ----------- BUTTON STYLES ----------- */

 .navbar-container.active .placeholder {
    opacity: 0;
    filter: blur(5px);
    transform: translate(-50%, -50%) scaleX(2); /* stretch orizzontale + blur */
  }

  .nav-btn {
    flex: 1;
    width: 9.5em;
    height: 1.85em;
    border: none;
    border-radius: 0em;
    background: transparent;
    color: transparent;
    font-weight: 800;
    font-size: clamp(9pt, 0.8vw, 12pt);
    cursor: pointer;
    transition: all 0s ease;
    position: relative;
    overflow: hidden;
      -webkit-user-drag: none;    
  user-select: none; 
  -webkit-user-select: none;
  }

  .navbar-container.active .nav-btn {
    color: black;
  }

  .navbar-container.animating .nav-group {
    pointer-events: none;
  }

  .nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    filter: blur(0px);
    transition: all 0s ease;
    z-index: 0;
  }

  .nav-btn:hover::before,
  .nav-btn.active::before {
    opacity: 1;
    filter: blur(0px);
  }

  .nav-btn span {
    position: relative;
    z-index: 1;
    transition: color 0s ease;
  }

  .nav-btn:hover span,
  .nav-btn.active span {
    color: white;
  }

  a.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  /* ===== CLOSE CURSOR ===== */
#close-cursor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  background: none;
  border: none;
  color: black;
}

#close-cursor.hidden {
  display: none;
}

#zoom-close-cursor {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 850;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  background: none;
  border: none;
  color: white;
}

#zoom-close-cursor.hidden {
  display: none;
}

  /* === STANDARD BUTTON === */

  .standard-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5em;
    height: 1.85em;
    border-radius: 10em;
    border: none;
    font-weight: 800;
    font-size: clamp(9pt, 0.8vw, 12pt);
    cursor: pointer;
    background-color: rgb(255, 255, 255,0.2); 
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.035), rgba(0,0,0,0.035));
    background-blend-mode: multiply;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    color: black;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0s ease;
    width: auto;
      -webkit-user-drag: none;    
  user-select: none; 
  -webkit-user-select: none;
  }

  .standard-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    transition: all 0s ease;
    z-index: 0;
  }

  .standard-button:hover::before {
    opacity: 1;
  }

  .standard-button span {
    position: relative;
    z-index: 1;
    color: black;
    transition: color 0s ease;
  }

  .standard-button:hover span {
    color: white;
  }

  /* adattamenti per work */

.project-overlay-btn {
  opacity: 0;
  position: absolute;
  top: 33.33vh;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  color: rgb(255, 255, 255);
  background-color: #000;
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

.project-overlay-btn::before {
  display: none;
}

.container.is-media-hover .project-overlay-btn {
  opacity: 1;
  pointer-events: auto;
  z-index: 1000;
}

  /* === GRADIENT BUTTON === */
.gradient-btn {
  flex: 1;
  width: 8.5em;
  height: 1.85em;
  border: none;
  border-radius: 0em;
  background: transparent;
  color: transparent;
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0s ease;
    -webkit-user-drag: none;    
  user-select: none; 
  -webkit-user-select: none;
}

/* Testo con gradiente animato */
.gradient-btn .btn-text {
  background-image: linear-gradient(270deg, #777777, #0b083c, #9893b7);
  background-size: 1000% 1000%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 8s ease infinite;
  position: relative;
  z-index: 1;
  transition: color 0s ease, -webkit-text-fill-color 0.2s ease;
}

/* Animazione del gradiente */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover: sfondo gradiente animato, testo bianco pieno */
.navbar-container.active .gradient-btn:hover {
  background: linear-gradient(270deg, #777777, #0b083c, #9893b7);
  background-size: 1000% 1000%;
  animation: gradientMove 8s ease infinite;
  transition: all 0s ease;
}

.gradient-btn:hover .btn-text,
.gradient-btn.active .btn-text {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: white;
  color: white;
}

/* Link style */
a.gradient-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}



.link-move {
  color: rgb(0, 0, 0);
  text-decoration: none;
  transition: transform 0.3s ease;
  display: inline-block; /* necessario per far funzionare transform */
}

.link-move:hover {
  transform: translateX(20px);
}

/* WORK */

.work-button {
    align-items: center;
    justify-content: center;
    padding: 0 2.5em;
    height: 1.85em;
    border-radius: 10em;
    border: none;
    font-weight: 800;
    font-size: clamp(9pt, 0.8vw, 12pt);
    cursor: pointer;
    background-color: none; 
    color: black;
    text-decoration: none;
    -webkit-user-drag: none;    
    user-select: none; 
    -webkit-user-select: none;
  }

  .work-button:hover {
    background-color: black; 
    color: rgb(255, 255, 255);
    text-decoration: none;
    -webkit-user-drag: none;    
    user-select: none; 
    -webkit-user-select: none;
  }


/* GALLERY */

.gallery-section {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  transform: scale(1.25);
}

.gallery-runner {
  position: absolute;
  inset: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  -webkit-user-select: none;
}

.gallery-runner:active {
  cursor: grabbing;
}

.gallery {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6em;
  padding: 3em;
  width: 100vw;
}

.item {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.item img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  transition: all 2s ease;
}

.item img:hover {
  width: auto;
  height: 95%;
  max-width: 95%;
  max-height: 95%;
  transition: none; /* nessuna animazione entrando in hover */
}

.sound-toggle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 800;
}

.sound-toggle::before {
  background: none !important;
  opacity: 0 !important;
}
.sound-toggle:hover::before,
.sound-toggle:focus::before,
.sound-toggle:active::before {
  background: none !important;
  opacity: 0 !important;
}

/* =====================================================
   ZOOM OVERLAY
===================================================== */
#zoomOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(23px);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s ease;
}

#zoomOverlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

#zoomInner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

#zoomImage {
  object-fit: contain;
  display: block;
  align-self: center;
}

#zoomImage,
#zoomLink {
  pointer-events: auto;
}

.zoom-spacer {
  height: 12px;
}

#zoomOverlay,
#zoomOverlay * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

#zoomOverlay img,
#zoomOverlay a {
  -webkit-user-drag: none;
}


.description {
  font-family: 'SF-Pro', sans-serif;
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: white;
}

.small-link-move {
  font-family: 'SF-Pro', sans-serif;
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: white;
  text-decoration: underline;
  display: inline-block;
  transition: transform 0.3s ease;
}

.small-link-move:hover {
  transform: translateX(10px);
}



/* =====================================================
   DIV
===================================================== */


/* ====================================== NAVBAR ======================================= */
/* ----------- NAVBAR ----------- */

.navbar-container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background-color: rgb(255, 255, 255,0.2); 
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.035), rgba(0,0,0,0.035));
    background-blend-mode: multiply;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    padding: 0;
    border-radius: 10em;
    z-index: 1000;
    transition: all 0.4s ease;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .navbar-top { top: 2em; }
  .navbar-bottom { bottom: 2em; }

  .nav-group {
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
  }

  .navbar-container.active .nav-group {
    opacity: 1;
    filter: blur(0);
  }

  .navbar-container.clickable .nav-group {
    pointer-events: auto;
  }

 /* ----------- CONTACTS ----------- */

.contacts-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.6s ease;
  pointer-events: none;
  z-index: 999;
}

.contacts-overlay.active {
  background: rgba(255,255,255,0); /* leggero velo se vuoi */
  backdrop-filter: blur(50px);
  pointer-events: auto; /* <--- BLOCCA i clic sotto */
}


 .contacts-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.4s ease;
  z-index: 1000;
  pointer-events: none;
  filter: blur(23px);
}

.contacts-container.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  filter: blur(0px);
}


/* ====================================== PROJECTS ======================================= */

.fixed-div { 
	z-index: -1; 
    position:fixed;
      left:0;
      width:100%;
      height:100%;
      display:grid;
      grid-template-columns: 1fr 1fr 2fr;
      align-items:center; /* centra verticalmente */
      justify-content: top;
      padding:1.6em;
      box-sizing:border-box;
      gap:0.8em;
}

 .col {
    box-sizing: border-box;
    padding-left: 0.05em;
}

.col p, .col h2 {
  padding-left: 0.05em;
}

/* per progetti */

.image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    overflow-x: hidden;
}

.blank-content {
    margin-bottom: 100vh; 
}

.image-container div, 
.image-container img, 
.image-container video {
  line-height: 0;
  scroll-snap-align: center;
}

/* ===============================   WORK   ================================ */

/* ----------- LAYOUT RUNNER ----------- */



/*
.section {
  overflow: hidden;
}

.runner-spacer {
  height: 3.85em;
  flex-shrink: 0;
}
  
.runner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.runner a.container {
  height: auto;
  width: 100vw;
  display: flex;
  justify-content: center;
    position: relative;
  z-index: 1;
}

.runner a.container.is-media-hover {
  z-index: 10;
}

.media-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  height: 100%;
  width: auto;
}

.media-wrapper img,
.media-wrapper video {
  height: 100%;
  width: auto;
  object-fit: cover;
}*/

/* ================= DESKTOP NEW GRID LAYOUT ================= */


  .section {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;   /* centra blocco colonne orizzontalmente */
    align-items: center;       /* centra blocco colonne verticalmente */
    overflow: hidden;
  }

  .runner {
    display: flex;
    flex-direction: row;
    align-items: center;       /* centra contenuto verticale dentro colonne */
    justify-content: center;
    width: max-content;        /* non forza 100vw */
    height: auto;
    gap: 0;                    /* nessuno spazio extra tra colonne */
  }

  .runner-column {
    flex: 0 0 auto;            /* evita stretching */
    width: calc(100vw / var(--col-count));
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra contenuto nella colonna */
    align-items: center;
  }

.runner-column a.container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative; /* FONDAMENTALE */
}

.media-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

  .media-wrapper img,
  .media-wrapper video {
    width: 100%;
    height: auto;
    display: block;
      transition: opacity 0.35s ease, filter 0.35s ease;
    will-change: opacity, filter;
  }

  .runner-column:hover .media-wrapper img,
  .runner-column:hover .media-wrapper video {
    opacity: 0;
    filter: blur(50px);
  }

/* primo progetto della colonna */
.runner a.container:first-child .media-wrapper img,
.runner a.container:first-child .media-wrapper video {
  transform-origin: top center;
}

/* ultimo progetto della colonna */
.runner a.container:last-child .media-wrapper img,
.runner a.container:last-child .media-wrapper video {
  transform-origin: bottom center;
}

.runner a.container.is-active {
  opacity: 1;
}

#fullscreen-viewer {
  position: fixed;
  inset: 0;
  z-index: -100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fullscreen-viewer img,
#fullscreen-viewer video {
  position: relative;
  max-width: none;
  max-height: none;
}

/* =============================== SIDE INFO ================================ */

/* variabile spazio tra stringhe work */
:root {
  --project-info-gap: 15vw;
}

.project-info-left,
.project-info-right {
  position: fixed;
  display: flex;
  gap: var(--project-info-gap);
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 1em;
    height: 1.85em;
    border-radius: 10em;
    border: none;
    background-color: black; 
    color: white;
    text-decoration: none;
  font-weight: 800;
  font-size: clamp(9pt, 0.8vw, 12pt);

  pointer-events: none;
  z-index: 400;
      
}

.project-info-left {
  left: 1.4em;
}

.project-info-right {
  justify-content: flex-end;
  right: 1.4em;
  text-align: right;
} 


.project-name-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 2.5em;
  height: 1.85em;

  border-radius: 10em;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);

  font-size: clamp(9pt, 0.8vw, 12pt);
  font-weight: 800;

  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;

  opacity: 0;
  transition: opacity 0.35s ease;

  z-index: 5;
}

.floating-title,
.floating-meta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  opacity: 0;
  transition: opacity .25s ease;

  pointer-events: none;
}

.floating-title {
  top: 33vh;
}

.floating-meta {
  top: 66vh;
}


.container.is-container-hover img,
.container.is-container-hover video {
  opacity: 0;
}

  .runner-column:hover .project-name-placeholder {
    opacity: 1;
  }

.container.is-media-hover img,
.container.is-media-hover video {
  opacity: 1;
}


.project-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  transition: color 0.4s ease, opacity 0.4s ease;
  color: rgba(0, 0, 0, 1); /* testo di base nero */

}

/* =============================== 
   HOMEPAGE E ABOUT 
================================ */
/* sezioni */
.hero {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.about { 

	z-index: 100; 
    position:relative;
      display:grid;
      grid-template-columns: 2fr 1fr 1fr;
      align-items:start; 
      align-content:start;
      min-height: 100vh;
      padding-top:45vh;
      padding-bottom:5.4em;
      padding-left:1.6em;
      padding-right:1.6em;
      box-sizing:border-box;
      background-color: white;
      gap:0.8em;
      scroll-snap-align: start;
}

#letters-wrapper {
  position: relative;
  width: 100%;
  height: 100vh; /* o quello che vuoi */
  overflow: hidden;
}

.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto; 
}


.scroll-container.no-snap {
  scroll-snap-type: none;
}

.custom-lead{margin-top:70px;}



/* =====================================================
   RESPONSIVE VISIBILITY
===================================================== */

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {


  .mobile-only {
        display: block;
        text-align: center; /* testo centrato solo mobile */
    }
    .desktop-only {
        display: none;
    }

  html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  } 

  .hero {  
        min-height: 100vh;
        width: 100%;
  }
    
  body {
    font-weight: 300; 
    font-size: clamp(9.5pt, 4vw, 11.5pt);
    line-height: 1.2;
  }

  .text-alt {
    font-size: clamp(9.5pt, 4vw, 11.5pt);
    line-height: 1.2;
    letter-spacing: 0.015em;
  }

  .text-alt p:nth-of-type(even) {
    margin-left: 0;
  }

  .description {
    font-size: clamp(9.5pt, 4vw, 11.5pt);
    line-height: 1.2;
    letter-spacing: 0.015em;
}

.small-link-move {
    font-size: clamp(9.5pt, 4vw, 11.5pt);
    line-height: 1.2;
    letter-spacing: 0.015em;
}

.small-link-move:hover {
  transform: none;
}

  .line-break {
    flex-basis: 100%;       /* equivale a <br> ma per flex */
    height: 0;
  }

  .standard-button {
    height: 2.1em;
    padding: 0 2.5em;
    font-size: clamp(9.5pt, 4vw, 11.5pt);
  }

  /* ================== NAVBAR ==================== */

  .navbar-container {
    width: 85vw;
    max-width: 85vw;
  }

  .nav-group {
    width: 100%;
    height: 2.1em;
  }

  .navbar-top { top: 4vh; }
  .navbar-bottom { bottom: 4vh; }

  .nav-btn,
  .gradient-btn {
    flex: 1;
    height: 100%;
    width: auto; /* sovrascrive i 7.5em desktop */
  }

  .gradient-btn {
  font-size: clamp(9.5pt, 4vw, 11.5pt);
  }

  .nav-btn {
    font-size: clamp(9.5pt, 4vw, 11.5pt);
  }

  .placeholder {
    font-size: clamp(9.5pt, 4vw, 11.5pt);
  }

  .contacts-container {
    gap: 0.6em;
  }

  /* ================== HOME ==================== */

  .about {
    grid-template-columns: 1fr; /* UNA SOLA COLONNA */
    padding-top:6em;
    padding-bottom:20vh;
  }

  /* ================== WORK ==================== */

    .section {
    display: block;
    height: 100dvh;
    overflow: hidden;
        scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .runner {
    width: 100vw;
    height: 100dvh;

    flex-direction: column;

    overflow-y: auto;

    justify-content: flex-start;
    align-items: stretch;

    scroll-snap-type: y mandatory;

    -webkit-overflow-scrolling: touch;
  }

  .runner a.container {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
  }

  .runner::-webkit-scrollbar {
    display: none;
  }

  /* rimuovo gli spacer su mobile */
  .runner-spacer {
    display: none;
  }

  .container {
    height: 100vh;
    scroll-snap-align: center;
    flex-shrink: 0;
  }

  /* media centrato */
  .media-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .media-wrapper img,
  .media-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-info-left,
  .project-info-right,
  .project-name-placeholder {
    display: none;
  }

  .project-overlay-btn {
    opacity: 1;
    pointer-events: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
    z-index: 200;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .container.is-media-hover .project-overlay-btn,
  .container.is-container-hover .project-overlay-btn {
    opacity: 1 !important;
  }

  /* ================== PROJECT ==================== */

  /* ONE COLUMN FIXED-DIV */
  .fixed-div {
    display: grid;
    grid-template-columns: 1fr; /* UNA COLONNA */
  }

  /* testo centrato solo mobile */
  .fixed-div .text-alt.mobile-text {
    text-align: center;
  }

  .image-container {
    scroll-snap-type: none;
}

.image-container div,
.image-container img,
.image-container video {
  width: 100%;
  line-height: 0;
}

  /* ================== GALLERY ==================== */

  .gallery {
    grid-template-columns: repeat(5, 1fr); /* 5 colonne */
    gap: 1.3em;
    padding: 0.65em;

  }

  /* Eventuale riduzione scaling del runner per adattarsi al viewport */
  .gallery-section {
    transform: scale(2.4); /* scala normale su mobile */
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }



}