/* ==========================================================================
   Animazioni del design system Skinpetcare
   Ricavate dalle vecchie pagine (Home, Istruzioni, Tecnologia, Lozioni).
   Uso in Gutenberg: blocco > Avanzate > Classi CSS aggiuntive.
   ========================================================================== */
:root {
  --ds-motion-fast: .25s;
  --ds-motion-base: .5s;
  --ds-motion-slow: .7s;
  --ds-ease: ease;
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-gallery: cubic-bezier(.25, .8, .25, 1);
  --ds-reveal-distance: 16px;
}

/* 1. Ingresso della hero: dal basso con dissolvenza  ->  classe: anim-fadeup
   Scaglionamento con la variabile --ds-delay (es. style="--ds-delay:.35s").
   Valori delle vecchie hero: eyebrow 0s, titolo 0s, testo .35s, pulsanti .48s, linea .55s. */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fadeup {
  opacity: 0;
  animation: ds-fade-up var(--ds-motion-slow) var(--ds-delay, 0s) forwards;
}

/* 2. Comparsa allo scroll (card, passi, blocchi)  ->  classe: anim-reveal */
.anim-reveal {
  opacity: 0;
  transform: translateY(var(--ds-reveal-distance));
  transition: opacity var(--ds-motion-base) var(--ds-delay, 0s) var(--ds-ease),
              transform var(--ds-motion-base) var(--ds-delay, 0s) var(--ds-ease);
}
.anim-reveal.is-visible { opacity: 1; transform: none; }
/* Senza JavaScript il contenuto resta visibile */
html:not(.has-js) .anim-reveal { opacity: 1; transform: none; }

/* 3. Immagine da sinistra e testo da destra  ->  contenitore: anim-slide
   figli: anim-from-left / anim-from-right (banner kit) */
.anim-slide .anim-from-left,
.anim-slide .anim-from-right {
  opacity: 0;
  transition: opacity .65s var(--ds-ease-out), transform .65s var(--ds-ease-out);
}
.anim-slide .anim-from-left  { transform: translateX(-28px); }
.anim-slide .anim-from-right { transform: translateX(28px); transition-delay: .1s; }
.anim-slide.is-visible .anim-from-left,
.anim-slide.is-visible .anim-from-right { opacity: 1; transform: none; }
html:not(.has-js) .anim-slide .anim-from-left,
html:not(.has-js) .anim-slide .anim-from-right { opacity: 1; transform: none; }

/* 4. Elemento che si solleva all'hover  ->  classe: anim-lift */
.anim-lift { transition: transform var(--ds-motion-fast) var(--ds-ease), box-shadow var(--ds-motion-fast) var(--ds-ease), border-color var(--ds-motion-fast) var(--ds-ease); }
@media (hover: hover) {
  .anim-lift:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(86, 81, 76, .12); }
}

/* 5. Ingrandimento dell'immagine all'hover del contenitore  ->  classe: anim-zoom */
.anim-zoom { overflow: hidden; }
.anim-zoom img { transition: transform .6s var(--ds-ease); }
@media (hover: hover) {
  .anim-zoom:hover img { transform: scale(1.06); }
}

/* 6. Galleria che si allarga all'hover  ->  contenitore flex: anim-expand */
.anim-expand > * { transition: flex-grow var(--ds-motion-base) var(--ds-ease-gallery); }
@media (hover: hover) {
  .anim-expand > *:hover { flex-grow: 1.6; }
}

/* 7. Pulsanti: sollevamento leggero, automatico su tutti i blocchi Pulsante */
.wp-block-button__link { transition: transform var(--ds-motion-fast) var(--ds-ease); }
@media (hover: hover) {
  .wp-block-button__link:hover { transform: translateY(-1px); }
}

/* 8. FAQ a fisarmonica  ->  classe: anim-accordion (sul blocco Dettagli).
   Nei browser che non lo supportano si apre senza animazione. */
.anim-accordion { interpolate-size: allow-keywords; }
.anim-accordion::details-content {
  height: 0; overflow: hidden;
  transition: height var(--ds-motion-base) var(--ds-ease), content-visibility var(--ds-motion-base) allow-discrete;
}
.anim-accordion[open]::details-content { height: auto; }

/* Accessibilita': chi disattiva le animazioni nel sistema non le vede */
@media (prefers-reduced-motion: reduce) {
  .anim-fadeup, .anim-reveal, .anim-lift, .anim-zoom img, .anim-expand > *, .wp-block-button__link,
  .anim-slide .anim-from-left, .anim-slide .anim-from-right, .anim-accordion::details-content {
    animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important;
  }
}