@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  overflow-x: hidden;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}

/* easeOutCubic */
html {
  font-size: 1vw;
}

body {
  background: black;
  color: white;
  font-size: 1rem;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fragments, .fragment, .dormant, .start {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fragment, .dormant {
  display: none;
  pointer-events: none;
}

.fragment.active, .dormant.active {
  display: block;
}

.fragment__center {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translatey(-50%);
      -ms-transform: translatey(-50%);
          transform: translatey(-50%);
  text-align: center;
}

.eigo {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 9rem;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.eigo--large {
  font-size: 20rem;
}

.rogue {
  width: 15vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: inline-block;
  opacity: 0;
  -webkit-animation: appear 250ms steps(1);
          animation: appear 250ms steps(1);
}

.rogue:nth-child(1) {
  -webkit-box-flex: 20;
  -webkit-flex: 20;
      -ms-flex: 20;
          flex: 20;
  -webkit-animation-delay: 000ms;
          animation-delay: 000ms;
}

.rogue:nth-child(2) {
  -webkit-box-flex: 18;
  -webkit-flex: 18;
      -ms-flex: 18;
          flex: 18;
  -webkit-animation-delay: 050ms;
          animation-delay: 050ms;
}

.rogue:nth-child(3) {
  -webkit-box-flex: 16;
  -webkit-flex: 16;
      -ms-flex: 16;
          flex: 16;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.rogue:nth-child(4) {
  -webkit-box-flex: 14;
  -webkit-flex: 14;
      -ms-flex: 14;
          flex: 14;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}

.rogue:nth-child(5) {
  -webkit-box-flex: 10;
  -webkit-flex: 10;
      -ms-flex: 10;
          flex: 10;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.rogue:nth-child(6) {
  -webkit-box-flex: 16;
  -webkit-flex: 16;
      -ms-flex: 16;
          flex: 16;
  margin-right: 4rem;
  -webkit-transform: translate3d(20%, 30%, 0);
          transform: translate3d(20%, 30%, 0);
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
}

.rogue:nth-child(7) {
  -webkit-box-flex: 16;
  -webkit-flex: 16;
      -ms-flex: 16;
          flex: 16;
  margin-right: 6rem;
  -webkit-transform: translate3d(15%, -15%, 0);
          transform: translate3d(15%, -15%, 0);
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.rogue:nth-child(8) {
  -webkit-box-flex: 10;
  -webkit-flex: 10;
      -ms-flex: 10;
          flex: 10;
  -webkit-transform: translate3d(-20%, 0%, 0);
          transform: translate3d(-20%, 0%, 0);
  -webkit-animation-delay: 350ms;
          animation-delay: 350ms;
}

.rogueInner {
  position: absolute;
  bottom: -25%;
  -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.rogueWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.ab:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  width: 30rem;
  height: 30rem;
  border: 1px solid white;
  -webkit-border-radius: 100%;
          border-radius: 100%;
}

.nihongo {
  font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "游明朝体", YuMincho, "Yu Mincho", "ＭＳ 明朝", "MS Mincho", HiraMinProN-W3, "TakaoEx明朝", TakaoExMincho, "MotoyaLCedar", "Droid Sans Japanese", "Sawarabi Mincho", serif;
  font-size: 10rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nihongo--large {
  font-size: 16.1rem;
  line-height: 1.1;
}

.nihongo--small {
  font-size: 8rem;
}

.subtitle {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 8vh;
}

.emotion {
  font-family: serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 0.8;
}

@media screen and (orientation: portrait) {
  .fragment__center {
    top: 48%;
  }
  .eigo {
    font-size: 14rem;
  }
  .eigo--large {
    font-size: 28rem;
  }
  .emotion {
    font-size: 4rem;
  }
  .nihongo {
    font-size: 14rem;
  }
  .nihongo--large {
    font-size: 25rem;
  }
  .nihongo--small {
    font-size: 12rem;
  }
  .subtitle {
    font-size: 3rem;
  }
  .rogueInner {
    bottom: 25%;
  }
}

.startInner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.circle {
  -webkit-border-radius: 100%;
          border-radius: 100%;
  background: white;
  display: inline-block;
}

.venn {
  width: 20vmax;
  height: 20vmax;
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: exclusion;
}

.venn:nth-child(1) {
  -webkit-animation: move-right 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: move-right 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translate3d(-125%, -50%, 0);
            transform: translate3d(-125%, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes move-right {
  0% {
    -webkit-transform: translate3d(-125%, -50%, 0);
            transform: translate3d(-125%, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
  }
}

.venn:nth-child(2) {
  -webkit-animation: move-left 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: move-left 1200ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translate3d(25%, -50%, 0);
            transform: translate3d(25%, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
  }
}

@keyframes move-left {
  0% {
    -webkit-transform: translate3d(25%, -50%, 0);
            transform: translate3d(25%, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
  }
}

.spinWrap {
  position: absolute;
  top: 50%;
  left: 50%;
}

.spinWrap:nth-child(1) {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
          transform: translate3d(-50%, -50%, 0) rotate(0deg);
}

.spinWrap:nth-child(2) {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
          transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

.spinWrap:nth-child(3) {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(180deg);
          transform: translate3d(-50%, -50%, 0) rotate(180deg);
}

.spinWrap:nth-child(4) {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(270deg);
          transform: translate3d(-50%, -50%, 0) rotate(270deg);
}

.spin {
  width: 4rem;
  height: 4rem;
  -webkit-transform: translateX(7rem);
      -ms-transform: translateX(7rem);
          transform: translateX(7rem);
  -webkit-animation: spin-move 500ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: spin-move 500ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@-webkit-keyframes spin-move {
  0% {
    -webkit-transform: translateX(7rem) translateY(0rem);
            transform: translateX(7rem) translateY(0rem);
  }
  100% {
    -webkit-transform: translateX(0rem) translateY(7rem);
            transform: translateX(0rem) translateY(7rem);
  }
}

@keyframes spin-move {
  0% {
    -webkit-transform: translateX(7rem) translateY(0rem);
            transform: translateX(7rem) translateY(0rem);
  }
  100% {
    -webkit-transform: translateX(0rem) translateY(7rem);
            transform: translateX(0rem) translateY(7rem);
  }
}

.talk {
  width: 5rem;
  height: 5rem;
  margin: 0.5rem;
  -webkit-animation: talk-bob cubic-bezier(0.645, 0.045, 0.355, 1) 600ms infinite;
          animation: talk-bob cubic-bezier(0.645, 0.045, 0.355, 1) 600ms infinite;
}

@-webkit-keyframes talk-bob {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  20% {
    -webkit-transform: translateY(-35%);
            transform: translateY(-35%);
  }
  40% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes talk-bob {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  20% {
    -webkit-transform: translateY(-35%);
            transform: translateY(-35%);
  }
  40% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.talk:nth-child(1) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.talk:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.talk:nth-child(3) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.knock {
  width: 8rem;
  height: 8rem;
  background: black;
  border: 1px solid white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.knockWrap {
  display: inline-block;
  position: relative;
  width: 8rem;
  height: 30rem;
  margin-top: -webkit-calc(-50vh + 18rem);
  margin-top: calc(-50vh + 18rem);
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

.knockWrap:nth-child(1) {
  -webkit-animation: knock-left 1200ms infinite;
          animation: knock-left 1200ms infinite;
}

@-webkit-keyframes knock-left {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  75% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

@keyframes knock-left {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  75% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

.knockWrap:nth-child(1) .knock {
  background: white;
}

.knockWrap:nth-child(5) {
  -webkit-animation: knock-right 1200ms infinite;
          animation: knock-right 1200ms infinite;
}

@-webkit-keyframes knock-right {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  50% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  75% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

@keyframes knock-right {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  50% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  75% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

@-webkit-keyframes flick {
  0% {
    background-color: black;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}

@keyframes flick {
  0% {
    background-color: black;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}

.knockWrap:nth-child(2) .knock, .knockWrap:nth-child(3) .knock, .knockWrap:nth-child(4) .knock {
  -webkit-animation: flick 1200ms -300ms steps(1) infinite;
          animation: flick 1200ms -300ms steps(1) infinite;
}

.wave {
  position: absolute;
  width: 8rem;
  height: 8rem;
  -webkit-animation: move-down 2000ms linear;
          animation: move-down 2000ms linear;
}

@-webkit-keyframes move-down {
  0% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  100% {
    -webkit-transform: translateY(20rem);
            transform: translateY(20rem);
  }
}

@keyframes move-down {
  0% {
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
  100% {
    -webkit-transform: translateY(20rem);
            transform: translateY(20rem);
  }
}

.waveWrap {
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: 50%;
  left: -webkit-calc(50% - 4rem);
  left: calc(50% - 4rem);
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: spin-out 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);
          animation: spin-out 2000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

@-webkit-keyframes spin-out {
  0% {
    -webkit-transform: scale(0) rotate(0deg);
            transform: scale(0) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(2) rotate(-720deg);
            transform: scale(2) rotate(-720deg);
  }
}

@keyframes spin-out {
  0% {
    -webkit-transform: scale(0) rotate(0deg);
            transform: scale(0) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(2) rotate(-720deg);
            transform: scale(2) rotate(-720deg);
  }
}

.waveWrap:nth-child(1), .waveWrap:nth-child(1) .wave {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.waveWrap:nth-child(2), .waveWrap:nth-child(2) .wave {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.waveWrap:nth-child(3), .waveWrap:nth-child(3) .wave {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.fillInner {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
}

@-webkit-keyframes fill {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes fill {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.fill {
  position: absolute;
  border: 1px solid white;
  background: black;
  overflow: hidden;
  top: 50%;
  left: 50%;
}

.fill:nth-child(1) {
  width: 8rem;
  height: 8rem;
  -webkit-transform: translate3d(-350%, -150%, 0);
          transform: translate3d(-350%, -150%, 0);
}

.fill:nth-child(1) .fillInner {
  -webkit-animation: fill 3000ms -100ms linear;
          animation: fill 3000ms -100ms linear;
}

.fill:nth-child(2) {
  width: 12rem;
  height: 12rem;
  -webkit-transform: translate3d(-350%, 50%, 0);
          transform: translate3d(-350%, 50%, 0);
}

.fill:nth-child(2) .fillInner {
  -webkit-animation: fill 8000ms -1000ms linear;
          animation: fill 8000ms -1000ms linear;
}

.fill:nth-child(3) {
  width: 20rem;
  height: 20rem;
  -webkit-transform: translate3d(-50%, -40%, 0);
          transform: translate3d(-50%, -40%, 0);
}

.fill:nth-child(3) .fillInner {
  -webkit-animation: fill 20000ms -7000ms linear;
          animation: fill 20000ms -7000ms linear;
}

.fill:nth-child(4) {
  width: 15rem;
  height: 15rem;
  -webkit-transform: translate3d(50%, 50%, 0);
          transform: translate3d(50%, 50%, 0);
}

.fill:nth-child(4) .fillInner {
  -webkit-animation: fill 2000ms -100ms linear;
          animation: fill 2000ms -100ms linear;
}

.fill:nth-child(5) {
  width: 30rem;
  height: 30rem;
  -webkit-transform: translate3d(50%, -100%, 0);
          transform: translate3d(50%, -100%, 0);
}

.fill:nth-child(5) .fillInner {
  -webkit-animation: fill 10000ms -1000ms linear;
          animation: fill 10000ms -1000ms linear;
}

.blink {
  width: 4vmax;
  height: 4vmax;
  margin: 1vmax;
  background: black;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 100%;
          border-radius: 100%;
}

.blink:before, .blink:after {
  content: '';
  position: absolute;
  z-index: 2;
  background: black;
  width: 100%;
  height: 50%;
  left: 0%;
}

.blink:before {
  top: 0;
  border-bottom: 1px solid white;
  -webkit-animation: blink-top cubic-bezier(0.645, 0.045, 0.355, 1) 1000ms infinite alternate;
          animation: blink-top cubic-bezier(0.645, 0.045, 0.355, 1) 1000ms infinite alternate;
}

@-webkit-keyframes blink-top {
  0% {
    -webkit-transform: translateY(-101%);
            transform: translateY(-101%);
  }
  70% {
    -webkit-transform: translateY(-101%);
            transform: translateY(-101%);
  }
  90% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes blink-top {
  0% {
    -webkit-transform: translateY(-101%);
            transform: translateY(-101%);
  }
  70% {
    -webkit-transform: translateY(-101%);
            transform: translateY(-101%);
  }
  90% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.blink:after {
  bottom: 0;
  border-top: 1px solid white;
  -webkit-animation: blink-bottom cubic-bezier(0.645, 0.045, 0.355, 1) 1000ms infinite alternate;
          animation: blink-bottom cubic-bezier(0.645, 0.045, 0.355, 1) 1000ms infinite alternate;
}

@-webkit-keyframes blink-bottom {
  0% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
  70% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
  90% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes blink-bottom {
  0% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
  70% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
  90% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

.blink:nth-child(1):before, .blink:nth-child(1):after {
  -webkit-animation-delay: -2000ms;
          animation-delay: -2000ms;
}

.blink:nth-child(2):before, .blink:nth-child(2):after {
  -webkit-animation-delay: -1030ms;
          animation-delay: -1030ms;
}

.blink:nth-child(3):before, .blink:nth-child(3):after {
  -webkit-animation-delay: -2100ms;
          animation-delay: -2100ms;
}

.blink:nth-child(4):before, .blink:nth-child(4):after {
  -webkit-animation-delay: -320ms;
          animation-delay: -320ms;
}

.blink:nth-child(5):before, .blink:nth-child(5):after {
  -webkit-animation-delay: -200ms;
          animation-delay: -200ms;
}

.blink:nth-child(6):before, .blink:nth-child(6):after {
  -webkit-animation-delay: -1830ms;
          animation-delay: -1830ms;
}

.blink:nth-child(7):before, .blink:nth-child(7):after {
  -webkit-animation-delay: -483ms;
          animation-delay: -483ms;
}

.blink:nth-child(8):before, .blink:nth-child(8):after {
  -webkit-animation-delay: -2800ms;
          animation-delay: -2800ms;
}

.blink:nth-child(9):before, .blink:nth-child(9):after {
  -webkit-animation-delay: -2990ms;
          animation-delay: -2990ms;
}

.blinkInner {
  width: 98%;
  height: 98%;
  position: relative;
  left: 1%;
  top: 1%;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  border: 1px solid white;
}

.blinkInner:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1vmax;
  height: 1vmax;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  background: white;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.bore {
  width: 3vmax;
  height: 3vmax;
  position: absolute;
  border: 1px solid white;
  opacity: 0;
  -webkit-animation: flash-bore 50ms steps(1) alternate forwards;
          animation: flash-bore 50ms steps(1) alternate forwards;
}

@-webkit-keyframes flash-bore {
  0% {
    background: white;
    opacity: 0;
  }
  1% {
    background: white;
    opacity: 1;
  }
  99% {
    background: white;
    opacity: 1;
  }
  100% {
    background: black;
    opacity: 1;
  }
}

@keyframes flash-bore {
  0% {
    background: white;
    opacity: 0;
  }
  1% {
    background: white;
    opacity: 1;
  }
  99% {
    background: white;
    opacity: 1;
  }
  100% {
    background: black;
    opacity: 1;
  }
}

.boreGroup {
  position: absolute;
}

.boreGroup:nth-child(1) {
  top: 5vh;
  left: 5vw;
}

.boreGroup:nth-child(2) {
  top: 20vh;
  left: 45vw;
}

.boreGroup:nth-child(3) {
  top: -5vh;
  left: 65vw;
}

.boreGroup:nth-child(4) {
  top: 75vh;
  left: 75vw;
}

.boreGroup:nth-child(5) {
  top: 50vh;
  left: 10vw;
}

.explosion {
  width: 20rem;
  height: 20rem;
  -webkit-border-radius: 0;
          border-radius: 0;
  -webkit-border-bottom-left-radius: 75% 25%;
          border-bottom-left-radius: 75% 25%;
  -webkit-border-bottom-right-radius: 75% 25%;
          border-bottom-right-radius: 75% 25%;
  position: absolute;
  top: -webkit-calc(50% - 10rem);
  top: calc(50% - 10rem);
  left: -webkit-calc(50% - 10rem);
  left: calc(50% - 10rem);
  overflow: hidden;
  background: black;
  -webkit-transform-origin: 50% 80%;
      -ms-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
  -webkit-animation: expand 400ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: expand 400ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.explosion:before {
  content: '';
  position: absolute;
  bottom: -5rem;
  width: 20rem;
  height: 20rem;
  background: white;
  -webkit-border-radius: 100%;
          border-radius: 100%;
}

.explosion:after {
  content: '';
  position: absolute;
  top: 0;
  width: 20rem;
  height: 20rem;
  -webkit-border-radius: 0;
          border-radius: 0;
  -webkit-border-bottom-left-radius: 75% 20%;
          border-bottom-left-radius: 75% 20%;
  -webkit-border-bottom-right-radius: 75% 20%;
          border-bottom-right-radius: 75% 20%;
  background: black;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: scaleY(0.5) scaleX(0.5) translate3d(0, -50%, 0);
          transform: scaleY(0.5) scaleX(0.5) translate3d(0, -50%, 0);
  -webkit-animation: recede 450ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
          animation: recede 450ms 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

@-webkit-keyframes recede {
  0% {
    -webkit-transform: scaleY(0.5) scaleX(1) translate3d(0, -50%, 0);
            transform: scaleY(0.5) scaleX(1) translate3d(0, -50%, 0);
  }
  100% {
    -webkit-transform: scaleY(1) scaleX(1) translatey(0);
            transform: scaleY(1) scaleX(1) translatey(0);
  }
}

@keyframes recede {
  0% {
    -webkit-transform: scaleY(0.5) scaleX(1) translate3d(0, -50%, 0);
            transform: scaleY(0.5) scaleX(1) translate3d(0, -50%, 0);
  }
  100% {
    -webkit-transform: scaleY(1) scaleX(1) translatey(0);
            transform: scaleY(1) scaleX(1) translatey(0);
  }
}

@-webkit-keyframes expand {
  0% {
    -webkit-transform: scale(0) translate3d(0, 0, 0);
            transform: scale(0) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(2.5) translate3d(0, 0, 0);
            transform: scale(2.5) translate3d(0, 0, 0);
  }
}

@keyframes expand {
  0% {
    -webkit-transform: scale(0) translate3d(0, 0, 0);
            transform: scale(0) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: scale(2.5) translate3d(0, 0, 0);
            transform: scale(2.5) translate3d(0, 0, 0);
  }
}

.egg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vmax;
  height: 10vmax;
  background: black;
  border: 1px solid white;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.swim {
  position: absolute;
}

@-webkit-keyframes swim-1 {
  0% {
    -webkit-transform: translate3d(15vmax, -5vmax, 0);
            transform: translate3d(15vmax, -5vmax, 0);
  }
  50% {
    -webkit-transform: translate3d(4.5vmax, -3vmax, 0);
            transform: translate3d(4.5vmax, -3vmax, 0);
  }
  100% {
    -webkit-transform: translate3d(5.5vmax, -11vmax, 0);
            transform: translate3d(5.5vmax, -11vmax, 0);
  }
}

@keyframes swim-1 {
  0% {
    -webkit-transform: translate3d(15vmax, -5vmax, 0);
            transform: translate3d(15vmax, -5vmax, 0);
  }
  50% {
    -webkit-transform: translate3d(4.5vmax, -3vmax, 0);
            transform: translate3d(4.5vmax, -3vmax, 0);
  }
  100% {
    -webkit-transform: translate3d(5.5vmax, -11vmax, 0);
            transform: translate3d(5.5vmax, -11vmax, 0);
  }
}

@-webkit-keyframes swim-2 {
  0% {
    -webkit-transform: translate3d(0vmax, 0vmax, 0);
            transform: translate3d(0vmax, 0vmax, 0);
  }
  20% {
    -webkit-transform: translate3d(5vmax, 3vmax, 0);
            transform: translate3d(5vmax, 3vmax, 0);
  }
  40% {
    -webkit-transform: translate3d(9vmax, 7vmax, 0);
            transform: translate3d(9vmax, 7vmax, 0);
  }
  60% {
    -webkit-transform: translate3d(12vmax, 12vmax, 0);
            transform: translate3d(12vmax, 12vmax, 0);
  }
  80% {
    -webkit-transform: translate3d(14vmax, 20vmax, 0);
            transform: translate3d(14vmax, 20vmax, 0);
  }
  100% {
    -webkit-transform: translate3d(15vmax, 26vmax, 0);
            transform: translate3d(15vmax, 26vmax, 0);
  }
}

@keyframes swim-2 {
  0% {
    -webkit-transform: translate3d(0vmax, 0vmax, 0);
            transform: translate3d(0vmax, 0vmax, 0);
  }
  20% {
    -webkit-transform: translate3d(5vmax, 3vmax, 0);
            transform: translate3d(5vmax, 3vmax, 0);
  }
  40% {
    -webkit-transform: translate3d(9vmax, 7vmax, 0);
            transform: translate3d(9vmax, 7vmax, 0);
  }
  60% {
    -webkit-transform: translate3d(12vmax, 12vmax, 0);
            transform: translate3d(12vmax, 12vmax, 0);
  }
  80% {
    -webkit-transform: translate3d(14vmax, 20vmax, 0);
            transform: translate3d(14vmax, 20vmax, 0);
  }
  100% {
    -webkit-transform: translate3d(15vmax, 26vmax, 0);
            transform: translate3d(15vmax, 26vmax, 0);
  }
}

.swim:nth-child(2) {
  top: 30%;
  left: 20%;
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
}

.swim:nth-child(2) .main, .swim:nth-child(2) .follow1, .swim:nth-child(2) .follow2 {
  -webkit-animation: swim-2 1500ms linear forwards;
          animation: swim-2 1500ms linear forwards;
}

.swim:nth-child(3) {
  top: 60%;
  left: 30%;
  -webkit-transform: rotate(70deg) scaleY(1);
      -ms-transform: rotate(70deg) scaleY(1);
          transform: rotate(70deg) scaleY(1);
}

.swim:nth-child(3) .main, .swim:nth-child(3) .follow1, .swim:nth-child(3) .follow2 {
  -webkit-animation: swim-2 1400ms linear forwards;
          animation: swim-2 1400ms linear forwards;
}

.swim:nth-child(4) {
  top: 50%;
  left: 50%;
}

.swim:nth-child(4) .main, .swim:nth-child(4) .follow1, .swim:nth-child(4) .follow2 {
  -webkit-animation: swim-1 1200ms linear forwards;
          animation: swim-1 1200ms linear forwards;
}

.swim:nth-child(5) {
  top: 80%;
  left: 75%;
  -webkit-transform: rotate(70deg) scaleY(-1) scaleX(-1);
      -ms-transform: rotate(70deg) scaleY(-1) scaleX(-1);
          transform: rotate(70deg) scaleY(-1) scaleX(-1);
}

.swim:nth-child(5) .main, .swim:nth-child(5) .follow1, .swim:nth-child(5) .follow2 {
  -webkit-animation: swim-2 1600ms linear forwards;
          animation: swim-2 1600ms linear forwards;
}

.swim:nth-child(6) {
  top: 10%;
  left: 10%;
  -webkit-transform: rotate(70deg) scaleY(-1);
      -ms-transform: rotate(70deg) scaleY(-1);
          transform: rotate(70deg) scaleY(-1);
}

.swim:nth-child(6) .main, .swim:nth-child(6) .follow1, .swim:nth-child(6) .follow2 {
  -webkit-animation: swim-2 1600ms linear forwards;
          animation: swim-2 1600ms linear forwards;
}

.swim .main, .swim .follow1, .swim .follow2 {
  position: absolute;
}

.swim .main {
  width: 3vmax;
  height: 3vmax;
  top: 0;
  left: 0;
  -webkit-animation-delay: -275ms !important;
          animation-delay: -275ms !important;
}

.swim .follow1 {
  width: 2vmax;
  height: 2vmax;
  top: 0.5vmax;
  left: 0.5vmax;
  -webkit-animation-delay: -105ms !important;
          animation-delay: -105ms !important;
}

.swim .follow2 {
  height: 1vmax;
  width: 1vmax;
  top: 1vmax;
  left: 1vmax;
}

.grid {
  width: 2vmax;
  height: 2vmax;
  margin: 7vh 5.2vw;
  background: black;
  border: 1px solid white;
  -webkit-animation: flash-grid 500ms steps(1);
          animation: flash-grid 500ms steps(1);
  -webkit-animation-delay: 100000000s;
          animation-delay: 100000000s;
}

@-webkit-keyframes flash-grid {
  0% {
    background: white;
  }
  20% {
    background: black;
  }
  100% {
    background: black;
  }
}

@keyframes flash-grid {
  0% {
    background: white;
  }
  20% {
    background: black;
  }
  100% {
    background: black;
  }
}

.grid:nth-child(31) {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.grid:nth-child(30) {
  -webkit-animation-delay: 50ms;
          animation-delay: 50ms;
}

.grid:nth-child(29) {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.grid:nth-child(28) {
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}

.grid:nth-child(20) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.grid:nth-child(21) {
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
}

.grid:nth-child(22) {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.grid:nth-child(14) {
  -webkit-animation-delay: 350ms;
          animation-delay: 350ms;
}

.grid:nth-child(13) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.grid:nth-child(12) {
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}

.grid:nth-child(11) {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.grid:nth-child(19) {
  -webkit-animation-delay: 550ms;
          animation-delay: 550ms;
}

.grid:nth-child(27) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.grid:nth-child(26) {
  -webkit-animation-delay: 650ms;
          animation-delay: 650ms;
}

.gridWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media screen and (orientation: portrait) {
  .grid {
    width: 3vmax;
    height: 3vmax;
    margin: 12vw 2vh;
  }
}

.orbit {
  width: 32%;
  height: 32%;
  position: absolute;
  top: -30%;
  left: -30%;
  -webkit-animation: orbit 6s -2s linear infinite;
          animation: orbit 6s -2s linear infinite;
}

.orbit--top {
  position: absolute;
  top: -webkit-calc(50% - 7.5vmax);
  top: calc(50% - 7.5vmax);
  left: -webkit-calc(50% - 7.5vmax);
  left: calc(50% - 7.5vmax);
  width: 15vmax;
  height: 15vmax;
  background: black;
}

.orbit--top > .orbit {
  width: 80%;
  height: 80%;
  top: -50%;
  left: -50%;
  -webkit-animation: orbit 5s -3s linear infinite;
          animation: orbit 5s -3s linear infinite;
}

.orbit--top:after {
  content: '';
  position: absolute;
  top: -45%;
  left: -45%;
  width: 190%;
  height: 190%;
  border: 1px solid white;
  -webkit-border-radius: 100%;
          border-radius: 100%;
}

@-webkit-keyframes orbit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes orbit {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.bashCenter, .bashWrap {
  position: absolute;
  top: -webkit-calc(50% - 3.5vmax);
  top: calc(50% - 3.5vmax);
  left: -webkit-calc(50% - 3.5vmax);
  left: calc(50% - 3.5vmax);
  width: 7vmax;
  height: 7vmax;
}

.bashCenter {
  background: black;
  border: 1px solid white;
}

.bashWrap:nth-child(2) {
  -webkit-transform: rotate(-50deg);
      -ms-transform: rotate(-50deg);
          transform: rotate(-50deg);
}

.bashWrap:nth-child(2) .bash {
  -webkit-animation-delay: 000ms;
          animation-delay: 000ms;
}

.bashWrap:nth-child(3) {
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.bashWrap:nth-child(3) .bash {
  -webkit-animation-delay: 70ms;
          animation-delay: 70ms;
}

.bashWrap:nth-child(4) {
  -webkit-transform: rotate(-130deg);
      -ms-transform: rotate(-130deg);
          transform: rotate(-130deg);
}

.bashWrap:nth-child(4) .bash {
  -webkit-animation-delay: 130ms;
          animation-delay: 130ms;
}

.bashWrap:nth-child(5) {
  -webkit-transform: rotate(50deg);
      -ms-transform: rotate(50deg);
          transform: rotate(50deg);
}

.bashWrap:nth-child(5) .bash {
  -webkit-animation-delay: 310ms;
          animation-delay: 310ms;
}

.bashWrap:nth-child(6) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.bashWrap:nth-child(6) .bash {
  -webkit-animation-delay: 370ms;
          animation-delay: 370ms;
}

.bashWrap:nth-child(7) {
  -webkit-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
          transform: rotate(130deg);
}

.bashWrap:nth-child(7) .bash {
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}

.bash {
  width: 7vmax;
  height: 7vmax;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: translateY(-20vmax);
      -ms-transform: translateY(-20vmax);
          transform: translateY(-20vmax);
  -webkit-animation: bash 800ms linear infinite;
          animation: bash 800ms linear infinite;
}

@-webkit-keyframes bash {
  0% {
    -webkit-transform: translateY(-20vmax);
            transform: translateY(-20vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  20% {
    -webkit-transform: translateY(-23vmax);
            transform: translateY(-23vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  30% {
    -webkit-transform: translateY(-7vmax);
            transform: translateY(-7vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  35% {
    -webkit-transform: translateY(-7vmax) scaleX(1.2) scaleY(0.8);
            transform: translateY(-7vmax) scaleX(1.2) scaleY(0.8);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  40% {
    -webkit-transform: translateY(-7vmax);
            transform: translateY(-7vmax);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: translateY(-20vmax);
            transform: translateY(-20vmax);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

@keyframes bash {
  0% {
    -webkit-transform: translateY(-20vmax);
            transform: translateY(-20vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  20% {
    -webkit-transform: translateY(-23vmax);
            transform: translateY(-23vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  30% {
    -webkit-transform: translateY(-7vmax);
            transform: translateY(-7vmax);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  35% {
    -webkit-transform: translateY(-7vmax) scaleX(1.2) scaleY(0.8);
            transform: translateY(-7vmax) scaleX(1.2) scaleY(0.8);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  40% {
    -webkit-transform: translateY(-7vmax);
            transform: translateY(-7vmax);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: translateY(-20vmax);
            transform: translateY(-20vmax);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
}

.split {
  background: white;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  width: 70%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 15%;
  -webkit-transform: scale(1.42);
      -ms-transform: scale(1.42);
          transform: scale(1.42);
}

@-webkit-keyframes split-left {
  0% {
    -webkit-transform: scale(1.42) translateX(0%) rotate(0deg);
            transform: scale(1.42) translateX(0%) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) translateX(-300%) rotate(75deg);
            transform: scale(1) translateX(-300%) rotate(75deg);
  }
}

@keyframes split-left {
  0% {
    -webkit-transform: scale(1.42) translateX(0%) rotate(0deg);
            transform: scale(1.42) translateX(0%) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) translateX(-300%) rotate(75deg);
            transform: scale(1) translateX(-300%) rotate(75deg);
  }
}

@-webkit-keyframes split-right {
  0% {
    -webkit-transform: scale(1.42) translateX(0%) rotate(0deg);
            transform: scale(1.42) translateX(0%) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) translateX(300%) rotate(75deg);
            transform: scale(1) translateX(300%) rotate(75deg);
  }
}

@keyframes split-right {
  0% {
    -webkit-transform: scale(1.42) translateX(0%) rotate(0deg);
            transform: scale(1.42) translateX(0%) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(1) translateX(300%) rotate(75deg);
            transform: scale(1) translateX(300%) rotate(75deg);
  }
}

.split:nth-child(1) {
  -webkit-animation: split-left 700ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: split-left 700ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.split:nth-child(2) {
  -webkit-animation: split-right 700ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: split-right 700ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.split .split {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.split .split .split {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.split .split .split .split {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.split .split .split .split .split {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.split .split .split .split .split .split {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.split .split .split .split .split .split .split {
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.split--top {
  position: absolute;
  top: -webkit-calc(50% - 3.5rem);
  top: calc(50% - 3.5rem);
  left: -webkit-calc(50% - 3.5rem);
  left: calc(50% - 3.5rem);
  width: 7rem;
  height: 7rem;
  background: transparent;
  -webkit-animation: split-top 2000ms linear forwards !important;
          animation: split-top 2000ms linear forwards !important;
}

@-webkit-keyframes split-top {
  0% {
    -webkit-transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
            transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(18deg) scale(1.4) translate3d(0, 0, 0);
            transform: rotate(18deg) scale(1.4) translate3d(0, 0, 0);
  }
}

@keyframes split-top {
  0% {
    -webkit-transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
            transform: rotate(0deg) scale(1) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(18deg) scale(1.4) translate3d(0, 0, 0);
            transform: rotate(18deg) scale(1.4) translate3d(0, 0, 0);
  }
}

.spaceOuter {
  -webkit-perspective: 80rem;
          perspective: 80rem;
}

.space {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateX(66deg);
          transform: rotateX(66deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.sun {
  position: absolute;
  width: 10rem;
  height: 10rem;
  top: -webkit-calc(50% - 5rem);
  top: calc(50% - 5rem);
  left: -webkit-calc(50% - 5rem);
  left: calc(50% - 5rem);
  -webkit-transform: rotateX(-66deg);
          transform: rotateX(-66deg);
}

.planet {
  position: absolute;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  border: 1px solid white;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: planet-spin 2s linear infinite;
          animation: planet-spin 2s linear infinite;
}

@-webkit-keyframes planet-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes planet-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.planet:after {
  content: '';
  position: absolute;
  bottom: -1rem;
  left: -webkit-calc(50% - 1rem);
  left: calc(50% - 1rem);
  width: 2rem;
  height: 2rem;
  background: white;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  -webkit-animation: face-front 2s linear infinite;
          animation: face-front 2s linear infinite;
}

@-webkit-keyframes face-front {
  0% {
    -webkit-transform: rotateX(132deg) rotateY(0deg);
            transform: rotateX(132deg) rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateX(99deg) rotateY(-90deg);
            transform: rotateX(99deg) rotateY(-90deg);
  }
  50% {
    -webkit-transform: rotateX(66deg) rotateY(-180deg);
            transform: rotateX(66deg) rotateY(-180deg);
  }
  75% {
    -webkit-transform: rotateX(99deg) rotateY(-270deg);
            transform: rotateX(99deg) rotateY(-270deg);
  }
  100% {
    -webkit-transform: rotateX(132deg) rotateY(-360deg);
            transform: rotateX(132deg) rotateY(-360deg);
  }
}

@keyframes face-front {
  0% {
    -webkit-transform: rotateX(132deg) rotateY(0deg);
            transform: rotateX(132deg) rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateX(99deg) rotateY(-90deg);
            transform: rotateX(99deg) rotateY(-90deg);
  }
  50% {
    -webkit-transform: rotateX(66deg) rotateY(-180deg);
            transform: rotateX(66deg) rotateY(-180deg);
  }
  75% {
    -webkit-transform: rotateX(99deg) rotateY(-270deg);
            transform: rotateX(99deg) rotateY(-270deg);
  }
  100% {
    -webkit-transform: rotateX(132deg) rotateY(-360deg);
            transform: rotateX(132deg) rotateY(-360deg);
  }
}

.planet:nth-child(2) {
  width: 20rem;
  height: 20rem;
  top: -webkit-calc(50% - 10rem);
  top: calc(50% - 10rem);
  left: -webkit-calc(50% - 10rem);
  left: calc(50% - 10rem);
  -webkit-animation-delay: -2000ms;
          animation-delay: -2000ms;
}

.planet:nth-child(2):after {
  -webkit-animation-delay: -2000ms;
          animation-delay: -2000ms;
}

.planet:nth-child(3) {
  width: 30rem;
  height: 30rem;
  top: -webkit-calc(50% - 15rem);
  top: calc(50% - 15rem);
  left: -webkit-calc(50% - 15rem);
  left: calc(50% - 15rem);
  -webkit-animation-delay: -1800ms;
          animation-delay: -1800ms;
}

.planet:nth-child(3):after {
  -webkit-animation-delay: -1800ms;
          animation-delay: -1800ms;
}

.planet:nth-child(4) {
  width: 40rem;
  height: 40rem;
  top: -webkit-calc(50% - 20rem);
  top: calc(50% - 20rem);
  left: -webkit-calc(50% - 20rem);
  left: calc(50% - 20rem);
  -webkit-animation-delay: -1600ms;
          animation-delay: -1600ms;
}

.planet:nth-child(4):after {
  -webkit-animation-delay: -1600ms;
          animation-delay: -1600ms;
}

.planet:nth-child(5) {
  width: 50rem;
  height: 50rem;
  top: -webkit-calc(50% - 25rem);
  top: calc(50% - 25rem);
  left: -webkit-calc(50% - 25rem);
  left: calc(50% - 25rem);
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}

.planet:nth-child(5):after {
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}

.planet:nth-child(6) {
  width: 60rem;
  height: 60rem;
  top: -webkit-calc(50% - 30rem);
  top: calc(50% - 30rem);
  left: -webkit-calc(50% - 30rem);
  left: calc(50% - 30rem);
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}

.planet:nth-child(6):after {
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}

body {
  background: black;
}

.ringWrap, .ring, .ringGroup {
  position: absolute;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.ringWrap {
  top: 50%;
  left: 50%;
  -webkit-animation: spin 18s linear infinite;
          animation: spin 18s linear infinite;
}

.ringGroup {
  width: 25vmax;
  height: 25vmax;
  top: -12.5vmax;
  left: -12.5vmax;
}

.ringGroup:nth-child(1) {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.ringGroup:nth-child(2) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.ringGroup:nth-child(3) {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

.ringGroup:nth-child(4) {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.ring {
  width: 25vmax;
  height: 25vmax;
  -webkit-border-radius: 25vmax;
          border-radius: 25vmax;
  border: 1px solid white;
  -webkit-animation: rotate 3s linear infinite;
          animation: rotate 3s linear infinite;
}

.ring:nth-child(1) {
  -webkit-animation: rotate 13s linear infinite;
          animation: rotate 13s linear infinite;
  -webkit-animation-delay: -4.125s;
          animation-delay: -4.125s;
}

.ring:nth-child(2) {
  -webkit-animation: rotate 23s linear infinite;
          animation: rotate 23s linear infinite;
  -webkit-animation-delay: -15.75s;
          animation-delay: -15.75s;
}

.ring:nth-child(3) {
  -webkit-animation: rotate 33s linear infinite;
          animation: rotate 33s linear infinite;
  -webkit-animation-delay: -34.875s;
          animation-delay: -34.875s;
}

.ring:nth-child(4) {
  -webkit-animation: rotate 43s linear infinite;
          animation: rotate 43s linear infinite;
  -webkit-animation-delay: -61.5s;
          animation-delay: -61.5s;
}

.ring:nth-child(5) {
  -webkit-animation: rotate 53s linear infinite;
          animation: rotate 53s linear infinite;
  -webkit-animation-delay: -95.625s;
          animation-delay: -95.625s;
}

.ring:nth-child(6) {
  -webkit-animation: rotate 63s linear infinite;
          animation: rotate 63s linear infinite;
  -webkit-animation-delay: -137.25s;
          animation-delay: -137.25s;
}

.ring:nth-child(7) {
  -webkit-animation: rotate 73s linear infinite;
          animation: rotate 73s linear infinite;
  -webkit-animation-delay: -186.375s;
          animation-delay: -186.375s;
}

.ring:nth-child(8) {
  -webkit-animation: rotate 83s linear infinite;
          animation: rotate 83s linear infinite;
  -webkit-animation-delay: -243s;
          animation-delay: -243s;
}

body {
  background: black;
}

.humanWrap, .humanGroup, .human {
  position: absolute;
}

.humanWrap {
  top: 50%;
  left: 50%;
  -webkit-animation: spin 19900ms linear infinite;
          animation: spin 19900ms linear infinite;
}

.humanWrap:after {
  position: absolute;
  top: -5vmax;
  left: -5vmax;
  width: 10vmax;
  height: 10vmax;
  -webkit-border-radius: 10vmax;
          border-radius: 10vmax;
  background: black;
  border: 1px solid white;
}

.humanGroup {
  width: 10.05vmax;
  height: 32.7vmax;
  top: -16.35vmax;
  left: -5.025vmax;
}

.humanGroup:nth-child(1) {
  -webkit-transform: rotate(72deg);
      -ms-transform: rotate(72deg);
          transform: rotate(72deg);
}

.humanGroup:nth-child(2) {
  -webkit-transform: rotate(144deg);
      -ms-transform: rotate(144deg);
          transform: rotate(144deg);
}

.humanGroup:nth-child(3) {
  -webkit-transform: rotate(216deg);
      -ms-transform: rotate(216deg);
          transform: rotate(216deg);
}

.humanGroup:nth-child(4) {
  -webkit-transform: rotate(288deg);
      -ms-transform: rotate(288deg);
          transform: rotate(288deg);
}

.humanGroup:nth-child(5) {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.human {
  width: 100%;
  height: 100%;
  -webkit-animation: rotate 1990ms linear infinite;
          animation: rotate 1990ms linear infinite;
}

.human:nth-child(1) {
  -webkit-animation: rotate 1990ms linear infinite;
          animation: rotate 1990ms linear infinite;
  -webkit-animation-delay: -497.5ms;
          animation-delay: -497.5ms;
}

.human:nth-child(2) {
  -webkit-animation: rotate 3980ms linear infinite;
          animation: rotate 3980ms linear infinite;
  -webkit-animation-delay: -995ms;
          animation-delay: -995ms;
}

.human:nth-child(3) {
  -webkit-animation: rotate 5970ms linear infinite;
          animation: rotate 5970ms linear infinite;
  -webkit-animation-delay: -1492.5ms;
          animation-delay: -1492.5ms;
}

.human:nth-child(4) {
  -webkit-animation: rotate 7960ms linear infinite;
          animation: rotate 7960ms linear infinite;
  -webkit-animation-delay: -1990ms;
          animation-delay: -1990ms;
}

.holding {
  height: 36rem;
  width: auto;
  display: inline-block;
  margin: 0 -1.5rem;
  -webkit-animation: appear 600ms steps(1);
          animation: appear 600ms steps(1);
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.holding:nth-child(4) {
  -webkit-animation-delay: -150ms;
          animation-delay: -150ms;
}

.holding:nth-child(3), .holding:nth-child(5) {
  -webkit-animation-delay: -100ms;
          animation-delay: -100ms;
}

.holding:nth-child(2), .holding:nth-child(6) {
  -webkit-animation-delay: -50ms;
          animation-delay: -50ms;
}

.holding:nth-child(1), .holding:nth-child(7) {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.breed, .worm {
  position: absolute;
  height: 15vmax;
  width: auto;
  opacity: 0;
  -webkit-animation: appear 100ms steps(2) forwards;
          animation: appear 100ms steps(2) forwards;
}

.worm {
  height: 30vmax;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: flash 300ms linear forwards;
          animation: flash 300ms linear forwards;
}

@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.tunnel {
  height: 70%;
  width: 70%;
  position: relative;
  top: 15%;
  left: 15%;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  border: 1px solid white;
}

.tunnel--top {
  position: absolute;
  height: 100vmax;
  width: 100vmax;
  top: -webkit-calc(50% - 50vmax);
  top: calc(50% - 50vmax);
  left: -webkit-calc(50% - 50vmax);
  left: calc(50% - 50vmax);
  -webkit-animation: zoom 1200ms linear;
          animation: zoom 1200ms linear;
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}

.tunnel:after {
  content: '';
  position: absolute;
  top: 14%;
  left: 7%;
  width: 86%;
  height: 86%;
  border: 1px solid white;
}

.hover {
  height: auto;
  width: 10vmax;
  position: absolute;
  left: -5vmax;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotateY(0) translate3d(0%, -50%, 0) rotate(180deg);
            transform: rotateY(0) translate3d(0%, -50%, 0) rotate(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg) translate3d(0%, -50%, 0) rotate(180deg);
            transform: rotateY(180deg) translate3d(0%, -50%, 0) rotate(180deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotateY(0) translate3d(0%, -50%, 0) rotate(180deg);
            transform: rotateY(0) translate3d(0%, -50%, 0) rotate(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg) translate3d(0%, -50%, 0) rotate(180deg);
            transform: rotateY(180deg) translate3d(0%, -50%, 0) rotate(180deg);
  }
}

.hover:nth-child(1) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -918.46154ms;
          animation-delay: -918.46154ms;
}

.hover:nth-child(2) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -1836.92308ms;
          animation-delay: -1836.92308ms;
}

.hover:nth-child(3) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -2755.38462ms;
          animation-delay: -2755.38462ms;
}

.hover:nth-child(4) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -3673.84615ms;
          animation-delay: -3673.84615ms;
}

.hover:nth-child(5) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -4592.30769ms;
          animation-delay: -4592.30769ms;
}

.hover:nth-child(6) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -5510.76923ms;
          animation-delay: -5510.76923ms;
}

.hover:nth-child(7) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -6429.23077ms;
          animation-delay: -6429.23077ms;
}

.hover:nth-child(8) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -7347.69231ms;
          animation-delay: -7347.69231ms;
}

.hover:nth-child(9) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -8266.15385ms;
          animation-delay: -8266.15385ms;
}

.hover:nth-child(10) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -9184.61538ms;
          animation-delay: -9184.61538ms;
}

.hover:nth-child(11) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -10103.07692ms;
          animation-delay: -10103.07692ms;
}

.hover:nth-child(12) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -11021.53846ms;
          animation-delay: -11021.53846ms;
}

.hover:nth-child(13) {
  -webkit-animation: rotate-center 5970ms linear infinite alternate;
          animation: rotate-center 5970ms linear infinite alternate;
  -webkit-animation-delay: -11940ms;
          animation-delay: -11940ms;
}

.hoverGroup {
  position: absolute;
  height: 26vmax;
  top: 50%;
  left: 50%;
}

.hoverGroup:nth-child(1) {
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.hoverGroup:nth-child(2) {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(180deg);
          transform: translate3d(-50%, -50%, 0) rotate(180deg);
}

.kami, .dai {
  position: absolute;
  top: -webkit-calc(50% - 15vmax);
  top: calc(50% - 15vmax);
  left: 0%;
  width: 100%;
  text-align: center;
  line-height: 0.9;
  height: 30vmax;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

@-webkit-keyframes rotate-center-x {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

@keyframes rotate-center-x {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

.kami:nth-child(2) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -884.44444ms;
          animation-delay: -884.44444ms;
}

.kami:nth-child(3) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -1326.66667ms;
          animation-delay: -1326.66667ms;
}

.kami:nth-child(4) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -1768.88889ms;
          animation-delay: -1768.88889ms;
}

.kami:nth-child(5) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -2211.11111ms;
          animation-delay: -2211.11111ms;
}

.kami:nth-child(6) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -2653.33333ms;
          animation-delay: -2653.33333ms;
}

.kami:nth-child(7) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -3095.55556ms;
          animation-delay: -3095.55556ms;
}

.kami:nth-child(8) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -3537.77778ms;
          animation-delay: -3537.77778ms;
}

.kami:nth-child(9) {
  -webkit-animation: rotate-center-x 3980ms linear infinite alternate;
          animation: rotate-center-x 3980ms linear infinite alternate;
  -webkit-animation-delay: -3980ms;
          animation-delay: -3980ms;
}

.dai:nth-child(1) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -73.7037ms;
          animation-delay: -73.7037ms;
}

.dai:nth-child(2) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -147.40741ms;
          animation-delay: -147.40741ms;
}

.dai:nth-child(3) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -221.11111ms;
          animation-delay: -221.11111ms;
}

.dai:nth-child(4) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -294.81481ms;
          animation-delay: -294.81481ms;
}

.dai:nth-child(5) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -368.51852ms;
          animation-delay: -368.51852ms;
}

.dai:nth-child(6) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -442.22222ms;
          animation-delay: -442.22222ms;
}

.dai:nth-child(7) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -515.92593ms;
          animation-delay: -515.92593ms;
}

.dai:nth-child(8) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -589.62963ms;
          animation-delay: -589.62963ms;
}

.dai:nth-child(9) {
  -webkit-animation: rotate 1990ms linear infinite alternate;
          animation: rotate 1990ms linear infinite alternate;
  -webkit-animation-delay: -663.33333ms;
          animation-delay: -663.33333ms;
}

.dai--tunnel {
  height: 20vmax;
  width: 20vmax;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.sephirothFrame {
  height: 45vmax;
}

.sephirothGroup {
  width: 6vmax;
  height: 6vmax;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  background: black;
  border: 1px solid white;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.sephirothGroup:nth-child(2) {
  top: 0;
  left: -webkit-calc(50% - 3vmax);
  left: calc(50% - 3vmax);
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.sephirothGroup:nth-child(3) {
  top: 14.2%;
  left: -webkit-calc(50% - 11.35vmax);
  left: calc(50% - 11.35vmax);
}

.sephirothGroup:nth-child(4) {
  top: 14.2%;
  left: -webkit-calc(50% + 5.35vmax);
  left: calc(50% + 5.35vmax);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.sephirothGroup:nth-child(5) {
  top: 35.1%;
  left: -webkit-calc(50% - 11.35vmax);
  left: calc(50% - 11.35vmax);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.sephirothGroup:nth-child(6) {
  top: 35.1%;
  left: -webkit-calc(50% + 5.35vmax);
  left: calc(50% + 5.35vmax);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.sephirothGroup:nth-child(7) {
  top: 59.7%;
  left: -webkit-calc(50% - 11.35vmax);
  left: calc(50% - 11.35vmax);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.sephirothGroup:nth-child(8) {
  top: 59.7%;
  left: -webkit-calc(50% + 5.35vmax);
  left: calc(50% + 5.35vmax);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.sephirothGroup:nth-child(9) {
  top: 49.7%;
  left: -webkit-calc(50% - 3vmax);
  left: calc(50% - 3vmax);
}

.sephirothGroup:nth-child(10) {
  top: 68.7%;
  left: -webkit-calc(50% - 3vmax);
  left: calc(50% - 3vmax);
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}

.sephirothGroup:nth-child(11) {
  top: 86.5%;
  left: -webkit-calc(50% - 3vmax);
  left: calc(50% - 3vmax);
}

.sephiroth {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 100%;
          border-radius: 100%;
  border: 1px solid white;
}

.sephiroth:nth-child(1) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -497.5ms;
          animation-delay: -497.5ms;
}

.sephiroth:nth-child(2) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -995ms;
          animation-delay: -995ms;
}

.sephiroth:nth-child(3) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -1492.5ms;
          animation-delay: -1492.5ms;
}

.sephiroth:nth-child(4) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -1990ms;
          animation-delay: -1990ms;
}

.sephiroth:nth-child(5) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -2487.5ms;
          animation-delay: -2487.5ms;
}

.sephiroth:nth-child(6) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -2985ms;
          animation-delay: -2985ms;
}

.sephiroth:nth-child(7) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -3482.5ms;
          animation-delay: -3482.5ms;
}

.sephiroth:nth-child(8) {
  -webkit-animation: rotate-center-x 3980ms linear infinite;
          animation: rotate-center-x 3980ms linear infinite;
  -webkit-animation-delay: -3980ms;
          animation-delay: -3980ms;
}

.sineWrap {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 50%;
  left: -webkit-calc(50% - 20vmax);
  left: calc(50% - 20vmax);
  width: 40vmax;
  height: 40vmax;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transform: rotateX(30deg);
          transform: rotateX(30deg);
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-perspective: 100vmax;
          perspective: 100vmax;
}

.sineWrap1 {
  -webkit-transform: rotateX(45deg) rotateZ(90deg);
          transform: rotateX(45deg) rotateZ(90deg);
}

.sine {
  width: 1px;
  height: 10vmax;
  background: white;
  display: inline-block;
  -webkit-transform-origin: 50% 0%;
      -ms-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: sine 1000ms infinite cubic-bezier(0.645, 0.045, 0.355, 1) alternate;
          animation: sine 1000ms infinite cubic-bezier(0.645, 0.045, 0.355, 1) alternate;
}

@-webkit-keyframes sine {
  0% {
    -webkit-transform: rotateZ(160deg);
            transform: rotateZ(160deg);
  }
  100% {
    -webkit-transform: rotateZ(20deg);
            transform: rotateZ(20deg);
  }
}

@keyframes sine {
  0% {
    -webkit-transform: rotateZ(160deg);
            transform: rotateZ(160deg);
  }
  100% {
    -webkit-transform: rotateZ(20deg);
            transform: rotateZ(20deg);
  }
}

.sine2 {
  -webkit-animation: sine2 1500ms infinite linear;
          animation: sine2 1500ms infinite linear;
}

@-webkit-keyframes sine2 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
  }
}

@keyframes sine2 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
            transform: rotateX(-360deg);
  }
}

.button {
  font-size: 4rem;
  display: inline-block;
  margin: 4rem 2rem 0;
  padding: 1rem 2rem;
  width: 20rem;
  text-align: center;
  border: 1px solid white;
}

@-webkit-keyframes button-click {
  0% {
    background: white;
    color: black;
  }
  100% {
    background: black;
    color: white;
  }
}

@keyframes button-click {
  0% {
    background: white;
    color: black;
  }
  100% {
    background: black;
    color: white;
  }
}

.button:nth-child(2) {
  -webkit-animation: button-click 800ms 400ms steps(1) forwards;
          animation: button-click 800ms 400ms steps(1) forwards;
}

.mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: mouse 400ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: mouse 400ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@-webkit-keyframes mouse {
  0% {
    -webkit-transform: translate3d(0rem, 10rem, 0);
            transform: translate3d(0rem, 10rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-7rem, 6rem, 0);
            transform: translate3d(-7rem, 6rem, 0);
  }
}

@keyframes mouse {
  0% {
    -webkit-transform: translate3d(0rem, 10rem, 0);
            transform: translate3d(0rem, 10rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-7rem, 6rem, 0);
            transform: translate3d(-7rem, 6rem, 0);
  }
}

.window {
  width: 30rem;
  height: 20rem;
  border: 1px solid white;
  background: black;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  -webkit-animation: window-appear 1ms steps(1) forwards;
          animation: window-appear 1ms steps(1) forwards;
}

.window:before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  height: 1.5rem;
  width: -webkit-calc(100% - 1rem);
  width: calc(100% - 1rem);
  background: white;
  background-image: url("/images/window-buttons.svg");
  background-size: auto 1rem;
  background-position: 0.5rem center;
  background-repeat: no-repeat;
}

@-webkit-keyframes window-appear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes window-appear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}