/* ============================================================
   GALLERIANGELINI — Animazioni
   Scroll reveal, hover card/bottoni, transizioni di pagina.

   Tutto viene disattivato automaticamente se l'utente ha
   impostato "Riduzione del movimento" nel sistema operativo.
   Nessuna libreria esterna — solo CSS transitions/animations.
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   RIDUZIONE MOVIMENTO — accessibilità
   Se prefers-reduced-motion è attivo, azzera durate e rende
   subito visibili tutti gli elementi animati.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:      0.001ms !important;
    transition-delay:         0ms     !important;
  }
  .reveal {
    opacity:   1     !important;
    transform: none  !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   1. SCROLL REVEAL — elementi .reveal
   Stato iniziale: invisibile e abbassato di 30px.
   La classe .visible viene aggiunta da animazioni.js tramite
   IntersectionObserver quando l'elemento entra nel viewport.
   ────────────────────────────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal.visible {
  opacity:   1;
  transform: none;
}

/* will-change impostato via JS (animazioni.js) solo mentre l'elemento sta
   transizionando in vista, e rimosso a transizione finita: vedi il
   revealObserver. Tenerlo sempre acceso su ogni .reveal sprecherebbe
   memoria GPU per elementi ancora fuori schermo o già animati da tempo. */
.reveal.will-animate {
  will-change: opacity, transform;
}

/* Ritardi scalati per effetto cascata tra elementi adiacenti */
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }


/* ──────────────────────────────────────────────────────────────
   2. HOVER CARD PRODOTTO
   Ombra più pronunciata + leggero zoom sull'immagine.
   Il transform resta riservato allo scroll reveal (punto 1): la
   card non si solleva più in hover, per evitare che le due
   transizioni (reveal e hover) si contendano la stessa proprietà.
   ────────────────────────────────────────────────────────────── */
.product-card {
  transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.25s ease;
}

.product-card:hover {
  box-shadow: 0 12px 40px rgba(20, 14, 10, 0.18);
}

.product-card__image img {
  transition: transform 0.25s ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.03);
}


/* ──────────────────────────────────────────────────────────────
   3. HOVER BOTTONI PRINCIPALI
   Leggero sollevamento + ombra che cresce.
   Sovrascrive translateY(-1px) di global.css con -2px.
   ────────────────────────────────────────────────────────────── */
.btn {
  transition: background-color 0.2s ease,
              border-color     0.2s ease,
              color            0.2s ease,
              transform        0.2s ease,
              box-shadow       0.2s ease;
}

.btn--primary:hover,
.btn--secondary:hover,
.btn--whatsapp:hover {
  transform: translateY(-2px);
}


/* ──────────────────────────────────────────────────────────────
   4. TRANSIZIONI DI PAGINA
   Fade-in automatico all'apertura di ogni pagina (animation su body).
   La classe .page-exiting viene aggiunta da animazioni.js prima
   della navigazione verso un'altra pagina (link interni).
   ────────────────────────────────────────────────────────────── */
@keyframes ga-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ga-page-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

body {
  animation: ga-page-in 0.2s ease-out both;
}

body.page-exiting {
  animation:      ga-page-out 0.13s ease-out forwards;
  pointer-events: none;
}