/* =========================================================
   Rosi Pneumatici · «In asse» · motion.css
   Va con motion.js. Richiede tokens.css.
   Senza JS tutto resta visibile (le classi .js-* le mette motion.js).
   ========================================================= */

/* --- [NUOVO] Convergenza: blocchi che si raddrizzano --- */
[data-assetto] {
  --a: 0;
  transform: rotate(calc(var(--a) * 1deg));
  transform-origin: 50% 60%;
  will-change: transform;
  position: relative;
  z-index: var(--z-assetto);
}
[data-assetto].is-auto { transition: transform 500ms var(--e-assetto); }
.lettura {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: var(--bordo);
  font: 400 var(--t-misura)/1.4 var(--f-mono); letter-spacing: var(--ls-misura);
  color: var(--c-testo-3);
}
.lettura [data-assetto-lettura] { color: var(--c-testo); font-variant-numeric: tabular-nums; }
.lettura [data-assetto-lettura].is-ok { color: var(--c-ok); }

/* --- Header pieno dopo lo scroll --- */
.header-sito { transition: background var(--d-base) linear, box-shadow var(--d-base) linear; }
.header-sito.is-pieno { background: var(--c-fondo) !important; box-shadow: 0 1px 0 var(--c-bordo); }

/* --- [TT01] Riga con maschera --- */
.js-motion [data-reveal="righe"] .riga { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js-motion [data-reveal="righe"] .riga-in {
  display: block; transform: translateY(105%);
  transition: transform var(--d-scena) var(--e-uscita);
  transition-delay: calc(var(--i, 0) * var(--sfasamento));
}
.js-motion [data-reveal="righe"].is-in .riga-in { transform: none; }

.js-motion [data-reveal="blocco"] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--d-base) linear, transform var(--d-base) var(--e-uscita);
  transition-delay: calc(var(--i, 0) * var(--sfasamento));
}
.js-motion [data-reveal="blocco"].is-in { opacity: 1; transform: none; }

/* --- [TI09] Inclinazione che si raddrizza (immagini) --- */
.js-motion [data-reveal="img"] {
  opacity: 0; transform: rotate(2deg) scale(1.06);
  transition: opacity var(--d-scena) var(--e-uscita), transform var(--d-scena) var(--e-assetto);
}
.js-motion [data-reveal="img"].is-in { opacity: 1; transform: none; }

/* --- [NUOVO] Promesse-timbro: caduta --- */
.timbro {
  --rot: -6deg;
  width: 240px; aspect-ratio: 1; border-radius: var(--r-tondo);
  border: 5px solid var(--c-gesso-rosso); color: var(--c-gesso-rosso);
  display: grid; place-items: center; text-align: center; padding: var(--s-6);
  position: relative; transform: rotate(var(--rot));
  -webkit-mask: radial-gradient(circle at 38% 32%, #000 56%, rgba(0,0,0,.72) 57%, #000 71%);
          mask: radial-gradient(circle at 38% 32%, #000 56%, rgba(0,0,0,.72) 57%, #000 71%);
}
.timbro::before { content: ""; position: absolute; inset: 10px; border: 2px solid currentColor; border-radius: inherit; }
.timbro b { font: 400 1.4rem/1.05 var(--f-titoli); letter-spacing: -.01em; display: block; }
.timbro small { font: 500 var(--t-etichetta)/1.4 var(--f-mono); letter-spacing: var(--ls-etichetta); text-transform: uppercase; display: block; margin-bottom: var(--s-2); }
.js-motion [data-reveal="timbro"] .timbro { opacity: 0; transform: rotate(var(--rot)) scale(1.6); }
.js-motion [data-reveal="timbro"].is-in .timbro {
  animation: timbro-giu 220ms cubic-bezier(.5, 0, .75, 0) forwards;
  animation-delay: calc(var(--i, 0) * 160ms);
}
@keyframes timbro-giu { to { opacity: 1; transform: rotate(var(--rot)) scale(1); } }
.js-motion [data-reveal="timbro"].is-colpo { animation: colpo 180ms steps(3); }
@keyframes colpo { 33% { transform: translate(2px, -1px); } 66% { transform: translate(-2px, 1px); } }

/* --- [NUOVO] Bagliore-fanale --- */
[data-bagliore] { position: relative; isolation: isolate; overflow: clip; }
[data-bagliore]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; bottom: -30%; width: min(1100px, 140%); height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 42, 31, .75), rgba(163, 23, 27, .32) 55%, transparent);
  opacity: var(--glow); transition: opacity 600ms linear;
}

/* --- [H15] Luce che segue il cursore --- */
[data-luce] { position: relative; isolation: isolate; }
[data-luce]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%), rgba(211, 32, 42, .30), transparent 70%);
  opacity: 0; transition: opacity var(--d-base) var(--e-uscita);
}
@media (hover: hover) and (pointer: fine) { [data-luce]:hover::before { opacity: 1; } }

