/* =============================================================================
   Animations Plein Sud
   - Reveal au scroll (classe .ps-reveal posée en JS → .is-in)
   - Entrée du hero, survol cartes/boutons
   - Respecte prefers-reduced-motion
   ============================================================================= */

/* --- Reveal au scroll --------------------------------------------------------
   La classe .ps-reveal est ajoutée par JS : si le JS ne tourne pas, rien n'est
   masqué (contenu toujours visible). Stagger via --ps-i (posé en JS). */
.ps-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--ps-i, 0) * 65ms);
  will-change: opacity, transform;
}
.ps-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Cartes produit : lift + zoom image au survol ---------------------------- */
.ps-card { transition: border-color 0.2s ease, box-shadow 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.ps-card:hover { border-color: rgba(var(--ps-gold-rgb), 0.5); box-shadow: 0 16px 36px rgba(42, 39, 36, 0.10); transform: translateY(-4px); }
.ps-card__media img { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.ps-card:hover .ps-card__media img { transform: scale(1.06); }

/* Tuiles marques : même esprit */
.ps-brand__logo, .ps-brand__initial { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ps-brand:hover .ps-brand__logo, .ps-brand:hover .ps-brand__initial { transform: scale(1.05); }

/* --- Hero : entrée à la charge (et à chaque changement de slide) -------------- */
@keyframes psHeroUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes psHeroMedia {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}
/* One-shot au chargement seulement (classe .ps-hero-in posée puis retirée par JS) —
   évite que l'entrée ne se rejoue et masque le hero à chaque auto-défilement du slider. */
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > * { animation: psHeroUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > *:nth-child(1) { animation-delay: 0.08s; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > *:nth-child(2) { animation-delay: 0.16s; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > *:nth-child(3) { animation-delay: 0.24s; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > *:nth-child(4) { animation-delay: 0.32s; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__content > *:nth-child(5) { animation-delay: 0.40s; }
.ps-hero-in .ps-hero__slide.is-active .ps-hero__media { animation: psHeroMedia 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* --- Boutons : léger ressenti au survol/clic --------------------------------- */
.ps-btn-gold, .ps-btn-ink, .ps-btn-outline, .ps-hero__btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.ps-btn-gold:hover, .ps-btn-ink:hover, .ps-hero__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--ps-gold-rgb), 0.22); }
.ps-btn-gold:active, .ps-btn-ink:active, .ps-hero__btn:active { transform: translateY(0); }

/* --- Actions header (icônes) : petit rebond --------------------------------- */
.ps-action svg { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ps-action:hover svg { transform: translateY(-2px); }

/* --- Accessibilité : couper toutes les animations si demandé ----------------- */
@media (prefers-reduced-motion: reduce) {
  .ps-reveal, .ps-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ps-hero__slide.is-active .ps-hero__content > *,
  .ps-hero__slide.is-active .ps-hero__media { animation: none !important; }
  .ps-card, .ps-card:hover, .ps-card__media img, .ps-card:hover .ps-card__media img { transition: none !important; transform: none !important; }
}

/* =============================================================================
   Micro-interactions panier + favoris
   ============================================================================= */

/* Badge (panier/favoris) : pop au changement (préserve le translateX du badge) */
@keyframes psBadgePop {
  0%, 100% { transform: translateX(18px) scale(1); }
  35%      { transform: translateX(18px) scale(1.5); }
}
.ps-badge.ps-pop { animation: psBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Bouton carte : flash « Ajouté » au succès AJAX */
.ps-card__cart.ps-added-flash {
  background: var(--ps-olive) !important;
  border-color: var(--ps-olive) !important;
  color: #fff !important;
  animation: psAddedPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ps-card__cart.ps-added-flash svg { color: #fff; }
@keyframes psAddedPop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.05); } }

/* Cœur favoris : pop + anneau qui s'étend (burst) à l'ajout */
.ps-card__fav.ps-burst, .ps-product__wish.ps-burst { animation: psHeartPop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes psHeartPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } }
.ps-card__fav.ps-burst::after, .ps-product__wish.ps-burst::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--ps-terracotta);
  opacity: 0.7;
  pointer-events: none;
  animation: psHeartRing 0.55s ease-out forwards;
}
@keyframes psHeartRing {
  from { transform: scale(0.6); opacity: 0.7; }
  to   { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-badge.ps-pop, .ps-card__cart.ps-added-flash, .ps-card__fav.ps-burst, .ps-product__wish.ps-burst { animation: none !important; }
  .ps-card__fav.ps-burst::after, .ps-product__wish.ps-burst::after { display: none !important; }
}