/* =====================================================================
   MOVIMENTO — token e componenti condivisi (Toscana Reputation Studio)
   Dal 19/09/2026. Va con movimento.js e con le librerie di vendor/.
   Leggi README.md di questa cartella prima di montarlo.

   Principio: il CSS da solo non nasconde mai niente. Gli stati iniziali
   delle animazioni valgono solo sotto html.mv-attesa, che mette lo script
   in testa alla pagina e toglie il motore (o il timer di sicurezza).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Token: curve e durate. Sono l'unica sorgente: movimento.js legge
      le durate da qui con getComputedStyle.
   --------------------------------------------------------------------- */
:root {
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);        /* la firma: reveal e ingressi */
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); /* scambi, aperture */
  --ease-in-out-forte: cubic-bezier(.86, .01, .14, 1);  /* sipari, menù a tutto schermo */
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);   /* micro-interazioni */

  --dur-reveal: .75s;     /* titoli, paragrafi, foto */
  --dur-ingresso: 1.6s;   /* hero, sipario */
  --dur-lettera: 1.8s;    /* disegno della lettera-contorno */
  --dur-rapida: .35s;     /* chiusure, hover */
  --stagger: .12s;        /* fra una riga e la successiva */
  --ritardo: .15s;        /* prima del primo elemento di un gruppo */

  /* Colori usati dai componenti: l'archetipo li ridefinisce dalla palette */
  --mv-inchiostro: #1c1a19;
  --mv-accento: #9bb7d4;          /* contorno delle lettere: un chiaro, mai nero pieno */
  --mv-barra: rgba(0, 0, 0, .28); /* scrollbar */
  --mv-riempi: #1c1a19;           /* riempimento dei bottoni al passaggio */
  --mv-riempi-testo: #fff;
}

/* Sfondo di pagina che sfuma per sezione (data-sfondo): la variabile è
   registrata come colore, così la transizione la fa il CSS e il JS si limita
   a cambiarla. Nessuna dipendenza. */
@property --sfondo {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
/* NIENTE transizione su --sfondo qui: è una proprietà ereditata e animarla su html
   ricalcola lo stile di tutta la pagina a ogni frame (misurato 19/09: 12 % di frame persi
   contro 0,1 %). La sfumatura la fa l'archetipo con `transition: background-color` su body. */

/* ---------------------------------------------------------------------
   2. Stati iniziali — SOLO sotto html.mv-attesa
   --------------------------------------------------------------------- */
html.mv-attesa [data-mv="linee"],
html.mv-attesa [data-mv="fade"],
html.mv-attesa [data-mv="clip"],
html.mv-attesa [data-mv="foto"],
html.mv-attesa [data-mv="riquadro"],
html.mv-attesa [data-mv="mappa"] { opacity: 0; }

/* Linee di separazione che si disegnano (data-mv-linea="sx|dx"): la linea è
   un ::before (in alto) e, con .mv-linea-giu, un ::after (in basso); la
   lunghezza è --mv-l, da 0 a 1, che il motore porta a 1 all'ingresso. Senza
   motore --mv-l non è mai impostata e la linea è intera. */
[data-mv-linea], .mv-linea-giu { position: relative; }
[data-mv-linea]::before, .mv-linea-giu::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: var(--mv-linea, rgba(0, 0, 0, .16));
  transform: scaleX(var(--mv-l, 1)); transform-origin: left center;
}
[data-mv-linea]::before { top: 0; }
.mv-linea-giu::after { bottom: 0; }
[data-mv-linea="dx"]::before, [data-mv-linea="dx"].mv-linea-giu::after { transform-origin: right center; }
html.mv-attesa [data-mv-linea]::before, html.mv-attesa .mv-linea-giu::after { transform: scaleX(0); }

/* Titolo spezzato: ogni parola sale dalla sua maschera. Padding e margine
   negativi tengono dentro le discendenti e il corsivo che sporge. */
.mv-parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .04em .14em;
  margin: 0 -.04em -.14em;
}
.mv-parola__int { display: inline-block; will-change: transform; }

