/* ============================================================
   MICRO-ANIMAZIONI SCROLL — scroll-animations.css
   Versione: 1.0.0

   ISTRUZIONI:
   1. Includere DOPO palette-b.css in enqueue.php:
      wp_enqueue_style('my-dev-scroll-anim',
        MY_DEV_URL . '/assets/css/scroll-animations.css',
        ['my-dev-palette-b'], MY_DEV_VERSION);

   2. Il meccanismo .animate-on-scroll → .visible
      è già attivo nel tuo animations.js esistente.
      Questo file aggiunge:
        - Gli stili iniziali/finali per .animate-on-scroll
        - Le varianti con delay (.anim-delay-1/2/3/4)
        - Animazione hover card
        - Counter (.counter-anim)
        - Rispetto di prefers-reduced-motion
   ============================================================ */


/* ── Stato iniziale: tutti gli elementi prima dell'animazione ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stato attivato dall'Intersection Observer (aggiunge .visible) */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Varianti delay per sequenze di card ── */
.animate-on-scroll.anim-delay-1 { transition-delay: 0.08s; }
.animate-on-scroll.anim-delay-2 { transition-delay: 0.16s; }
.animate-on-scroll.anim-delay-3 { transition-delay: 0.24s; }
.animate-on-scroll.anim-delay-4 { transition-delay: 0.32s; }

/* ── Variante fade-in puro (senza traslazione verticale) ── */
.animate-on-scroll.anim-fade {
  transform: none;
}

.animate-on-scroll.anim-fade.visible {
  transform: none;
}

/* ── Variante scale-in (card e blocchi compatti) ── */
.animate-on-scroll.anim-scale {
  transform: scale(0.96) translateY(16px);
}

.animate-on-scroll.anim-scale.visible {
  transform: scale(1) translateY(0);
}

/* ── Counter: font tabular per evitare sbalzi di larghezza ── */
.counter-anim {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

/* ── Hover state aggiuntivo per le card nella nuova palette ──
   (rafforza il feedback visivo che main.css già gestisce) ── */
.service-card,
.process-card,
.why-block,
.why-me__card,
.case-study-card {
  transition:
    box-shadow    var(--transition-normal),
    transform     var(--transition-normal),
    border-color  var(--transition-normal);
}

/* ── Rispetta preferenza di sistema: riduzione movimento ── */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-on-scroll.anim-fade,
  .animate-on-scroll.anim-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .service-card,
  .process-card,
  .why-block,
  .why-me__card,
  .case-study-card {
    transition: none !important;
  }
}

/* ============================================================
   ISTRUZIONI HTML — dove aggiungere le classi animate-on-scroll
   ============================================================

   front-page.php usa già:
     <div class="case-study-intro container animate-on-scroll">

   Aggiungere .animate-on-scroll agli altri elementi:

   template-parts/hero.php
     → nessuna animazione: la hero è above-the-fold

   template-parts/services-grid.php
     .services__heading          → animate-on-scroll
     .service-card (1a)          → animate-on-scroll anim-delay-1
     .service-card (2a)          → animate-on-scroll anim-delay-2
     .service-card (3a)          → animate-on-scroll anim-delay-3

   template-parts/method.php
     .method__copy               → animate-on-scroll anim-fade

   template-parts/process.php
     .process-section heading    → animate-on-scroll
     .process-card (1o)          → animate-on-scroll anim-delay-1
     .process-card (2o)          → animate-on-scroll anim-delay-2
     .process-card (3o)          → animate-on-scroll anim-delay-3

   template-parts/case-study-single.php
     .case-study-card            → animate-on-scroll
     .cs-number-item__value      → animate-on-scroll counter-anim
       (es: <span class="cs-number-item__value animate-on-scroll counter-anim">50+</span>)

   template-parts/why-me.php
     .why-me .section-title      → animate-on-scroll
     .why-block (1o)             → animate-on-scroll anim-scale anim-delay-1
     .why-block (2o)             → animate-on-scroll anim-scale anim-delay-2
     .why-block (3o)             → animate-on-scroll anim-scale anim-delay-3
     .why-block (4o)             → animate-on-scroll anim-scale anim-delay-4

   ============================================================ */