/* ==========================================================================
   Microanimazioni del design system (tutte le pagine body.ai-ds)
   Caricato da inc/ai-design-system.php insieme ad ai-ds.css; la classe
   body.ai-motion le attiva. Si appoggia ai token di ai-ds.css.

   - card con un'azione (piani, articoli, zone, correlati): sollevamento di 3px,
     ombra più marcata, bordo rosso tenue; le card informative restano ferme
   - pulsanti: colore che cambia in dissolvenza, freccia che scorre di 4px,
     anello di fuoco di 3px
   - comparsa delle sezioni sotto la piega, una volta sola (ai-motion.js)

   Si animano transform, opacity e colori. Nessuna animazione con
   prefers-reduced-motion (anche ai-ds.css le spegne tutte).

   Prefisso "html body.ai-motion.ai-ds": ai-ds.css usa :is() con selettori di
   due classi (es. .pcta.cs), che altrimenti vincerebbero.
   ========================================================================== */

body.ai-motion {
  --ai-m-btn: 200ms;
  --ai-m-card: 220ms;
  --ai-m-in: 400ms;
  --ai-m-lift: -3px;
  --ai-m-shift: 4px;
  --ai-red-hover: #A3121C;   /* rosso scurito: 7,3:1 con testo bianco */
  --ai-red-tint: #fcf1f2;    /* fondo dei pulsanti chiari al passaggio */
}

/* --------------------------------------------------------------------------
   1 · Card
   -------------------------------------------------------------------------- */
/* Card con un'azione: si sollevano anche quando il fuoco da tastiera è al loro interno */
html body.ai-motion.ai-ds :is(.pc, .piano-card, .article-card, .related-card, .zona-card, .kite-contact-card) {
  transition:
    transform var(--ai-m-card) var(--ai-ease),
    box-shadow var(--ai-m-card) var(--ai-ease),
    border-color var(--ai-m-card) var(--ai-ease);
}
html body.ai-motion.ai-ds :is(.pc, .piano-card, .article-card, .related-card, .zona-card, .kite-contact-card):focus-within {
  transform: translateY(var(--ai-m-lift));
  box-shadow: 0 14px 28px -18px rgba(15,23,42,0.35), 0 2px 4px rgba(15,23,42,0.05);
  border-color: rgba(190,21,33,0.28);
}
html body.ai-motion.ai-ds :is(.pc.feat, .piano-card.featured):focus-within {
  border-color: var(--ai-red);
  box-shadow: 0 18px 32px -20px var(--ai-red-glow), 0 2px 4px rgba(15,23,42,0.05);
}
@media (hover: hover) {
  html body.ai-motion.ai-ds :is(.pc, .piano-card, .article-card, .related-card, .zona-card, .kite-contact-card):hover {
    transform: translateY(var(--ai-m-lift));
    box-shadow: 0 14px 28px -18px rgba(15,23,42,0.35), 0 2px 4px rgba(15,23,42,0.05);
    border-color: rgba(190,21,33,0.28);
  }
  html body.ai-motion.ai-ds :is(.pc.feat, .piano-card.featured):hover {
    border-color: var(--ai-red);
    box-shadow: 0 18px 32px -20px var(--ai-red-glow), 0 2px 4px rgba(15,23,42,0.05);
  }
}
/* Su touch il :hover resterebbe "incollato" dopo il tocco */
@media (hover: none) {
  html body.ai-motion.ai-ds :is(.pc, .piano-card, .article-card, .related-card, .zona-card, .kite-contact-card):hover:not(:focus-within) {
    transform: none;
  }
}

/* Card informative (non sono link): ferme, cambia appena il bordo */
html body.ai-motion.ai-ds :is(.sc, .service-card, .benefit-item, .caso-card, .caso, .scenario-card, .perchi-card,
  .causa-card, .feature-card, .vantaggio-card, .step-card) {
  transition: none;
}
html body.ai-motion.ai-ds :is(.sc, .service-card, .benefit-item, .caso-card, .caso, .scenario-card, .perchi-card,
  .causa-card, .feature-card, .vantaggio-card, .step-card):hover {
  transform: none;
  box-shadow: var(--ai-shadow-1);
  border-color: var(--ai-line-2);
}
html body.ai-motion.ai-ds .benefit-item:hover { box-shadow: none; }
html body.ai-motion.ai-ds #servizi :is(.sc, .service-card):hover { background: var(--ai-bg); box-shadow: none; }
html body.ai-motion.ai-ds :is(.si2, .service-icon) { transition: none; }
html body.ai-motion.ai-ds :is(.sc, .service-card):hover :is(.si2, .service-icon) {
  transform: none;
  background: var(--ai-red-dim);
  color: var(--ai-red);
}
html body.ai-motion.ai-ds .service-card:hover .service-icon svg { stroke: currentColor; }

