/* animations.css — comparsa allo scroll e ingresso dell'hero (Ho.Bag).

   PORTATO DA agriravagnolo, nella versione di soluzioni-srl (2026-08-06), con i
   selettori di questo sito. Tre scelte che contano:

   1. ANIMATION, NON TRANSITION. Una transizione non parte sul primo rendering di
      un elemento, e con CSS bloccanti quel caso si verifica sempre. Un'animazione
      con `both` parte comunque.

   2. L'HERO NON PASSA DAL MOTORE JS. E' above-the-fold, e il JS gira dopo il parse.
      Questo foglio e' render-blocking: l'ingresso dell'hero e' gia' attivo al primo
      disegno. Vale anche per la testata della scheda prodotto.

   3. FAIL-VISIBLE. Il pre-stato opacity:0 vive dietro `html.js-reveal`, che il JS
      aggiunge solo se IntersectionObserver esiste e il movimento ridotto e' spento.

   L'attributo `data-ar-reveal` viene RIMOSSO a fine animazione: l'elemento torna
   nudo e i sollevamenti al passaggio del mouse di style.css tornano a funzionare.
   Il blocco prefers-reduced-motion di style.css (sezione 23) azzera comunque ogni
   animazione, anche queste. */

:root {
  --ar-dur: .65s;                          /* durata base dell'ingresso */
  --ar-dur-quick: .28s;                    /* ridisegno: solo dissolvenza */
  --ar-hero-dur: 1.25s;                    /* scala della foto dell'hero */
  --ar-ease: cubic-bezier(.22, .61, .36, 1);
  --ar-shift: 30px;                        /* spostamento di default */
  --ar-stagger: 65ms;                      /* passo fra elementi di un gruppo */
}

/* ============================================================
   Comparsa allo scroll, pilotata da static/js/animations.js
   ============================================================ */
html.js-reveal [data-ar-reveal] { opacity: 0; }
html.js-reveal [data-ar-reveal].is-revealing {
  animation: ar-reveal var(--ar-dur) var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * var(--ar-stagger));
}
@keyframes ar-reveal {
  from { opacity: 0; transform: translate3d(0, var(--ar-shift), 0); }
  to   { opacity: 1; transform: none; }
}

/* Ruolo gerarchico, scritto dal JS come valore di data-ar-reveal. Il titolo e'
   l'elemento piu' grande e piu' guardato: e' il piu' mosso e il piu' lento. I
   bottoni restano brevi: su un elemento piccolo un movimento ampio sembra un
   sussulto. */
html.js-reveal [data-ar-reveal="head"]  { --ar-shift: 46px; }
html.js-reveal [data-ar-reveal="media"] { --ar-shift: 26px; }
html.js-reveal [data-ar-reveal="cta"]   { --ar-shift: 14px; }
html.js-reveal [data-ar-reveal="head"].is-revealing {
  animation-duration: calc(var(--ar-dur) * 1.2);
}

/* Ridisegno di una griglia gia' dipinta da un'azione dell'utente (filtri del blog,
   ricerca): far sfilare le card a ogni clic e' un ostacolo. Dissolvenza secca. */
html.js-reveal [data-ar-reveal="quick"].is-revealing {
  animation: ar-fade var(--ar-dur-quick) var(--ar-ease) both;
  animation-delay: 0s;
}
@keyframes ar-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ridondanza voluta: il gate primario e' in JS (js-reveal non viene nemmeno
   aggiunta). Questo copre chi attiva il movimento ridotto a pagina gia' caricata. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-ar-reveal],
  html.js-reveal [data-ar-reveal].is-revealing {
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   HERO e testata prodotto: ingresso in CSS puro
   ============================================================
   `.hero` e `.band--product-head` sono esclusi dal motore JS.

   LA FOTO SCALA MA NON SFUMA, ed e' deliberato: la misura LCP ignora gli elementi
   a opacity:0, e la foto dell'hero (o della scheda prodotto) e' quasi sempre
   l'elemento LCP. La scala da' lo stesso assestamento senza costare posizionamento.
   Per lo stesso motivo il titolo ha ritardo zero. */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img,
  .product-head .gallery__image {
    animation: ar-hero-img var(--ar-hero-dur) var(--ar-ease) both;
  }

  .hero__title,
  .hero__sub,
  .hero__text > .prose,
  .hero__cta,
  .product-head__cat,
  .product-head__title,
  .product-head__text > .prose {
    animation: ar-reveal var(--ar-dur) var(--ar-ease) both;
  }

  .hero__title,
  .product-head__title {
    --ar-shift: 46px;
    animation-delay: 0s;
    animation-duration: calc(var(--ar-dur) * 1.2);
  }
  .hero__sub,
  .hero__text > .prose,
  .product-head__text > .prose    { animation-delay: 90ms; }
  .hero__cta,
  .product-head__cat              { --ar-shift: 14px; animation-delay: 180ms; }
}
@keyframes ar-hero-img {
  from { transform: scale(1.08); }
  to   { transform: none; }
}