/* ==========================================================================
   animations.css — Couche d'animations transversale (chargée APRÈS components.css)
   Contenu : reveal enrichi (variantes + stagger via --d), effet hover "lift",
   reflet sur les boutons, ken burns du hero, pulsation des badges promo,
   flottement du pourcentage promo. Tout est désactivé si l'utilisateur
   demande moins d'animations (prefers-reduced-motion).
   Charger : theme.css → components.css → animations.css
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);
}

/* --------------------------------------------------------------------------
   1. Apparition au défilement (reveal) — enrichit la base de components.css
   Stagger : chaque élément peut déclarer --d (délai) ; animations.js
   alimente automatiquement --d dans les conteneurs [data-stagger].
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .6s var(--ease-out) var(--d, 0ms),
    transform .6s var(--ease-out) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--zoom  { transform: scale(.93); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition-timing-function: var(--ease-out), var(--ease-spring);
}

/* --------------------------------------------------------------------------
   2. Effet "lift" au survol (cartes) — seulement pointeur fin + pas de motion
   -------------------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card,
  .pack-card,
  .trust-card {
    transition:
      transform .35s var(--ease-out),
      box-shadow .35s var(--ease-out),
      border-color .35s var(--ease-out);
  }
  .product-card:hover,
  .pack-card:hover,
  .trust-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .pack-card:hover .pack-card__media img { transform: scale(1.06) rotate(-1deg); }
}

/* --------------------------------------------------------------------------
   3. Reflet balayant les boutons à l'entrée du pointeur
   -------------------------------------------------------------------------- */
.btn:not(.btn--link) {
  position: relative;
  overflow: hidden;
}
.btn:not(.btn--link)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg) translateX(-160%);
  transition: transform .65s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not(.btn--link):hover::after { transform: skewX(-20deg) translateX(320%); }
}

/* --------------------------------------------------------------------------
   4. Ken burns — zoom lent sur l'image active du hero (accueil)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active img {
    animation: kenburns 14s ease-in-out alternate infinite;
  }
}
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}

/* --------------------------------------------------------------------------
   5. Pulsation des badges promo + flottement du pourcentage
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .badge--promo { animation: flp-pulse 2.6s ease-in-out infinite; }
  .promo__pct   { animation: flp-bob 4s ease-in-out infinite; }
}
@keyframes flp-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes flp-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* --------------------------------------------------------------------------
   6. Accessibilité : tout est neutralisé si l'utilisateur demande moins
   d'animations (les éléments .reveal sont affichés directement).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .badge--promo,
  .promo__pct,
  .hero__slide.is-active img,
  .btn:not(.btn--link)::after {
    animation: none;
    transition: none;
  }
}