@font-face { font-family: "Gotham"; font-weight: 500; src: url("../fonts/Gotham-Medium.otf") format("opentype"); }
@font-face { font-family: "Gotham"; font-weight: 700; src: url("../fonts/Gotham-Bold.otf") format("opentype"); }
@font-face { font-family: "Gotham"; font-weight: 800; src: url("../fonts/Gotham-Black.otf") format("opentype"); }

:root {
  --nero: #1e1d1d;
  --rosso: #bd1f2d;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* --p: 0 = in cima (logo grande, niente barra), 1 = barra e logo piccolo al centro. Animato nel tempo, non legato alla velocità dello scorrimento */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

html {
  transition: --p 1.1s cubic-bezier(0.45, 0, 0.2, 1);
}

body {
  margin: 0;
  background: #fff;
  color: var(--nero);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
}

/* Ogni sezione occupa tutta l'altezza dello schermo; il design 1920x1080 ci sta dentro per intero, scalato in proporzione */
.sezione {
  position: relative;
  width: 100%;
  height: 100svh;
  container-type: size;
  overflow: hidden;
}

.tela {
  --u: min(100cqw / 1920, 100svh / 1080);
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
}

/* SCROLL-SNAP: scorrendo, la pagina si aggancia da sola a una sezione alla volta */
@media (min-aspect-ratio: 1 / 1) {
  html { scroll-snap-type: y mandatory; }

  .sezione {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* Su schermi verticali (telefoni) le sezioni mantengono il formato 16:9 */
@media (max-aspect-ratio: 1 / 1) {
  .sezione {
    height: auto;
    aspect-ratio: 16 / 9;
    container-type: inline-size;
  }
}

/* Testo posizionato per baseline (coordinate prese dal file Illustrator).
   --x = sinistra, --b = baseline, --fs = corpo, --lh = interlinea (opzionale) */
.t {
  position: absolute;
  margin: 0;
  left: calc(var(--x) * var(--u));
  top: calc((var(--b) - var(--lh, 0) / 2 - 0.36 * var(--fs)) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh, 0) * var(--u));
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

/* ANIMAZIONE DI COMPARSA: gli elementi con .rivela entrano quando la sezione è visibile */
.js .rivela {
  opacity: 0;
  transform: translateY(calc(40 * var(--u)));
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--r, 0s);
}

.js .visibile .rivela {
  opacity: 1;
  transform: none;
}

/* LINK: sottolineatura rossa al passaggio del mouse */
.menu .t {
  letter-spacing: 0.2em;
}

/* Voci del menu: al passaggio del mouse il testo diventa rosso e sotto compare una riga nera sottile, staccata dal testo (come nel logo) */
.menu .t {
  transition: color 0.3s ease;
}

.menu .t:hover {
  color: var(--rosso);
}

.menu .t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em;
  top: 0.96em;
  height: max(1px, 0.06em);
  background: var(--nero);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.menu .t:hover::after {
  transform: scaleX(1);
}

/* SEZIONE 1 */
.collage {
  position: absolute;
  left: calc(557.36 * var(--u));
  top: calc(150.28 * var(--u));
  width: calc(1386.6 * var(--u));
  height: calc(929.72 * var(--u));
  object-fit: cover;
  object-position: top;
}

.menu .t {
  font-weight: 700;
}

/* Le voci del menu della home svaniscono scorrendo (--p va da 0 a 1) */
.menu-home .t {
  opacity: calc(1 - 2 * var(--p, 0));
}

.scrollato .menu-home .t {
  pointer-events: none;
}

.intro {
  text-align: left;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.pulsante {
  position: absolute;
  left: calc(120.62 * var(--u));
  top: calc(615.7 * var(--u));
  width: calc(349.8 * var(--u));
  height: calc(107.52 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--rosso);
  color: #fff;
}

.pulsante .t {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.24em;
}

.pulsante .t::after { display: none; }

.pulsante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pulsante:hover::after {
  opacity: 0.12;
}

.js .visibile .pulsante:hover {
  transform: translateY(calc(-3 * var(--u)));
  transition-delay: 0s;
  transition-duration: 0.3s;
}

/* BARRA FISSA + LOGO
   --p = avanzamento dello scroll (0 = in cima, 1 = barra completa), impostato da js/script.js */
.barra {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  container-type: inline-size;
  z-index: 10;
  pointer-events: none; /* la barra non deve bloccare il mouse sui link sotto di lei */
}

.barra-tela {
  --u: min(100cqw / 1920, 100svh / 1080);
  /* margini dell'artboard quando lo schermo non è 16:9 */
  --dx: calc((100cqw - 1920 * var(--u)) / 2);
  --dy: calc(max(0px, (100svh - 1080 * var(--u)) / 2));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
}

.barra-fondo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(125 * var(--u));
  background: #fff;
  opacity: var(--p, 0);
}

/* posizione/dimensione: da home (90.87, 39.7, 523.88) a barra (817, 23, 286.5) */
.logo {
  position: absolute;
  left: calc((90.87 + (817 - 90.87) * var(--p, 0)) * var(--u) + var(--dx));
  top: calc((39.7 + (23 - 39.7) * var(--p, 0)) * var(--u) + (1 - var(--p, 0)) * var(--dy));
  width: calc((523.88 + (286.5 - 523.88) * var(--p, 0)) * var(--u));
  pointer-events: auto; /* cliccabile anche se la barra non lo è: riporta in cima */
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* SEZIONE 2 */
.progetto {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(221.11 * var(--u));
  width: calc(570 * var(--u));
  height: calc(660 * var(--u));
  display: block;
  color: inherit;
  text-decoration: none;
}

.card {
  width: calc(570 * var(--u));
  height: calc(570 * var(--u));
  border-radius: calc(5 * var(--u));
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.progetto:hover .card img {
  transform: scale(1.05);
}

.etichetta {
  font-weight: 800;
  letter-spacing: 0.7em;
  transition: color 0.3s ease;
}

.progetto:hover .etichetta {
  color: var(--rosso);
}

/* riga nera sottile sotto la didascalia, come nelle voci del menu */
.etichetta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.7em;
  top: 0.96em;
  height: max(1px, 0.06em);
  background: var(--nero);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.progetto:hover .etichetta::after {
  transform: scaleX(1);
}

/* SEZIONE 3 */
.foto {
  position: absolute;
  left: calc(282.5 * var(--u));
  top: calc(230 * var(--u));
  width: calc(449.5 * var(--u));
  height: calc(449.5 * var(--u));
  border-radius: calc(5 * var(--u));
  overflow: hidden;
}

.foto img {
  position: absolute;
  left: calc(-223 * var(--u));
  top: calc(-129.5 * var(--u));
  width: calc(775.9 * var(--u));
  height: calc(579.4 * var(--u));
  max-width: none;
}

.titolo-su-di-me {
  font-weight: 800;
  letter-spacing: 0.6em;
  color: #fff;
}

.testo {
  color: #fff;
  width: calc(790 * var(--u));
  white-space: normal;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.testo p { margin: 0 0 calc(var(--lh) * var(--u)); }

.riga {
  display: block;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
}

.riga.fine { text-align-last: left; }

/* Riquadro rosso a schermo intero con un margine bianco uniforme su tutti i lati.
   --margine = spessore del bordo bianco (in unità del design) */
.fascia {
  --margine: 30;
  --margine-basso: 44; /* più alto perché contiene la didascalia */
  --altezza: 100cqh; /* altezza della sezione */
  --dx: calc((100cqw - 1920 * var(--u)) / 2);
  --dy: calc(var(--altezza) - 1080 * var(--u));
  position: absolute;
  left: calc(var(--margine) * var(--u) - var(--dx));
  /* in alto il riquadro parte sotto la barra bianca fissa (125) */
  top: calc(125 * var(--u) - var(--dy));
  width: calc(100cqw - 2 * var(--margine) * var(--u));
  height: calc(var(--altezza) - (125 + var(--margine-basso)) * var(--u));
  background: var(--rosso);
  color: #fff;
}

/* L'ultima sezione resta attaccata al fondo */
#su-di-me .tela {
  top: auto;
  bottom: 0;
  margin-bottom: 0;
}

@media (max-aspect-ratio: 1 / 1) {
  .fascia { --altezza: calc(1080 * var(--u)); }
}

/* didascalia centrata sotto il riquadro, nel margine bianco in basso */
.copyright {
  left: 0;
  right: 0;
  margin-left: calc(0.4 * 20.5 * var(--u)); /* compensa lo spazio dopo l'ultima lettera, per centrare il testo */
  top: auto;
  bottom: calc((0.36 * 20.5 - 29) * var(--u)); /* la base delle lettere sta 29 sotto il bordo inferiore del riquadro */
  text-align: center;
  color: var(--rosso);
  font-weight: 700;
  letter-spacing: 0.4em;
}

/* CONTATTI: grande, largo quanto il blocco foto + testo (dal bordo sinistro della foto al bordo destro del testo), centrato */
.titolo-contatti {
  left: 0;
  right: 0;
  margin-left: calc(0.6 * 143.5 * var(--u)); /* compensa lo spazio dopo l'ultima lettera, per centrare il testo */
  top: auto;
  bottom: calc((124.6 + 0.36 * 143.5) * var(--u)); /* la base delle lettere sta 124,6 sopra il bordo inferiore del riquadro */
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.6em;
  color: #fff;
}

/* email in maiuscolo, centrata sotto CONTATTI, tutta dentro il riquadro */
.email {
  left: 0;
  right: 0;
  top: auto;
  bottom: calc((65 + 0.36 * 38) * var(--u)); /* la base delle lettere sta 65 sopra il bordo inferiore del riquadro */
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.21em;
  color: #fff;
}

/* Chi ha attivato "riduci movimento" nel sistema non vede le animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .rivela {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * { transition-duration: 0s !important; }
}

/* ==========================================================================
   MOBILE (telefoni in verticale e schermi stretti)
   Le sezioni si dispongono in colonna e l'aggancio a una sezione alla volta è disattivato.
   --m = unità di misura mobile (1 = 1/390 della larghezza dello schermo, con un massimo di 520 px)
   ========================================================================== */
@media (max-aspect-ratio: 1 / 1), (max-width: 700px) {
  :root { --m: calc(min(100vw, 520px) / 390); }

  html { scroll-snap-type: none; }

  .sezione {
    height: auto;
    aspect-ratio: auto;
    container-type: normal;
    overflow: visible;
    scroll-snap-align: none;
  }

  .tela,
  #su-di-me .tela {
    --u: var(--m);
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Su schermo tattile non ci sono le righe che compaiono al passaggio del mouse */
  .menu .t::after,
  .etichetta::after { display: none; }

  /* BARRA FISSA E LOGO */
  .barra-fondo { height: calc(66 * var(--m)); }

  .logo {
    left: 50%;
    transform: translateX(-50%);
    top: calc((22 + (12 - 22) * var(--p, 0)) * var(--m));
    width: calc((250 + (150 - 250) * var(--p, 0)) * var(--m));
  }

  /* HOME */
  #home .tela { padding-top: calc(100 * var(--m)); }

  /* le voci di menu della home stanno sotto al pulsante CONTATTAMI, non più subito sotto al logo */
  .menu-home {
    order: 5;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: calc(24 * var(--m));
    margin: calc(6 * var(--m)) 0 calc(48 * var(--m));
  }

  .menu .t {
    position: static;
    left: auto;
    top: auto;
    font-size: calc(12 * var(--m));
  }

  .collage {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    margin-top: calc(14 * var(--m));
    object-fit: initial;
  }

  .intro {
    order: 3;
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin: calc(18 * var(--m)) calc(24 * var(--m)) 0;
    font-size: calc(16 * var(--m));
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }

  .pulsante {
    order: 4;
    position: relative;
    left: auto;
    top: auto;
    width: calc(300 * var(--m));
    max-width: 80%;
    height: calc(60 * var(--m));
    margin: calc(26 * var(--m)) auto calc(40 * var(--m));
    border-radius: calc(8 * var(--m));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pulsante .t {
    position: static;
    left: auto;
    top: auto;
    font-size: calc(16 * var(--m));
    padding-left: 0.24em;
  }

  /* PROGETTI */
  #progetti .tela {
    padding: calc(90 * var(--m)) calc(24 * var(--m)) calc(40 * var(--m));
    gap: calc(30 * var(--m));
  }

  .progetto {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: calc(4 * var(--m));
  }

  .etichetta {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    margin-top: calc(14 * var(--m));
    padding-left: 0.7em;
    text-align: center;
    font-size: calc(13.5 * var(--m));
  }

  #progetti .menu {
    display: flex;
    justify-content: center;
    gap: calc(34 * var(--m));
    margin-top: calc(8 * var(--m));
  }

  /* PAGINA FINALE: riquadro rosso con foto, SU DI ME, testo, CONTATTI, email; il copyright sta sotto il riquadro */
  #su-di-me .tela {
    width: calc(100% - 28 * var(--m));
    max-width: calc(520px - 28 * var(--m));
    margin: calc(66 * var(--m)) auto calc(44 * var(--m));
    padding: calc(26 * var(--m)) calc(20 * var(--m)) calc(112 * var(--m));
    align-items: stretch;
  }

  .fascia {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
  }

  .foto,
  .titolo-su-di-me,
  .testo { position: relative; left: auto; top: auto; }

  .foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: calc(4 * var(--m));
  }

  .foto img {
    left: -49.6%;
    top: -28.8%;
    width: 172.6%;
    height: 128.9%;
  }

  .titolo-su-di-me {
    margin-top: calc(28 * var(--m));
    font-size: calc(32 * var(--m));
  }

  .testo {
    width: auto;
    margin-top: calc(20 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: 1.6;
    letter-spacing: 0.06em;
    white-space: normal;
  }

  .testo p { margin: 0 0 1em; }

  .riga {
    display: inline;
    white-space: normal;
    text-align: left;
    text-align-last: auto;
  }

  .titolo-contatti {
    font-size: calc(32 * var(--m));
    margin-left: calc(0.6 * 32 * var(--m));
    bottom: calc((55.5 + 0.36 * 32) * var(--m));
  }

  .email {
    font-size: calc(13.5 * var(--m));
    bottom: calc((28 + 0.36 * 13.5) * var(--m));
  }

  .copyright {
    font-size: calc(9.5 * var(--m));
    margin-left: calc(0.4 * 9.5 * var(--m));
    bottom: calc((0.36 * 9.5 - 25) * var(--m));
  }
}

@media (max-aspect-ratio: 1 / 1), (max-width: 700px) {
  /* i testi in colonna hanno bisogno di un'altezza di riga vera (su desktop è 0 perché sono posizionati per baseline) */
  .menu .t,
  .etichetta,
  .titolo-su-di-me { line-height: 1.2; }
}