/* ==========================================================================
   PAGINE PROGETTO (Brand Design, e in seguito Product Design / Graphic Design)
   Pagina normale che scorre (non a schermo intero come la home), scalata in
   proporzione alla larghezza. --u = 1 unità del design (canvas 1920 di larghezza).
   ========================================================================== */

@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; src: url("../fonts/BeVietnamPro-Medium.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; src: url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; src: url("../fonts/BeVietnamPro-Bold.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 800; src: url("../fonts/BeVietnamPro-ExtraBold.ttf") format("truetype"); }

/* Questa pagina riusa .sezione/.tela solo per l'introduzione (per avere le stesse proporzioni
   esatte della home), ma non ha altre sezioni a cui agganciarsi: l'aggancio (scroll-snap, attivo
   di norma su tutto il sito) qui andrebbe a "intrappolare" lo scorrimento sulla sola introduzione. */
html { scroll-snap-type: none !important; }

/* Contenitore esterno: sempre a tutta larghezza, come .sezione sulla home. Taglia le fasce
   colorate esattamente ai bordi della finestra (altrimenti "sconfinerebbero" per davvero e
   creerebbero una barra di scorrimento orizzontale). */
.tela-progetto-esterno {
  width: 100%;
  overflow-x: hidden;
}

.tela-progetto {
  /* container-type: la larghezza si misura sul contenitore stesso (100cqw), non sulla finestra
     (100vw), perché 100vw include la barra di scorrimento e sfaserebbe la scala rispetto alla
     home (che usa 100cqw sulla sua sezione): a parità di larghezza reale davano un --u diverso. */
  container-type: inline-size;
  --u: min(100cqw / 1920, 100svh / 1080);
  position: relative;
  /* larghezza esplicita (non 100%) e centratura: quando la finestra è più larga di 16:9, --u è
     limitato dall'altezza e la home (.tela) si centra da sola lasciando margini uguali ai lati.
     Senza fare lo stesso anche qui, questa pagina restava incollata a sinistra e sembrava
     "spostata" rispetto all'introduzione. */
  width: calc(1920 * var(--u));
  margin: 0 auto;
  height: calc(1720 * var(--u));
}

/* Ogni blocco occupa la sua fetta verticale della pagina (serve perché "si accorga" di quando
   viene raggiunto scorrendo, per l'animazione di comparsa). I suoi contenuti usano coordinate
   relative alla cima del blocco stesso, non alla cima dell'intera pagina. */
.blocco-progetto {
  position: absolute;
  left: 0;
  top: calc(var(--top) * var(--u));
  width: 100%;
  height: calc(var(--h) * var(--u));
}

/* Fasce colorate a tutta larghezza dietro ai blocchi 01/02/03 */
.banda {
  position: absolute;
  left: 0;
  top: calc(var(--top) * var(--u));
  width: 100%;
  height: calc(var(--h) * var(--u));
  isolation: isolate;
}

.banda::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  z-index: -1;
}

/* grigio chiaro, al 10% di opacità (prova) */
.banda-grigia::before { background: rgba(96, 96, 96, 0.1); }

.banda-sfumata::before {
  background: linear-gradient(
    to bottom,
    rgba(96, 96, 96, 0.1) 0%,
    rgba(96, 96, 96, 0.1) 2.1%,
    rgba(96, 96, 96, 0) 74%,
    rgba(96, 96, 96, 0) 100%
  );
}

/* Etichetta rossa piccola (BRAND DESIGN, 01, 02, 03) */
.eyebrow {
  position: absolute;
  margin: 0;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-size: calc(15 * var(--u));
  letter-spacing: 0.06em;
  color: var(--rosso);
  white-space: nowrap;
}

/* Titolo grande (LOGHI & MERCH, CDT, FUXE, SIRIO) */
.titolo-progetto {
  position: absolute;
  margin: 0;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: calc(51.3162 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--nero);
  white-space: nowrap;
}

