@import "root.css";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');



/* Animación SCROLL > desenfoque  */
.appear-blur{animation:appear-blur auto; animation-timeline:scroll();}
@keyframes appear-blur{
     0%{filter: blur(6px);}
     5%{filter: blur(0px);}
}


/* Animación SCROLL > Aparecer  */
.appear-hide{animation:hide auto; animation-timeline:scroll();}
@keyframes hide{
     0%{opacity: 0;}
     10%{opacity: 1;}
}

/* Animación SCROLL > Opacidad  */
.appear-alpha{animation:alpha auto; animation-timeline:scroll();}
@keyframes alpha{
     0%{opacity: 0.5;}
     10%{opacity: 1;}
}


/* Animación SCROLL > rotación signo + HOME  */
.more{animation:rotate-180 auto; animation-timeline:scroll();}
@keyframes rotate-180{
     0%{transform: rotate(0deg); opacity: 1;}
    100%{transform: rotate(180deg);}
}


/* Animación IN > Header HOME  */
.header-text-1 {animation-name: anime-texto; animation-duration: 1s;position: relative;}
@keyframes anime-texto { 0% {top:-50px; opacity: 0;} 100% {top:0; opacity: 1;}}

.header-text-2 {animation-name: anime-texto-2; animation-duration: 1s;position: relative;}
@keyframes anime-texto-2 { 0% {top:-50px; opacity: 0;} 20% {top:-50px; opacity: 0;} 100% {top:0; opacity: 1;}}

.header-text-3 {animation-name: anime-texto-3; animation-duration: 1s;position: relative;}
@keyframes anime-texto-3 { 0% {left:-50px; opacity: 0;} 30% {left:-50px; opacity: 0;} 100% {left:0; opacity: 1;}}

.header-text-4 {animation-name: anime-texto-4; animation-duration: 2s;position: relative;}
@keyframes anime-texto-4 { 0% {bottom:-30px; opacity: 0;} 40% {bottom:-30px; opacity: 0;} 100% {bottom:0; opacity: 1;}}

.header-text-5 {animation-name: anime-texto-5; animation-duration: 2s;position: relative;}
@keyframes anime-texto-5 { 0% {bottom:-30px; opacity: 0;} 45% {bottom:-30px; opacity: 0;} 100% {bottom:0; opacity: 1;}}

.header-text-6 {animation-name: anime-texto-6; animation-duration: 2s;position: relative;}
@keyframes anime-texto-6 { 0% {bottom:-30px; opacity: 0;} 50% {bottom:-30px; opacity: 0;} 100% {bottom:0; opacity: 1;}}

.header-text-7 {animation-name: anime-texto-7; animation-duration: 2s;position: relative;}
@keyframes anime-texto-7 { 0% {bottom:-30px; opacity: 0;} 55% {bottom:-30px; opacity: 0;} 100% {bottom:0; opacity: 1;}}

.header-text-8 {animation-name: anime-texto-8; animation-duration: 2s;position: relative;}
@keyframes anime-texto-8 { 0% {opacity: 0;} 65% {opacity: 0;} 100% {opacity: 1;}}

.header-img {animation-name: anime-texto-8; animation-duration: 2s;position: relative;}
@keyframes anime-texto-8 { 0% {opacity: 0;} 65% {opacity: 0;} 100% {opacity: 1;}}