@import url("https://fonts.googleapis.com/css?family=News+Cycle&display=swap");
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url("https://inertia.uxbyalia.com/posters/starwars/dist/rdx_starfield.jpg");
  color: goldenrod;
}

h1 {
  font-size: 0rem;
  position: absolute;
  animation-name: logo;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  z-index: 9999;
}

h1::before {
  display: block;
  height: 200px;
  content: url("data:image/svg+xml;utf8,<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.03 108.37"><defs><style>.cls-1{fill:#ffe631;}</style></defs><path class="cls-1" d="M0,0h19.72v60.6H0V0Z"/><path class="cls-1" d="M24.78,60.6V0h19.72l18.05,22.66V0h19.72v60.6h-19.72l-18.05-22.66v22.66s-19.72,0-19.72,0Z"/><path class="cls-1" d="M85.65,60.6V0h51.95v18.05h-32.23v6.97h20.81v10.58h-20.81v6.97h37.35v18.05h-57.07v-.02Z"/><path class="cls-1" d="M143.58,60.6V0h39.45c4.87.45,8.87,1.73,12,3.86s5.43,4.98,6.88,8.56c1.12,5.37,1.18,9.51.17,12.42s-2.77,5.34-5.29,7.3c-2.52,1.96-6.13,3.5-10.83,4.62l4.53,5.79h18.13v18.05h-23.92l-19.22-20.02v20.02h-21.91,0ZM165.49,15.11v11.16h15.27c.81,0,1.69-.3,2.65-.9.95-.6,1.45-2.12,1.51-4.55-.14-2.32-.71-3.85-1.7-4.6-.99-.74-1.82-1.11-2.5-1.11h-15.23Z"/><path class="cls-1" d="M264.71,0v18.05h-19.22v42.55h-19.72V18.05h-19.22V0h58.16Z"/><path class="cls-1" d="M266.83,0h19.72v60.6h-19.72V0Z"/><path class="cls-1" d="M285.74,60.6L305.67,0h30.09l20.27,60.6h-22.91l-3.82-10.91h-18l-3.82,10.91h-21.74ZM320.78,13.43l-8.69,24h16.7l-8.02-24h0Z"/><path class="cls-1" d="M5.86,108.36v-19.8H0v-8.4h30.04v8.4h-15v3.24h9.69v4.92h-9.69v3.24h17.38v8.4s-26.56,0-26.56,0Z"/><path class="cls-1" d="M32.82,108.36v-28.2h9.18l8.4,10.55v-10.55h9.18v28.2h-9.18l-8.4-10.55v10.55h-9.18Z"/><path class="cls-1" d="M86.85,80.16v8.4h-8.95v19.8h-9.18v-19.8h-8.95v-8.4h27.08Z"/><path class="cls-1" d="M88.23,108.36v-28.2h24.18v8.4h-15v3.24h9.69v4.92h-9.69v3.24h17.38v8.4h-26.56Z"/><path class="cls-1" d="M115.19,108.36v-28.2h18.36c2.27.21,4.13.81,5.59,1.8,1.46.99,2.53,2.32,3.2,3.98.52,2.5.55,4.43.08,5.78s-1.29,2.49-2.46,3.4c-1.17.91-2.85,1.63-5.04,2.15l2.11,2.7h8.44v8.4h-11.13l-8.95-9.32v9.32h-10.2ZM125.39,87.19v5.2h7.11c.38,0,.79-.14,1.23-.42s.68-.99.7-2.12c-.07-1.08-.33-1.79-.79-2.14-.46-.34-.85-.52-1.16-.52h-7.09Z"/><path class="cls-1" d="M171.57,80.16v8.4h-8.95v19.8h-9.18v-19.8h-8.95v-8.4h27.08Z"/><path class="cls-1" d="M170.21,108.36l9.28-28.2h14l9.43,28.2h-10.66l-1.78-5.08h-8.38l-1.78,5.08h-10.12,0ZM186.52,86.41l-4.04,11.17h7.77l-3.73-11.17h0Z"/><path class="cls-1" d="M202.55,80.16h9.18v28.2h-9.18v-28.2h0Z"/><path class="cls-1" d="M214.08,108.36v-28.2h9.18l8.4,10.55v-10.55h9.18v28.2h-9.18l-8.4-10.55v10.55h-9.18Z"/><path class="cls-1" d="M242.02,108.36v-28.2h9.18l6.17,11.72,6.13-11.72h9.18v28.2h-9.18v-11.72l-5.9,11.72h-.51l-5.9-11.72v11.72h-9.18,0Z"/><path class="cls-1" d="M275.03,108.36v-28.2h24.18v8.4h-15v3.24h9.69v4.92h-9.69v3.24h17.38v8.4h-26.56Z"/><path class="cls-1" d="M302,108.36v-28.2h9.18l8.4,10.55v-10.55h9.18v28.2h-9.18l-8.4-10.55v10.55h-9.18Z"/><path class="cls-1" d="M356.03,80.16v8.4h-8.95v19.8h-9.18v-19.8h-8.95v-8.4h27.08Z"/></svg>");
}

@keyframes logo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.sw {
  width: 360px;
  max-height: 80vh;
  transform: perspective(150px) rotatex(35deg);
  font-family: "News Cycle", sans-serif;
  position: relative;
  overflow: hidden;
}

.text {
  text-align: justify;
  transform: translatey(110%);
  animation-name: text;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-delay: 8s;
}

.text h2 {
  text-align: center;
  text-transform: uppercase;
}

@keyframes text {
  0% {
    transform: translatey(110%);
  }
  100% {
    transform: translatey(-110%);
  }
}
.sw::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
  height: 100%;
  width: 100%;
  z-index: 9999;
}