/* Link a forma di chip (link interni, problemi frequenti, zone servite) */
html body.ai-motion.ai-ds :is(.link-interni-grid a, .ai-m-chip) {
  transition:
    transform var(--ai-m-btn) var(--ai-ease),
    border-color var(--ai-m-btn) var(--ai-ease),
    color var(--ai-m-btn) var(--ai-ease);
}
html body.ai-motion.ai-ds .ai-m-chip { display: inline-block; }
html body.ai-motion.ai-ds .link-interni-grid a:hover { transform: none; }
html body.ai-motion.ai-ds :is(.link-interni-grid a, .ai-m-chip):focus-visible {
  transform: translateY(-2px);
  border-color: rgba(190,21,33,0.35) !important;
}
@media (hover: hover) {
  html body.ai-motion.ai-ds :is(.link-interni-grid a, .ai-m-chip):hover {
    transform: translateY(-2px);
    border-color: rgba(190,21,33,0.35) !important;
  }
}

/* --------------------------------------------------------------------------
   2 · Pulsanti e CTA
   Niente sollevamento: il colore cambia in dissolvenza e la freccia scorre.
   -------------------------------------------------------------------------- */
html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .btn-g, .btn-secondary, .btn-s, .btn-ghost, .pcta, .mn-cta, .piano-cta) {
  transition:
    background-color var(--ai-m-btn) var(--ai-ease),
    border-color var(--ai-m-btn) var(--ai-ease),
    color var(--ai-m-btn) var(--ai-ease);
}
html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .btn-g, .btn-secondary, .btn-s, .btn-ghost, .pcta, .mn-cta, .piano-cta):is(:hover, :active) {
  transform: none;
  opacity: 1;
}
html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .mn-cta):hover,
html body.ai-motion.ai-ds .pcta.cs:hover { box-shadow: var(--ai-shadow-red); }
html body.ai-motion.ai-ds :is(.btn-g, .btn-secondary, .btn-s):hover,
html body.ai-motion.ai-ds .pcta.cg:hover { box-shadow: var(--ai-shadow-1); }

