/* =========================================================
   Emanuele Lombardi — stile del sito
   I valori seguono gli stili di testo del file Figma.
   ========================================================= */

:root {
  /* Colori */
  --black: #000000;
  --white: #F5F3EF;
  --gray: #8C8984;
  --gray-dark: #5E5B57;
  --line: #2E2E2E;
  --line-input: #3A3836;
  --tile: #161616;
  --rec: #34C759;          /* pallino del badge "Disponibile" */

  /* Font */
  --sans: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;

  /* Spazi */
  --pad: 40px;
  --gap: 40px;
  --section-end: 140px;

  /* Unità dell'apertura: 1u = 1px del design a 1440px */
  --u: calc(min(100vw, 1920px) / 1440);
}

@media (max-width: 820px) {
  :root {
    --pad: 20px;
    --gap: 28px;
    --section-end: 88px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.label {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray);
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--white);
  color: var(--black);
  font-size: 14px;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: calc(28px + env(safe-area-inset-top, 0px)) var(--pad) 16px;
  transition: background-color .3s ease, padding .3s ease;
}

.site-header.is-scrolled {
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: 14px;
}

.logo { display: inline-flex; }
.logo svg { width: 25px; height: 25px; fill: var(--white); overflow: visible; }

/* Logo: sprite pixel in stile videogioco retrò. Al passaggio del mouse 3 fotogrammi
   (aperte → a metà → chiuse → a metà → aperte…) si alternano a scatti, 90 ms l'uno,
   per due battiti d'ala; sulle ali chiuse la farfalla sale di 2 px. Poi torna il logo. */
.logo .frame--half, .logo .frame--closed { opacity: 0; }
@keyframes sprite-open   { 0% { opacity: 1; } 12.5% { opacity: 0; } 50% { opacity: 1; } 62.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sprite-half   { 0% { opacity: 0; } 12.5% { opacity: 1; } 25% { opacity: 0; } 37.5% { opacity: 1; } 50% { opacity: 0; } 62.5% { opacity: 1; } 75% { opacity: 0; } 87.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sprite-closed { 0% { opacity: 0; } 25% { opacity: 1; } 37.5% { opacity: 0; } 75% { opacity: 1; } 87.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes sprite-hop    { 0% { transform: translateY(0); } 25% { transform: translateY(-2px); } 37.5% { transform: translateY(0); } 75% { transform: translateY(-2px); } 87.5% { transform: translateY(0); } 100% { transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .logo:hover svg, .logo:focus-visible svg { animation: sprite-hop .72s steps(1, end); }
  .logo:hover .frame--open, .logo:focus-visible .frame--open { animation: sprite-open .72s steps(1, end); }
  .logo:hover .frame--half, .logo:focus-visible .frame--half { animation: sprite-half .72s steps(1, end); }
  .logo:hover .frame--closed, .logo:focus-visible .frame--closed { animation: sprite-closed .72s steps(1, end); }
}

.nav {
  display: flex;
  gap: 40px;
  margin-left: auto;
}

.nav a,
.menu-toggle {
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
}

.nav a:hover { color: var(--gray); }

.header-actions { display: flex; align-items: center; gap: 16px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: var(--white);
  color: #0A0A0A;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 16px; /* px interi: bordi netti */
  text-transform: uppercase;
  white-space: nowrap;
}

/* Al passaggio del mouse (solo desktop): testo "Sentiamoci subito!" bianco su gradiente
   in movimento. Blu: Klein Blue #4100F5 + blu elettrico #2F5BFF.
   Arancio: Tangerine #FF4632 + arancio acceso #FF7A1A + rosso fuoco #FF2A1F.
   Il gradiente è largo il triplo del badge e scorre avanti e indietro. */
.badge { position: relative; isolation: isolate; overflow: hidden; transition: color .3s ease; }
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    #2F5BFF 0%, #4100F5 18%, #2F5BFF 32%,
    #FF4632 50%, #FF7A1A 64%, #FF2A1F 80%, #FF4632 100%);
  background-size: 300% 100%;
  background-position: 0% 50%;
  opacity: 0;
  transition: opacity .3s ease;
}
@keyframes badge-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.badge-text { display: grid; }
.badge-label, .badge-hover { grid-area: 1 / 1; transition: opacity .25s ease; }
.badge-hover { display: none; text-align: center; opacity: 0; }

@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
  .badge-hover { display: block; }
  .badge:hover, .badge:focus-visible { color: var(--white); }
  .badge:hover::before, .badge:focus-visible::before { opacity: 1; animation: badge-flow 3.5s ease-in-out infinite alternate; }
  .badge:hover .badge-label, .badge:focus-visible .badge-label { opacity: 0; }
  .badge:hover .badge-hover, .badge:focus-visible .badge-hover { opacity: 1; }
  .badge:hover .badge-dot, .badge:focus-visible .badge-dot { background: var(--white); }
}

/* Su telefono/tablet (niente mouse): ogni 4 secondi il badge si alterna da solo
   con la versione "Sentiamoci subito!" sul gradiente (classe is-alt dal JS). */
@media (hover: none), (max-width: 820px) {
  .badge.has-alt .badge-hover { display: block; }
  .badge.has-alt .badge-label { text-align: center; }
  .badge.is-alt { color: var(--white); }
  .badge.is-alt::before { opacity: 1; animation: badge-flow 3.5s ease-in-out infinite alternate; }
  .badge.is-alt .badge-label { opacity: 0; }
  .badge.is-alt .badge-hover { opacity: 1; }
  .badge.is-alt .badge-dot { background: var(--white); }
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rec);
  animation: rec 2.4s ease-in-out infinite;
}

@keyframes rec {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
}

@media (max-width: 820px) {
  .site-header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
  .site-header.is-scrolled { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
  .logo svg { width: 20px; height: 20px; }
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: block; }
  .badge { gap: 8px; padding: 7px 12px 7px 10px; font-size: 13px; letter-spacing: 0.04em; }
  .badge-dot { width: 6px; height: 6px; }
  .badge-year { display: none; }   /* su telefono: "Disponibile — NOV", senza anno (sta nella misura del badge) */
}

/* ---------- Menu a schermo intero ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--pad) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--black);
}
.menu[hidden] { display: none; }

.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-top .menu-toggle { display: block; }

.menu-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.menu-links a {
  font-size: 44px;
  line-height: .95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.menu-bottom {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Riquadri immagine/video ---------- */
.tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--tile);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

