/* Badante Senza Sorprese: movimento ed effetti di pagina di vendita e calcolatore.
   Durate, curve e distanze vengono dalla scala di transitions-dev copiata in base.css.
   Ogni animazione ha la sua versione ferma sotto prefers-reduced-motion (in fondo al file). */

@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- 18 texts reveal: le righe della prima schermata entrano in cascata ---------- */
.t-stagger {
  --stagger-dur: var(--duration-very-slow);
  --stagger-distance: var(--distance-medium);
  --stagger-stagger: calc(var(--duration-stagger) * 2);
  --stagger-blur: var(--blur-small);
  --stagger-ease: var(--ease-smooth-out);
}
.js .t-stagger-line {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
.js .t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }

/* la sottolineatura di "senza sorprese" si disegna dopo il titolo */
.eroe h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.14em;
  border-radius: 999px; background: rgba(30, 91, 79, 0.22);
  transform-origin: left center;
}
.js .eroe h1 em::after {
  transform: scaleX(0);
  transition: transform var(--duration-very-slow) var(--ease-smooth-out) calc(var(--duration-very-slow) + var(--stagger-stagger) * 2);
}
.js .t-stagger.is-shown h1 em::after { transform: scaleX(1); }

/* luce morbida che si muove piano dietro la prima schermata */
.eroe::before, .eroe::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.eroe::before {
  width: 620px; height: 620px; right: -220px; top: -240px;
  background: radial-gradient(closest-side, rgba(30, 91, 79, 0.15), rgba(30, 91, 79, 0));
  animation: deriva-a calc(var(--duration-very-slow) * 36) var(--ease-in-out) 2 alternate;
}
.eroe::after {
  width: 520px; height: 520px; left: -240px; bottom: -280px;
  background: radial-gradient(closest-side, rgba(30, 91, 79, 0.09), rgba(30, 91, 79, 0));
  animation: deriva-b calc(var(--duration-very-slow) * 44) var(--ease-in-out) 2 alternate;
}
@keyframes deriva-a { to { transform: translate3d(-70px, 60px, 0) scale(1.08); } }
@keyframes deriva-b { to { transform: translate3d(80px, -50px, 0) scale(1.1); } }

/* ---------- la scheda d'esempio si compone riga per riga quando entra nello schermo ---------- */
.js .avvolgi-esempio .conti tr { opacity: 0; transform: translateY(var(--distance-base)); }
.js .avvolgi-esempio.in-vista .conti tr {
  animation: riga-su var(--duration-very-slow) var(--ease-smooth-out) forwards;
  animation-delay: calc(var(--duration-fast) + var(--i, 0) * var(--duration-micro) * 2);
}
@keyframes riga-su { to { opacity: 1; transform: none; } }

.js .avvolgi-esempio .pillola-esempio { opacity: 0; }
.js .avvolgi-esempio.in-vista .pillola-esempio {
  opacity: 1;
  animation:
    pillola-entra var(--duration-very-slow) var(--digit-ease) calc(var(--duration-very-slow) * 2) both,
    galleggia calc(var(--duration-very-slow) * 6) var(--ease-in-out) calc(var(--duration-very-slow) * 3) 4 alternate;
}
@keyframes pillola-entra { from { opacity: 0; transform: translateY(var(--distance-base)) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes galleggia { from { transform: translateY(0); } to { transform: translateY(calc(var(--distance-micro) * -1.5)); } }

/* 19 card tilt: la scheda d'esempio segue il puntatore, solo con il mouse */
.t-tilt {
  --tilt-perspective: 1000px;
  --tilt-return: calc(var(--duration-very-slow) * 2);
  --tilt-return-ease: var(--ease-smooth-out);
  --tilt-follow: var(--duration-slow);
  --tilt-follow-ease: var(--ease-smooth-out);
}
.t-tilt-card {
  position: relative;
  overflow: hidden;
  transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transition: transform var(--tilt-return) var(--tilt-return-ease);
}
.t-tilt-card.is-tilting { transition: transform var(--tilt-follow) var(--tilt-follow-ease); }


/* ---------- le sezioni entrano mentre scorri, una scheda dopo l'altra ---------- */
.js .compare {
  transform: translateY(calc(var(--distance-medium) * 1.5));
  transition-delay: calc(var(--i, 0) * var(--duration-stagger) * 2);
}
.js .frasi li.compare { transform: translateX(calc(var(--distance-medium) * -2)); }
.js .frasi li.compare.visto { transform: none; }
.js .frasi li::before {
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--duration-very-slow) var(--ease-smooth-out) calc(var(--i, 0) * var(--duration-stagger) * 2 + var(--duration-fast));
}
.js .frasi li.visto::before { transform: scaleY(1); }

/* icone che compaiono con un piccolo rimbalzo quando la scheda entra */
.js .compare .icona-strumento svg, .js .compare .icona-momento svg, .js .compare .icona-garanzia svg {
  opacity: 0; transform: scale(0.6) rotate(-12deg);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-very-slow) var(--digit-ease);
  transition-delay: calc(var(--i, 0) * var(--duration-stagger) * 2 + var(--duration-fast));
}
.js .compare.visto .icona-strumento svg, .js .compare.visto .icona-momento svg, .js .compare.visto .icona-garanzia svg { opacity: 1; transform: none; }
.js .compare .icona-strumento .numero { transform: scale(0); transition: transform var(--duration-very-slow) var(--digit-ease) calc(var(--i, 0) * var(--duration-stagger) * 2 + var(--duration-slow)); }
.js .compare.visto .icona-strumento .numero { transform: scale(1); }

