/* =====================================================================
   BYITALY STORE - animations.css
   Animazioni di ingresso e microinterazioni
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   NOTA DI TRASPARENZA: da screenshot statici nessuna animazione è
   dimostrabile [B - ANALISI.md §0.5]. Set volutamente sobrio e
   disattivabile: rimuovere questo file (o le classi .ff-anim) basta.
   ---------------------------------------------------------------------
   Funzionamento: animations.js (FASE 6) aggiunge .ff-anim agli
   elementi target e .ff-anim--in quando entrano in viewport
   (IntersectionObserver). SOLO transform/opacity: proprietà
   compositate -> nessun reflow, INP/CLS non impattati.
   Fallback no-JS: senza .ff-anim gli elementi restano visibili.
   prefers-reduced-motion: già azzerato globalmente (variables.css).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FADE-UP DI INGRESSO
--------------------------------------------------------------------- */
.ff-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.ff-anim--in {
  opacity: 1;
  transform: none;
  will-change: auto;            /* libera il layer una volta animato */
}

/* Stagger per figli in griglia: animations.js assegna --ff-anim-i
   (indice) a card/item; il delay scala di 70ms per elemento. */
.ff-anim { transition-delay: calc(var(--ff-anim-i, 0) * 70ms); }

/* ---------------------------------------------------------------------
   2. VARIANTI DIREZIONALI (hero: testo da sinistra, media da destra)
--------------------------------------------------------------------- */
.ff-anim--left  { transform: translateX(-26px); }
.ff-anim--right { transform: translateX(26px); }
.ff-anim--left.ff-anim--in,
.ff-anim--right.ff-anim--in { transform: none; }

/* ---------------------------------------------------------------------
   3. MICROINTERAZIONI AGGIUNTIVE
   (hover di card/bottoni/menu già nei rispettivi file)
--------------------------------------------------------------------- */
/* Icone dei bottoni CTA: micro-slide della freccia/icona al hover */
.ff-btn i { transition: transform var(--ff-transition); }
.ff-btn:hover i { transform: translateX(3px); }
/* ...ma non per le icone "statiche" (borsa, user): solo chevron/frecce */
.ff-btn:hover i.fa-bag-shopping,
.ff-btn:hover i.fa-user { transform: none; }

/* Badge carrello: pop quando il conteggio cambia (classe da main.js
   sull'evento prestashop updateCart) */
@keyframes ff-badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.cart-products-count.ff-pop { animation: ff-badge-pop 0.35s ease; }

/* Skeleton shimmer per immagini lazy in caricamento (sfondo card) */
@keyframes ff-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.ff-img-loading {
  background: linear-gradient(90deg,
    var(--ff-bg-soft) 25%, #EDF0F4 50%, var(--ff-bg-soft) 75%);
  background-size: 400px 100%;
  animation: ff-shimmer 1.2s infinite linear;
}

/* Smooth scroll per le anchor (tabs scheda servizio) - CSS-first,
   il JS aggiunge solo lo scroll-spy */
html { scroll-behavior: smooth; }