@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #1a1a1a;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

svg {
  width: 100%;
}

#xbox-x1 {
  -webkit-animation: xbox-text 7s ease 0s forwards;
          animation: xbox-text 7s ease 0s forwards;
  /* forwars não volta pro modo principal, inicial */
}

#xbox-x2 {
  -webkit-animation: xbox-text 7s ease 0s forwards;
          animation: xbox-text 7s ease 0s forwards;
  /* forwars não volta pro modo principal, inicial */
}

#xbox-B {
  -webkit-animation: xbox-text 7s ease 0s forwards;
          animation: xbox-text 7s ease 0s forwards;
  /* forwars não volta pro modo principal, inicial */
}

#xbox-O {
  -webkit-animation: xbox-text 7s ease 0s forwards;
          animation: xbox-text 7s ease 0s forwards;
  /* forwars não volta pro modo principal, inicial */
}

#xbox-logo {
  opacity: 0;
  -webkit-filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
          filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  -webkit-animation: xbox-logo 7s ease 7s forwards, xbox-shadow 12s ease 0s forwards;
          animation: xbox-logo 7s ease 7s forwards, xbox-shadow 12s ease 0s forwards;
}

@-webkit-keyframes xbox-text {
  0% {
    /* estado inicial */
    fill-opacity: 0;
    stroke-dasharray: 1 1000;
    /* tracejar a borda, o 1º número é o tamanho do tracejado e o 2º a distância entre eles */
    /* essa é a grande sacada, o tamanho aumenta pra 1000 e a distância pra 1, ficando contínuo */
    stroke-dashoffset: 0;
    /* número onde deslocamos o dasharray */
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, -110px, 0);
            transform: translate3d(0, -110px, 0);
  }
  30% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  60%, 90% {
    /* de 60% a 90% */
    fill-opacity: 1;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes xbox-text {
  0% {
    /* estado inicial */
    fill-opacity: 0;
    stroke-dasharray: 1 1000;
    /* tracejar a borda, o 1º número é o tamanho do tracejado e o 2º a distância entre eles */
    /* essa é a grande sacada, o tamanho aumenta pra 1000 e a distância pra 1, ficando contínuo */
    stroke-dashoffset: 0;
    /* número onde deslocamos o dasharray */
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, -110px, 0);
            transform: translate3d(0, -110px, 0);
  }
  30% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  60%, 90% {
    /* de 60% a 90% */
    fill-opacity: 1;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes xbox-logo {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1 1000;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
  70% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
  100% {
    fill-opacity: 1;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
}

@keyframes xbox-logo {
  0% {
    fill-opacity: 0;
    stroke-dasharray: 1 1000;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
  70% {
    fill-opacity: 0;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 1;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
  100% {
    fill-opacity: 1;
    stroke-dasharray: 150 0;
    stroke-dashoffset: 0;
    stroke-width: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 70px, 0);
            transform: translate3d(0, 70px, 0);
  }
}

@-webkit-keyframes xbox-shadow {
  0%, 20% {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
            filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  }
  40%, 50% {
    -webkit-filter: drop-shadow(0px 0px 50px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 50px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 100px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 100px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
  }
}

@keyframes xbox-shadow {
  0%, 20% {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
            filter: drop-shadow(0px 0px 0px rgba(247, 247, 247, 0)) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  }
  40%, 50% {
    -webkit-filter: drop-shadow(0px 0px 50px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 50px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
  }
  100% {
    -webkit-filter: drop-shadow(0px 0px 100px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 100px rgba(247, 247, 247, 0.5)) drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.9));
  }
}
/*# sourceMappingURL=style.css.map */