@keyframes showSplitText {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes maskLeft {
	0% {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        transform: scale(1) translateX(0);
	}
	100% {
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
        transform: scale(1.2) translateX(0);
	}
}

@keyframes maskRight {
	0% {
		clip-path: polygon(0% 0, 0% 0, 0% 100%, 0% 100%);
        transform: scale(1) translateX(0);
	}
	100% {
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
        transform: scale(1.2) translateX(0);
	}
}

@-moz-keyframes zoomInInitial {
	0% {
		opacity: 0;
		-moz-transform: scale(0)
	}

	100% {
		opacity: 0.3;
		-moz-transform: scale(1)
	}
}

@-ms-keyframes zoomInInitial {
	0% {
		opacity: 0;
		-ms-transform: scale(0)
	}

	100% {
		opacity: 0.3;
		-ms-transform: scale(1)
	}
}

@-o-keyframes zoomInInitial {
	0% {
		opacity: 0;
		-o-transform: scale(0)
	}

	100% {
		opacity: 0.3;
		-o-transform: scale(1)
	}
}

@keyframes zoomInInitial {
	0% {
		opacity: 0;
		transform: scale(0)
	}

	100% {
		opacity: 0.3;
		transform: scale(1)
	}
}

@keyframes blurAnimation {
	0% {
		filter: blur(18px); /* Inicia con un desenfoque significativo */
 		 transform: scale(1.4); 
		 opacity: 0;
	}

	100% {
		filter: blur(0px); /* Inicia con un desenfoque significativo */
 		 transform: scale(1); 
		  opacity: 1;
	}
}


.split-text {
	visibility: hidden;
  }
  

.animate-text-split {
	--delay: 0s;
	--speed: 600ms;
	--easing: easing-in-out;
	transform: translateY(100%);
	position: relative;
	opacity: 0; 
    display: block;
	animation: showSplitText var(--speed) var(--delay) var(--easing) forwards;
}
.split-text__content {
    transform: translateY(100%);
}

.mask-left, .mask-right{
    overflow: hidden;
}
.animate-mask-left {
    --delay: 500s;
	--speed: 2000ms;
	--easing: easing-in-out;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    animation: maskLeft var(--speed) var(--delay) var(--easing) forwards;
}

.animate-mask-right {
    --delay: 500s;
	--speed: 2000ms;
	--easing: easing-in-out;
    clip-path: polygon(0% 0, 0% 0%, 0% 100%, 0% 100%);
    animation: maskRight var(--speed) var(--delay) var(--easing) forwards;
}


.animate.zoomIn{
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}


.animate.zoomInLeftLarge {
	-webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  -moz-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  -ms-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  -o-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 
	-webkit-animation-name: zoomInLeftLarge;
	-moz-animation-name: zoomInLeftLarge;
	-ms-animation-name: zoomInLeftLarge;
	-o-animation-name: zoomInLeftLarge;
	animation-name: zoomInLeftLarge
}

.zoomInInitial {
	opacity: 0;
	transform: scale(0);
	animation: zoomInInitial 2s 0.5s cubic-bezier(0, 0, 0.2, 1) forwards;

}

.animate.zoomInRight {
	-webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -moz-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -ms-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -o-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
 
	-webkit-animation-name: zoomInRight;
	-moz-animation-name: zoomInRight;
	-ms-animation-name: zoomInRight;
	-o-animation-name: zoomInRight;
	animation-name: zoomInRight
}

.animate.fadeInRightLarge {
	-webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -moz-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -ms-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  -o-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);;
 
	-webkit-animation-name: fadeInRightLarge;
	-moz-animation-name: fadeInRightLarge;
	-ms-animation-name: fadeInRightLarge;
	-o-animation-name: fadeInRightLarge;
	animation-name: fadeInRightLarge
}



@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	  transform: translateY(0);
	}
	40% {
	  transform: translateY(-10px);
	}
	60% {
	  transform: translateY(-5px);
	}
  }
  
  .video-portada .moreInfo > a::after, .single-product .section.has-navi .section-nav.next i {
	display: inline-block;
	animation: bounce 2s infinite;
  }


  .back-circle::before{
	transition: transform 0.5s ease-in-out;
  }

  .back-circle:hover::before{
	transform: scale(1.4); /* Aumenta el tamaño del círculo en un 20% */
  }

  .bgBlur.bounceIn{
	filter: blur(18px); /* Inicia con un desenfoque significativo */
  animation: blurAnimation 1s 0.5s cubic-bezier(0, 0, 0.2, 1) forwards !important; /* Transición suave del desenfoque */
  transform: scale(1.4); 
  opacity: 0;

  }