/* schede che si alzano al passaggio del mouse */
.strumento::after, .momento::after, .garanzia::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2px 4px rgba(21, 38, 42, 0.05), 0 18px 40px -12px rgba(21, 38, 42, 0.22);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-smooth-out);
}
@media (hover: hover) {
  .strumento.visto:hover, .momento.visto:hover, .garanzia.visto:hover { transform: translateY(calc(var(--distance-micro) * -1.5)); transition-duration: var(--duration-fast); transition-delay: 0ms; }
  .strumento:hover::after, .momento:hover::after, .garanzia:hover::after { opacity: 1; }
  .js .strumento.visto:hover .icona-strumento svg, .js .momento.visto:hover .icona-momento svg { transform: rotate(-8deg) scale(1.08); transition-duration: var(--duration-fast); transition-delay: 0ms; }
}

/* come funziona: la linea tra i passi si riempie mentre scorri */
.js .passi li.compare::before { transform: scale(0.4); transition: transform var(--duration-very-slow) var(--digit-ease) calc(var(--i, 0) * var(--duration-stagger) * 2); }
.js .passi li.compare.visto::before { transform: scale(1); }
@supports (animation-timeline: view()) {
  .passi { view-timeline: --linea-passi block; }
  .passi::after {
    transform: scaleY(0);
    animation: linea-passi linear both;
    animation-duration: auto;
    animation-timeline: --linea-passi;
    animation-range: entry 30% cover 60%;
  }
  @keyframes linea-passi { to { transform: scaleY(1); } }
}

/* confronto: le righe arrivano una alla volta, la nostra per ultima con la spunta */
.js .tabella-confronto tbody tr { opacity: 0; transform: translateY(var(--distance-base)); transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out); }
.js .tabella-confronto tbody tr:nth-child(2) { transition-delay: calc(var(--duration-micro) * 2); }
.js .tabella-confronto tbody tr:nth-child(3) { transition-delay: calc(var(--duration-micro) * 5); }
.js .tabella-confronto.visto tbody tr { opacity: 1; transform: none; }
.js .tabella-confronto .spunta-riga { transform: scale(0); transition: transform var(--duration-very-slow) var(--digit-ease) calc(var(--duration-micro) * 9); }
.js .tabella-confronto.visto .spunta-riga { transform: scale(1); }

/* ---------- riquadro del prezzo: contorno di luce verde che gira, cifre e spunte in cascata ---------- */
.scheda.anello-verde { box-shadow: 0 0 0 1px rgba(30, 91, 79, 0.12), 0 0 48px -10px rgba(30, 91, 79, 0.45), var(--ombra); }
.anello-verde::before {
  content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--giro), rgba(30, 91, 79, 0.25), #6fbfa6 10%, rgba(30, 91, 79, 0.25) 22%, rgba(30, 91, 79, 0.25) 50%, #6fbfa6 60%, rgba(30, 91, 79, 0.25) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.anello-verde.in-vista::before { animation: giro calc(var(--duration-very-slow) * 16) var(--ease-linear) 3; }