button.tile { cursor: pointer; }
button.tile:hover img { transform: scale(1.03); }

.tile--video { aspect-ratio: 16 / 9; }
.tile--vertical { aspect-ratio: 9 / 16; }
.tile--photo { aspect-ratio: 3 / 4; }
.portrait { aspect-ratio: 4 / 5; }
.portrait img { object-position: center top; } /* il taglio si fa solo in basso: spazio sopra la testa intatto */

/* ---------- Apertura ---------- */
.hero { position: relative; }

.hero-stage {
  position: relative;
  height: calc(900 * var(--u));
  min-height: 640px;
}

.reel-stack {
  position: absolute;
  left: calc(445 * var(--u));
  top: calc(210 * var(--u));
  width: calc(488 * var(--u));
  height: calc(275 * var(--u));
}

/* Mazzo di showreel: ogni card ha la sua posizione (data-pos 0 = davanti) */
.deck { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.deck-card {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: #121212;
  cursor: pointer;
  --x: 0px; --y: 0px; --r: 0deg; --s: 1;
  --dx: 0px; --dr: 0deg;                        /* spostamento mentre la trascini */
  transform: translate(calc(var(--x) + var(--dx)), var(--y)) rotate(calc(var(--r) + var(--dr))) scale(var(--s));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.deck-card img, .deck-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.deck-card video { opacity: 0; transition: opacity .4s ease; }
.deck-card.is-playing video { opacity: 1; }
.deck-card.is-dragging { transition: filter .4s ease; cursor: grabbing; }

/* Posizione a riposo (come in Figma) */
.deck-card[data-pos="0"] { z-index: 3; }
.deck-card[data-pos="1"] { z-index: 2; --x: calc(10 * var(--u)); --y: calc(-8 * var(--u)); --r: 3deg; }
.deck-card[data-pos="2"] { z-index: 1; --x: calc(26 * var(--u)); --y: calc(-20 * var(--u)); --r: 8deg; }

@media (hover: hover) and (pointer: fine) {
  /* Il mazzo si apre */
  .deck:hover .deck-card[data-pos="0"] { --x: calc(-46 * var(--u)); --y: calc(22 * var(--u)); --r: -5deg; }
  .deck:hover .deck-card[data-pos="1"] { --x: calc(22 * var(--u)); --y: calc(-12 * var(--u)); --r: 2deg; }
  .deck:hover .deck-card[data-pos="2"] { --x: calc(92 * var(--u)); --y: calc(-38 * var(--u)); --r: 9deg; }

  /* La card sotto il mouse si accende e cresce un po', restando al suo posto nel mazzo:
     è il clic a portarla davanti */
  .deck:hover .deck-card { filter: brightness(.55); }
  .deck:not(.is-dragging) .deck-card:hover,
  .deck .deck-card:focus-visible,
  .deck.is-dragging .deck-card[data-pos="0"] { --s: 1.04; filter: none; }
}


.name-block {
  position: absolute;
  z-index: 2;
  left: calc(243 * var(--u));
  top: calc(430 * var(--u));
  pointer-events: none;
}

.hero-hi,
.hero-role {
  font-size: max(18px, calc(24 * var(--u)));
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* Rientro ottico: allinea "Hi, I'm" all'asta della E, non al bordo del box */
.hero-hi { margin: 0 0 calc(14 * var(--u)) calc(11 * var(--u)); }

.hero-name {
  display: grid;
  justify-items: start;
  font: inherit;
}

.name-line {
  display: flex;
  align-items: last baseline;
  gap: calc(19 * var(--u));
}

.hero-first,
.hero-last {
  font-size: calc(160 * var(--u));
  line-height: .88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-role { white-space: nowrap; }

/* LOMBARDI finisce dove finisce "and Photographer" */
.hero-last { justify-self: end; }

/* ---- Nome interattivo: hover = si ingrandisce, click = diventa MANU ---- */
.name-block {
  transform: translate(calc(var(--dx, 0) * var(--u)), calc(var(--dy, 0) * var(--u))) scale(var(--s, 1));
  transform-origin: center;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.hero-name { pointer-events: auto; cursor: pointer; }
.name-block:has(.name-toggle:focus-visible) { --s: 1.03; }
@media (hover: hover) and (pointer: fine) {
  .name-block:hover { --s: 1.03; }
}
.name-block:has(.name-toggle:focus-visible) .hero-name { outline: 2px solid var(--white); outline-offset: 8px; }
.hero-first .ch, .hero-last .ch { display: inline-block; will-change: transform, opacity; }
.name-block.is-short .hero-last,
.name-block.is-short .ch.drop { display: none; }

.hero-bar {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: calc(842 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.scroll-cue { display: inline-flex; align-items: center; gap: 8px; }
.scroll-cue svg { width: 10px; height: 14px; }
.based { text-align: right; }
.based-br { display: none; }

@media (max-width: 820px) {
  .hero-stage {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: calc(96px + env(safe-area-inset-top, 0px)) var(--pad) var(--section-end);
  }
  .name-block,
  .hero-bar { position: static; }

  .reel-stack { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 20px; }
  /* su telefono il mazzo resta visibile, con le card dietro appena sfalsate */
  .deck-card[data-pos="1"] { --x: 7px; --y: -7px; --r: 2deg; }
  .deck-card[data-pos="2"] { --x: 14px; --y: -13px; --r: 4deg; }
  .hero-hi, .hero-role { font-size: 24px; }
  .hero-hi { margin: 0 0 16px; }
  .hero-name { display: flex; flex-direction: column; }
  .name-line { display: contents; }
  .hero-first, .hero-last { display: block; font-size: clamp(52px, 18.5vw, 72px); }
  .hero-first { order: 1; }
  .hero-last { order: 2; }
  .hero-role { order: 3; margin-top: 16px; white-space: normal; }
  .name-block { --dx: 0 !important; --dy: 0 !important; transform-origin: left center; }
  .hero-bar { margin-top: 32px; font-size: 13px; letter-spacing: 0.04em; }
  .based-sep { display: none; }
  .based-br { display: inline; }
}

/* ---------- Sezioni ---------- */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 var(--pad) var(--section-end);
}

#lavori { padding-top: var(--section-end); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-top: var(--gap);
  border-top: 1px solid var(--line);
}

.lead {
  font-size: clamp(24px, 3.33vw, 48px);
  line-height: 1.2;
}

.word {
  font-size: clamp(56px, 8.33vw, 120px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  #lavori { padding-top: 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .lead { font-size: 24px; letter-spacing: 0.03em; }
  .word { font-size: 56px; letter-spacing: -0.04em; }
}

/* ---------- Caroselli ---------- */
.track {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

.carousel--items .tile { flex: 0 0 calc((100% - 72px) / 3.22); scroll-snap-align: start; }

.track.is-linked { scroll-snap-type: none; }

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--gap);
}

.controls--items { justify-content: space-between; }

.arrows { display: flex; gap: 12px; }

.arrow {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.arrow svg { width: 18px; height: 14px; }
.arrow:hover:not(:disabled) { background: var(--white); color: var(--black); }
.arrow:disabled { opacity: .3; cursor: default; }

.dots { display: flex; gap: 12px; }
.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray-dark);
  cursor: pointer;
}
.dots button[aria-current="true"] { background: var(--white); }

.counter { font-size: 14px; letter-spacing: 0.03em; }

@media (max-width: 820px) {
  .track { gap: 12px; }
  .carousel--items .tile { flex: 0 0 74%; }
  .controls { margin-top: 20px; gap: 8px; }
  .arrows { gap: 8px; }
  .arrow { width: 44px; height: 44px; }
  .arrow svg { width: 16px; height: 12px; }
  .counter { font-size: 13px; letter-spacing: 0.04em; }
}

/* ---------- Lavori: griglia a mattoncini di foto e video ----------
   Ispirata a brunosuraski.com. Senza JavaScript è una griglia semplice; main.js (funzione "pile")
   aggiunge .is-piled e incastra le card: 4 colonne (2 su mobile), ognuna nel suo formato, senza sovrapporsi. */
.pile-filter { margin-bottom: 32px; }
.pile-filter .chip span { padding: 9px 18px; font-size: 13px; letter-spacing: 0.04em; line-height: 16px; }

.pile { --pile-gap: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pile-gap); align-items: start; }
.pile .tile--video { grid-column: span 2; }
.pile .tile--vertical { grid-column: span 1; }
.pile .tile[hidden] { display: none; }

.pile.is-piled { display: block; position: relative; }
.pile.is-piled .tile {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: auto;
  transition: opacity .4s ease;
}

/* Al passaggio del mouse le altre card si attenuano */
@media (hover: hover) and (pointer: fine) {
  .pile:has(.tile:hover) .tile:not(:hover) { opacity: .35; }
}

/* Riquadri ancora senza immagine: bordo sottile, per vedere la griglia */
.pile .tile:not(:has(img)) { box-shadow: inset 0 0 0 1px var(--line); }

@media (max-width: 820px) {
  .pile { --pile-gap: 12px; grid-template-columns: repeat(2, 1fr); }
  .pile-filter { margin-bottom: 24px; }
}

/* ---------- Scatti: mazzo di foto che si apre allo scorrimento ----------
   La sezione è più alta dello schermo (.travel-track): mentre la scorri, il palco (.travel-stage)
   resta fermo e main.js ("travel") sposta le foto dal mazzo al centro alla loro posizione finale
   (--x, --y, --w, --r nello style dell'HTML) e fa comparire la frase.
   main.js scrive per ogni foto --tx, --ty (spostamento), --rot (rotazione), --sc (scala). */
.travel { overflow-x: clip; }
.travel-line { padding-top: 0; }
.travel-track { position: relative; height: 150vh; margin: 0 calc(-1 * var(--pad)); }
.travel-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
}

/* Frase su una sola riga: EB Garamond corsivo + Neue Haas maiuscolo, stessa dimensione e stessa linea di base */
.travel-title {
  position: relative;
  z-index: 20;
  font-size: clamp(30px, calc(64 * var(--u)), 92px);
  line-height: 1;
  font-weight: 300;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.travel-title .lead,
.travel-title .word {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
}
.travel-title .lead { letter-spacing: 0; margin-right: .1em; }

.tile--travel {
  position: absolute;
  --top-pad: 72px; /* spazio sopra le foto più in alto */
  left: calc(var(--x) * 1%);
  top: calc(var(--top-pad) + (100% - var(--top-pad)) * var(--y) / 100);
  width: calc(var(--w) * var(--u));
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(calc(var(--rot, 0deg) * var(--hr, 1))) scale(calc(var(--sc, 1) * var(--hs, 1)));
  transition: box-shadow .4s ease;
}
.tile--travel:has(img) { border: 0; }

/* A mazzo aperto: al passaggio del mouse la foto si raddrizza, cresce un po' e passa davanti */
.travel-stage.is-open .tile--travel { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease; }
@media (hover: hover) and (pointer: fine) {
  .travel-stage.is-open .tile--travel:hover,
  .travel-stage.is-open .tile--travel:focus-visible {
    --hs: 1.06;
    --hr: 0;
    z-index: 30 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  }
  .tile--travel:hover img { transform: none; }
}

@media (max-width: 820px) {
  .travel-track { height: 140vh; }
  .travel-title { font-size: calc((100vw - 40px) / 13.2); } /* tutta su una riga anche su telefono */
  .tile--travel {
    --top-pad: 64px;
    left: calc(var(--mx) * 1%);
    top: calc(var(--top-pad) + (100% - var(--top-pad) - 40px) * var(--my) / 100);
    width: calc(var(--mw) * 1px);
  }
}

/* ---------- Pillole ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li {
  padding: 9px 18px;
  border: 1px solid var(--white);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 16px; /* px interi: bordi netti */
  text-transform: uppercase;
}

/* Al passaggio del mouse la pillola si riempie di bianco e il testo diventa nero (solo desktop) */
.pills li { transition: background-color .25s ease, color .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .pills li:hover { background: var(--white); color: var(--black); }
}

/* ---------- Chi sono ---------- */
.about {
  display: flex;
  align-items: flex-end;
  gap: 80px;
}

.portrait { flex: 0 0 38.2%; }

.bio {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bio-lead,
.intro {
  font-size: clamp(26px, 3.05vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.bio-text {
  max-width: 62ch;
  color: var(--gray);
}

@media (max-width: 820px) {
  .about { flex-direction: column; align-items: stretch; gap: 28px; }
  .bio { gap: 28px; }
  .bio-lead { line-height: 1.25; }
}

/* ---------- Servizi ---------- */
.intro em {
  font-size: 1.09em;
  letter-spacing: 0;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 40px;
}

.services li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--white);
}

.services h3 {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.services p { max-width: 40ch; color: var(--gray); }

.sectors {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 60px;
}

@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .services { grid-template-columns: 1fr; gap: 32px; }
  .services li { gap: 10px; padding-top: 18px; }
  .sectors { gap: 16px; padding-top: 4px; }
}

/* ---------- Form ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 24px;
}

.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }

.field label,
.field legend {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray);
}

.field legend { margin-bottom: 18px; }

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--line-input);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: border-color .2s ease;
}

/* Il messaggio parte alto una riga, come le altre caselle, e cresce mentre si scrive (js/main.js) */
.field textarea { height: auto; min-height: 0; resize: none; overflow: hidden; }

.field input::placeholder,
.field textarea::placeholder { color: var(--gray); opacity: 1; }

.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--white); }

.field [aria-invalid="true"] { border-bottom-color: #E5554B; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 14px 24px;
  border: 1px solid var(--line-input);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 17px; /* px interi: bordi netti */
  text-transform: uppercase;
  color: var(--gray);
  transition: border-color .2s ease, color .2s ease;
}
.chip:hover span { color: var(--white); }
.chip input:checked + span { border-color: var(--white); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }

.form-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  position: relative;
  flex: 0 0 18px;
  height: 18px;
  border: 1px solid var(--gray);
  border-radius: 2px;
  transition: border-color .2s ease;
}
/* Animazione della spunta: il quadratino si riempie di bianco con un piccolo rimbalzo,
   poi la spunta nera si disegna dal basso verso l'alto. Togliendola torna indietro. */
