/* Landing Verso (/ e /en/). Grafica «Colour chapters», mockup A approvato il 2026-10-26
   (.taste-skill/mockup-a e mockup-a-it, decisioni in .taste-skill/direzione/riepilogo.md).
   Una sezione, un colore: menu blu · hero stucco · Cos'è Verso vinaccia · Mappa bianco ·
   Come funziona verde · Chi siamo stucco · modulo blu · domande bianco · footer inchiostro.
   Un solo carattere, Urbanist 400/600/700. Angoli vivi. */

@font-face { font-family: Urbanist; src: url(fonts/Urbanist-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Urbanist; src: url(fonts/Urbanist-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Urbanist; src: url(fonts/Urbanist-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --stucco: #dedad3;
  --tono: #d3cec6;
  --ardesia: #4e5566;
  --inchiostro: #0b1533;
  --blu: #0d47ec;
  --blu-scuro: #0a3bd0;
  --vinaccia: #4a2424;
  --verde: #091d12;
  --verde-passo: #16301f;
  --bianco: #ffffff;

  --m: 32px;
  --s-small: 14px;
  --s-body: 18px;
  --s-lead: 24px;
  --s-head: clamp(32px, 5vw, 76px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 700px) { :root { --m: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (max-width: 600px) { html { scroll-padding-top: 68px; } }
body {
  margin: 0; background: var(--stucco); color: var(--inchiostro);
  font-family: Urbanist, system-ui, sans-serif; font-size: var(--s-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
input, textarea, button { font-family: inherit; }
a, button, input, label, summary { -webkit-tap-highlight-color: transparent; }
main:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
figure { margin: 0; }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }
.menu :focus-visible, .s-cose :focus-visible, .s-come :focus-visible, .s-modulo :focus-visible, .piede :focus-visible { outline-color: var(--bianco); }
.s-modulo .scheda :focus-visible { outline-color: var(--blu); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 12px 20px; background: var(--bianco); color: var(--blu); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.head { font-weight: 700; font-size: var(--s-head); letter-spacing: -0.03em; line-height: 0.92; text-wrap: balance; }
.lead { font-size: var(--s-lead); line-height: 1.45; }
.wrap { padding-inline: var(--m); }
.field { padding-block: clamp(80px, 10vw, 160px); }
.nw { white-space: nowrap; }

/* ---------- Pulsanti: angoli vivi, un solo colore pieno ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  font: 600 18px/1 Urbanist, sans-serif; text-decoration: none; text-align: center;
  border: 0; cursor: pointer; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 180ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--blu { background: var(--blu); color: var(--bianco); }
.btn--blu:hover { background: var(--blu-scuro); }
.btn--bianco { background: var(--bianco); color: var(--blu); }
.btn--bianco:hover { background: var(--stucco); }
.link { font-weight: 600; font-size: 18px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Menu: blu, resta in alto mentre si scorre ---------- */
.menu {
  position: sticky; top: 0; z-index: 20; background: var(--blu); color: var(--bianco);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--m);
}
.menu__logo img { height: 44px; width: auto; }
.menu a { text-decoration: none; }
.menu__nav { display: flex; gap: 28px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.menu__nav a:hover, .lingue a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu__dx { display: flex; align-items: center; gap: 24px; }
.lingue { font-weight: 600; white-space: nowrap; }
.lingue [aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.menu .btn { min-height: 44px; padding: 0 20px; font-size: var(--s-body); white-space: nowrap; }
.foglio { display: none; }
.foglio summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.foglio summary::-webkit-details-marker { display: none; }
.foglio[open] summary { text-decoration: underline; text-underline-offset: 4px; }
.foglio:not([open]) nav { display: none; }
.foglio nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--blu); padding: 8px var(--m) 32px; display: flex; flex-direction: column; }
.foglio nav a { font-size: var(--s-lead); font-weight: 600; padding: 12px 0; }
@media (max-width: 1100px) { .menu__nav { display: none; } .foglio { display: block; } }
@media (max-width: 600px) {
  .menu { gap: 12px; padding-block: 12px; }
  .menu__logo img { height: 36px; }
  .menu__dx { gap: 14px; }
  .menu .btn { padding: 0 12px; font-size: 16px; }
  .lingue, .foglio summary { font-size: 16px; }
  /* Solo in italiano: il nome intero del pulsante andava su due righe. */
  .menu .per-esteso { display: none; }
}

/* ---------- Hero, su stucco ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 76px); background: var(--stucco); }
.hero__text { padding: clamp(56px, 8vw, 120px) var(--m) 64px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hero h1 { font-weight: 700; font-size: clamp(38px, 4.6vw, 72px); letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
.hero__frase { font-weight: 600; font-size: clamp(24px, 2.05vw, 30px); line-height: 1.25; max-width: 30em; text-wrap: balance; }
.hero__sub { max-width: 36em; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.hero__media { position: relative; min-height: 640px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Sotto i 900px il testo sta sulla foto, in basso e in bianco, su una sfumatura d'inchiostro
   che si scurisce verso il fondo; l'hero riempie lo schermo sotto il menu (76 o 68 px). */
@media (max-width: 900px) {
  .hero { position: relative; display: block; min-height: 0; background: var(--inchiostro); }
  .hero__media { position: absolute; inset: 0; min-height: 0; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 21, 51, 0.85) 0%, rgba(11, 21, 51, 0.55) 45%, rgba(11, 21, 51, 0.15) 75%, rgba(11, 21, 51, 0) 100%); }
  .hero__text { position: relative; z-index: 1; min-height: calc(100svh - 76px); justify-content: flex-end; gap: 20px; padding-top: 120px; padding-bottom: 40px; color: var(--bianco); }
}
@media (max-width: 600px) { .hero__text { min-height: calc(100svh - 68px); } }

/* ---------- Cos'è Verso, su vinaccia ---------- */
.s-cose { background: var(--vinaccia); color: var(--bianco); }
.nd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px; align-items: center; }
.nd__testo { grid-column: 1 / 9; display: flex; flex-direction: column; gap: 56px; }
.nd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.nd__cols strong { font-weight: 700; }
.nd figure { grid-column: 9 / 13; }
.nd figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
/* Sotto i 900px le griglie da 12 colonne passano a una sola: con 11 spazi da 32px non scendono
   sotto i 352px, e su un telefono stretto la pagina scorreva di lato (come .iscr). */
@media (max-width: 900px) {
  .nd { grid-template-columns: minmax(0, 1fr); }
  .nd__testo, .nd figure { grid-column: 1 / -1; } .nd__cols { grid-template-columns: 1fr; }
}
/* Sotto i 900px la foto del cameriere fa da sfondo alla sezione, sotto un velo vinaccia
   più leggero in fondo; non entra con lo scorrimento, perché lo spostamento scoprirebbe il bordo. */
@media (max-width: 900px) {
  .s-cose { position: relative; isolation: isolate; }
  .nd__testo { position: relative; z-index: 1; }
  .nd figure { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .nd figure picture { display: block; height: 100%; }
  .nd figure img { height: 100%; aspect-ratio: auto; }
  .nd figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(74, 36, 36, 0.92) 0%, rgba(74, 36, 36, 0.8) 55%, rgba(74, 36, 36, 0.45) 100%); }
  .reveal-ready .nd figure[data-reveal] { transform: none; }
}
/* Solo in italiano: sul telefono il titolo a 32 px andava su tre righe. */
@media (max-width: 600px) { html[lang="it"] .s-cose .head { font-size: 30px; } }

/* ---------- Mappa, su bianco ---------- */
.s-mappa { background: var(--bianco); }
.tavola__top { display: flex; flex-direction: column; gap: 24px; }
.tavola__top h2 { max-width: 20ch; }
.tavola__top p { max-width: 52ch; }
.mappa { margin-top: 48px; }
.mappa img { width: 100%; max-width: 1400px; height: auto; margin-inline: auto; }
.mappa figcaption { max-width: 52ch; margin: 20px auto 0; text-align: center; font-size: var(--s-small); line-height: 1.4; text-wrap: balance; }
@media (max-width: 900px) { .tavola__top p { max-width: none; } }
@media (max-width: 600px) { .tavola__top p { font-size: var(--s-body); } }

/* ---------- Come funziona, sul verde della tenda ---------- */
.s-come { background: var(--verde); color: var(--bianco); }
.ga { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px; align-items: center; }
.ga__testo { grid-column: 1 / 7; }
.ga__foto { grid-column: 8 / 13; }
.ga__foto img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 900px) { .ga { grid-template-columns: minmax(0, 1fr); } .ga__testo, .ga__foto { grid-column: 1 / -1; } }
/* Sotto i 900px la foto della tenda fa da sfondo alla sezione, come il cameriere in Cos'è Verso. */
@media (max-width: 900px) {
  .s-come { position: relative; isolation: isolate; }
  .ga__testo { position: relative; z-index: 1; }
  .ga__foto { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .ga__foto picture { display: block; height: 100%; }
  .ga__foto img { height: 100%; aspect-ratio: auto; }
  .ga__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9, 29, 18, 0.92) 0%, rgba(9, 29, 18, 0.8) 60%, rgba(9, 29, 18, 0.45) 100%); }
  .reveal-ready .ga__foto[data-reveal] { transform: none; }
}

