/* ============================================================
   MC Hosting — foglio di stile del sito.
   Stessi colori, caratteri e componenti della landing del calcolatore
   (calcola.mchosting.it): i due devono sembrare la stessa azienda.
   Un file solo, condiviso da tutte le pagine.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }

:root {
  --crema:     #EDE4D0;
  --crema-2:   #F5EDD8;
  --crema-3:   #E0D5BF;
  --bordeaux:  #5A0F18;
  --bordeaux-2:#7a1a24;
  --dark:      #14110F;
  --dark-2:    #1f1b18;
  --ink:       #211c18;
  --mid:       #8c7b68;
  --border:    #D8CEB8;
  --wa:        #1f9d57;
  --wa-2:      #178a4b;
  --nav-h:     74px;
  --ff-title:  'Playfair Display', Georgia, serif;
  --ff-body:   'Roboto', -apple-system, system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 17px; }
body {
  background: var(--crema); color: var(--ink);
  font-family: var(--ff-body); font-weight: 400; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.wrap-stretto { max-width: 780px; margin: 0 auto; padding: 0 40px; }
.tag-label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.38em;
  text-transform: uppercase; color: var(--mid);
}

/* ---- Bottoni ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--ff-body); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 17px 32px; border: none; cursor: pointer;
  transition: background .22s, transform .22s, box-shadow .22s, color .22s;
}
.btn-bordeaux { background: var(--bordeaux); color: var(--crema); }
.btn-bordeaux:hover { background: var(--bordeaux-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(90,15,24,.28); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,157,87,.28); }
.btn-ghost { background: transparent; color: var(--crema); border: 1px solid rgba(237,228,208,.4); }
.btn-ghost:hover { border-color: var(--crema); background: rgba(237,228,208,.06); }
.btn-linea { background: transparent; color: var(--bordeaux); border: 1px solid var(--bordeaux); }
.btn-linea:hover { background: var(--bordeaux); color: var(--crema); }

/* ---- Navbar ---- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h); display: flex; align-items: center;
  background: rgba(18,15,13,.98); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(237,228,208,.06);
}
#nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; }
.nav-logo { display: block; line-height: 0; flex-shrink: 0; }
.nav-logo img { height: 46px; width: auto; display: block; mix-blend-mode: screen; }
.nav-voci { display: flex; align-items: center; gap: 30px; }
.nav-voci a {
  font-size: 0.84rem; font-weight: 400; color: rgba(237,228,208,.78);
  transition: color .2s; white-space: nowrap;
}
.nav-voci a:hover, .nav-voci a[aria-current="page"] { color: var(--crema); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-size: 0.82rem; font-weight: 500; padding: 11px 20px;
  background: var(--bordeaux); color: var(--crema); transition: background .22s, transform .22s;
}
.nav-cta:hover { background: #4a0c14; transform: translateY(-1px); }

/* ---- Testata di pagina ---- */
.testata {
  background: var(--dark); color: var(--crema);
  padding: calc(var(--nav-h) + 76px) 0 76px;
  position: relative; overflow: hidden;
}
.testata::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(237,228,208,.18), transparent);
}
.testata .briciole { font-size: .78rem; color: rgba(237,228,208,.5); margin-bottom: 18px; }
.testata .briciole a:hover { color: var(--crema); }
.testata h1 {
  font-family: var(--ff-title); font-weight: 800;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; margin-bottom: 20px;
}
.testata .occhiello { max-width: 680px; font-size: 1.08rem; color: rgba(237,228,208,.82); }

/* ---- Sezioni ---- */
.section { padding: 92px 0; }
.section-crema2 { background: var(--crema-2); }
.section-scura { background: var(--dark); color: var(--crema); }
.section-scura .tag-label { color: rgba(237,228,208,.55); }

.sh { margin-bottom: 46px; max-width: 760px; }
.sh .tag-label { display: block; margin-bottom: 14px; }
.sh h2 {
  font-family: var(--ff-title); font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15;
}
.sh p { margin-top: 16px; color: var(--mid); font-size: 1.02rem; }
.section-scura .sh h2 { color: var(--crema); }
.section-scura .sh p { color: rgba(237,228,208,.7); }

