style.css

@font-face {
  font-family: "BenguiatITCW01-BoldCn";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/BenguiatProITC-BoldCond.eot") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/BenguiatProITC-BoldCond.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/BenguiatProITC-BoldCond.ttf") format("truetype");
  font-style: normal;
  font-weight: bold;
}

body {
  background: #000;
  text-align: center;
  line-height: 1;
  margin: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  overflow: hidden;
  box-sizing: border-box;
}
body *, body *:before, body *:after {
  box-sizing: inherit;
}

.intro {
  padding: 0 20px;
  width: 100%;
  max-width: 440px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 600ms ease, visibility 0ms linear 800ms;
}
.intro--hide {
  opacity: 0;
  visibility: hidden;
}
.intro-title {
  font-family: "BenguiatITCW01-BoldCn";
  color: #C11B1F;
  font-size: 34px;
  margin-bottom: 15px;
}
.intro-text {
  text-align: center;
  color: #C8C6C7;
  font-size: 16px;
  line-height: 22px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  display: none;
}
.intro-text--show {
  display: block;
}
.intro-text-button {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  padding: 0;
  margin: 20px 5px 0;
  width: 160px;
  height: 42px;
  line-height: 42px;
  border: none;
  text-decoration: none;
  font-size: 16px;
  border-radius: 4px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  background: #C11B1F;
  color: #FFF;
}
.intro-text-button:hover {
  background: #941518;
}
.intro-text-play {
  display: block;
  cursor: pointer;
  width: 120px;
  height: 120px;
  margin: 30px auto 0;
  border: 4px solid #FFF;
  font-size: 40px;
  text-indent: 10px;
  color: #FFF;
  background: rgba(85, 85, 85, 0.2);
  opacity: 0.3;
  border-radius: 100%;
  transition: color 100ms ease, opacity 100ms ease;
  transform: translateZ(0);
}
.intro-text-play:hover, .intro-text-play:focus, .intro-text-play:active {
  opacity: 1;
  color: #C11B1F;
  outline: 0;
}

