LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Stranger Things

The following demo is performance intensive, and will play audio. If you experience any issues, try sizing down your browser and refreshing.

Unfortunately this demo uses many features only found in the latest version of Google Chrome. You can still run this, but it may not look as intended. Please try running it in Chrome for the best experience.
Download Chrome

Unfortunately your browser doesn't support this demo. Please download Google Chrome, and try running it again.
Download Chrome

S
T R A N G E R
T H I N G S
A
N
R
I
S
G
R
S
I
A
T
H
N
G
A Netflix Original Series
Winona Ryder
David Harbour
Finn Wolfhard
Millie Bobby Brown
Gaten Matarazzo
Caleb McLaughlin
Natalia Dyer
Charlie Heaton
Cara Buono
And
Matthew Modine
Co-Executive Producer
Iain Paterson
Executive Producer
Karl Gajdusek
Executive Producers
Cindy Holland
Brian Wright
Matt Thunell
Executive Producers
Shawn Levy
Dan Cohen
Executive Producers
The Duffer Brothers
Created By
Will O'Beirne
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%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition: opacity 600ms ease, visibility 0ms linear 800ms;
  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: #A8A6A7;
  font-size: 16px;
  line-height: 22px;
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, 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: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, 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%;
  -webkit-transition: color 100ms ease, opacity 100ms ease;
  transition: color 100ms ease, opacity 100ms ease;
  -webkit-transform: translateZ(0);
          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%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-45%);
          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 {
  -webkit-transform: translateY(-38%);
          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;
  -webkit-transform: translateY(-2.8%);
          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: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, 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% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
  }
  20% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
  }
  80% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
            transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0.015vmin);
  }
}
@keyframes credits-wiggle {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0);
  }
  20% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(-0.015vmin);
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0.015vmin) translateY(-0.015vmin);
  }
  60% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
            transform: translateX(-50%) translateY(-50%) translateX(0) translateY(0.015vmin);
  }
  80% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
            transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) translateX(-0.015vmin) translateY(0.015vmin);
            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%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 90%;
  opacity: 0;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}
