/* ═══════════════════════════════════════════════════════════
   Animations & keyframes
   ═══════════════════════════════════════════════════════════ */

/* Loader */
@keyframes drop-fall {
  0%, 100% { transform: translateY(-25px); opacity: 0; }
  20%, 50% { opacity: 1; }
  50% { transform: translateY(10px); }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes ripple-out {
  0% { transform: translateX(-50%) scale(0.2); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(-50%) scale(1.3); opacity: 0; }
}

/* Bulles d'ambiance */
@keyframes bubble-up {
  0% {
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  50% {
    transform: translateY(-50vh) translateX(20px) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-105vh) translateX(-15px) scale(1.3);
    opacity: 0;
  }
}

/* Hero — reveal mot par mot */
@keyframes word-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Vagues hero */
@keyframes wave-shift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-25px); }
}

/* Scroll indicator */
@keyframes float-down {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* Floating icons */
@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* Pulse anneau chatbot */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Chatbot apparition */
@keyframes chat-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ripple sur les cartes (effet eau) */
.ripple-effect {
  position: relative;
  overflow: hidden;
}
.ripple-effect::after {
  content: '';
  position: absolute;
  top: var(--ry, 50%); left: var(--rx, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(31, 181, 201, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}
.ripple-effect.rippling::after {
  width: 300px; height: 300px; opacity: 0;
}

/* Shimmer doré sur le badge recommandé */
.formule-badge {
  position: relative;
  overflow: hidden;
}
.formule-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.5),
    transparent
  );
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  to { left: 100%; }
}

/* Effet parallax doux */
.parallax-up { animation: parallax-up 2s ease-out forwards; }
@keyframes parallax-up {
  from { transform: translateY(40px); }
  to { transform: translateY(0); }
}

/* Reveal au scroll (fallback) */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}