/* ---- Testo lungo ---- */
.testo h2 {
  font-family: var(--ff-title); font-weight: 700; font-size: 1.72rem;
  line-height: 1.2; margin: 52px 0 18px;
}
.testo h3 {
  font-family: var(--ff-title); font-weight: 700; font-size: 1.24rem;
  margin: 34px 0 12px;
}
.testo p { margin-bottom: 18px; }
.testo p + h2, .testo ul + h2 { margin-top: 52px; }
.testo ul { margin: 0 0 22px; }
.testo ul li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.testo ul li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 7px; height: 7px; background: var(--bordeaux);
}
.testo strong { font-weight: 700; }
.testo a:not(.btn) { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Schede ---- */
.griglia { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.scheda {
  background: #fff; border: 1px solid var(--border); padding: 30px 28px;
}
.scheda h3 { font-family: var(--ff-title); font-weight: 700; font-size: 1.18rem; margin-bottom: 10px; }
.scheda p { color: var(--mid); font-size: .95rem; }
.section-scura .scheda { background: var(--dark-2); border-color: rgba(237,228,208,.12); }
.section-scura .scheda h3 { color: var(--crema); }
.section-scura .scheda p { color: rgba(237,228,208,.7); }

/* ---- Numeri ---- */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.numero { background: var(--crema-2); padding: 34px 26px; text-align: center; }
.numero .cifra {
  font-family: var(--ff-title); font-weight: 800; font-size: 2.5rem;
  line-height: 1; color: var(--bordeaux); display: block; margin-bottom: 10px;
}
.numero .didascalia { font-size: .84rem; color: var(--mid); line-height: 1.45; }
.section-scura .numeri { background: rgba(237,228,208,.14); }
.section-scura .numero { background: var(--dark); }
.section-scura .numero .cifra { color: var(--crema); }
.section-scura .numero .didascalia { color: rgba(237,228,208,.6); }

/* ---- Tabella ---- */
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dati { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
table.dati th, table.dati td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.dati th { font-weight: 500; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
table.dati td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati tbody tr:hover { background: var(--crema-2); }

/* ---- Domande ---- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--ff-title); font-weight: 700; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-body); font-weight: 300; font-size: 1.6rem; color: var(--bordeaux);
}
.faq details[open] summary::after { content: '−'; }
.faq details > div { padding: 0 0 24px; color: var(--mid); }
.faq details > div p + p { margin-top: 14px; }

/* ---- Richiamo finale ---- */
.richiamo { background: var(--bordeaux); color: var(--crema); padding: 76px 0; text-align: center; }
.richiamo h2 { font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.richiamo p { max-width: 560px; margin: 0 auto 30px; color: rgba(237,228,208,.85); }
.richiamo .bottoni { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Nota fonte ---- */
.fonte {
  font-size: .82rem; color: var(--mid); border-left: 2px solid var(--border);
  padding: 4px 0 4px 16px; margin-top: 26px;
}
.section-scura .fonte { color: rgba(237,228,208,.6); border-color: rgba(237,228,208,.2); }

/* ---- Piede ---- */
#piede { background: var(--dark); color: rgba(237,228,208,.62); padding: 66px 0 34px; font-size: .9rem; }
.piede-griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.piede-logo { height: 62px; width: auto; margin-bottom: 16px; mix-blend-mode: screen; }
#piede h4 {
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(237,228,208,.45); margin-bottom: 16px; font-weight: 500;
}
#piede li { margin-bottom: 9px; }
#piede a:hover { color: var(--crema); }
.piede-fondo {
  border-top: 1px solid rgba(237,228,208,.12); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: rgba(237,228,208,.4);
}

/* ============================================================
   IL SECONDO SGUARDO — la firma del sito.
   Una foto di casa resta ferma mentre scorri; a ogni tappa una linea
   attraversa l'immagine e compare la lettura del radar, in carattere da
   strumento. È il gesto del prestigiatore: prima quello che vedi tutti,
   poi quello che vede lui. Il testo è tutto nel documento, quindi si legge
   anche senza animazioni, senza JavaScript e dai motori.
============================================================ */
.sguardo { position: relative; background: var(--dark); color: var(--crema); }
/* solo padding-top: la scorciatoia «padding: 92px 0 0» cancellava i 40px
   laterali di .wrap sullo stesso elemento e il testo finiva a filo schermo */
.sguardo-intro { padding-top: 92px; }
.sguardo-intro h2 {
  font-family: var(--ff-title); font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; max-width: 620px;
}
.sguardo-intro p { margin-top: 16px; color: rgba(237,228,208,.7); max-width: 620px; }

.sguardo-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

/* colonna sinistra: la scena che resta ferma */
.scena {
  position: sticky; top: calc(var(--nav-h) + 40px);
  aspect-ratio: 4 / 3; overflow: hidden; background: #000;
}
.scena-foto { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.scena-foto.viva { opacity: 1; }
.scena-foto img { width: 100%; height: 100%; object-fit: cover; }
.scena-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,15,.78) 0%, rgba(20,17,15,.1) 55%);
}

/* la linea che attraversa la foto: il taglio del prestigiatore */
.scena-linea {
  position: absolute; left: 0; right: 0; top: 58%; height: 1px;
  background: var(--crema); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1); z-index: 3;
}
.scena.tagliata .scena-linea { transform: scaleX(1); }

/* la lettura dello strumento */
.scena-lettura {
  position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 4;
  background: rgba(11,9,8,.9); border: 1px solid rgba(237,228,208,.22);
  padding: 18px 20px; opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease .35s, transform .7s cubic-bezier(.16,1,.3,1) .35s;
}
.scena.tagliata .scena-lettura { opacity: 1; transform: none; }
.scena-lettura .voce {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(237,228,208,.5); display: block; margin-bottom: 10px;
}
.scena-lettura .righe { display: grid; gap: 7px; }
.scena-lettura .riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .82rem;
}
.scena-lettura .riga span:first-child { color: rgba(237,228,208,.66); }
.scena-lettura .riga b { font-weight: 500; font-variant-numeric: tabular-nums; }
.scena-lettura .riga .contro { color: rgba(237,228,208,.42); font-weight: 400; }

/* colonna destra: le tappe */
.tappa { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.tappa .dove {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(237,228,208,.45); margin-bottom: 18px;
}
.tappa h3 {
  font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.2; margin-bottom: 16px;
}
.tappa p { color: rgba(237,228,208,.76); margin-bottom: 14px; }
.tappa .nota {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .74rem; color: rgba(237,228,208,.42); line-height: 1.6;
  border-left: 1px solid rgba(237,228,208,.2); padding-left: 14px; margin-top: 20px;
}
/* la foto della tappa serve solo quando la scena ferma non c'è (mobile) */
.tappa-foto { display: none; margin-bottom: 24px; }
.tappa-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 900px) {
  .sguardo-corpo { grid-template-columns: 1fr; gap: 0; }
  .scena { display: none; }
  .tappa { min-height: 0; padding: 46px 0; border-bottom: 1px solid rgba(237,228,208,.12); }
  .tappa:last-child { border-bottom: 0; }
  .tappa-foto { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .scena-foto, .scena-linea, .scena-lettura { transition: none; }
  .scena-linea { transform: scaleX(1); }
  .scena-lettura { opacity: 1; transform: none; }
}

/* senza JavaScript la prima scena resta visibile e leggibile */
.nojs .scena-foto:first-child { opacity: 1; }
.nojs .scena-linea { transform: scaleX(1); }
.nojs .scena-lettura { opacity: 1; transform: none; }

/* ---- Comparsa in scorrimento ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.on { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .piede-griglia { grid-template-columns: 1fr 1fr; }
  .nav-voci { display: none; }
}
@media (max-width: 640px) {
  :root { --nav-h: 62px; }
  html { font-size: 16px; }
  .wrap, .wrap-stretto { padding: 0 22px; }
  .section { padding: 64px 0; }
  .testata { padding: calc(var(--nav-h) + 52px) 0 52px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .numeri { grid-template-columns: 1fr; }
  .piede-griglia { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .richiamo .bottoni .btn { width: auto; }
}

/* ============================================================
   PORTAFOGLIO — le case in gestione, piccole e con la zona.
   Servono a dimostrare che esistono, non a fare scena.
============================================================ */
.portfolio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pf { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--dark); }
.pf img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.pf:hover img { transform: scale(1.05); }
.pf figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(20,17,15,.88), transparent);
  color: var(--crema); font-size: .78rem; letter-spacing: .04em;
}
@media (max-width: 900px) { .portfolio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .portfolio { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ============================================================
   RICHIESTA DI CONTATTO
============================================================ */
.contatto { background: var(--dark); color: var(--crema); padding: 92px 0; }
.contatto-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contatto h2 { font-family: var(--ff-title); font-weight: 700; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1.15; margin-bottom: 18px; }
.contatto .intro { color: rgba(237,228,208,.75); margin-bottom: 26px; }
.contatto .punti { margin-bottom: 28px; }
.contatto .punti li { position: relative; padding-left: 24px; margin-bottom: 11px; color: rgba(237,228,208,.8); font-size: .95rem; }
.contatto .punti li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; background: var(--bordeaux-2); }
.contatto .poche {
  display: flex; gap: 11px; align-items: flex-start; font-size: .84rem; line-height: 1.6;
  color: rgba(237,228,208,.5); border-top: 1px solid rgba(237,228,208,.12); padding-top: 20px; margin-top: 26px;
}

.cta-form { background: var(--crema); color: var(--ink); padding: 40px 36px; }
.cta-form .form-or { text-align: center; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mid); margin-bottom: 22px; }
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--mid); margin-bottom: 7px; }
.fg input { width: 100%; background: #fff; border: 1px solid var(--border); color: var(--ink); font-family: var(--ff-body); font-size: .98rem; padding: 13px 15px; outline: none; transition: border-color .2s; }
.fg input::placeholder { color: #b9ad97; }
.fg input:focus { border-color: var(--bordeaux); }
.fg.err input { border-color: var(--bordeaux); }
.fg .err-msg { display: none; font-size: .74rem; color: var(--bordeaux); margin-top: 5px; }
.fg.err .err-msg { display: block; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px; cursor: pointer; font-size: .82rem; line-height: 1.5; color: #5c5249; }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--bordeaux); cursor: pointer; }
.consent a { color: var(--bordeaux); text-decoration: underline; }
.consent-err { display: none; font-size: .74rem; color: var(--bordeaux); margin: 0 0 12px; }
.consent-err.show { display: block; }
.form-ok, .form-err { display: none; text-align: center; padding: 30px 10px; }
.form-ok.on, .form-err.on { display: block; }
.form-ok h3, .form-err h3 { font-family: var(--ff-title); font-size: 1.5rem; color: var(--ink); margin-bottom: 12px; }
.form-ok p, .form-err p { font-size: .95rem; color: #5c5249; line-height: 1.7; }
.form-err h3 { color: var(--bordeaux); }

/* bottone WhatsApp sempre a portata di pollice */
.wa-fisso {
  position: fixed; right: 20px; bottom: 20px; z-index: 250;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .2s, background .2s;
}
.wa-fisso:hover { background: var(--wa-2); transform: translateY(-2px); }
.wa-fisso svg { width: 28px; height: 28px; }

@media (max-width: 900px) { .contatto-griglia { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) { .cta-form { padding: 30px 22px; } .contatto { padding: 64px 0; } }

/* ============================================================
   MOVIMENTO
   Tutto quello che si muove dipende dalla classe .js che il <head>
   mette sull'html: senza JavaScript nessun elemento viene nascosto e
   la pagina resta esattamente quella di prima, leggibile dai motori.
   Chi ha chiesto meno animazioni al proprio dispositivo non ne vede nessuna.
============================================================ */

/* riga di avanzamento della lettura, in cima allo schermo */
#avanzamento {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: var(--bordeaux-2); transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}

/* la barra di navigazione si compatta appena si scorre */
#nav { transition: height .34s cubic-bezier(.16,1,.3,1), box-shadow .34s; }
#nav.giu { height: 58px; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.nav-logo img { transition: height .34s cubic-bezier(.16,1,.3,1); }
#nav.giu .nav-logo img { height: 36px; }

/* le voci di menu: la riga si tira sotto la parola e si ritira dall'altro lato */
.nav-voci a { position: relative; }
.nav-voci a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--crema); transform: scaleX(0); transform-origin: right center;
  transition: transform .34s cubic-bezier(.16,1,.3,1);
}
.nav-voci a:hover::after,
.nav-voci a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

/* comparsa in scorrimento: il blocco sale di due centimetri mentre appare */
.js .anim { opacity: 0; transform: translateY(26px); }
.js .anim.leggera { transform: translateY(12px); }
.js .anim.leggera.pronta { transition-duration: .6s; }
.js .anim.pronta { transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.js .anim.on { opacity: 1; transform: none; }

/* le foto entrano da dietro un velo che scorre via */
.js .pf.anim { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js .pf.anim.pronta { transition: clip-path 1s cubic-bezier(.16,1,.3,1); }
.js .pf.anim.on { clip-path: inset(0 0 0 0); }
.js .pf.anim img { transform: scale(1.09); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.js .pf.anim.on img { transform: none; }
.pf:hover img { transform: scale(1.05) !important; }

/* la testata scivola via mentre si scende: dà profondità senza rubare la scena */
.testata .wrap { will-change: transform; }

/* entrata della testata: riga dopo riga, e in CSS puro perché parte al primo
   disegno della pagina invece di aspettare il file JavaScript in fondo al corpo */
.js .testata .wrap > * { opacity: 0; animation: entra .75s cubic-bezier(.16,1,.3,1) forwards; }
.js .testata .wrap > *:nth-child(1) { animation-delay: .04s; }
.js .testata .wrap > *:nth-child(2) { animation-delay: .13s; }
.js .testata .wrap > *:nth-child(3) { animation-delay: .22s; }
.js .testata .wrap > *:nth-child(4) { animation-delay: .31s; }
.js .testata .wrap > *:nth-child(5) { animation-delay: .40s; }
@keyframes entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* le domande si aprono invece di scattare */
.faq details[open] > div { animation: apri .42s cubic-bezier(.16,1,.3,1); }
@keyframes apri { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.faq summary::after { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.faq summary:hover { color: var(--bordeaux); }

/* le cifre che si contano da sole hanno bisogno di larghezza stabile */
.numero .cifra { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js .anim, .js .pf.anim { opacity: 1; transform: none; clip-path: none; }
  .js .pf.anim img { transform: none; }
  .js .testata .wrap > * { opacity: 1; animation: none; }
  #avanzamento { display: none; }
  .faq details[open] > div { animation: none; }
}