.scelta { border: 0; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.scelta legend { font-size: var(--s-lead); font-weight: 600; margin-bottom: 12px; padding: 0; }
.scelta__opz { display: flex; }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelta label {
  min-height: 52px; padding: 0 24px; display: flex; align-items: center; font-weight: 600; font-size: 18px;
  background: var(--verde-passo); color: var(--bianco); cursor: pointer; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.scelta input:checked + label { background: var(--bianco); color: var(--verde); }
.scelta input:focus-visible + label { outline: 3px solid var(--bianco); outline-offset: 3px; }

/* I tre passi su un bordo; il passo che la scelta indica prende un verde un tono più chiaro. */
.sp { list-style: none; margin: 48px -24px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp li { padding: 18px 24px; transition: background-color 250ms var(--ease-out); }
.sp h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.sp p { margin-top: 8px; max-width: 44ch; }
.s-come:has(#s-fuori:checked) .sp li:nth-child(2),
.s-come:has(#s-casa:checked) .sp li:nth-child(3) { background: var(--verde-passo); }
@media (max-width: 900px) {
  .sp { margin-inline: calc(-1 * var(--m)); } .sp li { padding-inline: var(--m); }
  /* Sulla foto il passo scelto lascia trasparire un po' la tenda. */
  .s-come:has(#s-fuori:checked) .sp li:nth-child(2),
  .s-come:has(#s-casa:checked) .sp li:nth-child(3) { background: rgba(22, 48, 31, 0.8); }
}

/* ---------- Chi siamo, su stucco ---------- */
.chi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; }
.chi h2 { grid-column: 1 / 7; max-width: 11ch; }
.chi p { grid-column: 8 / 13; }
@media (max-width: 900px) { .chi { grid-template-columns: minmax(0, 1fr); } .chi h2, .chi p { grid-column: 1 / -1; } }

/* ---------- Modulo, su blu: titolo, scheda bianca, tre promesse ---------- */
.s-modulo { background: var(--blu); color: var(--bianco); }
.iscr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 32px; align-items: start; }
.iscr__testa { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 24px; }
.scheda {
  grid-column: 7 / 13; grid-row: 1 / 3; background: var(--bianco); color: var(--inchiostro);
  padding: clamp(28px, 3.4vw, 48px);
}
.iscr__patti { grid-column: 1 / 6; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.iscr__patti h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.iscr__patti p { margin-top: 6px; max-width: 36ch; }
/* Sotto i 900px una colonna sola: le 12 colonne con 11 spazi da 32px non scendono sotto i 352px,
   e su un telefono stretto la scheda usciva dallo schermo con i campi. */
@media (max-width: 900px) {
  .iscr { grid-template-columns: minmax(0, 1fr); }
  .iscr__testa, .scheda, .iscr__patti { grid-column: 1 / -1; grid-row: auto; }
}

.form { display: flex; flex-direction: column; gap: 22px; }
.form__riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .form__riga { grid-template-columns: 1fr; } }
.f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f > label, .fieldset legend { font-weight: 600; font-size: var(--s-body); padding: 0; }
.input, .textarea {
  width: 100%; border: 2px solid var(--ardesia); border-radius: 0; background: var(--bianco);
  color: var(--inchiostro); font: 400 18px Urbanist, sans-serif; transition: border-color 180ms var(--ease-out);
}
.input { height: 52px; padding: 0 14px; }
.textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--blu); outline: none; }
.input:focus-visible, .textarea:focus-visible { outline: 2px solid var(--blu); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--vinaccia); }
.input[aria-invalid="true"]:focus { border-color: var(--blu); }
.textarea::placeholder { color: var(--ardesia); opacity: 1; }

.fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fieldset legend { line-height: 1.4; }
.fieldset.is-error legend { color: var(--vinaccia); }
.help { font-size: var(--s-small); line-height: 1.5; }
.yesno { display: flex; gap: 12px; margin-top: 4px; }
.yesno button {
  flex: 1; height: 56px; border: 2px solid var(--ardesia); border-radius: 0; background: var(--bianco);
  color: var(--inchiostro); font-weight: 600; font-size: 18px; cursor: pointer; touch-action: manipulation;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.yesno button:hover { border-color: var(--blu); }
.yesno button[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: var(--bianco); }
.fieldset.is-error .yesno button { border-color: var(--vinaccia); }

.err { font-weight: 600; font-size: 15px; color: var(--vinaccia); }
.err span { display: flex; gap: 8px; align-items: center; }
.err span::before {
  content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--vinaccia); color: var(--bianco); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: var(--s-small); line-height: 1.5; cursor: pointer; }
.consenso input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--blu); cursor: pointer; }
.consenso input[aria-invalid="true"] { outline: 2px solid var(--vinaccia); outline-offset: 1px; }
.consenso a { color: var(--blu); }
.form .btn { width: 100%; min-height: 56px; }

