/* ============================================================
   Symbios — Animations d'entrée (arrivée depuis la gauche/droite/bas)
   Chargé UNIQUEMENT sur le site (pas dans l'éditeur), pour ne pas
   masquer les blocs pendant l'édition. L'apparition est déclenchée
   au défilement par assets/js/main.js (classe .is-visible).
   S'applique via les styles de bloc (is-style-sy-from-*) ou via une
   classe CSS manuelle (sy-anim-left / sy-anim-right / sy-anim-up).
   ============================================================ */

.is-style-sy-from-left, .sy-anim-left,
.is-style-sy-from-right, .sy-anim-right,
.is-style-sy-from-bottom, .sy-anim-up{
  opacity:0;
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.is-style-sy-from-left,  .sy-anim-left { transform:translateX(-52px); }
.is-style-sy-from-right, .sy-anim-right{ transform:translateX(52px); }
.is-style-sy-from-bottom, .sy-anim-up  { transform:translateY(44px); }

/* État visible (ajouté au défilement) */
.is-style-sy-from-left.is-visible,  .sy-anim-left.is-visible,
.is-style-sy-from-right.is-visible, .sy-anim-right.is-visible,
.is-style-sy-from-bottom.is-visible, .sy-anim-up.is-visible{
  opacity:1; transform:none;
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce){
  .is-style-sy-from-left, .sy-anim-left,
  .is-style-sy-from-right, .sy-anim-right,
  .is-style-sy-from-bottom, .sy-anim-up{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}