/* =====================================================================
   LE JARDIN D'ELIO — animations.css
   Animations discrètes, orientées performance et accessibilité.
   ===================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes float-leaf {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translateY(-120vh) rotate(320deg); opacity: 0; }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* Révélation au défilement (piloté par IntersectionObserver → .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--left.is-visible, .reveal--right.is-visible { transform: none; }

/* Décalages en cascade */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Feuilles flottantes ambiantes */
.leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.leaves span {
  position: absolute;
  bottom: -40px;
  width: 26px; height: 26px;
  color: var(--c-leaf-soft);
  opacity: 0;
  animation: float-leaf linear infinite;
}
.leaves span:nth-child(1) { left: 8%;  animation-duration: 22s; animation-delay: 0s;  }
.leaves span:nth-child(2) { left: 26%; animation-duration: 28s; animation-delay: 5s;  width: 20px; height: 20px; color: var(--c-lime); }
.leaves span:nth-child(3) { left: 48%; animation-duration: 24s; animation-delay: 9s;  }
.leaves span:nth-child(4) { left: 68%; animation-duration: 30s; animation-delay: 3s;  width: 30px; height: 30px; }
.leaves span:nth-child(5) { left: 86%; animation-duration: 26s; animation-delay: 12s; color: var(--c-gold-soft); }

/* Léger balancement des décors végétaux */
.sway { transform-origin: bottom center; animation: sway 8s ease-in-out infinite; }

/* Parallaxe légère (piloté en JS via --p) */
.parallax { transform: translateY(calc(var(--p, 0) * 1px)); will-change: transform; }

/* Survol des cartes d'icônes */
.value-card:hover .icon-chip { transform: rotate(-6deg) scale(1.06); transition: transform var(--t); }

/* ---------- Respect du confort (mouvement réduit) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .leaves, .hero__halo { display: none !important; }
  .tipouss { animation: none !important; }
}