/* ============ AC GALLERY (GSAP) v2.2 ============ */
.ac-work{
  --ac-bg: #0a0a0b;
  --ac-ink: #e9e6df;
  --ac-ink-dim: #8a857b;
  --ac-line: rgba(233,230,223,.12);
  --ac-accent: #c9a961;
  --ac-gap: 24px;

  padding: 0;
  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 200;
}

/* ============ MASONRY a 3 colonne (sempre, anche mobile) ============ */
.ac-series{
  max-width:1600px;
  margin:0 auto;
  column-count: 3 !important;
  column-gap: var(--ac-gap);
}

.ac-piece{
  position:relative;
  display:block;
  width:100%;
  height:auto !important;
  margin: 0 0 var(--ac-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  cursor:pointer;
  aspect-ratio: auto !important;
}
.ac-piece.ac-hidden{ display:none !important; }

/* COPPIA: ogni 8 foto le ultime 2 escono dalle colonne e vanno affiancate a
   tutta larghezza. Due immagini grandi invece di una sola gigante: stesso
   respiro editoriale, ma si capisce cosa si sta guardando. */
.ac-duo-row{
  -webkit-column-span: all;
  column-span: all;
  display: flex;
  gap: var(--ac-gap);
  margin: var(--ac-gap) 0;
}
.ac-duo-row .ac-piece{
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
/* Se "Show more" non ha ancora rivelato nessuna delle due, la riga non occupa spazio. */
.ac-duo-row:not(:has(.ac-piece:not(.ac-hidden))){ display: none; }

.ac-frame{
  position:relative;
  overflow:hidden;
  width:100%;
  height:auto !important;
  will-change: clip-path;
  background:transparent;
  aspect-ratio:auto !important;
  min-height:0 !important;
  max-height:none !important;
}
.ac-frame img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
  object-position:initial !important;
  filter: grayscale(1) contrast(1.08) brightness(.95);
  will-change: transform, filter;
}
.ac-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 65%,rgba(10,10,11,.6));
  opacity:.45;transition:opacity .6s;
  pointer-events:none;
}
.ac-piece:hover .ac-frame::after{opacity:.2}

