@use 'general';

$animations: (
  grow: (
    keyframes: (
      from: (
        transform: scale(1)
      ),
      to: (
        transform: scale(1.1)
      )
    ),
    duration: .3s,
    fill-mode: both,
    display: inline-block
  ),
  /*
  rotate-right: (
    keyframes: (
      from: (
        transform: rotate(0)
      ),
      80%: (
        transform: rotate(90deg)
      ),
      88%: (
        transform: rotate(70deg)
      ),
      to: (
        transform: rotate(88deg)
      )
    ),
    duration: .7s,
    transform: rotate(0deg), 
    //transition: transform 0.7s ease,
    fill-mode: both,
    transform-origin: center center
  ),
  rotate-left: (
    keyframes: (
      from: (
        transform: rotate(0)
      ),
      80%: (
        transform: rotate(-90deg)
      ),
      88%: (
        transform: rotate(-70deg)
      ),
      to: (
        transform: rotate(-80deg)
      )
    ),
    duration: .7s,
    fill-mode: both,
    transform-origin: center center
  ),
  */
  slide-background: (
    keyframes: (
      from: (
        transform: translateX(0%)
      ),
      to: (
        transform: translateX(-100%)
      )
    ),
    duration: 20s,
    fill-mode: forwards,
    iteration-count: infinite,
    timing-function: linear
  ),
  bounce: (
    keyframes: (
      from: (
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform: translate3d(0, 0, 0)
      ),
      20%: (
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform: translate3d(0, 0, 0)
      ),
      40%: (
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060),
        transform: translate3d(0, -30px, 0)
      ),
      43%: (
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060),
        transform: translate3d(0, -30px, 0)
      ),
      53%: (
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform: translate3d(0, 0, 0)
      ),
      70%: (
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060),
        transform: translate3d(0, -15px, 0)
      ),
      80%: (
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform: translate3d(0, 0, 0)
      ),
      90%: (
        transform: translate3d(0, -4px, 0)
      ),
      to: (
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform: translate3d(0, 0, 0)
      )
    ),
    duration: 1s,
    fill-mode: both
  ),
  shake: (
    keyframes: (
      from: (
        transform: translate3d(0, 0, 0)
      ),
      to: (
        transform: translate3d(0, 0, 0)
      ),
      10%: (
        transform: translate3d(-10px, 0, 0)
      ),
      20%: (
        transform: translate3d(10px, 0, 0)
      ),
      30%: (
        transform: translate3d(-10px, 0, 0)
      ),
      40%: (
        transform: translate3d(10px, 0, 0)
      ),
      50%: (
        transform: translate3d(-10px, 0, 0)
      ),
      60%: (
        transform: translate3d(10px, 0, 0)
      ),
      70%: (
        transform: translate3d(-10px, 0, 0)
      ),
      80%: (
        transform: translate3d(10px, 0, 0)
      ),
      90%: (
        transform: translate3d(-10px, 0, 0)
      )
    ),
    duration: 1s,
    fill-mode: both
  ),
  swing: (
    keyframes: (
      20%: (
        transform: rotate3d(0, 0, 1, 15deg)
      ),
      40%: (
        transform: rotate3d(0, 0, 1, -10deg)
      ),
      60%: (
        transform: rotate3d(0, 0, 1, 5deg)
      ),
      80%: (
        transform: rotate3d(0, 0, 1, -5deg)
      ),
      to: (
        transform: rotate3d(0, 0, 1, 0deg)
      )
    ),
    duration: 1s,
    fill-mode: both,
    transform-origin: center center
  ),
  tada: (
    keyframes: (
      from: (
        transform: scale3d(1, 1, 1)
      ),
      10%: (
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      ),
      20%: (
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      ),
      30%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      ),
      40%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      ),
      50%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      ),
      60%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      ),
      70%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      ),
      80%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
      ),
      90%: (
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
      ),
      to: (
        transform: scale3d(1, 1, 1)
      )
    ),
    duration: 1s,
    fill-mode: both
  ),
  slide-in: (
    keyframes: (
      from: (
        transform: translateY(500px), // Começa abaixo
        opacity: 0 // Começa invisível
      ),
      to: (
        transform: translateY(0), // Volta à posição original
        opacity: 1 // Fica visível
      )
    ),
    duration: 1s,
    fill-mode: forwards
  )
);