.viewport {
  height: 100vh;
  width: 100vw;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: none;
}
.viewport--show {
  display: block;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-45%);
  width: 100%;
  font-size: 0;
  font-family: "BenguiatITCW01-BoldCn";
  color: #000;
  letter-spacing: -1.3vmin;
  font-weight: bold;
  display: none;
  -webkit-text-stroke-color: #C11B1F;
  -webkit-text-stroke-width: 0.4vmin;
  text-shadow: 0 0 2vmin rgba(193, 27, 31, 0.5);
}
@media screen and (max-aspect-ratio: 16/9) {
  .title {
    -webkit-text-stroke-width: 0.225vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .title {
    text-shadow: 1.125vw;
  }
}
.no-textstroke .title {
  text-shadow: 3px 0 2vmin #C11B1F, -3px 0 2vmin #C11B1F, 0 -3px 2vmin #C11B1F, 0 3px 2vmin #C11B1F;
}
.title--show {
  display: block;
}
.title-word {
  position: relative;
  display: inline-block;
}
.title-word--second {
  transform: translateY(-38%);
}
.title-word-letter {
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-size: 28vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title-word-letter {
    font-size: 15.75vw;
  }
}
.title-word-letter-large {
  display: inline-block;
  transform: translateY(-2.8%);
  font-size: 34vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title-word-letter-large {
    font-size: 19.125vw;
  }
}

.titlebar {
  position: absolute;
  border-style: solid;
  border-color: #C11B1F;
  height: 1vmin;
  border-width: 0.4vmin;
  border-radius: 0.1vmin;
  box-shadow: 0 0 1.2vmin rgba(193, 27, 31, 0.8), 0 0 0.5vmin rgba(193, 27, 31, 0.8) inset;
}
@media screen and (max-aspect-ratio: 16/9) {
  .titlebar {
    height: 0.5625vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .titlebar {
    border-width: 0.225vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .titlebar {
    border-radius: 0.05625vw;
  }
}
.titlebar--top {
  bottom: 100%;
  width: 100%;
}
.titlebar--left, .titlebar--right {
  top: 90%;
}
.titlebar--left {
  left: 0;
  right: -12%;
}
.titlebar--right {
  left: -15%;
  right: 0;
}

.credits {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 6vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits {
    font-size: 3.375vw;
  }
}
@-webkit-keyframes credits-wiggle {
  0% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
  }
  20% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
  }
  40% {
    transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
  }
  60% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
  }
  80% {
    transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0.015vmin);
  }
}
@keyframes credits-wiggle {
  0% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
  }
  20% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
  }
  40% {
    transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
  }
  60% {
    transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
  }
  80% {
    transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0.015vmin);
  }
}
@-webkit-keyframes credits-flash {
  0%, 30% {
    opacity: 1;
  }
  40% {
    opacity: 0.97;
  }
  42%, 85% {
    opacity: 1;
  }
  92% {
    opacity: 0.94;
  }
  94%, 100% {
    opacity: 1;
  }
}
@keyframes credits-flash {
  0%, 30% {
    opacity: 1;
  }
  40% {
    opacity: 0.97;
  }
  42%, 85% {
    opacity: 1;
  }
  92% {
    opacity: 0.94;
  }
  94%, 100% {
    opacity: 1;
  }
}
.credits-group, .credits-final {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  opacity: 0;
  transition: opacity 300ms ease;
}
.credits-group--show, .credits-final--show {
  opacity: 1;
  transition-delay: 300ms;
  -webkit-animation: credits-wiggle 200ms infinite 300ms, credits-flash 2200ms infinite 300ms;
          animation: credits-wiggle 200ms infinite 300ms, credits-flash 2200ms infinite 300ms;
}
.credits-group-credit, .credits-group-sub {
  position: relative;
  margin-bottom: 0vmin;
  color: #C8C6C7;
  background: linear-gradient(#D2D0D1, #C8C6C7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-group-credit, .credits-group-sub {
    margin-bottom: 0vw;
  }
}
.no-textstroke .credits-group-credit, .no-textstroke .credits-group-sub {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentcolor;
}
.credits-group-credit:after, .credits-group-sub:after {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  width: 100%;
  top: 0;
  left: 0;
  background: none;
  text-shadow: 0.3vmin 0.3vmin 0.15vmin #000;
}
.credits-group-credit {
  font-weight: 800;
  text-transform: uppercase;
}
.credits-group-credit > span {
  font-size: 4.8vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-group-credit > span {
    font-size: 2.7vw;
  }
}
.credits-group-sub {
  font-size: 4.6vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-group-sub {
    font-size: 2.5875vw;
  }
}
.credits-final {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.credits-final-link {
  display: inline-block;
  width: 12vmin;
  height: 12vmin;
  margin: 5vmin;
  background-size: 100% 100%;
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-final-link {
    width: 6.75vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-final-link {
    height: 6.75vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .credits-final-link {
    margin: 2.8125vw;
  }
}
.credits-final-link:hover {
  opacity: 0.8;
}
.credits-final-link--website {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/website.svg");
}
.credits-final-link--github {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/github.svg");
}
.credits-final-link--twitter {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/twitter.svg");
}
.credits-final-link--codepen {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/codepen.svg");
}

.grain {
  position: fixed;
  top: -50vh;
  left: -50vw;
  height: 200vh;
  width: 200vw;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/grain.png");
  -webkit-animation: grain-wiggle 5s steps(10) infinite;
          animation: grain-wiggle 5s steps(10) infinite;
  pointer-events: none;
}
@-webkit-keyframes grain-wiggle {
  0% {
    transform: translateX(8%) translateY(-5%);
  }
  10% {
    transform: translateX(0%) translateY(0%);
  }
  20% {
    transform: translateX(10%) translateY(-15%);
  }
  30% {
    transform: translateX(-10%) translateY(0%);
  }
  40% {
    transform: translateX(25%) translateY(15%);
  }
  50% {
    transform: translateX(10%) translateY(-10%);
  }
  60% {
    transform: translateX(-5%) translateY(5%);
  }
  70% {
    transform: translateX(15%) translateY(0%);
  }
  80% {
    transform: translateX(-20%) translateY(-10%);
  }
  90% {
    transform: translateX(20%) translateY(15%);
  }
  100% {
    transform: translateX(4%) translateY(7%);
  }
}
@keyframes grain-wiggle {
  0% {
    transform: translateX(8%) translateY(-5%);
  }
  10% {
    transform: translateX(0%) translateY(0%);
  }
  20% {
    transform: translateX(10%) translateY(-15%);
  }
  30% {
    transform: translateX(-10%) translateY(0%);
  }
  40% {
    transform: translateX(25%) translateY(15%);
  }
  50% {
    transform: translateX(10%) translateY(-10%);
  }
  60% {
    transform: translateX(-5%) translateY(5%);
  }
  70% {
    transform: translateX(15%) translateY(0%);
  }
  80% {
    transform: translateX(-20%) translateY(-10%);
  }
  90% {
    transform: translateX(20%) translateY(15%);
  }
  100% {
    transform: translateX(4%) translateY(7%);
  }
}

.letterbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  height: 100vh;
  width: 177.7777777778vh;
  pointer-events: none;
  display: none;
}
.letterbox--show {
  display: block;
}
@media screen and (max-aspect-ratio: 16/9) {
  .letterbox {
    height: 56.25vw;
    width: 100vw;
  }
}
.letterbox-cover {
  position: absolute;
  width: 5000px;
  height: 5000px;
  background: #000;
}
.letterbox-cover--top, .letterbox-cover--bottom {
  left: 50%;
  transform: translateX(-50%);
}
.letterbox-cover--left, .letterbox-cover--right {
  top: 50%;
  transform: translateY(-50%);
}
.letterbox-cover--top {
  bottom: 100%;
}
.letterbox-cover--left {
  right: 100%;
}
.letterbox-cover--right {
  left: 100%;
}
.letterbox-cover--bottom {
  top: 100%;
}

.title--scene .title-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes scene1 {
  0% {
    transform: translateX(-43.85%) translateY(-40%) scale(2.2);
  }
  100% {
    transform: translateX(-43.85%) translateY(-40%) scale(1);
  }
}
@keyframes scene1 {
  0% {
    transform: translateX(-43.85%) translateY(-40%) scale(2.2);
  }
  100% {
    transform: translateX(-43.85%) translateY(-40%) scale(1);
  }
}
.title--scene1 .title-word-letter[data-letter=A] {
  font-size: 1680vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene1 7000ms ease-out forwards;
          animation: scene1 7000ms ease-out forwards;
  transform-origin: 43.85% 40%;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene1 .title-word-letter[data-letter=A] {
    font-size: 945vw;
  }
}
.textstroke .title--scene1 .title-word-letter[data-letter=A] {
  text-shadow: 0 0 120vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 24vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene1 .title-word-letter[data-letter=A] {
    text-shadow: 67.5vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene1 .title-word-letter[data-letter=A] {
    -webkit-text-stroke-width: 13.5vw;
  }
}
@-webkit-keyframes scene2-word {
  0% {
    transform: translateX(-68%) translateY(-41%);
  }
  100% {
    transform: translateX(-68%) translateY(-38%);
  }
}
@keyframes scene2-word {
  0% {
    transform: translateX(-68%) translateY(-41%);
  }
  100% {
    transform: translateX(-68%) translateY(-38%);
  }
}
@-webkit-keyframes scene2-letter {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.92);
  }
}
@keyframes scene2-letter {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.92);
  }
}
.title--scene2 .title-word {
  -webkit-animation: scene2-word 3000ms linear forwards;
          animation: scene2-word 3000ms linear forwards;
}
.title--scene2 .title-word-letter[data-letter=N] {
  font-size: 560vmin;
  -webkit-animation: scene2-letter 3000ms linear forwards;
          animation: scene2-letter 3000ms linear forwards;
  transform-origin: 68.4% 40%;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene2 .title-word-letter[data-letter=N] {
    font-size: 315vw;
  }
}
.textstroke .title--scene2 .title-word-letter[data-letter=N] {
  text-shadow: 0 0 40vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 8vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene2 .title-word-letter[data-letter=N] {
    text-shadow: 22.5vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene2 .title-word-letter[data-letter=N] {
    -webkit-text-stroke-width: 4.5vw;
  }
}
@-webkit-keyframes scene3-r {
  0% {
    transform: translateX(-78%) translateY(-30%) scale(0.95);
  }
  100% {
    transform: translateX(-81%) translateY(-30%) scale(0.84);
  }
}
@keyframes scene3-r {
  0% {
    transform: translateX(-78%) translateY(-30%) scale(0.95);
  }
  100% {
    transform: translateX(-81%) translateY(-30%) scale(0.84);
  }
}
@-webkit-keyframes scene3-i {
  0% {
    transform: translateX(15%) translateY(-50%);
  }
  100% {
    transform: translateX(35%) translateY(-50%);
  }
}
@keyframes scene3-i {
  0% {
    transform: translateX(15%) translateY(-50%);
  }
  100% {
    transform: translateX(35%) translateY(-50%);
  }
}
.title--scene3 .title-word-letter[data-letter=R] {
  font-size: 644vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene3-r 3000ms linear forwards;
          animation: scene3-r 3000ms linear forwards;
  transform-origin: 75% 27%;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene3 .title-word-letter[data-letter=R] {
    font-size: 362.25vw;
  }
}
.textstroke .title--scene3 .title-word-letter[data-letter=R] {
  text-shadow: 0 0 46vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 9.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene3 .title-word-letter[data-letter=R] {
    text-shadow: 25.875vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene3 .title-word-letter[data-letter=R] {
    -webkit-text-stroke-width: 5.175vw;
  }
}
.title--scene3 .title-word-letter[data-letter=I] {
  font-size: 644vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene3-i 3000ms linear forwards;
          animation: scene3-i 3000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene3 .title-word-letter[data-letter=I] {
    font-size: 362.25vw;
  }
}
.textstroke .title--scene3 .title-word-letter[data-letter=I] {
  text-shadow: 0 0 46vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 9.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene3 .title-word-letter[data-letter=I] {
    text-shadow: 25.875vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene3 .title-word-letter[data-letter=I] {
    -webkit-text-stroke-width: 5.175vw;
  }
}
@-webkit-keyframes scene4-word {
  0% {
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@keyframes scene4-word {
  0% {
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@-webkit-keyframes scene4-s {
  0% {
    transform: translateX(-53%) translateY(-11%);
  }
  100% {
    transform: translateX(-65%) translateY(-11%);
  }
}
@keyframes scene4-s {
  0% {
    transform: translateX(-53%) translateY(-11%);
  }
  100% {
    transform: translateX(-65%) translateY(-11%);
  }
}
@-webkit-keyframes scene4-g {
  0% {
    transform: translateX(-42%) translateY(-90%);
  }
  100% {
    transform: translateX(-34%) translateY(-90%);
  }
}
@keyframes scene4-g {
  0% {
    transform: translateX(-42%) translateY(-90%);
  }
  100% {
    transform: translateX(-34%) translateY(-90%);
  }
}
.title--scene4 .title-word {
  -webkit-animation: scene4-word 3000ms linear forwards;
          animation: scene4-word 3000ms linear forwards;
}
.title--scene4 .title-word-letter[data-letter=S] {
  font-size: 504vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene4-s 3000ms linear forwards;
          animation: scene4-s 3000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene4 .title-word-letter[data-letter=S] {
    font-size: 283.5vw;
  }
}
.textstroke .title--scene4 .title-word-letter[data-letter=S] {
  text-shadow: 0 0 36vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 7.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene4 .title-word-letter[data-letter=S] {
    text-shadow: 20.25vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene4 .title-word-letter[data-letter=S] {
    -webkit-text-stroke-width: 4.05vw;
  }
}
.title--scene4 .title-word-letter[data-letter=G] {
  font-size: 504vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene4-g 3000ms linear forwards;
          animation: scene4-g 3000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene4 .title-word-letter[data-letter=G] {
    font-size: 283.5vw;
  }
}
.textstroke .title--scene4 .title-word-letter[data-letter=G] {
  text-shadow: 0 0 36vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 7.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene4 .title-word-letter[data-letter=G] {
    text-shadow: 20.25vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene4 .title-word-letter[data-letter=G] {
    -webkit-text-stroke-width: 4.05vw;
  }
}
@-webkit-keyframes scene5-r {
  0% {
    transform: translateX(-118%) translateY(-30%);
  }
  100% {
    transform: translateX(-112%) translateY(-34%);
  }
}
@keyframes scene5-r {
  0% {
    transform: translateX(-118%) translateY(-30%);
  }
  100% {
    transform: translateX(-112%) translateY(-34%);
  }
}
@-webkit-keyframes scene5-s {
  0% {
    transform: translateX(-19%) translateY(-28.5%);
  }
  100% {
    transform: translateX(-22%) translateY(-32%);
  }
}
@keyframes scene5-s {
  0% {
    transform: translateX(-19%) translateY(-28.5%);
  }
  100% {
    transform: translateX(-22%) translateY(-32%);
  }
}
.title--scene5 .title-word-letter[data-letter=R] {
  font-size: 392vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene5-r 3000ms linear forwards;
          animation: scene5-r 3000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene5 .title-word-letter[data-letter=R] {
    font-size: 220.5vw;
  }
}
.textstroke .title--scene5 .title-word-letter[data-letter=R] {
  text-shadow: 0 0 28vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 5.6vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene5 .title-word-letter[data-letter=R] {
    text-shadow: 15.75vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene5 .title-word-letter[data-letter=R] {
    -webkit-text-stroke-width: 3.15vw;
  }
}
.title--scene5 .title-word-letter[data-letter=S] {
  font-size: 392vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene5-s 3000ms linear forwards;
          animation: scene5-s 3000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene5 .title-word-letter[data-letter=S] {
    font-size: 220.5vw;
  }
}
.textstroke .title--scene5 .title-word-letter[data-letter=S] {
  text-shadow: 0 0 28vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 5.6vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene5 .title-word-letter[data-letter=S] {
    text-shadow: 15.75vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene5 .title-word-letter[data-letter=S] {
    -webkit-text-stroke-width: 3.15vw;
  }
}
@-webkit-keyframes scene6-fade-out {
  0%, 40% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@keyframes scene6-fade-out {
  0%, 40% {
    opacity: 1;
  }
  85%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes scene6-i {
  0% {
    transform: translateX(-105%) translateY(-91%);
  }
  85%, 100% {
    transform: translateX(-135%) translateY(-85%);
  }
}
@keyframes scene6-i {
  0% {
    transform: translateX(-105%) translateY(-91%);
  }
  85%, 100% {
    transform: translateX(-135%) translateY(-85%);
  }
}
@-webkit-keyframes scene6-a {
  0% {
    transform: translateX(14%) translateY(-91%);
  }
  85%, 100% {
    transform: translateX(34%) translateY(-85%);
  }
}
@keyframes scene6-a {
  0% {
    transform: translateX(14%) translateY(-91%);
  }
  85%, 100% {
    transform: translateX(34%) translateY(-85%);
  }
}
@-webkit-keyframes scene6-t {
  0% {
    transform: translateX(-134%) translateY(-7%);
  }
  85%, 100% {
    transform: translateX(-111%) translateY(-1%);
  }
}
@keyframes scene6-t {
  0% {
    transform: translateX(-134%) translateY(-7%);
  }
  85%, 100% {
    transform: translateX(-111%) translateY(-1%);
  }
}
@-webkit-keyframes scene6-h {
  0% {
    transform: translateX(24%) translateY(-7%);
  }
  85%, 100% {
    transform: translateX(15%) translateY(-1%);
  }
}
@keyframes scene6-h {
  0% {
    transform: translateX(24%) translateY(-7%);
  }
  85%, 100% {
    transform: translateX(15%) translateY(-1%);
  }
}
@-webkit-keyframes scene6-fade-in {
  0%, 40% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@keyframes scene6-fade-in {
  0%, 40% {
    opacity: 0;
  }
  85%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes scene6-n {
  0%, 40% {
    transform: translateX(-170%) translateY(-50%);
  }
  100% {
    transform: translateX(-147%) translateY(-50%);
  }
}
@keyframes scene6-n {
  0%, 40% {
    transform: translateX(-170%) translateY(-50%);
  }
  100% {
    transform: translateX(-147%) translateY(-50%);
  }
}
@-webkit-keyframes scene6-g {
  0%, 40% {
    transform: translateX(82%) translateY(-50%);
  }
  100% {
    transform: translateX(49%) translateY(-50%);
  }
}
@keyframes scene6-g {
  0%, 40% {
    transform: translateX(82%) translateY(-50%);
  }
  100% {
    transform: translateX(49%) translateY(-50%);
  }
}
.title--scene6 .title-word-letter[data-letter=I] {
  font-size: 224vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-i 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
          animation: scene6-i 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=I] {
    font-size: 126vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=I] {
  text-shadow: 0 0 16vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 3.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=I] {
    text-shadow: 9vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=I] {
    -webkit-text-stroke-width: 1.8vw;
  }
}
.title--scene6 .title-word-letter[data-letter=A] {
  font-size: 224vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-a 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
          animation: scene6-a 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=A] {
    font-size: 126vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=A] {
  text-shadow: 0 0 16vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 3.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=A] {
    text-shadow: 9vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=A] {
    -webkit-text-stroke-width: 1.8vw;
  }
}
.title--scene6 .title-word-letter[data-letter=T] {
  font-size: 224vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-t 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
          animation: scene6-t 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=T] {
    font-size: 126vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=T] {
  text-shadow: 0 0 16vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 3.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=T] {
    text-shadow: 9vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=T] {
    -webkit-text-stroke-width: 1.8vw;
  }
}
.title--scene6 .title-word-letter[data-letter=H] {
  font-size: 224vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-h 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
          animation: scene6-h 6000ms linear forwards, scene6-fade-out 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=H] {
    font-size: 126vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=H] {
  text-shadow: 0 0 16vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 3.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=H] {
    text-shadow: 9vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=H] {
    -webkit-text-stroke-width: 1.8vw;
  }
}
.title--scene6 .title-word-letter[data-letter=N] {
  font-size: 84vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-n 6000ms linear forwards, scene6-fade-in 6000ms linear forwards;
          animation: scene6-n 6000ms linear forwards, scene6-fade-in 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=N] {
    font-size: 47.25vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=N] {
  text-shadow: 0 0 6vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 1.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=N] {
    text-shadow: 3.375vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=N] {
    -webkit-text-stroke-width: 0.675vw;
  }
}
.title--scene6 .title-word-letter[data-letter=G] {
  font-size: 84vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene6-g 6000ms linear forwards, scene6-fade-in 6000ms linear forwards;
          animation: scene6-g 6000ms linear forwards, scene6-fade-in 6000ms linear forwards;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--scene6 .title-word-letter[data-letter=G] {
    font-size: 47.25vw;
  }
}
.textstroke .title--scene6 .title-word-letter[data-letter=G] {
  text-shadow: 0 0 6vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 1.2vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=G] {
    text-shadow: 3.375vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--scene6 .title-word-letter[data-letter=G] {
    -webkit-text-stroke-width: 0.675vw;
  }
}
.title--full {
  width: 1000vw;
  -webkit-animation: full-title 20s cubic-bezier(0.15, 0.7, 0.26, 0.88) forwards;
          animation: full-title 20s cubic-bezier(0.15, 0.7, 0.26, 0.88) forwards;
  transform-origin: 50% 45%;
}
@-webkit-keyframes full-title {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-41%) scale(0.8);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-45%) scale(0.06);
  }
}
@keyframes full-title {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-41%) scale(0.8);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-45%) scale(0.06);
  }
}
@-webkit-keyframes full-s1 {
  0%, 50% {
    transform: translateX(-200%);
  }
  76%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-s1 {
  0%, 50% {
    transform: translateX(-200%);
  }
  76%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-t1 {
  0%, 40% {
    transform: translateY(-120%);
  }
  75%, 100% {
    transform: translateY(0%);
  }
}
@keyframes full-t1 {
  0%, 40% {
    transform: translateY(-120%);
  }
  75%, 100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes full-r1 {
  0%, 25% {
    transform: translateX(-55%);
  }
  72%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-r1 {
  0%, 25% {
    transform: translateX(-55%);
  }
  72%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-a {
  0% {
    transform: translateX(-15%);
  }
  40%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-a {
  0% {
    transform: translateX(-15%);
  }
  40%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-n1 {
  0% {
    transform: translateX(15%);
  }
  40%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-n1 {
  0% {
    transform: translateX(15%);
  }
  40%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-g1 {
  0% {
    transform: translateX(30%);
  }
  55%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-g1 {
  0% {
    transform: translateX(30%);
  }
  55%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-e {
  0%, 50% {
    transform: translateY(-120%);
  }
  75%, 100% {
    transform: translateY(0%);
  }
}
@keyframes full-e {
  0%, 50% {
    transform: translateY(-120%);
  }
  75%, 100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes full-r2 {
  0%, 45% {
    transform: translateX(200%);
  }
  71%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-r2 {
  0%, 45% {
    transform: translateX(200%);
  }
  71%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-t2 {
  0%, 30% {
    transform: translateX(-80%);
  }
  60%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-t2 {
  0%, 30% {
    transform: translateX(-80%);
  }
  60%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-h {
  0%, 36% {
    transform: translateY(200%);
  }
  76%, 100% {
    transform: translateY(0%);
  }
}
@keyframes full-h {
  0%, 36% {
    transform: translateY(200%);
  }
  76%, 100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes full-i {
  0%, 25% {
    transform: translateX(-70%);
  }
  75%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-i {
  0%, 25% {
    transform: translateX(-70%);
  }
  75%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-n2 {
  0%, 10% {
    transform: translateY(70%);
  }
  40%, 100% {
    transform: translateY(0%);
  }
}
@keyframes full-n2 {
  0%, 10% {
    transform: translateY(70%);
  }
  40%, 100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes full-g2 {
  0% {
    transform: translateX(30%);
  }
  45%, 100% {
    transform: translateX(0%);
  }
}
@keyframes full-g2 {
  0% {
    transform: translateX(30%);
  }
  45%, 100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes full-s2 {
  0%, 40% {
    transform: translateY(200%);
  }
  80%, 100% {
    transform: translateY(0%);
  }
}
@keyframes full-s2 {
  0%, 40% {
    transform: translateY(200%);
  }
  80%, 100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes full-bar-top {
  0%, 67% {
    transform: scaleX(0);
  }
  72%, 100% {
    transform: scaleX(1);
  }
}
@keyframes full-bar-top {
  0%, 67% {
    transform: scaleX(0);
  }
  72%, 100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes full-bar-side {
  0%, 70% {
    transform: scaleX(0);
  }
  75%, 100% {
    transform: scaleX(1);
  }
}
@keyframes full-bar-side {
  0%, 70% {
    transform: scaleX(0);
  }
  75%, 100% {
    transform: scaleX(1);
  }
}
.title--full .title-word-letter[data-letter] {
  font-size: 280vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--full .title-word-letter[data-letter] {
    font-size: 157.5vw;
  }
}
.textstroke .title--full .title-word-letter[data-letter] {
  text-shadow: 0 0 20vmin rgba(193, 27, 31, 0.5);
  -webkit-text-stroke-width: 4vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--full .title-word-letter[data-letter] {
    text-shadow: 11.25vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .textstroke .title--full .title-word-letter[data-letter] {
    -webkit-text-stroke-width: 2.25vw;
  }
}
.title--full .title-word-letter[data-letter] .title-word-letter-large {
  font-size: 340vmin;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--full .title-word-letter[data-letter] .title-word-letter-large {
    font-size: 191.25vw;
  }
}
.title--full .title-word-letter[data-letter=S1] {
  -webkit-animation: full-s1 20s ease forwards;
          animation: full-s1 20s ease forwards;
}
.title--full .title-word-letter[data-letter=T1] {
  -webkit-animation: full-t1 20s ease forwards;
          animation: full-t1 20s ease forwards;
}
.title--full .title-word-letter[data-letter=R1] {
  -webkit-animation: full-r1 20s ease forwards;
          animation: full-r1 20s ease forwards;
}
.title--full .title-word-letter[data-letter=A] {
  -webkit-animation: full-a 20s ease forwards;
          animation: full-a 20s ease forwards;
}
.title--full .title-word-letter[data-letter=N1] {
  letter-spacing: -15vmin;
  -webkit-animation: full-n1 20s ease forwards;
          animation: full-n1 20s ease forwards;
}
.title--full .title-word-letter[data-letter=G1] {
  -webkit-animation: full-g1 20s ease forwards;
          animation: full-g1 20s ease forwards;
}
.title--full .title-word-letter[data-letter=E] {
  -webkit-animation: full-e 20s ease forwards;
          animation: full-e 20s ease forwards;
}
.title--full .title-word-letter[data-letter=R2] {
  -webkit-animation: full-r2 20s ease forwards;
          animation: full-r2 20s ease forwards;
}
.title--full .title-word-letter[data-letter=T2] {
  -webkit-animation: full-t2 20s ease forwards;
          animation: full-t2 20s ease forwards;
}
.title--full .title-word-letter[data-letter=H] {
  -webkit-animation: full-h 20s ease forwards;
          animation: full-h 20s ease forwards;
}
.title--full .title-word-letter[data-letter=I] {
  -webkit-animation: full-i 20s ease forwards;
          animation: full-i 20s ease forwards;
}
.title--full .title-word-letter[data-letter=N2] {
  letter-spacing: -15vmin;
  -webkit-animation: full-n2 20s ease forwards;
          animation: full-n2 20s ease forwards;
}
.title--full .title-word-letter[data-letter=G2] {
  -webkit-animation: full-g2 20s ease forwards;
          animation: full-g2 20s ease forwards;
}
.title--full .title-word-letter[data-letter=S2] {
  -webkit-animation: full-s2 20s ease forwards;
          animation: full-s2 20s ease forwards;
}
.title--full .titlebar {
  height: 10vmin;
  border-width: 4vmin;
  border-radius: 1vmin;
  box-shadow: 0 0 12vmin rgba(193, 27, 31, 0.8), 0 0 5vmin rgba(193, 27, 31, 0.8) inset;
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--full .titlebar {
    height: 5.625vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--full .titlebar {
    border-width: 2.25vw;
  }
}
@media screen and (max-aspect-ratio: 16/9) {
  .title--full .titlebar {
    border-radius: 0.5625vw;
  }
}
.title--full .titlebar--top {
  -webkit-animation: full-bar-top 20s ease forwards;
          animation: full-bar-top 20s ease forwards;
}
.title--full .titlebar--left, .title--full .titlebar--right {
  -webkit-animation: full-bar-side 20s ease forwards;
          animation: full-bar-side 20s ease forwards;
}
.title--full .titlebar--left {
  transform-origin: right;
}
.title--full .titlebar--right {
  transform-origin: left;
}