/*
 * Quello che nel sito React faceva framer-motion.
 *
 * File separato di proposito: i quattro fogli portati dal sito precedente
 * (tokens, base, components, pages) sono identici agli originali, byte per
 * byte. Tutto ciò che ho aggiunto sta qui, così si vede subito cos'è nuovo.
 *
 * Contiene anche le poche regole che servono perché il testo scritto nei campi
 * RichText di Wagtail — che produce <p> e <h2> senza classi — venga reso come
 * lo rendeva il JSX, che quelle classi le scriveva a mano.
 */

/* Alpine nasconde gli elementi con x-show solo dopo aver inizializzato:
   senza questa regola compaiono per un istante al caricamento. */
[x-cloak] { display: none !important; }


/* ═══════════════ Comparsa allo scroll ═══════════════
   Sostituisce il componente Reveal. L'elemento parte spostato e trasparente;
   Alpine gli aggiunge .is-in quando entra nello schermo. Lo stagger delle
   griglie diventa un ritardo calcolato sull'indice. */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y, 26px));
  transition:
    opacity 0.72s var(--ease),
    transform 0.72s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms + var(--i, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Griglie lunghe (il catalogo): stagger più stretto, per non far aspettare
   più di un secondo l'ultima card. */
.reveal--fast { transition-delay: calc(var(--i, 0) * 28ms); }

/* Ingresso laterale dei due cerchi del diagramma delle sinergie. */
.reveal--left { transform: translateX(28px); }
.reveal--right { transform: translateX(-28px); }
.reveal--left.is-in,
.reveal--right.is-in { transform: none; }


/* ═══════════════ Barra di avanzamento dello scroll ═══════════════
   framer-motion la smorzava con una molla; qui è una transizione breve.
   La differenza si coglie solo mettendo i due siti uno accanto all'altro. */

.progress { transform: scaleX(0); transition: transform 0.12s linear; }


/* ═══════════════ Slider dell'hero ═══════════════ */

/* Le copie delle slide vanno impilate: durante il cambio, quella che esce e
   quella che entra sono in pagina insieme e senza questo si accodano. */
.hero__copy > .hero__pane { grid-area: 1 / 1; align-self: center; }
.hero__copy > .hero__controls { grid-row: 2; }

/* Entrata e uscita direzionali: la direzione la decide una classe sul
   contenitore, così le stesse regole servono avanti e indietro. */
.hslide { transition: opacity 0.62s var(--ease), transform 0.62s var(--ease); }
.is-fwd .hslide-enter-start { opacity: 0; transform: translateX(46px); }
.is-fwd .hslide-leave-end { opacity: 0; transform: translateX(-46px); }
.is-back .hslide-enter-start { opacity: 0; transform: translateX(-46px); }
.is-back .hslide-leave-end { opacity: 0; transform: translateX(46px); }
.hslide-enter-end,
.hslide-leave-start { opacity: 1; transform: none; }

/* Il prodotto entra ruotando leggermente, come nell'originale. */
.hshot { transition: opacity 0.72s var(--ease), transform 0.72s var(--ease); }
.is-fwd .hshot-enter-start { opacity: 0; transform: translateX(90px) rotate(6deg); }
.is-fwd .hshot-leave-end { opacity: 0; transform: translateX(-90px) rotate(-6deg); }
.is-back .hshot-enter-start { opacity: 0; transform: translateX(-90px) rotate(-6deg); }
.is-back .hshot-leave-end { opacity: 0; transform: translateX(90px) rotate(6deg); }
.hshot-enter-end,
.hshot-leave-start { opacity: 1; transform: none; }

/* Sfondo: dissolvenza lunga più il lento avvicinamento (Ken Burns). */
.hero__bg { transition: opacity 1s var(--ease); animation: heroKenBurns 12s linear both; }
.hero__bg.hbg-enter-start, .hero__bg.hbg-leave-end { opacity: 0; }
@keyframes heroKenBurns {
  from { scale: 1.1; }
  to { scale: 1.06; }
}

/* Riempimento del pallino attivo: è il conto alla rovescia dell'autoplay,
   e si ferma quando si ferma l'autoplay. */
.hero__dot-fill { transform: scaleX(0); }
.hero__dot.is-on .hero__dot-fill { animation: heroDotFill var(--hero-duration, 7s) linear forwards; }
.hero.is-paused .hero__dot.is-on .hero__dot-fill { animation-play-state: paused; }
@keyframes heroDotFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Il titolo arriva da un campo RichText: Wagtail lo racchiude in un <p>. */
.hero__line > p { display: inline; margin: 0; }
.hero h1 i { font-style: italic; font-weight: 300; color: var(--accent); }


/* ═══════════════ Mega-menu, drawer, banner ═══════════════ */

.mega { transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); }
.mega-start { opacity: 0; transform: translate(-50%, -8px) scale(0.97); }
.mega-end { opacity: 1; transform: translate(-50%, 0) scale(1); }