/* Sottotitolo di due righe (es. IDENTITÀ VISIVA / E MERCHANDISING), tra il titolo e il paragrafo */
.sottotitolo-progetto {
  position: absolute;
  margin: 0;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #6b6b6b;
  white-space: nowrap;
}

/* variante dei sottotitoli usata nella landing Graphic Design (come nel file testi.svg) */
.sottotitolo-grande {
  font-weight: 600;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #606060;
}

/* Paragrafo descrittivo */
.testo-progetto {
  position: absolute;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  color: var(--nero);
  white-space: nowrap;
}

/* Immagine ritagliata (il rettangolo fa da finestra, l'immagine dentro può essere più grande o ruotata) */
.riquadro-progetto {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--rx, 0) * var(--u));
  overflow: hidden;
}

.riquadro-progetto img {
  position: absolute;
  left: calc(var(--ix) * var(--u));
  top: calc(var(--iy) * var(--u));
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  max-width: none;
  display: block;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 0 0;
}

/* Immagine a filo del bordo destro della finestra (non solo della tela): il riquadro si allunga
   fino al bordo vero (--dx-destra, misurato in js/script.js). --taglio = unità dell'immagine
   tagliate oltre il bordo della tela: se c'è margine, prima si scopre la parte tagliata (l'immagine
   resta ferma), e solo quando è tutta visibile l'immagine si sposta verso il bordo. */
.riquadro-progetto.a-filo-destra {
  width: calc(var(--w) * var(--u) + var(--dx-destra, 0px));
}

.riquadro-progetto.a-filo-destra img {
  left: auto;
  right: calc(-1 * max(0px, var(--taglio, 0) * var(--u) - var(--dx-destra, 0px)));
}

/* Nell'introduzione (.sezione/.tela) il margine a destra della tela centrata si ricava in CSS:
   qui 100cqw è la larghezza vera della sezione, come per .fascia sulla home. */
.sezione .tela {
  --dx-destra: calc((100cqw - 1920 * var(--u)) / 2);
}

/* Immagine che va da --x fino al bordo destro vero della finestra, in proporzione (--ar = larghezza/altezza,
   --arn = lo stesso rapporto come numero): più la finestra è larga rispetto al 16:9, più l'immagine cresce,
   restando centrata in verticale su --yc. */
.riquadro-progetto.riempi-destra {
  width: calc((1920 - var(--x)) * var(--u) + var(--dx-destra, 0px));
  height: auto;
  aspect-ratio: var(--ar);
  top: calc(var(--yc) * var(--u) - ((1920 - var(--x)) * var(--u) + var(--dx-destra, 0px)) / var(--arn) / 2);
}

.riquadro-progetto.riempi-destra img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Adesivo decorativo (non ritagliato, solo ruotato) */
.sticker-progetto {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 0 0;
}

/* copyright, centrato */
.copy-progetto {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(35 * var(--u));
  margin: 0;
  text-align: center;
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: calc(22.104 * var(--u));
  letter-spacing: 0.4em;
  color: var(--rosso);
}

/* ==========================================================================
   MOBILE: layout a colonna singola, immagini sopra al testo
   ========================================================================== */