/* --- [TS05] Luce che scorre tra sezioni --- */
.luce-scorre { position: relative; height: 1px; background: var(--c-bordo); overflow: visible; }
.luce-scorre::after {
  content: ""; position: absolute; top: -20px; height: 41px; width: 40%; left: -40%;
  background: radial-gradient(closest-side, rgba(255, 42, 31, .9), rgba(211, 32, 42, .25) 45%, transparent);
  transition: left var(--d-scena) var(--e-uscita);
}
.luce-scorre.is-in::after { left: 100%; }

/* --- [B02] Grana sulle foto (solo desktop) --- */
@media (min-width: 960px) and (hover: hover) {
  .duotono.grana::after {
    content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grana 1s steps(8) infinite;
  }
}
@keyframes grana { 0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)} 50%{transform:translate(4%,-4%)} 75%{transform:translate(-3%,-2%)} 100%{transform:translate(2%,4%)} }

/* --- [P13] Duotono fotografico in CSS --- */
.duotono { position: relative; overflow: hidden; background: var(--duo-ombra); border-radius: var(--r-1); }
.duotono img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.3); mix-blend-mode: luminosity; }
.duotono::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--duo-luce); mix-blend-mode: multiply; pointer-events: none; }
.duotono > .fianco {
  position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3);
  font: 400 var(--t-misura)/1.3 var(--f-mono); letter-spacing: var(--ls-misura);
  color: #fff; background: rgba(0, 0, 0, .45); padding: 4px 8px; border-radius: 2px;
}

/* --- [N03] Morph dal bottone + [N09] pillola --- */
.pillola {
  position: fixed; z-index: var(--z-pillola); display: flex; gap: 2px;
  background: var(--c-azione); border-radius: var(--r-pill); padding: 4px; box-shadow: var(--ombra-pillola);
  right: var(--margine); top: 14px;
}
.pillola a, .pillola button {
  min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-su-azione);
  font: 700 .9375rem/1 var(--f-testo); text-decoration: none; cursor: pointer;
  transition: background var(--d-scatto) linear;
}
.pillola a:hover, .pillola button:hover { background: rgba(0, 0, 0, .28); }
.pillola :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pillola .menu-solo-mobile { display: none; }
.pillola.is-colpo { animation: pillola-colpo var(--d-scatto) steps(2); }
@keyframes pillola-colpo { 50% { transform: scale(.96); } }

@media (max-width: 959px) {
  .pillola { top: auto; bottom: 14px; left: var(--margine); right: var(--margine); }
  .pillola > * { flex: 1; min-height: 48px; }
  .pillola .menu-solo-mobile { display: inline-flex; }
}

.menu-pannello {
  position: fixed; z-index: var(--z-menu); left: var(--margine); right: var(--margine); bottom: 14px;
  height: 86svh; background: var(--c-superficie); border-radius: 22px; box-shadow: var(--ombra-menu);
  padding: var(--s-6) var(--s-5) calc(var(--pillola-h) + var(--s-6));
  overflow: auto; visibility: hidden;
  clip-path: inset(calc(100% - var(--pillola-h)) 0 0 0 round 28px);
  transition: clip-path var(--d-base) var(--e-editoriale), visibility 0s linear var(--d-base);
}
.menu-pannello.is-open { visibility: visible; clip-path: inset(0 0 0 0 round 22px); transition: clip-path var(--d-base) var(--e-editoriale), visibility 0s; }
.menu-pannello li { opacity: 0; transform: translateY(10px); transition: opacity var(--d-scatto) linear, transform var(--d-base) var(--e-uscita); }
.menu-pannello.is-open li { opacity: 1; transform: none; transition-delay: calc(200ms + var(--i, 0) * 50ms); }

/* --- [TP07] Zoom attraverso tra pagine (View Transitions cross-document) --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-esce 280ms var(--e-editoriale) both; }
::view-transition-new(root) { animation: vt-entra 380ms var(--e-uscita) both; }
@keyframes vt-esce { to { opacity: 0; transform: scale(1.04); } }
@keyframes vt-entra { from { opacity: 0; transform: scale(.985); } }
.pillola { view-transition-name: pillola; }
.header-sito { view-transition-name: header; }

/* --- Riduci movimento --- */
@media (prefers-reduced-motion: reduce) {
  [data-assetto] { transform: none !important; }
  .js-motion [data-reveal] , .js-motion [data-reveal] * { transition: none !important; animation: none !important; }
  .js-motion [data-reveal="righe"] .riga-in, .js-motion [data-reveal="img"], .js-motion [data-reveal="blocco"],
  .js-motion [data-reveal="timbro"] .timbro { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js-motion [data-reveal="timbro"] .timbro { transform: rotate(var(--rot)) !important; }
  .duotono.grana::after { display: none; }
  .menu-pannello, .menu-pannello li { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; animation-name: vt-dissolvenza; }
  @keyframes vt-dissolvenza { from { opacity: 0; } }
}