@each $name, $animation in $animations {
  @keyframes #{$name} {
    @each $keyframe, $properties in map-get($animation, keyframes) {
      #{$keyframe} {
        @each $property, $value in $properties {
          #{$property}: $value;
        }
      }
    }
  }

  .#{general.$prefix}anim-#{$name} {
    animation-name: #{$name};
    animation-duration: map-get($animation, duration);
    animation-fill-mode: map-get($animation, fill-mode);

    @if map-get($animation, iteration-count) {
      animation-iteration-count: map-get($animation, iteration-count);
    }
    @if map-get($animation, timing-function) {
      animation-timing-function: map-get($animation, timing-function);
    }
    @if map-get($animation, transform-origin) {
        transform-origin: map-get($animation, transform-origin);
    }
    @if map-get($animation, display) {
        display: map-get($animation, display);
    }
  }

  .#{general.$prefix}anim-#{$name}-hover {
    &:hover {
        animation-name: #{$name};
        animation-duration: map-get($animation, duration);
        animation-fill-mode: map-get($animation, fill-mode);

        @if map-get($animation, iteration-count) {
          animation-iteration-count: map-get($animation, iteration-count);
        }
        @if map-get($animation, timing-function) {
          animation-timing-function: map-get($animation, timing-function);
        }
        @if map-get($animation, transform-origin) {
            transform-origin: map-get($animation, transform-origin);
        }
        @if map-get($animation, display) {
            display: map-get($animation, display);
        }
    }
  }
}

.bz-anim-rotate-right {
  transform-origin: inherit; /* Usa o ponto de origem definido inline */
  transform: rotate(0deg); /* Posição inicial */
  transition: transform 0.7s ease; /* Suaviza as mudanças */
}

.bz-anim-rotate-left {
  transform-origin: inherit; /* Usa o ponto de origem definido inline */
  transform: rotate(0deg); /* Posição inicial */
  transition: transform 0.7s ease; /* Suaviza as mudanças */
}

.bz-anim-inside-hover {
  @each $name, $animation in $animations {
    &:hover {
      .#{general.$prefix}anim-rotate-right {
        transform: rotate(90deg); /* Gira para a direita */
      }
      .#{general.$prefix}anim-rotate-left {
        transform: rotate(-90deg); /* Gira para a direita */
      }
    }

    &:not(:hover) {
    .#{general.$prefix}anim-rotate-left,
      .#{general.$prefix}anim-rotate-right {
        transform: rotate(0deg); /* Volta à posição inicial */
      }
    }
  }
}
@keyframes slide-background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100000% 0;
  }
}


.bz-anim-slide-background-hover {
  width: 100%;
  background-size: auto; 
  //background-size: 100% auto; 
  background-position: 0 0;
  background-repeat: repeat;
  overflow: hidden;
  &:hover {
    animation: slide-background 3000s linear infinite; /* Loop infinito */
    animation-play-state: running;
  }

  &:not(:hover) {
    animation: slide-background 3000s linear infinite;
    animation-play-state: paused; /* Mantém o estado atual */
  }
}

.bz-anim-slide-in-section {
  overflow: hidden; /* Para evitar overflow de animações */
}

$animation_duration: 0.5s;
.bz-anim-slide-in-section li {
  opacity: 0; /* Inicialmente invisível */
  visibility: hidden; /* Escondido inicialmente */
  transform: translateY(2000px); /* Começa abaixo */
  transition: visibility 0s linear $animation-duration, opacity $animation-duration ease; /* Transições suaves */
}
.bz-anim-slide-in-section li:nth-child(n) {
  visibility: visible; /* Torna visível durante a animação */
}

.bz-anim-slide-in-section li.animate {
  visibility: visible; /* Torna visível durante a animação */
  opacity: 1; /* Fica visível após a animação */
  animation: slide-in $animation-duration forwards; /* Aplica a animação */
  animation-delay: calc(0.5s * var(--i)); /* Delay baseado no índice */
}

.bz-anim-slide-in-section li {
  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
      --i: #{$i - 1}; // Define a variável --i com base no índice
    }
  }
}