.vh, .mv-testo {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. Foto a tre piani: riquadro (data-velocita negativa) → interno più alto
      del riquadro (data-velocita positiva, corsa limitata) → immagine che
      entra con zoom. L'interno sporge del 10 % sopra e sotto: è il margine
      che la parallasse può consumare senza scoprire i bordi.
   --------------------------------------------------------------------- */
.foto-3d { position: relative; overflow: hidden; }
.foto-3d__int { position: absolute; inset: -10% 0; }
.foto-3d__int picture,
.foto-3d__int img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* La finestra della lama (movimento.js, lamaDi): creata dal motore attorno
   all'immagine della foto. Occupa il riquadro e ritaglia; entra dal lato con un
   transform mentre l'interno fa il moto contrario. Senza motore non esiste. */
.mv-lama, .mv-lama__int { position: absolute; inset: 0; }
.mv-lama { overflow: hidden; }

/* ---------------------------------------------------------------------
   4. Lettera-contorno: SVG <text> nel serif del sito, solo contorno.
      Decorativa: aria-hidden, nessun evento, mai sopra un testo da leggere
      con un colore che ne abbassi il contrasto (il contorno è sottile).
   --------------------------------------------------------------------- */
.lettera {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  height: clamp(500px, 60vh, 620px);
  aspect-ratio: 1;
  user-select: none;
}
.lettera svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lettera text {
  fill: none;
  stroke: var(--mv-accento);
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  font-family: var(--f-didone, Georgia, serif);
  font-weight: 400;
}
html.mv-attiva .lettera text { stroke-dasharray: var(--lettera-l, 5000); stroke-dashoffset: var(--lettera-l, 5000); }
@media (max-width: 768px) {
  .lettera { height: clamp(300px, 42vh, 434px); }   /* 70 % */
}

/* ---------------------------------------------------------------------
   5. Micro-interazioni
   --------------------------------------------------------------------- */
/* Sottolineatura che si disegna da sinistra ed esce a destra */
.sottolinea { position: relative; text-decoration: none; }
.sottolinea::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.18em;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .6s var(--ease-out-expo);
}
.sottolinea:hover::after,
.sottolinea:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* Bottone con riempimento che scorre (colore in --mv-riempi sul bottone) */
.riempi { position: relative; overflow: hidden; isolation: isolate; }
.riempi::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--mv-riempi);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .6s var(--ease-out-expo);
}
.riempi:hover::before,
.riempi:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.riempi:hover, .riempi:focus-visible { color: var(--mv-riempi-testo); }
.riempi { transition: color .45s var(--ease-out-cubic), border-color .45s var(--ease-out-cubic); }

/* Hamburger a tre linee che diventa X */
.hamburger { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.hamburger__linee { position: relative; width: 26px; height: 14px; display: block; }
.hamburger__linee i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .5s var(--ease-in-out-cubic), opacity .3s var(--ease-out-cubic), width .5s var(--ease-out-expo);
}
.hamburger__linee i:nth-child(1) { top: 0; }
.hamburger__linee i:nth-child(2) { top: 6px; width: 70%; }
.hamburger__linee i:nth-child(3) { top: 12px; }
.hamburger:hover .hamburger__linee i:nth-child(2) { width: 100%; }
.hamburger[aria-expanded="true"] .hamburger__linee i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linee i:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__linee i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scrollbar sottile, solo con il mouse */
@media (pointer: fine) and (min-width: 769px) {
  html { scrollbar-width: thin; scrollbar-color: var(--mv-barra) transparent; }
  ::-webkit-scrollbar { width: 7px; }
  ::-webkit-scrollbar-thumb { background: var(--mv-barra); border-radius: 7px; }
}

/* Lenis (dal suo lenis.css 1.3.26) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------------------------------------------------------------------
   6. Passaggio fra sito e menù digitale senza lampo bianco: View
      Transitions fra documenti (stessa origine). Dove non c'è, la
      navigazione resta normale. La stessa regola sta nel template del menù.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .4s var(--ease-in-out-cubic) both mv-vt-esce; }
::view-transition-new(root) { animation: .7s var(--ease-out-expo) both mv-vt-entra; }
@keyframes mv-vt-esce { to { opacity: 0; } }
@keyframes mv-vt-entra { from { opacity: 0; transform: translateY(18px); } }

/* ---------------------------------------------------------------------
   7. Meno movimento: tutto visibile, fermo, lettere già disegnate
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { transition: none; }
  html.mv-attesa [data-mv] { opacity: 1 !important; }
  .lettera text { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  [data-mv-linea]::before, .mv-linea-giu::after { transform: none !important; }
  .sottolinea::after, .riempi::before, .hamburger__linee i { transition-duration: .01ms !important; }
}