/* Ringraziamento: prende il posto del modulo nella scheda. */
.thanks { display: flex; flex-direction: column; }
.thanks:focus { outline: none; }
.thanks__check circle { stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset .6s var(--ease-out); }
.thanks__check polyline { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .35s var(--ease-out) .5s; }
.thanks.is-checked .thanks__check circle, .thanks.is-checked .thanks__check polyline { stroke-dashoffset: 0; }
.thanks h3 { margin-top: 24px; font-size: clamp(32px, 3.2vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--blu); }
.thanks > p { margin-top: 12px; }
.open { margin: 32px calc(-1 * clamp(28px, 3.4vw, 48px)) calc(-1 * clamp(28px, 3.4vw, 48px)); padding: clamp(28px, 3.4vw, 48px); background: var(--tono); }
.open__q { font-weight: 700; font-size: var(--s-lead); line-height: 1.25; }
.open__text { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.open__form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.open__form .btn { align-self: flex-start; min-height: 48px; }
.open__sent { margin-top: 16px; font-weight: 700; color: var(--blu); }

/* ---------- Domande, su bianco ---------- */
.s-domande { background: var(--bianco); }
.s-domande h2 { font-size: clamp(40px, 5.4vw, 78px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; max-width: 14ch; text-wrap: balance; }
.domande__lista { margin: 80px 0 0 33.3%; display: flex; flex-direction: column; gap: 4px; }
.domande details { padding: 18px 24px; margin-inline: -24px; transition: background-color 180ms var(--ease-out); }
.domande details[open] { background: var(--tono); }
.domande summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; font-size: var(--s-lead); line-height: 1.3; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.domande summary svg { flex: none; margin-top: 6px; transition: transform 200ms var(--ease-out); }
.domande details[open] summary svg { transform: rotate(180deg); }
.domande details p { margin-top: 14px; max-width: 48ch; }
.domande details a { color: var(--blu); }
@media (max-width: 900px) { .domande__lista { margin-left: 0; margin-top: 48px; } }
/* Sotto i 700px il margine della pagina è 16px: il fondo della domanda aperta arriva al bordo, non oltre. */
@media (max-width: 700px) { .domande details { padding-inline: var(--m); margin-inline: calc(-1 * var(--m)); } }
@media (max-width: 600px) { .domande summary { font-size: var(--s-body); font-weight: 600; } }

/* ---------- Footer, su inchiostro ---------- */
.piede {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 32px;
  padding: clamp(56px, 6vw, 96px) var(--m) 40px; background: var(--inchiostro); color: var(--bianco);
}
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede__logo { grid-column: 1 / 7; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 20px; }
.piede__logo img { height: clamp(140px, 16vw, 220px); width: auto; align-self: flex-start; }
.piede__logo p { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.piede__join { grid-column: 8 / 13; grid-row: 1; display: flex; flex-direction: column; gap: 12px; }
.piede__join span:first-child { font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
a.piede__join:hover { text-decoration: none; }
a.piede__join:hover span:first-child { text-decoration: underline; text-underline-offset: 6px; }
.piede__nav { grid-column: 8 / 10; grid-row: 2; }
.piede__legal { grid-column: 10 / 13; grid-row: 2; }
.piede__nav a, .piede__legal a { display: block; padding: 4px 0; }
.piede__info { grid-column: 1 / 13; grid-row: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; padding-top: 32px; }
@media (max-width: 900px) {
  .piede { grid-template-columns: minmax(0, 1fr); }
  .piede__logo, .piede__join, .piede__nav, .piede__legal, .piede__info { grid-column: 1 / -1; grid-row: auto; }
  .piede__logo img { height: 140px; }
}

/* ---------- Movimento ----------
   Il titolo dell'hero sale riga per riga da sotto la sua linea di base (lo divide in righe
   landing.js); le parti delle sezioni entrano una dopo l'altra allo scorrimento. Lo stato
   nascosto vale solo con lo script e senza la riduzione del movimento. */
.righe .riga { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.righe .riga > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  /* Finché lo script non ha diviso le righe il titolo non si vede; se lo script non arriva,
     dopo 1,5 secondi compare comunque. */
  .js .hero h1:not(.righe) { opacity: 0; animation: compari 0s 1.5s forwards; }
  .righe .riga > span { transform: translateY(105%); animation: sali 900ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
  .reveal-ready [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms var(--ease-out) var(--d, 0ms), transform 800ms var(--ease-expo) var(--d, 0ms);
  }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes sali { to { transform: none; } }
@keyframes compari { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}