.drawer { transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.drawer-start { opacity: 0; transform: translateY(-16px); }
.drawer-end { opacity: 1; transform: none; }

/* Le voci del drawer entrano una dopo l'altra, come nell'originale. */
.drawer__link, .drawer__sub, .drawer .btn {
  animation: drawerItem 0.42s var(--ease) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 50ms);
}
@keyframes drawerItem {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.cookie { transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.cookie-start { opacity: 0; transform: translate(-50%, 40px); }
.cookie-end { opacity: 1; transform: translate(-50%, 0); }


/* ═══════════════ Scheda prodotto ═══════════════ */

/* La confezione oscilla piano, all'infinito. */
.pdp__shot { animation: pdpFloat 7s ease-in-out infinite; }
@keyframes pdpFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* La descrizione estesa arriva da un RichText: nel JSX ogni paragrafo aveva
   la classe .pdp__par. */
.pdp__prose > p { margin-bottom: 1rem; line-height: 1.75; }
.pdp__prose > p:last-child { margin-bottom: 0; }


/* ═══════════════ Testi da RichText ═══════════════ */

/* Corpo dell'articolo: i sottotitoli sono <h2> senza classe. */
.article__body h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  margin-block: 2.4rem 0.9rem;
  padding-top: 0.4rem;
  border-top: 3px solid var(--accent);
  display: inline-block;
}
.article__body ul,
.article__body ol { margin-bottom: 1.1rem; padding-left: 1.4rem; line-height: 1.75; }

/* Apertura dell'articolo: nel JSX il primo paragrafo era il lede. */
.article__intro > p { margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.75; }
.article__intro > p:first-child { font-size: 1.15rem; line-height: 1.65; color: var(--ink); }

/* Pagine legali. */
.legal__intro > p { font-size: 1.06rem; color: var(--ink); margin-bottom: 1rem; line-height: 1.75; }
.legal ul, .legal ol { margin-bottom: 1.2rem; padding-left: 1.4rem; line-height: 1.75; }

/* Condizione: nel JSX era un paragrafo con misure proprie. */
.condition__body > p { font-size: 1.05rem; max-width: 70ch; margin-bottom: 1rem; }
.condition__body > p:last-child { margin-bottom: 0; }

/* «La nostra proposta»: primo paragrafo grande, gli altri normali. */
.about__proposal > p:first-child {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.about__proposal > p + p { margin-top: 1.1rem; }

.founder__bio > p + p { margin-top: 0.9rem; }


/* ═══════════════ Corpo dell'accordion ═══════════════
   L'apertura la gestisce il plugin collapse di Alpine, che anima l'altezza.
   Qui resta solo la spaziatura che nel JSX stava nel motion.div. */
.acc__body[hidden] { display: none; }


/* ═══════════════ Filtro del catalogo ═══════════════
   Le card nascoste dal filtro escono dal flusso: la griglia si ricompone
   senza buchi. */
.pcard-wrap[hidden] { display: none; }


/* ═══════════════ Rispetto delle preferenze di movimento ═══════════════
   base.css azzera già animazioni e transizioni. Qui si azzerano anche gli
   spostamenti di partenza, altrimenti gli elementi resterebbero fermi dove
   sono: fuori posto e invisibili. */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right { opacity: 1; transform: none; }
  .hero__bg { animation: none; scale: 1; }
  .hero__dot.is-on .hero__dot-fill { animation: none; transform: scaleX(1); }
  .pdp__shot { animation: none; }
  .drawer__link, .drawer__sub, .drawer .btn { animation: none; }
  .hslide-enter-start, .hshot-enter-start,
  .hslide-leave-end, .hshot-leave-end { transform: none; }
}


/* ═══════════════ Ritocchi al markup dei template ═══════════════ */

/* Nel JSX il ritardo del morphing era calcolato in JavaScript su ogni card
   (i * -1.7s). Qui riusa il --i che già scaglione la comparsa. */
.ccard__orb { animation-delay: calc(var(--i, 0) * -1.7s); }

/* Sfondo dell'hero: le classi di transizione stanno sul contenitore, perché
   sull'immagine ci gira già l'animazione del Ken Burns. */
.hero__bgwrap { position: absolute; inset: 0; transition: opacity 1s var(--ease); }
.hbg-start { opacity: 0; }
.hbg-end { opacity: 1; }

/* La freccia «precedente» è la stessa icona, ribaltata. */
.icon--flip { transform: rotate(180deg); }

/* Le foto a tutta larghezza si servono in scala, non ritagliate: il ritaglio
   lo fa il CSS con object-fit e object-position, esattamente come nel sito
   React. Ritagliarle prima con una rendition «fill» significherebbe tagliarle
   due volte, e l'inquadratura non sarebbe più quella. */