@media (max-aspect-ratio: 1 / 1), (max-width: 700px) {
  :root { --m: calc(min(100vw, 520px) / 390); }

  /* stessa larghezza massima della home (520 px), centrata */
  .tela-progetto {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    height: auto;
    padding: calc(50 * var(--m)) calc(24 * var(--m)) 0;
  }

  /* introduzione: stessa gabbia (.sezione/.tela) della home, stesso spazio per la barra fissa in cima.
     I testi stanno a sinistra con lo stesso margine dei blocchi sotto, come su desktop. */
  .sezione .tela {
    padding: calc(100 * var(--m)) calc(24 * var(--m)) 0;
    align-items: stretch;
  }

  .blocco-progetto {
    position: relative;
    top: auto;
    height: auto;
    padding: calc(40 * var(--m)) 0;
    isolation: isolate;
  }

  /* fasce colorate: come su desktop, a tutta larghezza dietro al blocco che le segue */
  .banda { display: none; }

  .banda + .blocco-progetto::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    z-index: -1;
  }

  .banda-grigia + .blocco-progetto::before { background: rgba(96, 96, 96, 0.1); }

  /* sfumata: grigia fino all'inizio della foto, poi schiarisce insieme allo sfondo della foto (che arriva a 253,
     quasi bianco, a circa il 70% della sua altezza), e diventa bianca subito sotto.
     --rapporto = larghezza / altezza della foto principale del blocco; 342 = larghezza della foto su mobile */
  .banda-sfumata + .blocco-progetto::before {
    background: linear-gradient(
      to bottom,
      rgba(96, 96, 96, 0.1) 0,
      rgba(96, 96, 96, 0.1) calc(40 * var(--m)),
      rgba(96, 96, 96, 0.0126) calc((40 + 0.7 * 342 / (var(--rapporto, 1))) * var(--m)),
      rgba(96, 96, 96, 0.0126) calc((40 + 342 / (var(--rapporto, 1))) * var(--m)),
      rgba(96, 96, 96, 0) calc((80 + 342 / (var(--rapporto, 1))) * var(--m))
    );
  }

  /* riga del copyright: meno spazio sopra e sotto */
  .blocco-progetto:has(.copy-progetto) { padding: calc(10 * var(--m)) 0 calc(36 * var(--m)); }

  .eyebrow,
  .titolo-progetto,
  .sottotitolo-progetto,
  .testo-progetto {
    position: static;
    white-space: normal;
  }

  .eyebrow { font-size: calc(12 * var(--m)); }

  .titolo-progetto {
    margin-top: calc(6 * var(--m));
    font-size: calc(30 * var(--m));
  }

  .sottotitolo-progetto {
    margin-top: calc(4 * var(--m));
    font-size: calc(12.5 * var(--m));
  }

  .sottotitolo-progetto br { display: none; }

  .testo-progetto {
    margin-top: calc(14 * var(--m));
    font-size: calc(14.5 * var(--m));
    line-height: 1.45;
  }

  .testo-progetto br { display: none; }

  .riquadro-progetto,
  .sticker-progetto { display: none; }

  /* su mobile ogni blocco mostra una sola immagine (quella indicata con la classe "principale"), a piena larghezza,
     sopra al testo, inquadrata esattamente come su desktop: stesse proporzioni del riquadro, nessun taglio in più */
  .principale {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--w) / var(--h);
    margin-bottom: calc(18 * var(--m));
    order: -1;
    overflow: hidden;
  }

  .blocco-progetto:has(.principale) {
    display: flex;
    flex-direction: column;
  }

  .principale img {
    left: calc(var(--ix) / var(--w) * 100%);
    top: calc(var(--iy) / var(--h) * 100%);
    width: calc(var(--iw) / var(--w) * 100%);
    height: calc(var(--ih) / var(--h) * 100%);
    max-width: none;
    transform: none;
  }

  /* nell'introduzione la foto va da un bordo all'altro dello schermo */
  .sezione .riquadro-progetto.principale {
    top: auto;
    width: auto;
    margin: 0 calc(-24 * var(--m)) calc(18 * var(--m));
  }

  /* l'immagine "riempi-destra" (introduzione Product) intera, nelle sue proporzioni */
  .riquadro-progetto.riempi-destra { aspect-ratio: var(--ar); }

  .riquadro-progetto.riempi-destra img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* i tre link in alto nell'introduzione non servono su mobile */
  .menu-home {
    display: none;
  }

  .copy-progetto {
    position: static;
    margin: 0;
    font-size: calc(9.5 * var(--m));
  }
}