/* Estado inicial genérico */
[class*="anim_"] {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease, color 0.8s ease;
    will-change: transform, opacity, color;
  }
  
  /* Direcciones */
  .anim_left-right { transform: translateX(-50px); }
  .anim_right-left { transform: translateX(50px); }
  .anim_up-down { transform: translateY(-50px); }
  .anim_down-up { transform: translateY(50px); }
  
  /* Opacidad */
  .anim_transparencia_0-100 { opacity: 0; }
  
  /* Escalado */
  .anim_scale-up { transform: scale(0.8); }
  .anim_scale-down { transform: scale(1.2); }
  
  /* Rotación */
  .anim_rotation-left-right { transform: rotate(-10deg); }
  .anim_rotation-right-left { transform: rotate(10deg); }
  
  /* Cambio de color genérico: usa variable --anim-color-final */
  .anim_switch_color {
    color: white; /* Estado inicial */
  }
  .active.anim_switch_color {
    color: var(--anim-color-final, #E95C27);
  }
  
  /* Estado final para movimiento/escala/rotación */
  .active.anim_left-right,
  .active.anim_right-left,
  .active.anim_up-down,
  .active.anim_down-up,
  .active.anim_scale-up,
  .active.anim_scale-down,
  .active.anim_rotation-left-right,
  .active.anim_rotation-right-left {
    transform: none;
    opacity: 1;
  }
  
  /* Transparencia final */
  .active.anim_transparencia_0-100 {
    opacity: 1;
  }
  
  /* Escalas */
  .active.anim_scale-up,
  .active.anim_scale-down {
    transform: scale(1);
  }
  
  /* Rotaciones */
  .active.anim_rotation-left-right,
  .active.anim_rotation-right-left {
    transform: rotate(0);
  }