/* ============================================================
   D'eaumingue — animations.css
   Keyframes isolées + reveal au scroll (copiable tel quel dans le child theme)
   ============================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes dropFall {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.9; }
  100% { transform: translateY(110vh) scale(1.05); opacity: 0; }
}

@keyframes dripBounce {
  0%, 60%, 100% { transform: translateY(0) scaleY(1); }
  70% { transform: translateY(2px) scaleY(1.12); }
  80% { transform: translateY(-1px) scaleY(0.96); }
}

@keyframes ripple {
  0%, 60% { transform: scale(0.6); opacity: 0; }
  70% { opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Reveal au scroll — [data-reveal="true"] (valeur explicite obligatoire) */
[data-reveal="true"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="true"].is-revealed { opacity: 1; transform: translateY(0); }

/* Délais en cascade pour les grilles */
[data-reveal="true"][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal="true"][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal="true"][data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal="true"][data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal="true"][data-reveal-delay="5"] { transition-delay: 0.40s; }

/* Hero : entrée du texte et flottement du logo */
.hero__eyebrow, .hero__title, .hero__text, .hero__actions, .hero__proofs { animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero__title { animation-delay: 0.1s; }
.hero__text { animation-delay: 0.2s; }
.hero__actions { animation-delay: 0.3s; }
.hero__proofs { animation-delay: 0.4s; }
.hero__logo { animation: floatLogo 7s ease-in-out infinite; }

/* Gouttes décoratives dans le hero — vraies gouttes, 3 tailles, reflets */
.hero__drops { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__drop {
  position: absolute; top: -40px; width: 16px; height: 16px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 14%, rgba(120, 190, 255, 0.95) 30%, rgba(26, 108, 255, 0.85) 70%, rgba(11, 63, 174, 0.9) 100%);
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  box-shadow: 0 0 14px rgba(55, 208, 255, 0.55), inset -2px -3px 6px rgba(0, 0, 0, 0.35);
  animation: dropFall linear infinite;
  will-change: transform;
}
/* pointe de la goutte */
.hero__drop::before {
  content: ""; position: absolute; left: 50%; top: -42%; width: 46%; height: 60%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(55, 208, 255, 0.95), rgba(26, 108, 255, 0.9));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 40% 40% 0 0;
}
/* traînée lumineuse */
.hero__drop::after {
  content: ""; position: absolute; left: 50%; bottom: 85%; width: 2px; height: 90px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(55, 208, 255, 0), rgba(55, 208, 255, 0.55));
}
.hero__drop--sm, .hero__drop:nth-child(3n) { width: 10px; height: 10px; }
.hero__drop:nth-child(4n) { width: 24px; height: 24px; }
.hero__drop:nth-child(7n) { width: 30px; height: 30px; }
.hero__drop:nth-child(1)  { left: 4%;  animation-duration: 7s;    animation-delay: 0s; }
.hero__drop:nth-child(2)  { left: 11%; animation-duration: 9.5s;  animation-delay: 3s; }
.hero__drop:nth-child(3)  { left: 18%; animation-duration: 6.5s;  animation-delay: 1.5s; }
.hero__drop:nth-child(4)  { left: 27%; animation-duration: 8s;    animation-delay: 5s; }
.hero__drop:nth-child(5)  { left: 35%; animation-duration: 10s;   animation-delay: 0.5s; }
.hero__drop:nth-child(6)  { left: 44%; animation-duration: 7.5s;  animation-delay: 4s; }
.hero__drop:nth-child(7)  { left: 52%; animation-duration: 9s;    animation-delay: 2s; }
.hero__drop:nth-child(8)  { left: 60%; animation-duration: 6.8s;  animation-delay: 6s; }
.hero__drop:nth-child(9)  { left: 68%; animation-duration: 8.5s;  animation-delay: 1s; }
.hero__drop:nth-child(10) { left: 75%; animation-duration: 7.2s;  animation-delay: 3.5s; }
.hero__drop:nth-child(11) { left: 82%; animation-duration: 9.8s;  animation-delay: 0.2s; }
.hero__drop:nth-child(12) { left: 88%; animation-duration: 6.9s;  animation-delay: 4.5s; }
.hero__drop:nth-child(13) { left: 94%; animation-duration: 8.2s;  animation-delay: 2.5s; }
.hero__drop:nth-child(14) { left: 98%; animation-duration: 7.6s;  animation-delay: 5.5s; }

/* Plaque de statut : la goutte goutte, l'anneau s'éloigne */
.status-plate__drop { animation: dripBounce 2.4s ease-in-out infinite; }
.status-plate__ring { animation: ripple 2.4s ease-out infinite; }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal="true"] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}