.check .box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  background: var(--white);
  transform: scale(0);
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.check .box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--black);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .2s ease;
}
.check:hover .box { border-color: var(--white); }
.check input:checked + .box { border-color: var(--white); }
.check input:checked + .box::before { transform: scale(1); }
.check input:checked + .box::after { clip-path: inset(0 0 0 0); transition-delay: .14s; }
.check input:focus-visible + .box { outline: 2px solid var(--white); outline-offset: 3px; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
/* Se si invia senza accettare, la casella diventa rossa e "trema" */
.check.is-invalid .box { border-color: #E5554B; animation: check-shake .4s ease; }
@keyframes check-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 36px;
  border: 1px solid var(--white);
  border-radius: 999px;
  background: transparent;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 19px; /* px interi: bordi netti */
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.button svg { width: 18px; height: 14px; }
.button:hover { background: var(--white); color: var(--black); }
.button:disabled { opacity: .5; cursor: wait; }

.form-status { grid-column: 1 / -1; min-height: 1.5em; font-size: 15px; }
.form-status.is-error { color: #E5554B; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.big-mail {
  align-self: flex-start;
  font-size: clamp(20px, 3.33vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
  overflow-wrap: anywhere;
}
.big-mail:hover { color: var(--gray); }

@media (max-width: 820px) {
  .form { grid-template-columns: 1fr; gap: 36px; }
  .chips { gap: 8px; }
  .chip span { padding: 9px 16px; font-size: 13px; letter-spacing: 0.04em; line-height: 16px; }
  .form-end { flex-direction: column; align-items: stretch; gap: 28px; }
  .button { width: 100%; padding: 16px 24px; }
}

/* ---------- Footer ---------- */
.section--contact { padding-bottom: 64px; }

.footer {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 220px);
  gap: 24px;
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; gap: 16px; }

.footer-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.footer-name span { text-box: trim-both cap alphabetic; }
.footer-name svg { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--white); }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .label { margin-bottom: 12px; }
.footer-col a {
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}
.footer-col a:hover { color: var(--gray); }
.footer-col .footer-mail { text-transform: none; overflow-wrap: anywhere; }

.footer-legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* sinistra · firma al centro · destra */
  align-items: baseline;
  gap: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray);
}

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .footer { gap: 32px; margin-top: 28px; padding-top: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand { gap: 10px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col .label { margin-bottom: 4px; }
  .footer-name { gap: 10px; font-size: 20px; }
  .footer-name svg { flex-basis: 16px; width: 16px; height: 16px; }
  .footer-legal { grid-template-columns: 1fr; gap: 6px; padding-top: 32px; }
  .signature { order: 3; margin-top: 28px; }   /* su telefono la firma va in fondo, staccata */
}

@media (min-width: 821px) { .footer-legal > p:last-child { text-align: right; } }
/* Firma "Designed by ME": corsivo EB Garamond + maiuscolo Neue Haas, come le intestazioni ma in piccolo */
.signature { color: var(--white); }
.signature .accent { font-size: 16px; letter-spacing: 0.02em; text-transform: none; margin-right: 2px; }

/* ---------- Finestra video ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 64px var(--pad);
  background: rgba(0, 0, 0, .94);
}
.lightbox[hidden] { display: none; }

.lightbox-frame {
  --ar: 16 / 9;                 /* formato del video: lo cambia il JS per i video non 16:9 (es. 4:3) */
  width: min(100%, calc((100vh - 128px) * var(--ar)));
  aspect-ratio: var(--ar);
  background: var(--tile);
}
.lightbox.is-photo .lightbox-frame { width: auto; aspect-ratio: auto; background: none; }
.lightbox-frame img {
  display: block;
  max-width: calc(100vw - 2 * var(--pad));
  max-height: calc(100vh - 128px);
  width: auto;
  height: auto;
}
.lightbox.is-vertical .lightbox-frame { --ar: 9 / 16; }
.lightbox-frame iframe,
.lightbox-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.lightbox-close {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top, 0px));
  right: var(--pad);
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
}


