@mixin a-shake{
    animation: a-shake .350s infinite;

}

@mixin b-shake{
    animation: a-shake .700s infinite;

}

.a-shake{ @include a-shake; }
@keyframes a-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
}



@mixin rotation{
  animation: rotation 0.5s infinite;
}


.rotation{ @include rotation; }

@keyframes rotation {

  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }

}

@keyframes rotate-self {
  0% {
    // Mantenemos el centrado y empezamos en 0 grados
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50%{
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    // Mantenemos el centrado y terminamos en 360 grados
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@mixin rotate-self {
  animation: rotate-self .2s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
  // Asegura que el eje de rotación sea el centro del propio elemento
  transform-origin: center; 
}



@mixin loading{
  
    animation: loading 2.000s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}


@keyframes loading {
  0% {
    transform: rotate(0) scale(1);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  100% {

    transform: rotate(1800deg) scale(1.3);
  }
}

.loading{ @include loading }




@mixin pulse-center {
    animation: pulse 2.500s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}


@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.07, 1.07, 1.07);
    transform: scale3d(1.07, 1.07, 1.07);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


@mixin flipOutX {
    animation: flipOutX 2.900s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}