.js .scatola-prezzo .spunte li { opacity: 0; transform: translateX(calc(var(--distance-base) * -1)); transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out); }
.js .scatola-prezzo .spunte li:nth-child(2) { transition-delay: calc(var(--duration-stagger) * 2); }
.js .scatola-prezzo .spunte li:nth-child(3) { transition-delay: calc(var(--duration-stagger) * 4); }
.js .scatola-prezzo .spunte li:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 6); }
.js .scatola-prezzo .spunte li:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 8); }
.js .scatola-prezzo .spunte li:nth-child(6) { transition-delay: calc(var(--duration-stagger) * 10); }
.js .scatola-prezzo .spunte li:nth-child(7) { transition-delay: calc(var(--duration-stagger) * 12); }
.js .scatola-prezzo.in-vista .spunte li { opacity: 1; transform: none; }

/* ---------- 21 accordion: le domande si aprono morbide ---------- */
.t-acc { --acc-expand: var(--duration-fast); --acc-collapse: var(--duration-fast); --acc-chevron: var(--duration-fast); --acc-ease: var(--ease-smooth-out); }
.js .t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.js .t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.js .t-acc-panel-inner {
  overflow: hidden; opacity: 0; filter: blur(var(--blur-small)); visibility: hidden;
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), visibility 0s linear var(--acc-collapse);
}
.js .t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1; filter: blur(0); visibility: visible;
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease), visibility 0s;
}
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }

/* chiusura verde: una luce chiara che si sposta piano */
.finale::before {
  content: ""; position: absolute; width: 700px; height: 700px; left: 50%; top: -360px; margin-left: -350px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  animation: deriva-a calc(var(--duration-very-slow) * 30) var(--ease-in-out) 2 alternate;
}

/* ---------- bottoni: contorno di luce che gira dietro e anello che pulsa ---------- */
.cta-luce { position: relative; box-shadow: 0 0 0 4px rgba(184, 70, 28, 0.16), 0 12px 26px -12px rgba(184, 70, 28, 0.75); }
.cta-luce:hover { box-shadow: 0 0 0 5px rgba(184, 70, 28, 0.24), 0 16px 30px -12px rgba(184, 70, 28, 0.8); }
.cta-luce::before {
  content: ""; position: absolute; inset: -4px; padding: 2px; border-radius: calc(var(--raggio) + 4px); pointer-events: none;
  background: conic-gradient(from var(--giro), rgba(184, 70, 28, 0.22), #f6b08f 10%, rgba(184, 70, 28, 0.22) 22%, rgba(184, 70, 28, 0.22) 50%, #f6b08f 60%, rgba(184, 70, 28, 0.22) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: giro calc(var(--duration-very-slow) * 10) var(--ease-linear) 4;
}
.cta-impulso::after {
  content: ""; position: absolute; inset: -4px; border-radius: calc(var(--raggio) + 4px); pointer-events: none;
  border: 2px solid rgba(184, 70, 28, 0.5); opacity: 0;
}
.t-stagger.is-shown .cta-impulso::after, .in-vista .cta-impulso::after, .visto .cta-impulso::after {
  animation: anello calc(var(--duration-slow) * 7) var(--ease-out) calc(var(--duration-very-slow) * 3) 3;
}
@keyframes giro { to { --giro: 360deg; } }
@keyframes anello { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.05, 1.32); } }

