/* ============================================================
   GLOBAL ANIMATIONS — global-animations.css
   Da caricare su TUTTO IL SITO (non solo una pagina).
   Contiene:
   1. Pop-in automatico dei container scrollando
   2. Hover "pop" elegante sui bottoni (cambio colore + leggero scale)
   ============================================================ */

/* 1. POP-IN AUTOMATICO
   La classe .cs-pop-target viene aggiunta via JS a tutti i
   container di primo livello della pagina (non serve farlo a mano).
   Stato iniziale: leggermente rimpicciolito, spostato in basso, invisibile. */
.cs-pop-target {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition:
    opacity 0.6s cubic-bezier(0.21, 1.02, 0.73, 1),
    transform 0.6s cubic-bezier(0.21, 1.02, 0.73, 1);
  will-change: transform, opacity;
}

/* Stato finale: quando entra nello schermo, torna a dimensione piena
   con un leggero "overshoot" (supera di un pelo la misura finale prima
   di assestarsi) grazie alla curva cubic-bezier sopra — è quello che dà
   la sensazione di "pop" invece di un fade-in piatto. */
.cs-pop-target.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 2. HOVER BOTTONI — cambio colore + pop elegante
   Si applica sia ai bottoni del tema child (.cs-btn) sia ai bottoni
   nativi di Elementor (.elementor-button), così è coerente ovunque. */
.cs-btn,
.elementor-button {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}

/* (hover: hover) evita che l'effetto resti "incollato" sul dito
   quando si tocca su mobile/tablet (dove non esiste un vero hover) */
@media (hover: hover) {
  .cs-btn:hover,
  .elementor-button:hover {
    transform: translateY(-3px) scale(1.035);
    box-shadow: 0 10px 24px rgba(169, 131, 79, 0.32);
  }

  /* Se il bottone Elementor non ha già un colore custom, in hover
     vira verso l'oro del brand invece del colore piatto di default */
  .elementor-button:hover {
    background-color: var(--color-gold-dark, #8c6b3c);
    border-color: var(--color-gold-dark, #8c6b3c);
    color: #fff;
  }
}

.cs-btn:active,
.elementor-button:active {
  transform: translateY(-1px) scale(1.01);
}

/* 3. ACCESSIBILITÀ — rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .cs-pop-target {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .cs-btn,
  .elementor-button {
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
  .cs-btn:hover,
  .elementor-button:hover {
    transform: none;
  }
}