.credits-group--show, .credits-final--show {
  opacity: 1;
  -webkit-transition-delay: 300ms;
          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: #A8A6A7;
  background: -webkit-linear-gradient(#B2B0B1, #A8A6A7);
  background: linear-gradient(#B2B0B1, #A8A6A7);
  -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%;
  -webkit-transform: translateX(-50%) translateY(-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% {
    -webkit-transform: translateX(8%) translateY(-5%);
            transform: translateX(8%) translateY(-5%);
  }
  10% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
  }
  20% {
    -webkit-transform: translateX(10%) translateY(-15%);
            transform: translateX(10%) translateY(-15%);
  }
  30% {
    -webkit-transform: translateX(-10%) translateY(0%);
            transform: translateX(-10%) translateY(0%);
  }
  40% {
    -webkit-transform: translateX(25%) translateY(15%);
            transform: translateX(25%) translateY(15%);
  }
  50% {
    -webkit-transform: translateX(10%) translateY(-10%);
            transform: translateX(10%) translateY(-10%);
  }
  60% {
    -webkit-transform: translateX(-5%) translateY(5%);
            transform: translateX(-5%) translateY(5%);
  }
  70% {
    -webkit-transform: translateX(15%) translateY(0%);
            transform: translateX(15%) translateY(0%);
  }
  80% {
    -webkit-transform: translateX(-20%) translateY(-10%);
            transform: translateX(-20%) translateY(-10%);
  }
  90% {
    -webkit-transform: translateX(20%) translateY(15%);
            transform: translateX(20%) translateY(15%);
  }
  100% {
    -webkit-transform: translateX(4%) translateY(7%);
            transform: translateX(4%) translateY(7%);
  }
}
@keyframes grain-wiggle {
  0% {
    -webkit-transform: translateX(8%) translateY(-5%);
            transform: translateX(8%) translateY(-5%);
  }
  10% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
  }
  20% {
    -webkit-transform: translateX(10%) translateY(-15%);
            transform: translateX(10%) translateY(-15%);
  }
  30% {
    -webkit-transform: translateX(-10%) translateY(0%);
            transform: translateX(-10%) translateY(0%);
  }
  40% {
    -webkit-transform: translateX(25%) translateY(15%);
            transform: translateX(25%) translateY(15%);
  }
  50% {
    -webkit-transform: translateX(10%) translateY(-10%);
            transform: translateX(10%) translateY(-10%);
  }
  60% {
    -webkit-transform: translateX(-5%) translateY(5%);
            transform: translateX(-5%) translateY(5%);
  }
  70% {
    -webkit-transform: translateX(15%) translateY(0%);
            transform: translateX(15%) translateY(0%);
  }
  80% {
    -webkit-transform: translateX(-20%) translateY(-10%);
            transform: translateX(-20%) translateY(-10%);
  }
  90% {
    -webkit-transform: translateX(20%) translateY(15%);
            transform: translateX(20%) translateY(15%);
  }
  100% {
    -webkit-transform: translateX(4%) translateY(7%);
            transform: translateX(4%) translateY(7%);
  }
}
.letterbox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  position: fixed;
  height: 100vh;
  width: 177.77778vh;
  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%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.letterbox-cover--left, .letterbox-cover--right {
  top: 50%;
  -webkit-transform: translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes scene1 {
  0% {
    -webkit-transform: translateX(-43.85%) translateY(-40%) scale(2.2);
            transform: translateX(-43.85%) translateY(-40%) scale(2.2);
  }
  100% {
    -webkit-transform: translateX(-43.85%) translateY(-40%) scale(1);
            transform: translateX(-43.85%) translateY(-40%) scale(1);
  }
}
@keyframes scene1 {
  0% {
    -webkit-transform: translateX(-43.85%) translateY(-40%) scale(2.2);
            transform: translateX(-43.85%) translateY(-40%) scale(2.2);
  }
  100% {
    -webkit-transform: translateX(-43.85%) translateY(-40%) scale(1);
            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%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene1 7000ms ease-out forwards;
          animation: scene1 7000ms ease-out forwards;
  -webkit-transform-origin: 43.85% 40%;
          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% {
    -webkit-transform: translateX(-68%) translateY(-41%);
            transform: translateX(-68%) translateY(-41%);
  }
  100% {
    -webkit-transform: translateX(-68%) translateY(-38%);
            transform: translateX(-68%) translateY(-38%);
  }
}
@keyframes scene2-word {
  0% {
    -webkit-transform: translateX(-68%) translateY(-41%);
            transform: translateX(-68%) translateY(-41%);
  }
  100% {
    -webkit-transform: translateX(-68%) translateY(-38%);
            transform: translateX(-68%) translateY(-38%);
  }
}
@-webkit-keyframes scene2-letter {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.92);
            transform: scale(0.92);
  }
}
@keyframes scene2-letter {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.92);
            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;
  -webkit-transform-origin: 68.4% 40%;
          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% {
    -webkit-transform: translateX(-78%) translateY(-30%) scale(0.95);
            transform: translateX(-78%) translateY(-30%) scale(0.95);
  }
  100% {
    -webkit-transform: translateX(-81%) translateY(-30%) scale(0.84);
            transform: translateX(-81%) translateY(-30%) scale(0.84);
  }
}
@keyframes scene3-r {
  0% {
    -webkit-transform: translateX(-78%) translateY(-30%) scale(0.95);
            transform: translateX(-78%) translateY(-30%) scale(0.95);
  }
  100% {
    -webkit-transform: translateX(-81%) translateY(-30%) scale(0.84);
            transform: translateX(-81%) translateY(-30%) scale(0.84);
  }
}
@-webkit-keyframes scene3-i {
  0% {
    -webkit-transform: translateX(15%) translateY(-50%);
            transform: translateX(15%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(35%) translateY(-50%);
            transform: translateX(35%) translateY(-50%);
  }
}
@keyframes scene3-i {
  0% {
    -webkit-transform: translateX(15%) translateY(-50%);
            transform: translateX(15%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(35%) translateY(-50%);
            transform: translateX(35%) translateY(-50%);
  }
}
.title--scene3 .title-word-letter[data-letter="R"] {
  font-size: 644vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-animation: scene3-r 3000ms linear forwards;
          animation: scene3-r 3000ms linear forwards;
  -webkit-transform-origin: 75% 27%;
          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%;
  -webkit-transform: translateX(-50%) translateY(-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% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@keyframes scene4-word {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
            transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
@-webkit-keyframes scene4-s {
  0% {
    -webkit-transform: translateX(-53%) translateY(-11%);
            transform: translateX(-53%) translateY(-11%);
  }
  100% {
    -webkit-transform: translateX(-65%) translateY(-11%);
            transform: translateX(-65%) translateY(-11%);
  }
}
@keyframes scene4-s {
  0% {
    -webkit-transform: translateX(-53%) translateY(-11%);
            transform: translateX(-53%) translateY(-11%);
  }
  100% {
    -webkit-transform: translateX(-65%) translateY(-11%);
            transform: translateX(-65%) translateY(-11%);
  }
}
@-webkit-keyframes scene4-g {
  0% {
    -webkit-transform: translateX(-42%) translateY(-90%);
            transform: translateX(-42%) translateY(-90%);
  }
  100% {
    -webkit-transform: translateX(-34%) translateY(-90%);
            transform: translateX(-34%) translateY(-90%);
  }
}
@keyframes scene4-g {
  0% {
    -webkit-transform: translateX(-42%) translateY(-90%);
            transform: translateX(-42%) translateY(-90%);
  }
  100% {
    -webkit-transform: translateX(-34%) translateY(-90%);
            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%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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% {
    -webkit-transform: translateX(-118%) translateY(-30%);
            transform: translateX(-118%) translateY(-30%);
  }
  100% {
    -webkit-transform: translateX(-112%) translateY(-34%);
            transform: translateX(-112%) translateY(-34%);
  }
}
@keyframes scene5-r {
  0% {
    -webkit-transform: translateX(-118%) translateY(-30%);
            transform: translateX(-118%) translateY(-30%);
  }
  100% {
    -webkit-transform: translateX(-112%) translateY(-34%);
            transform: translateX(-112%) translateY(-34%);
  }
}
@-webkit-keyframes scene5-s {
  0% {
    -webkit-transform: translateX(-19%) translateY(-28.5%);
            transform: translateX(-19%) translateY(-28.5%);
  }
  100% {
    -webkit-transform: translateX(-22%) translateY(-32%);
            transform: translateX(-22%) translateY(-32%);
  }
}
@keyframes scene5-s {
  0% {
    -webkit-transform: translateX(-19%) translateY(-28.5%);
            transform: translateX(-19%) translateY(-28.5%);
  }
  100% {
    -webkit-transform: translateX(-22%) translateY(-32%);
            transform: translateX(-22%) translateY(-32%);
  }
}
.title--scene5 .title-word-letter[data-letter="R"] {
  font-size: 392vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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% {
    -webkit-transform: translateX(-105%) translateY(-91%);
            transform: translateX(-105%) translateY(-91%);
  }
  85%, 100% {
    -webkit-transform: translateX(-135%) translateY(-85%);
            transform: translateX(-135%) translateY(-85%);
  }
}
@keyframes scene6-i {
  0% {
    -webkit-transform: translateX(-105%) translateY(-91%);
            transform: translateX(-105%) translateY(-91%);
  }
  85%, 100% {
    -webkit-transform: translateX(-135%) translateY(-85%);
            transform: translateX(-135%) translateY(-85%);
  }
}
@-webkit-keyframes scene6-a {
  0% {
    -webkit-transform: translateX(14%) translateY(-91%);
            transform: translateX(14%) translateY(-91%);
  }
  85%, 100% {
    -webkit-transform: translateX(34%) translateY(-85%);
            transform: translateX(34%) translateY(-85%);
  }
}
@keyframes scene6-a {
  0% {
    -webkit-transform: translateX(14%) translateY(-91%);
            transform: translateX(14%) translateY(-91%);
  }
  85%, 100% {
    -webkit-transform: translateX(34%) translateY(-85%);
            transform: translateX(34%) translateY(-85%);
  }
}
@-webkit-keyframes scene6-t {
  0% {
    -webkit-transform: translateX(-134%) translateY(-7%);
            transform: translateX(-134%) translateY(-7%);
  }
  85%, 100% {
    -webkit-transform: translateX(-111%) translateY(-1%);
            transform: translateX(-111%) translateY(-1%);
  }
}
@keyframes scene6-t {
  0% {
    -webkit-transform: translateX(-134%) translateY(-7%);
            transform: translateX(-134%) translateY(-7%);
  }
  85%, 100% {
    -webkit-transform: translateX(-111%) translateY(-1%);
            transform: translateX(-111%) translateY(-1%);
  }
}
@-webkit-keyframes scene6-h {
  0% {
    -webkit-transform: translateX(24%) translateY(-7%);
            transform: translateX(24%) translateY(-7%);
  }
  85%, 100% {
    -webkit-transform: translateX(15%) translateY(-1%);
            transform: translateX(15%) translateY(-1%);
  }
}
@keyframes scene6-h {
  0% {
    -webkit-transform: translateX(24%) translateY(-7%);
            transform: translateX(24%) translateY(-7%);
  }
  85%, 100% {
    -webkit-transform: translateX(15%) translateY(-1%);
            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% {
    -webkit-transform: translateX(-170%) translateY(-50%);
            transform: translateX(-170%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(-147%) translateY(-50%);
            transform: translateX(-147%) translateY(-50%);
  }
}
@keyframes scene6-n {
  0%, 40% {
    -webkit-transform: translateX(-170%) translateY(-50%);
            transform: translateX(-170%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(-147%) translateY(-50%);
            transform: translateX(-147%) translateY(-50%);
  }
}
@-webkit-keyframes scene6-g {
  0%, 40% {
    -webkit-transform: translateX(82%) translateY(-50%);
            transform: translateX(82%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(49%) translateY(-50%);
            transform: translateX(49%) translateY(-50%);
  }
}
@keyframes scene6-g {
  0%, 40% {
    -webkit-transform: translateX(82%) translateY(-50%);
            transform: translateX(82%) translateY(-50%);
  }
  100% {
    -webkit-transform: translateX(49%) translateY(-50%);
            transform: translateX(49%) translateY(-50%);
  }
}
.title--scene6 .title-word-letter[data-letter="I"] {
  font-size: 224vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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%;
  -webkit-transform: translateX(-50%) translateY(-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;
  -webkit-transform-origin: 50% 45%;
          transform-origin: 50% 45%;
}
@-webkit-keyframes full-title {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-41%) scale(0.8);
            transform: translateX(-50%) translateY(-41%) scale(0.8);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-45%) scale(0.06);
            transform: translateX(-50%) translateY(-45%) scale(0.06);
  }
}
@keyframes full-title {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-41%) scale(0.8);
            transform: translateX(-50%) translateY(-41%) scale(0.8);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-45%) scale(0.06);
            transform: translateX(-50%) translateY(-45%) scale(0.06);
  }
}
@-webkit-keyframes full-s1 {
  0%, 50% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  76%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-s1 {
  0%, 50% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  76%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-t1 {
  0%, 40% {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  75%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes full-t1 {
  0%, 40% {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  75%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes full-r1 {
  0%, 25% {
    -webkit-transform: translateX(-55%);
            transform: translateX(-55%);
  }
  72%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-r1 {
  0%, 25% {
    -webkit-transform: translateX(-55%);
            transform: translateX(-55%);
  }
  72%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-a {
  0% {
    -webkit-transform: translateX(-15%);
            transform: translateX(-15%);
  }
  40%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-a {
  0% {
    -webkit-transform: translateX(-15%);
            transform: translateX(-15%);
  }
  40%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-n1 {
  0% {
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
  }
  40%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-n1 {
  0% {
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
  }
  40%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-g1 {
  0% {
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
  }
  55%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-g1 {
  0% {
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
  }
  55%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-e {
  0%, 50% {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  75%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes full-e {
  0%, 50% {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  75%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes full-r2 {
  0%, 45% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  71%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-r2 {
  0%, 45% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  71%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-t2 {
  0%, 30% {
    -webkit-transform: translateX(-80%);
            transform: translateX(-80%);
  }
  60%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-t2 {
  0%, 30% {
    -webkit-transform: translateX(-80%);
            transform: translateX(-80%);
  }
  60%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-h {
  0%, 36% {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  76%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes full-h {
  0%, 36% {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  76%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes full-i {
  0%, 25% {
    -webkit-transform: translateX(-70%);
            transform: translateX(-70%);
  }
  75%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-i {
  0%, 25% {
    -webkit-transform: translateX(-70%);
            transform: translateX(-70%);
  }
  75%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-n2 {
  0%, 10% {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
  }
  40%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes full-n2 {
  0%, 10% {
    -webkit-transform: translateY(70%);
            transform: translateY(70%);
  }
  40%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes full-g2 {
  0% {
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
  }
  45%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes full-g2 {
  0% {
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
  }
  45%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes full-s2 {
  0%, 40% {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  80%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes full-s2 {
  0%, 40% {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  80%, 100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes full-bar-top {
  0%, 67% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  72%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes full-bar-top {
  0%, 67% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  72%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes full-bar-side {
  0%, 70% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  75%, 100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes full-bar-side {
  0%, 70% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  75%, 100% {
    -webkit-transform: scaleX(1);
            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 {
  -webkit-transform-origin: right;
          transform-origin: right;
}
.title--full .titlebar--right {
  -webkit-transform-origin: left;
          transform-origin: left;
}
JS
// Real quick add another modernizr check foooor...
Modernizr.addTest('textstroke', function() {
  var h1 = document.createElement('h1');
  if (!('webkitTextStroke' in h1.style) && !('textStroke' in h1.style)) {
    return false;
  }
  else {
    return true;
  }
});

document.addEventListener("DOMContentLoaded", () => {
  let bind = false;
  let text = null;

  // Must-haves
  if (!Modernizr.audio || !Modernizr.cssanimations || !Modernizr.textshadow) {
    text = document.getElementsByClassName("intro-text--cant")[0];
  }
  // Should-haves
  else if (!Modernizr.textstroke) {
    bind = true;
    text = document.getElementsByClassName("intro-text--shouldnt")[0];
  }
  // All good!
  else {
    bind = true;
    text = document.getElementsByClassName("intro-text--can")[0];
  }

  text.className += " intro-text--show";

  if (bind) {
    const btns = document.querySelectorAll("[data-play]");
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", () => {
        start();
      });
    }
  }
});

// Fade out intro, start music and animation
let started = false;
function start() {
  if (started) {
    return;
  }
  started = true;

  const intro = document.getElementsByClassName("intro")[0];
  
  const music = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/161676/music.mp3");

  intro.className += " intro--hide";

  music.addEventListener("canplay", () => {
    setTimeout(() => {
      startAnimation();
      setTimeout(() => {
        music.play();
      }, 200);
    }, 1500);
  });
}

// Kick off the animation
function startAnimation() {
  // In milliseconds, how long each one is
  const creditsMs = 3000;
  const scenesMs = [
    creditsMs,
    creditsMs * 2,
    creditsMs,
    creditsMs,
    creditsMs,
    creditsMs,
    creditsMs * 2,
    19500,
  ];

  // Elements
  const viewport = document.getElementsByClassName("viewport")[0];
  const letterbox = document.getElementsByClassName("letterbox")[0];
  const scenes = document.getElementsByClassName("title--scene");
  const fullTitle = document.getElementsByClassName("title--full")[0];
  const credits = document.getElementsByClassName("credits-group");
  const finalCredit = document.getElementsByClassName("credits-final")[0];

  viewport.className += " viewport--show";
  letterbox.className += " letterbox--show";

  // Set up credits to show every interval
  let activeCredits = null;
  for (let i = 0; i < credits.length; i++) {
    setTimeout(() => {
      if (credits[i - 1]) {
        credits[i - 1].className = "credits-group";
      }
      credits[i].className = "credits-group credits-group--show";
    }, i * creditsMs);

    if (!credits[i + 1]) {
      setTimeout(() => {
        credits[i].className="credits-group";
      }, i * creditsMs + creditsMs);
    }
  }

  // Set up scenes to show after each interval
  let offset = 0;
  for (let i = 0; i < scenes.length; i++) {
    setTimeout(() => {
      if (scenes[i - 1]) {
        scenes[i - 1].className = scenes[i - 1]
          .className.replace("title--show", "");
      }
      scenes[i].className += " title--show";
    }, offset);

    offset += scenesMs[i];

    if (!scenes[i + 1]) {
      // Show the last scene
      setTimeout(() => {
        scenes[i].className = scenes[i].className.replace("title--show", "");
        fullTitle.className += " title--show";
      }, offset);

      // Show the final credits
      setTimeout(() => {
        finalCredit.className += " credits-group--show";
      }, offset + scenesMs[i + 1] + 1500);
    }
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

Source also available on Github, with more information: https://github.com/wbobeirne/stranger-things
Term
Mon, 11/27/2017 - 21:34

Related Codes

Pen ID
Pen ID
Pen ID