/**
 * Arquivo: index.html
 * Data: 13/10/2023
 * Descrição: Lógica da Intro do filme Star Wars.
 * Author: Reprodução e Modificação -> Marcia Moreira 10/2023
 */
 @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

 body {
   margin: 0;
   background: #000;
   overflow: hidden;
   
 }

 body .logo {
  display: none;
 }

 .logo_animacao {
  position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 80%;
	opacity: 0;
	/* animation: logo 10s ease-out 9s; */
  animation: logo 05s ease-out 04s;
}

.logo_animacao img {
	width: inherit;
  border-radius: 50%;
  border: 2px solid #FFD700;

}

@keyframes logo {
  0% {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1.1);
  }
  30% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(100%, -50%) scale(0.1);
  }
}

 .intro {
   position: absolute;
   top: 40%;
   left: 20%;
   z-index: 1;    
   opacity: 0;
 }
 
 .intro_texto {
     font-family: "News Cycle", sans-serif;
     color: #00BFFF;
     font-weight: 400;
     letter-spacing: .1em; /*Medida de Separação entre letras*/
     
 }

 .historia {
     position: absolute;
     top: 90%;
 }
 
 .historia_texto {
     font-family: "News Cycle", sans-serif;
     font-weight: 700;
     color: #FFD700;
     text-align: justify;
     letter-spacing: .1em;
     line-height: 1.1em;
 }

 .centraliza {
  text-align: center;
  }
 
 .paragrafos {
     position: absolute;
     left: 15%;
     width: 70%;
     z-index: 1;
     /* Para deixar as letras deitadas */
     transform-origin: 50%;
     transform: perspective(350px) rotateX(40deg);
 }
 
 .botao {
     color: white;
     letter-spacing: .1em; /*Medida de Separação entre letras*/
     display: inline-block;
     margin: 10px;
     padding: 5px;
     border: 3px solid;
     border-radius: 5px;
     cursor: pointer;
 }

 .som {
  content: '\e872';
  animation: 0ms;
  }


 .intro_animacao {
     animation: intro 3s ease-out 0s;
 }
 
 .historia_animacao {
     animation: paragrafos 90s linear 4s;
 }
 
 @keyframes intro {
     0% {
       opacity: 0;
     }
     20% {
       opacity: 1;
     }
     90% {
       opacity: 1;
     }
     100% {
       opacity: 0;
     }
   }
   
 @keyframes paragrafos {
     0% {
       top: 75%;
       opacity: 1;
     }
     95% {
       opacity: 1;
     }
     100% {
       top: -200%;
       opacity: 0;
     }
   }
 
   /* Fundo com as estrelas */
 
   canvas {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
   }
  
   .rodape{
    color: white;

   }