/* 

    Nome: Pagina Sandy Cavalcanti - CSS para Animações
    Autor: Sandy Cavalcanti
    Data criação: 30/08/2025
    Descrição: CSS externo para a animação do nome exibido na seção HOME

 */
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@font-face {
    font-family: 'MeganorFont';
    src: url(../font/MeqanorRegular-woOKZ.otf) format('opentype');
}
@keyframes borderGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}
@keyframes revolveScale {
	60% {
		transform: translate(20px, 20px) rotate(30deg) scale(.3);
	}

	100% {
		transform: translate(0) rotate(0) scale(1);
		opacity: 1;
	}
}



/* Animação do Nome */

.animate {
	font-size: 50px;
	margin: 100px 0 0;   
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
/* Estilo do Texto */
.animate span {
	display: inline-block;
    font-family: 'MeganorFont', cursive;
    font-size: 5rem;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #b6474f, #900913);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: .1s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .3s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}
.nome span {
	opacity: 0;
	transform: translate(-150px, -50px) rotate(-180deg) scale(3);
	animation: revolveScale .4s forwards;
}