/*
 * animation.css
 */

:root {
  --animationDistance: 15px !important;
  --animationDistanceMinus: -15px !important;

  /* Cascade Logia */
  --logia-cascade-duration: 1s;
  --logia-cascade-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Custom Slide Animations
   ============================================================ */

.customSlideDown {
  animation-name: customSlideDown;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes customSlideDown {
  0%   { opacity: 0; transform: translateY(var(--animationDistance)); }
  100% { opacity: 1; transform: translateY(0); }
}

.customSlideleft {
  animation-name: customSlideLeft;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes customSlideLeft {
  0%   { opacity: 0; transform: translateX(var(--animationDistanceMinus)); }
  100% { opacity: 1; transform: translateX(0); }
}

.customSlideRight {
  animation-name: customSlideRight;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes customSlideRight {
  0%   { opacity: 0; transform: translateX(var(--animationDistance)); }
  100% { opacity: 1; transform: translateX(0); }
}

.customSlideUp {
  animation-name: customSlideUp;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes customSlideUp {
  0%   { opacity: 0; transform: translateY(var(--animationDistanceMinus)); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Animations de groupe (cascade) — Loop Grid
   Aucune classe à ajouter sur la grid : on s'accroche à
   blankAnimation* posée par Elementor. .logia-armed et .logia-in
   sont ajoutées par logia-cascade.js. backwards (et pas both)
   évite de conserver le transform → l'off-canvas n'est pas piégé.
   ============================================================ */

/* Cachés uniquement si le JS a armé la page (failsafe) */
.logia-armed .blankAnimationUp    .e-loop-item:not(.logia-in),
.logia-armed .blankAnimationDown  .e-loop-item:not(.logia-in),
.logia-armed .blankAnimationLeft  .e-loop-item:not(.logia-in),
.logia-armed .blankAnimationRight .e-loop-item:not(.logia-in) {
  opacity: 0;
}

/* Animation déclenchée item par item */
.blankAnimationUp    .e-loop-item.logia-in { animation: customSlideUp    var(--logia-cascade-duration) backwards var(--logia-cascade-easing); }
.blankAnimationDown  .e-loop-item.logia-in { animation: customSlideDown  var(--logia-cascade-duration) backwards var(--logia-cascade-easing); }
.blankAnimationLeft  .e-loop-item.logia-in { animation: customSlideLeft  var(--logia-cascade-duration) backwards var(--logia-cascade-easing); }
.blankAnimationRight .e-loop-item.logia-in { animation: customSlideRight var(--logia-cascade-duration) backwards var(--logia-cascade-easing); }

/* Accessibilité : pas d'animation si l'utilisateur l'a désactivée */
@media (prefers-reduced-motion: reduce) {
  .logia-armed :is(.blankAnimationUp, .blankAnimationDown, .blankAnimationLeft, .blankAnimationRight) .e-loop-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}