/* ---------- Anteprime video (Lavori: sempre in loop; mazzo: al passaggio del mouse) ---------- */
.tile--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.tile--video.is-playing video { opacity: 1; }
.tile--video video { transition: opacity .4s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
button.tile:hover video { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .deck-card { transition: none; }
}

/* ---------- Pagina privacy ---------- */
/* Pagina 404: corsivo sopra, parola grande sotto (come le intestazioni), bottone per tornare */
.not-found {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: var(--pad);
  text-align: center;
}
.not-found .accent { font-size: clamp(24px, calc(48 * var(--u)), 64px); }
.not-found h1 {
  margin: 0 0 32px;
  font-size: clamp(56px, calc(120 * var(--u)), 168px);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -0.05em;
}

.legal-page { max-width: 760px; padding: 140px var(--pad) 96px; }
.legal-page h1 { font-size: clamp(44px, 6vw, 80px); font-weight: 300; line-height: .95; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 40px; }
.legal-page p { color: var(--gray); margin-bottom: 20px; }
.legal-page a { text-decoration: underline; text-underline-offset: 3px; }
.legal-page h2 { font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-page strong { color: var(--white); font-weight: 400; }
.legal-page ul { list-style: none; margin: 0 0 20px; padding: 0; }
.legal-page li { position: relative; color: var(--gray); padding-left: 20px; margin-bottom: 12px; }
.legal-page li::before { content: "—"; position: absolute; left: 0; }
.legal-page .legal-date { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-dark); }
.legal-page .legal-back { margin-top: 56px; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .badge-dot { animation: none; }
  .badge::before { animation: none !important; }
  .check.is-invalid .box { animation: none; }
  .name-block { transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Testo nascosto alla vista ma letto dai lettori di schermo (etichette del form) */
.sr-only,
.field label.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Peso delle scritte piccole ----------
   Titoli grandi e frasi restano a 300 (Light).
   Le scritte piccole in maiuscolo (13–16px) vanno a 400 (Roman): a 300 su nero erano troppo esili. */
.label,
.nav a,
.menu-toggle,
.badge,
.menu-bottom,
.hero-bar,
.counter,
.pills li,
.services h3,
.field legend,
.chip span,
.check,
.button,
.footer-col a,
.footer-legal,
.lightbox-close,
.legal-page .legal-date { font-weight: 400; }

/* ---------- Comparse allo scorrimento ----------
   Gli elementi partono invisibili e compaiono quando entrano nello schermo (js/main.js, "reveal").
   Le parole grandi entrano lettera per lettera dal basso, come nell'animazione del nome.
   Le linee sopra le intestazioni si disegnano da sinistra a destra. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(
    .site-header, .reel-stack, .hero-hi, .hero-first, .hero-last, .hero-role, .hero-bar,
    .section-head .lead, .word, .section .tile, .controls,
    .pills li, .bio-lead, .bio-text, .services li, .sectors .label,
    .form .field, .form-end, .big-mail, .footer-top > *, .footer-legal
  ):not(.is-in) { opacity: 0; }

  .js .section-head { position: relative; border-top-color: transparent; }
  .js .section-head::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.65, 0, .2, 1);
  }
  .js .section-head.is-in::before { transform: scaleX(1); }
}
.word .ch { display: inline-block; }
.word .sp { width: .26em; } /* spazio tra le parole: la spaziatura stretta lo schiaccerebbe */

/* ---------- Intro: logo al centro ----------
   Visibile solo se html ha la classe "has-intro" (impostata nell'<head>).
   Se qualcosa va storto, dopo 4 secondi sparisce comunque da sola. */
.intro-screen { display: none; }
.has-intro .intro-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--black);
  animation: intro-failsafe 0s 4s forwards;
}
.has-intro body { overflow: hidden; }
@keyframes intro-failsafe { to { visibility: hidden; opacity: 0; } }
.intro-screen svg { width: 80px; height: 80px; fill: var(--white); overflow: visible; }
.intro-screen .frame--half, .intro-screen .frame--closed { opacity: 0; }
.intro-screen.is-flapping svg { animation: sprite-hop .72s steps(1, end); }
.intro-screen.is-flapping .frame--open { animation: sprite-open .72s steps(1, end); }
.intro-screen.is-flapping .frame--half { animation: sprite-half .72s steps(1, end); }
.intro-screen.is-flapping .frame--closed { animation: sprite-closed .72s steps(1, end); }
@media (max-width: 820px) { .intro-screen svg { width: 64px; height: 64px; } }