.ac-num{
  position:absolute;top:14px;left:14px;
  max-width:calc(100% - 28px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);
  padding:6px 12px;z-index:2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* meta nascosta — solo le foto */
.ac-meta{ display:none !important; }

/* ============ BARRA ALBUM ============ */
.ac-albums{
  max-width:1600px;
  margin:0 auto 44px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 32px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.ac-album{
  color:var(--ac-ink-dim);
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  transition:color .35s ease, border-color .35s ease;
}
.ac-album:hover{ color:var(--ac-ink); }
.ac-album.is-active{ color:var(--ac-ink); border-bottom-color:var(--ac-accent); }
.ac-album span{ opacity:.45; margin-left:7px; font-size:9px; }
.ac-empty{
  max-width:1600px;margin:0 auto;
  color:var(--ac-ink-dim);font-size:13px;letter-spacing:.1em;
}

/* ============ LOAD MORE ============ */
.ac-load-more-wrap{
  display:flex;
  justify-content:center;
  margin: 80px auto 0;
  max-width:1600px;
}
.ac-load-more{
  background:transparent;
  border:none;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  color:var(--ac-ink);
  font-family:inherit;
  font-weight:300;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding: 6px 2px;
  cursor:pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color .35s ease, text-underline-offset .35s ease, letter-spacing .35s ease;
}
.ac-load-more:hover{
  color: var(--ac-accent);
  text-underline-offset: 12px;
  letter-spacing: .28em;
}

/* ============ LIGHTBOX ============ */
.ac-lightbox{
  position:fixed; inset:0;
  /* Niente backdrop-filter: sfocare l'intera finestra a ogni fotogramma era la
     voce piu' cara proprio mentre la foto si muove, e sotto un fondo al 96%
     non si vedeva comunque. */
  background:rgba(8,8,9,.96);
  z-index:2000;
  opacity:0;
  pointer-events:none;
}
/* ============ TELEFONO: 2 colonne, non 3 ============
   A 390px tre colonne davano miniature da 98px: foto illeggibili. Due colonne
   raddoppiano abbondantemente l'area, e la coppia si impila a tutta larghezza
   restando il momento "grande" che spezza il ritmo. */
@media (max-width: 767px){
  .ac-work{ --ac-gap: 12px; }
  .ac-series{ column-count: 2 !important; }
  .ac-duo-row{ flex-direction: column; }
  .ac-duo-row .ac-piece + .ac-piece{ margin-top: var(--ac-gap) !important; }
  .ac-num{ top:10px; left:10px; font-size:9px; padding:5px 9px; letter-spacing:.16em; }
  .ac-albums{ gap:8px 20px; margin-bottom:28px; font-size:10px; letter-spacing:.16em; }
  .ac-load-more-wrap{ margin-top:44px; }
  .ac-lightbox-close{ top:16px; right:16px; width:40px; height:40px; }
  .ac-lightbox-caption{ bottom:20px; left:20px; }
}

/* ============ MOBILE (touch device): reveal CSS puro, no GSAP ============ */
/* Su touch device la galleria usa classi ac-mobile + ac-visible e un fade CSS.
   Niente clip-path, niente scale, niente will-change — per non interrompere
   lo scroll momentum di iOS/Android. */
@media (hover: none), (pointer: coarse) {
  .ac-piece.ac-mobile{
    opacity: 0;
    transition: opacity 0.9s ease-out;
  }
  .ac-piece.ac-mobile.ac-visible{
    opacity: 1;
  }
  .ac-frame,
  .ac-frame img{
    will-change: auto !important;
  }
  /* Colori sempre parzialmente saturi (niente hover da mouse su touch) */
  .ac-frame img{
    filter: grayscale(0.85) contrast(1.08) brightness(.95) !important;
  }
  /* Lightbox: niente blur (troppo costoso su GPU mobile) */
  .ac-lightbox{
    background: rgba(8,8,9,.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Scroll animations globali (ac-fade, ac-slide-up, ecc.) su mobile
     diventano un semplice fade via IntersectionObserver (niente GSAP) */
  .ac-mobile-fade{
    opacity: 0;
    transition: opacity 0.8s ease-out;
    will-change: auto !important;
  }
  .ac-mobile-fade.ac-mobile-visible{
    opacity: 1;
  }
}
.ac-lightbox.open{
  opacity:1;
  pointer-events:auto;
}

.ac-frame-clone{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  margin:0 !important;
  z-index:2001;
  cursor: zoom-out;
  will-change: transform;
  transform-origin: 0 0;
  backface-visibility: hidden;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.ac-frame-clone img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter: grayscale(1) contrast(1.08) brightness(.95);
  /* Nel clone si anima solo la trasformazione: tenere anche il filtro in
     will-change obbligherebbe il browser a preparare la pipeline dei filtri. */
  will-change: transform !important;
}
.ac-frame-clone::after{ display:none !important; }
/* A schermo pieno il luogo sta nella didascalia in basso: il badge sulla foto
   ripeterebbe la stessa scritta due volte. */
.ac-frame-clone .ac-num{ display:none !important; }

.ac-lightbox-close{
  position:fixed; top:32px; right:32px;
  width:48px; height:48px;
  background:transparent; border:1px solid var(--ac-line);
  cursor:pointer; padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s ease, transform .3s ease;
  z-index:2002;
}
.ac-lightbox-close:hover{ border-color:var(--ac-accent); transform:rotate(90deg); }
.ac-lightbox-close span{
  position:absolute; width:18px; height:1px; background:var(--ac-ink);
}
.ac-lightbox-close span:nth-child(1){ transform:rotate(45deg); }
.ac-lightbox-close span:nth-child(2){ transform:rotate(-45deg); }

.ac-lightbox-caption{
  position:fixed; bottom:32px; left:32px;
  display:flex; flex-direction:column; gap:4px;
  opacity:0;
  z-index:2002;
  pointer-events:none;
}
/* Stessa voce tipografica dell'etichetta sulla foto. */
.ac-lb-title{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ac-ink);
}
.ac-lb-year{
  font-size:10px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--ac-ink-dim);
}
body.ac-lb-open{ overflow:hidden; }