/* versione verde (calcolo gratuito) e chiara (sul fondo verde) */
.bottone.verde.cta-luce { box-shadow: 0 0 0 4px rgba(30, 91, 79, 0.16), 0 12px 26px -12px rgba(30, 91, 79, 0.75); }
.bottone.verde.cta-luce:hover { box-shadow: 0 0 0 5px rgba(30, 91, 79, 0.24), 0 16px 30px -12px rgba(30, 91, 79, 0.8); }
.bottone.verde.cta-luce::before { background: conic-gradient(from var(--giro), rgba(30, 91, 79, 0.22), #7fd3b8 10%, rgba(30, 91, 79, 0.22) 22%, rgba(30, 91, 79, 0.22) 50%, #7fd3b8 60%, rgba(30, 91, 79, 0.22) 72%); }
.bottone.verde.cta-impulso::after { border-color: rgba(30, 91, 79, 0.5); }
.bottone.chiaro.cta-luce { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 14px 30px -12px rgba(0, 0, 0, 0.45); }
.bottone.chiaro.cta-luce::before { background: conic-gradient(from var(--giro), rgba(255, 255, 255, 0.25), #ffffff 10%, rgba(255, 255, 255, 0.25) 22%, rgba(255, 255, 255, 0.25) 50%, #ffffff 60%, rgba(255, 255, 255, 0.25) 72%); }
.bottone.chiaro.cta-impulso::after { border-color: rgba(255, 255, 255, 0.6); }

/* la freccia avanza quando passi sopra il bottone */
.bottone .freccia { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.bottone:hover .freccia, .bottone:focus-visible .freccia { transform: translateX(var(--distance-micro)); }

/* ---------- testata e barra in basso ---------- */
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none;
  background: linear-gradient(rgba(21, 38, 42, 0.08), rgba(21, 38, 42, 0));
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-out);
}
.scorsa .testata::after { opacity: 1; }
.bottone-testata { transition: background-color var(--duration-quick) var(--ease-out), opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s; }
.nascondi-cta .bottone-testata {
  opacity: 0; transform: translateY(calc(var(--distance-base) * -1)); pointer-events: none; visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s linear var(--duration-fast);
}
.barra-acquisto {
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--duration-medium) var(--ease-smooth-out), visibility 0s linear var(--duration-medium);
}
.barra-acquisto.su { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-smooth-out), visibility 0s; }

/* ---------- calcolatore ---------- */
.js .passo-calc:not([hidden]) { animation: passo-su var(--duration-slow) var(--ease-smooth-out) both; }
@keyframes passo-su { from { opacity: 0; transform: translateY(var(--distance-medium)); } to { opacity: 1; transform: none; } }
.barra-calc:not([hidden]) { animation: barra-su var(--duration-slow) var(--ease-smooth-out) both; }
@keyframes barra-su { from { transform: translateY(100%); } to { transform: none; } }
.porta { transition: border-color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) { .porta:hover { transform: translateY(calc(var(--distance-micro) * -0.5)); } }
.porta:active { transform: translateY(calc(var(--distance-micro) * 0.25)); }

/* ---------- chi ha chiesto meno movimento: tutto fermo e subito visibile ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .t-stagger-line, .js .compare, .js .frasi li.compare, .js .tabella-confronto tbody tr, .js .scatola-prezzo .spunte li, .js .avvolgi-esempio .conti tr, .js .avvolgi-esempio .pillola-esempio {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important;
  }
  .js .eroe h1 em::after, .js .frasi li::before, .js .passi li.compare::before, .js .tabella-confronto .spunta-riga,
  .js .compare .icona-strumento svg, .js .compare .icona-momento svg, .js .compare .icona-garanzia svg, .js .compare .icona-strumento .numero {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .eroe::before, .eroe::after, .finale::before, .js .avvolgi-esempio.in-vista .pillola-esempio, .cta-luce::before, .anello-verde.in-vista::before, .passi::after,
  .js .passo-calc:not([hidden]), .barra-calc:not([hidden]) { animation: none !important; }
  .passi::after { transform: none !important; }
  .cta-impulso::after { display: none; }
  .t-tilt-card { transform: none !important; transition: none !important; }
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }
  .js .barra-acquisto, .bottone-testata, .bottone .freccia, .porta, .strumento::after, .momento::after, .garanzia::after, .testata::after { transition: none !important; }
  .strumento.visto:hover, .momento.visto:hover, .garanzia.visto:hover, .porta:hover { transform: none !important; }
}

/* ---------- telefono: prima schermata subito visibile, niente animazioni pesanti (studio hero-e-mobile, punti 3 e 8) ---------- */
@media (max-width: 899px) {
  .js .t-stagger-line { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .js .eroe h1 em::after { transform: none; transition: none; }
  .cta-luce::before, .anello-verde::before, .anello-verde.in-vista::before, .eroe::before, .eroe::after { animation: none !important; }
  .js .avvolgi-esempio.in-vista .pillola-esempio { animation: none; opacity: 1; }
}