/* Rosso → rosso scurito */
html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .mn-cta):focus-visible,
html body.ai-motion.ai-ds :is(.pcta.cs, .piano-card.featured .piano-cta):focus-visible {
  background-color: var(--ai-red-hover);
  border-color: var(--ai-red-hover);
  color: #fff;
}
/* Chiari → bordo e testo rossi (selettori separati: la regola su fondo scuro deve poter vincere) */
html body.ai-motion.ai-ds :is(.btn-g, .btn-secondary, .btn-s):focus-visible,
html body.ai-motion.ai-ds .pcta.cg:focus-visible,
html body.ai-motion.ai-ds .piano-card:not(.featured) .piano-cta:focus-visible {
  background-color: var(--ai-red-tint);
  border-color: var(--ai-red);
  color: var(--ai-red);
}
/* Su fondo scuro (fasce CTA, hero fotografico) → velo bianco più deciso */
html body.ai-motion.ai-ds :is(.cs2, .cta-band, .cta-btns, .hc-ctas) :is(.btn-g, .btn-secondary, .btn-s, .btn-ghost):focus-visible {
  background-color: rgba(255,255,255,0.16);
  border-color: #fff;
  color: #fff;
}
/* CTA con stile in linea (marcate da ai-motion.js): lo stile in linea va superato */
html body.ai-motion.ai-ds .ai-m-cta {
  transition: background-color var(--ai-m-btn) var(--ai-ease) !important;
}
html body.ai-motion.ai-ds .ai-m-cta--red:focus-visible { background-color: var(--ai-red-hover) !important; opacity: 1 !important; }
html body.ai-motion.ai-ds .ai-m-cta--dark:focus-visible { background-color: #0f172a !important; }
@media (hover: hover) {
  html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .mn-cta):hover,
  html body.ai-motion.ai-ds :is(.pcta.cs, .piano-card.featured .piano-cta):hover {
    background-color: var(--ai-red-hover);
    border-color: var(--ai-red-hover);
    color: #fff;
  }
  html body.ai-motion.ai-ds :is(.btn-g, .btn-secondary, .btn-s):hover,
  html body.ai-motion.ai-ds .pcta.cg:hover,
  html body.ai-motion.ai-ds .piano-card:not(.featured) .piano-cta:hover {
    background-color: var(--ai-red-tint);
    border-color: var(--ai-red);
    color: var(--ai-red);
  }
  html body.ai-motion.ai-ds :is(.cs2, .cta-band, .cta-btns, .hc-ctas) :is(.btn-g, .btn-secondary, .btn-s, .btn-ghost):hover {
    box-shadow: none;
    background-color: rgba(255,255,255,0.16);
    border-color: #fff;
    color: #fff;
  }
  html body.ai-motion.ai-ds .ai-m-cta--red:hover { background-color: var(--ai-red-hover) !important; opacity: 1 !important; }
  html body.ai-motion.ai-ds .ai-m-cta--dark:hover { background-color: #0f172a !important; }
}

/* Anello di fuoco più evidente (tastiera) */
html body.ai-motion.ai-ds :is(.btn-p, .btn-primary, .btn-g, .btn-secondary, .btn-s, .btn-ghost, .pcta, .mn-cta, .piano-cta, .ai-m-chip, .ai-m-cta):focus-visible {
  outline: 3px solid var(--ai-red);
  outline-offset: 3px;
}
html body.ai-motion.ai-ds :is(.cs2, .cta-band, .cta-btns, .hc-ctas) :is(.btn-p, .btn-primary, .btn-g, .btn-secondary, .btn-s, .btn-ghost):focus-visible {
  outline-color: #fff;
}

/* Freccia finale (avvolta da ai-motion.js; il testo del link non cambia) */
body.ai-motion .ai-m-arrow {
  display: inline-block;
  transition: transform var(--ai-m-btn) var(--ai-ease);
}
body.ai-motion :is(a, button):focus-visible > span > .ai-m-arrow { transform: translateX(var(--ai-m-shift)); }
@media (hover: hover) {
  body.ai-motion :is(a, button):hover > span > .ai-m-arrow { transform: translateX(var(--ai-m-shift)); }
}

/* --------------------------------------------------------------------------
   3 · Comparsa delle sezioni (una sola volta)
   Lo stato nascosto esiste solo se ai-motion.js ha marcato l'elemento come
   fuori dallo schermo al caricamento: senza JS tutto resta visibile.
   -------------------------------------------------------------------------- */
/* Sostituisce la comparsa legata allo scroll di ai-ds.css (si ripete risalendo);
   stesso elenco di elementi */
html body.ai-motion.ai-ds :is(
  .sec > :not(.sg, .plans, .services-grid, .benefits-grid, .faq-list, .wg, div[style*="grid"], .piani-grid, .casi-grid, .scenarios-grid, .perchi-grid, .backup-grid, .cause-grid, .vantaggi-grid),
  .sg > *, .plans > *, .services-grid > *, .benefits-grid > *, .faq-list > *, .steps > *,
  .wl > *, .wv, .sec > div[style*="grid"] > *, .cs2 > *, .cta-band > *,
  .piani-grid > *, .casi-grid > *, .scenarios-grid > *, .perchi-grid > *, .backup-grid > *, .cause-grid > *, .vantaggi-grid > *, .related-grid > *
) {
  animation: none;
  animation-timeline: auto;
}
/* Animazione (non transizione) sulla proprietà translate: non si scontra con le
   transizioni e con il transform dell'hover. Valori fissi nei keyframe. */
@keyframes ai-m-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}
body.ai-motion .ai-m-rv { opacity: 0; translate: 0 10px; }
html body.ai-motion.ai-ds .ai-m-rv.ai-m-in {
  opacity: 1;
  translate: none;
  animation: ai-m-in var(--ai-m-in) var(--ai-ease) both;
}
html body.ai-motion.ai-ds .ai-m-rv.ai-m-now { animation: none; }
/* Leggero scaglionamento tra elementi affiancati (max 120 ms) */
html body.ai-motion.ai-ds .ai-m-rv.ai-m-in[data-ai-m-d="1"] { animation-delay: 40ms; }
html body.ai-motion.ai-ds .ai-m-rv.ai-m-in[data-ai-m-d="2"] { animation-delay: 80ms; }
html body.ai-motion.ai-ds .ai-m-rv.ai-m-in[data-ai-m-d="3"] { animation-delay: 120ms; }

/* --------------------------------------------------------------------------
   4 · Hero degli articoli: comparsa breve al caricamento, una volta sola.
   Solo CSS (senza JS il testo è comunque visibile); il titolo parte subito, poi estratto e link.
   Foto con zoom iniziale lievissimo.
   -------------------------------------------------------------------------- */
@keyframes ai-m-hero-in { from { opacity: 0; translate: 0 10px; } }
@keyframes ai-m-hero-img { from { scale: 1.04; } }
@media (prefers-reduced-motion: no-preference) {
  html body.ai-motion.ai-ds :is(.article-hero, .article-hero-noimg) :is(.article-meta, h1, .article-excerpt, .article-hero-leggi) {
    animation: ai-m-hero-in 420ms var(--ai-ease) both;
  }
  html body.ai-motion.ai-ds :is(.article-hero, .article-hero-noimg) .article-excerpt { animation-delay: 100ms; }
  html body.ai-motion.ai-ds :is(.article-hero, .article-hero-noimg) .article-hero-leggi { animation-delay: 160ms; }
  html body.ai-motion.ai-ds .article-hero-img { animation: ai-m-hero-img 1400ms var(--ai-ease) both; }
}

/* --------------------------------------------------------------------------
   Movimento ridotto: nessuno spostamento, nessuna comparsa
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ai-motion .ai-m-rv { opacity: 1; translate: none; animation: none !important; }
  html body.ai-motion.ai-ds :is(.pc, .piano-card, .article-card, .related-card, .zona-card, .kite-contact-card, .link-interni-grid a, .ai-m-chip):is(:hover, :focus-within, :focus-visible),
  body.ai-motion :is(a, button):is(:hover, :focus-visible) > span > .ai-m-arrow { transform: none !important; }
}