/* ============================================================
   Studio Denòva — core (tema-agnostico)
   Reset, token neutri di fallback, scala tipografica, layout
   e TUTTE le regole dei componenti.
   I valori di colore/font reali sono definiti in
   css/tema-chiaro.css / css/tema-scuro.css, che ridefiniscono
   soltanto le custom property sotto :root[data-theme="..."].
   ============================================================ */

/* ---------- @font-face (file reali in /fonts) ---------- */
@font-face { font-family:"Supreme"; src:url("../fonts/Supreme-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Supreme"; src:url("../fonts/Supreme-400-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Supreme"; src:url("../fonts/Supreme-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Sentient"; src:url("../fonts/Sentient-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sentient"; src:url("../fonts/Sentient-400-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Sentient"; src:url("../fonts/Sentient-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Technor"; src:url("../fonts/Technor-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Technor"; src:url("../fonts/Technor-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* ============================================================
   TOKEN — fallback neutri (i temi li sovrascrivono)
   ============================================================ */
:root {
  --bg:#F6F5F2;
  --bg-2:#FFFFFF;
  --card:#EEEDE9;
  --ink:#1E2224;
  --ink-2:#5C6266;
  --ink-3:#6B7176;
  --accent:#3E7C74;
  --accent-strong:#2F5F59;
  --hairline:rgba(30,34,36,0.12);
  --halo:rgba(246,245,242,0.82);
  --halo-glow:rgba(62,124,116,0.18);
  --cta-ink:#FFFFFF;

  --font-display:"Sentient", Georgia, serif;
  --font-text:"Supreme", system-ui, -apple-system, sans-serif;

  --wrap:1120px;
  --pad:clamp(1.25rem, 5vw, 4rem);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --dur:240ms; /* i temi possono allungarla */

  color-scheme:light;
}

/* ============================================================
   RESET
   ============================================================ */
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-padding-top:64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
img, svg, canvas { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea { font:inherit; color:inherit; }
::selection { background:color-mix(in srgb, var(--accent) 26%, transparent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
main { overflow-x:clip; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position:fixed; top:.75rem; left:.75rem; z-index:300; padding:.7rem 1.1rem;
  border-radius:12px; background:var(--bg-2); border:1px solid var(--accent); color:var(--ink);
  font-size:.9rem; font-weight:500; transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus { transform:none; }

/* ============================================================
   TIPOGRAFIA CONDIVISA
   ============================================================ */
.kicker {
  font-family:var(--font-text); font-size:.8rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-strong);
}

.display {
  font-family:var(--font-display); font-weight:500; font-size:clamp(3.2rem,10vw,7rem);
  line-height:1.02; letter-spacing:-0.01em;
}
.display--sm { font-size:clamp(2.4rem,6.5vw,4rem); }

.headline {
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:1.1; letter-spacing:-0.005em;
}

.lead {
  font-family:var(--font-text); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.6rem);
  color:var(--accent-strong); line-height:1.42;
}

.sub  { color:var(--ink-2); max-width:40ch; }
.body { color:var(--ink-2); font-size:1.04rem; max-width:38ch; }

.prose { color:var(--ink-2); font-size:1.06rem; max-width:62ch; }
.prose + .prose { margin-top:1rem; }
.prose strong { color:var(--ink); font-weight:500; }

/* ============================================================
   LAYOUT CONDIVISO
   ============================================================ */
.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow { max-width:720px; }

.section { position:relative; z-index:5; background:var(--bg); padding:clamp(4rem,10vw,8rem) 0; }
.section--alt { background:var(--bg-2); }
.section__title {
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.8rem,4.4vw,2.8rem);
  line-height:1.12; letter-spacing:-0.005em; margin:.6rem 0 1.1rem; max-width:24ch; text-wrap:balance;
}

.slide-reveal {
  opacity:0; transform:translateY(22px); will-change:opacity, transform;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.slide-reveal.is-visible { opacity:1; transform:none; }

/* ============================================================
   NAV (tema globale — solo .is-visible)
   ============================================================ */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:100; padding:0 var(--pad); opacity:0;
  transform:translateY(-6px); pointer-events:none; color:var(--ink);
  transition:background-color .4s var(--ease-out), opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.nav.is-visible {
  pointer-events:auto; opacity:1; transform:none;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
/* link a fuoco mentre la nav è ancora invisibile (2.4.7): la rendiamo
   visibile e opaca così il focus ring cade su una superficie leggibile */
.nav:focus-within {
  opacity:1; pointer-events:auto; transform:none;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav__row {
  max-width:var(--wrap); margin-inline:auto; height:64px; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem;
}
.nav__links { display:flex; gap:clamp(1rem,2.4vw,2rem); font-size:.92rem; font-weight:500; }
.nav__links a { position:relative; padding:.4rem 0; opacity:.78; transition:opacity .2s ease; }
.nav__links a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .nav__links a:hover { opacity:1; }
  .nav__links a:hover::after { transform:scaleX(1); }
}
.nav__links a:focus-visible::after { transform:scaleX(1); }
.nav__links a[aria-current="true"] { opacity:1; }
.nav__links a[aria-current="true"]::after { transform:scaleX(1); }
.nav__toggle, .nav__drawer { display:none; }

/* ---------- NAV MOBILE — hamburger + drawer ---------- */
@media (max-width:820px) {
  /* su mobile l'hamburger deve essere sempre raggiungibile, anche a scroll-top */
  .nav { opacity:1; pointer-events:auto; transform:none; }

  .nav__links,
  .nav__row > .cta--sm { display:none; }

  .nav__toggle {
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; border:1px solid currentColor; border-radius:11px;
    background:none; color:inherit; opacity:.75;
  }
  .nav__toggle span {
    display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
    transition:transform .3s var(--ease), opacity .3s;
  }
  .nav__toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child  { transform:translateY(-3.5px) rotate(-45deg); }

  .nav__drawer:not([hidden]) {
    display:block;
    position:absolute; top:64px; left:0; right:0;
    padding:.4rem var(--pad) 1.1rem;
    background:var(--bg); border-bottom:1px solid var(--hairline);
  }
  .nav__drawer a {
    display:flex; align-items:center; min-height:44px;
    font-size:1rem; font-weight:500; opacity:.85;
  }
  .nav__drawer a:not(.cta) { border-bottom:1px solid var(--hairline); }
  .nav__drawer .cta--block { margin-top:.85rem; min-height:44px; opacity:1; }

  /* drawer aperto: la nav resta opaca anche a scroll-top */
  .nav:has(.nav__drawer:not([hidden])) {
    opacity:1; pointer-events:auto; transform:none;
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--hairline);
  }
}

/* ---------- logo ---------- */
.logo { display:inline-flex; align-items:center; gap:.55rem; }
.logo__mark { height:34px; width:auto; color:var(--accent); }
.logo__word {
  font-family:var(--font-display); font-weight:500; font-size:1.4rem;
  letter-spacing:.005em; white-space:nowrap;
}
.footer .logo__mark { height:42px; }
.footer .logo__word { font-size:1.6rem; }
@media (max-width:560px) { .nav .logo__word { display:none; } }

/* ============================================================
   CTA + link-arrow
   ============================================================ */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.6rem;
  border-radius:999px; font-family:var(--font-text); font-weight:500; font-size:.96rem;
  color:var(--cta-ink,#fff); background:var(--accent); border:1px solid transparent;
  box-shadow:0 12px 30px -16px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; white-space:nowrap;
}
@media (hover:hover) and (pointer:fine) {
  .cta:hover { transform:translateY(-2px); filter:brightness(1.06); }
}
.cta:active { transform:scale(.97); transition-duration:.1s; }
.cta--sm { padding:.6rem 1.15rem; font-size:.86rem; }
.cta--block { width:100%; }

.link-arrow {
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-text);
  color:var(--accent-strong); font-weight:500; font-size:.95rem; transition:color .18s ease;
}
.link-arrow::after { content:"\2192"; transition:transform .18s ease; }
.link-arrow:active { transform:scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .link-arrow:hover::after { transform:translateX(3px); }
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center;
  transition:opacity .5s var(--ease-out), visibility .5s;
}
.preloader.is-done { opacity:0; visibility:hidden; }
.preloader__inner { display:grid; justify-items:center; gap:1.5rem; }
.preloader__mark {
  width:clamp(56px,12vw,72px); height:auto; color:var(--accent);
  animation:mk-breathe 3.2s ease-in-out infinite;
}
.preloader__bar { width:168px; height:3px; background:var(--hairline); border-radius:3px; overflow:hidden; }
.preloader__fill { display:block; height:100%; width:0%; background:var(--accent); transition:width .3s linear; }
@keyframes mk-breathe {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.8; transform:scale(.97); }
}

/* ============================================================
   SCROLLYTELLING — hero (una sola sezione scrub)
   ============================================================ */
.scrolly { position:relative; height:340vh; background:var(--bg); }
.scrolly__sticky { position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.scrolly__canvas { position:absolute; inset:0; width:100%; height:100%; }

/* Poster statico: visibile di default (progressive enhancement). Il JS lo
   nasconde e mostra il canvas SOLO dopo aver verificato che l'effetto
   scrub sia realmente utilizzabile (WebP + frame ok) — vedi js/site.js. */
.scrolly__poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.scrolly__canvas { display:none; }
.is-scrub-active .scrolly__canvas { display:block; }
.is-scrub-active .scrolly__poster { display:none; }

/* alone che insegue il cursore (solo desktop) */
.scrolly__cursor {
  position:absolute; left:0; top:0; width:44vmax; aspect-ratio:1; border-radius:50%;
  transform:translate3d(var(--cx, -50vw), var(--cy, -50vh), 0) translate(-50%, -50%);
  background:radial-gradient(closest-side, var(--halo-glow), transparent 70%);
  mix-blend-mode:screen; pointer-events:none; opacity:0;
  transition:opacity .6s var(--ease-out); z-index:2;
}
.scrolly.is-hovering .scrolly__cursor { opacity:1; }
@media (hover:none), (prefers-reduced-motion: reduce) { .scrolly__cursor { display:none; } }

/* velo che salda i bordi del canvas col fondo pagina + vignetta */
.scrolly__veil {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 42%, transparent) 0%,
      transparent 16%,
      transparent 60%,
      color-mix(in srgb, var(--bg) 50%, transparent) 84%,
      var(--bg) 100%),
    radial-gradient(150% 120% at 50% 38%, transparent 52%, color-mix(in srgb, var(--ink) 20%, transparent) 100%);
}

/* ---------- layer di testo ---------- */
.layer {
  position:absolute; z-index:3; max-width:min(90vw, 40rem); display:grid; gap:1rem;
  opacity:0; transform:translateY(22px); filter:blur(7px);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out), filter .34s var(--ease-out);
  will-change:opacity, transform, filter;
}
.layer.is-active {
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
.layer--center {
  left:50%; top:50%; transform:translate(-50%, calc(-50% + 24px)); text-align:center; justify-items:center;
}
.layer--center.is-active { transform:translate(-50%, -50%); }
/* lastra dietro il testo centrato della hero — guidata dal tema (--halo) */
.layer--center::before {
  content:""; position:absolute; left:50%; top:50%; width:220%; aspect-ratio:1.3;
  transform:translate(-50%, -50%);
  background:radial-gradient(closest-side, var(--halo), color-mix(in srgb, var(--halo) 60%, transparent) 48%, transparent 80%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  -webkit-mask:radial-gradient(closest-side, #000 46%, transparent 84%);
  mask:radial-gradient(closest-side, #000 46%, transparent 84%);
  z-index:-1; pointer-events:none;
}
.layer--left  { left:var(--pad); top:50%; transform:translateY(calc(-50% + 24px)); }
.layer--left.is-active  { transform:translateY(-50%); }
.layer--right { right:var(--pad); top:50%; text-align:right; justify-items:end; transform:translateY(calc(-50% + 24px)); }
.layer--right.is-active { transform:translateY(-50%); }
.layer--top   { left:var(--pad); right:var(--pad); top:14vh; max-width:none; justify-items:start; }
.layer--top.is-active { transform:none; }

/* leggibilità degli overlay hero: alone da --halo invece di valori hardcoded */
.scrolly .layer .kicker { text-shadow:0 0 3px var(--halo), 0 0 12px var(--halo); }
.scrolly .layer .headline,
.scrolly .layer .display { color:var(--ink); text-shadow:0 1px 3px var(--halo), 0 0 20px var(--halo); }
.scrolly .layer .lead,
.scrolly .layer .sub,
.scrolly .layer .body { text-shadow:0 0 8px var(--halo), 0 0 18px var(--halo); }

.scroll-hint {
  margin-top:2rem; display:inline-flex; flex-direction:column; align-items:center; gap:.55rem;
  color:var(--accent-strong);
}
.scroll-hint__txt {
  font-family:var(--font-text); font-size:.72rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; text-shadow:0 1px 10px var(--halo);
}
.scroll-hint__chev { animation:nudge 1.7s ease-in-out infinite; filter:drop-shadow(0 1px 5px var(--halo)); }
@keyframes nudge {
  0%,100% { transform:translateY(-2px); opacity:.55; }
  50%     { transform:translateY(3px);  opacity:1; }
}

.actions { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }

/* ---------- indicatore di scroll ---------- */
.progress {
  position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; align-items:center;
  gap:.85rem; padding:0 var(--pad) 1.15rem; pointer-events:none; opacity:0;
  transition:opacity .4s var(--ease-out);
}
.progress__label {
  flex:none; font-family:var(--font-text); font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); text-shadow:0 1px 8px var(--halo);
}
.progress__rail { position:relative; flex:1; height:3px; border-radius:3px; background:var(--hairline); }
.progress__fill {
  position:absolute; inset:0; border-radius:inherit; background:var(--accent);
  clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0);
}
.progress__pct {
  flex:none; min-width:3em; text-align:right; font-size:.66rem; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--ink-2); text-shadow:0 1px 8px var(--halo);
}

/* ============================================================
   SEZIONE TRATTAMENTI — griglia
   ============================================================ */
.card-grid {
  display:grid; gap:1px; background:var(--hairline);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
}
.card { background:var(--bg); padding:1.8rem 1.6rem; display:grid; gap:.5rem; align-content:start; }
.card__icon { width:28px; height:28px; color:var(--accent); }
.card h3 { font-family:var(--font-display); font-weight:500; font-size:1.15rem; }
.card p { color:var(--ink-2); font-size:.96rem; }

/* ============================================================
   TECNOLOGIA — parallax di foto
   ============================================================ */
.tech { display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:repeat(3,1fr); align-items:start; max-width:52rem; margin-inline:auto; }
.tech figure { border-radius:12px; overflow:hidden; }
.tech figure img { display:block; width:100%; height:auto; }
.tech figure:nth-child(2) { transform:translateY(var(--par,0)); }
@media (max-width:640px) {
  .tech { grid-template-columns:1fr; max-width:22rem; margin-inline:auto; }
}

/* ============================================================
   PERCORSO PAZIENTE — timeline
   ============================================================ */
.timeline { display:grid; gap:1.5rem; counter-reset:step; }
@media (min-width:820px) { .timeline { grid-auto-flow:column; grid-auto-columns:1fr; } }
.step { display:grid; gap:.4rem; padding-top:1.2rem; border-top:2px solid var(--accent); }
.step::before {
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-size:1.1rem; color:var(--accent-strong);
  font-variant-numeric:tabular-nums;
}
.step h3 { font-family:var(--font-display); font-weight:500; font-size:1.1rem; }
.step p { color:var(--ink-2); font-size:.94rem; }

/* ============================================================
   TEAM
   ============================================================ */
.team { display:grid; gap:clamp(1.5rem,4vw,2.5rem); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.team__card figure { border-radius:12px; overflow:hidden; margin-bottom:.9rem; aspect-ratio:3/4; }
.team__card figure img { width:100%; height:100%; object-fit:cover; }
.team__card h3 { font-family:var(--font-display); font-weight:500; font-size:1.1rem; }
.team__card p { color:var(--ink-2); font-size:.92rem; }

/* ============================================================
   FORM DI RICHIESTA APPUNTAMENTO
   ============================================================ */
.reqform { display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; margin-top:2rem; }
.field { display:grid; gap:.4rem; }
.field--full, .reqform__foot { grid-column:1/-1; }
.field label { font-size:.85rem; font-weight:500; color:var(--ink-2); }
.field input, .field select, .field textarea {
  font:inherit; padding:.7rem .8rem; border-radius:10px;
  border:1px solid var(--hairline); background:var(--bg-2); color:var(--ink);
}
.field textarea { min-height:6rem; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.reqform__foot { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.reqform__note { font-size:.8rem; color:var(--ink-3); margin-top:.5rem; }
.reqform__ok {
  margin-top:1.5rem; padding:1.2rem 1.4rem; border-radius:12px;
  border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.reqform__ok span { display:block; color:var(--ink-2); font-size:.9rem; margin-top:.3rem; }
@media (max-width:620px) {
  .reqform { grid-template-columns:1fr; }
  .field--half { grid-column:auto; }
}

/* ============================================================
   DATI DI CONTATTO
   ============================================================ */
.facts { display:grid; gap:.9rem; margin-top:1.5rem; }
.facts div { display:grid; gap:.15rem; }
.facts span { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.facts b, .facts a { font-weight:500; font-variant-numeric:tabular-nums; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--bg-2); border-top:1px solid var(--hairline); padding:clamp(3rem,7vw,5rem) 0 2.5rem; }
.footer__row { display:grid; gap:2rem; grid-template-columns:1.4fr 1fr; }
@media (max-width:720px) { .footer__row { grid-template-columns:1fr; } }
.footer__nav { display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; font-size:.9rem; }
.footer__link {
  background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.footer__fine { margin-top:2.5rem; font-size:.8rem; color:var(--ink-3); display:grid; gap:.6rem; max-width:70ch; }
.footer__fine a { color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   TOAST (placeholder link legali)
   ============================================================ */
.toast {
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--bg); padding:.9rem 1.2rem; border-radius:12px; font-size:.9rem;
  max-width:min(90vw,40rem); z-index:250; transition:transform .3s var(--ease);
}
.toast.is-visible { transform:translateX(-50%); }

/* ============================================================
   PREFERS-REDUCED-MOTION — blocco condiviso
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* Layout "statico" per lo scrollytelling: impaginazione a flusso normale
   invece che overlay assoluti sovrapposti. Si applica sia per
   prefers-reduced-motion sia, via JS (js/site.js), quando l'effetto scrub
   non è utilizzabile (WebP non supportato o troppi frame falliti): in
   entrambi i casi il canvas resta spento e serve il poster statico sotto
   testi impilati normalmente, non testi invisibili o sovrapposti. */
html.static-scrub {
  scroll-behavior: auto;
}
html.static-scrub .scrolly { height:auto; }
html.static-scrub .scrolly__sticky { position:static; height:auto; min-height:70vh; }
/* il canvas/poster torna nel flusso (still frame) invece di coprire la copy hero;
   il velo/vignetta assoluto sparisce del tutto */
html.static-scrub .scrolly__canvas, html.static-scrub .scrolly__poster { position:static; width:100%; height:auto; aspect-ratio:16/9; }
html.static-scrub .scrolly__veil { display:none; }
html.static-scrub .scrolly__cursor, html.static-scrub .scroll-hint { display:none; }
html.static-scrub .preloader__mark { animation:none; }
html.static-scrub .layer {
  position:static; opacity:1; transform:none; filter:none; max-width:none;
  padding:2rem var(--pad); text-align:left;
}
html.static-scrub .layer--center, html.static-scrub .layer--center.is-active,
html.static-scrub .layer--left, html.static-scrub .layer--left.is-active,
html.static-scrub .layer--right, html.static-scrub .layer--right.is-active { transform:none; text-align:left; justify-items:start; }
html.static-scrub .layer--center::before { display:none; }
html.static-scrub .slide-reveal { opacity:1 !important; transform:none !important; }
html.static-scrub .progress { display:none; }