/* Sezione “pin” */
.pin-section{
  height: 280vh;           /* spazio scroll per lo scrub */
  position: relative;
  --frame: 10px;
  --frameColor: rgba(255,255,255,.92);
}

.pin-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  --p: 0;
}
/* MOSAIC: posizionamento assoluto, così possiamo muovere tutto via transform */

.mosaic{
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  --zoom: calc(1 + var(--p) * 2.35);
}

/* clip interno: evita di mostrare “fuori” e permette di tagliare le laterali */
/* Tile base */
.tile{
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: #ddd;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  will-change: transform, opacity, border-radius;
}
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  border: var(--frame) solid var(--frameColor);
  pointer-events:none;
  z-index:2;
}
.tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.t1{ left: 0%;   top: 0%;   width: 33.6%; height: 49.5%; }
.t2{ left: 0%;   top: 50.5%;width: 33.6%; height: 49.5%; }

.t6{ left: 66.4%;top: 0%;   width: 33.6%; height: 49.5%; }
.t7{ left: 66.4%;top: 50.5%;width: 33.6%; height: 49.5%; }

.t3{ left: 33.6%;top: 0%;   width: 32.8%; height: 33.1%; }
.t4{ left: 33.6%;top: 33.5%;width: 32.8%; height: 33.1%; } /* CENTRALE */
.t5{ left: 33.6%;top: 66.9%;width: 32.8%; height: 33.1%; }

/* centrale: zoom + leggero shift per “riempire” */
/* CENTRALE REWORK CLEAN */
.t4{
  left: calc(33.6% - (var(--p) * 33.6%));
  top:  calc(33.5% - (var(--p) * 33.5%));

  width:  calc(32.8% + (var(--p) * 67.2%));
  height: calc(33.1% + (var(--p) * 66.9%));

  border-radius: calc(10px - (var(--p) * 10px));

  transform: none;
  box-shadow: none;
}

/* sinistra: scivolano fuori a sinistra */
.t1{ transform: translate3d(calc(var(--p) * -55vw), calc(var(--p) * -6vh), 0) scale(calc(1 - var(--p)*0.08)); opacity: calc(1 - var(--p)*0.65); }
.t2{ transform: translate3d(calc(var(--p) * -55vw), calc(var(--p) *  6vh), 0) scale(calc(1 - var(--p)*0.08)); opacity: calc(1 - var(--p)*0.65); }

.t3{
  transform:
  translate3d(0, calc(var(--p) * -80vh), 0)
    scaleX(var(--zoom))
    scaleY(calc(1 - (var(--p) * 0.08)));
  transform-origin: center center;
  opacity: calc(1 - (var(--p) * 0.65));
}
.t5{
  transform:
  translate3d(0, calc(var(--p) * 80vh), 0)
  scaleX(var(--zoom))
  scaleY(calc(1 - (var(--p) * 0.08)));
  transform-origin: center center;
  opacity: calc(1 - (var(--p) * 0.65));
}
/* destra: scivolano fuori a destra */
.t6{ transform: translate3d(calc(var(--p) * 55vw), calc(var(--p) * -6vh), 0) scale(calc(1 - var(--p)*0.08)); opacity: calc(1 - var(--p)*0.65); }
.t7{ transform: translate3d(calc(var(--p) * 55vw), calc(var(--p) *  6vh), 0) scale(calc(1 - var(--p)*0.08)); opacity: calc(1 - var(--p)*0.65); }

/* quando sei quasi full, togli anche il frame bianco per effetto pulito */
.mosaic.is-full .tile::before{ opacity: 0; }

@media (max-width: 1100px){
  /* più crop laterale: stringe lo spazio disponibile senza spostare il centro */
  .pin-sticky{ padding: 0 12px; }
  .mosaic{ width: 100%; }
}
/* mobile */
/* iOS viewport fix: usa le nuove unità quando disponibili */
.pin-sticky{
  height: 100vh;
}
@supports (height: 100svh){
  .pin-sticky{ height: 100svh; }
}
/* Mobile: meglio semplificare (poggio stessa filosofia: mobile diverso) */
@media (max-width: 900px){

  /* durata più breve su mobile (più “cinema”, meno scroll infinito) */
  .pin-section{ height: 170vh; }
  /* poco padding per far respirare ma senza tagli */
  .pin-sticky{
    padding: 0 12px;
  }
  /* mosaic: centrata e con crop interno */

.mosaic{
  position: relative;
  height: 100%;
  width: 100%;
  padding: var(--pad);
  overflow: hidden;
  border-radius: 0;
  --zoom: calc(1 + var(--p) * 2.35);
}

  /* cornice più sottile su mobile */
  .tile::before{
    border-width: 4px;
  }
}

.pin-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
}

.pin-copy{
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 56px);
}
.pin-copy__inner{
  max-width: 520px;
  color: #fff;
  pointer-events: auto;

  opacity: clamp(0, calc((var(--p) - 0.62) * 3.4), 1);
  transform: translateY(calc(28px - (clamp(0, calc((var(--p) - 0.62) * 3.4), 1) * 28px)));
  transition: opacity .2s linear, transform .2s linear;
}

.pin-copy__eyebrow{
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .9;
}

.pin-copy__title{
  margin: 0 0 18px;
  font-family: var(--serif, var(--pgk-font-serif));
  font-weight: 400;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: .02em;
  color: #fff;
}

.pin-copy__text{
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.9);
}

.pin-copy__cta{
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.65);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}

.pin-copy__cta:hover{
  color: #fff;
  opacity: .82;
  text-decoration: none;
}