@font-face {
  font-family: FuturaPT;
  src: url(fonts/FuturaPTBook.otf);
}

@font-face {
  font-family: FuturaPTLight;
  src: url(fonts/FuturaPTLight.otf);
}

@font-face {
  font-family: FuturaPT-Obl;
  src: url(fonts/FuturaPTBookOblique.otf);
}

@font-face {
  font-family: FuturaPTLight-Obl;
  src: url(fonts/FuturaPTLightOblique.otf);
}

html {
  height: 100vh;
  width: 100vw;
}

::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

body {
  background: #000;

  height: 100%;
  width: 100%;

  overflow-y: hidden;
}

.landing-background {
  background-image: url('/img/background.jpeg');
  background-size: 86% auto;
  background-position: left top;
  background-repeat: no-repeat;

  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  display: none;
}

.question-backgrounds {
  height: 100%;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;

  display: none;
}

.question-background {
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;

  overflow: hidden;
}

.glitch-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transform: translate3d(0, 0, 0);
  background-blend-mode: none;

  -moz-animation: 80s normal forwards zoomIn ease-in infinite;
  -webkit-animation: 80s normal forwards zoomIn ease-in infinite;
  animation: 80s normal forwards zoomIn ease-in infinite;
}

.glitch1-img {
  background: transparent url(/img/rosey-024.png) no-repeat bottom center;
}

.glitch2-img {
  background: transparent url(/img/rosey-022.png) no-repeat center;
}

.glitch3-img {
  background: transparent url(/img/rosey-012.png) no-repeat center;
}

@media (max-aspect-ratio: 8/5) {
  .glitch1-img, .glitch2-img, .glitch3-img {
    background-size: auto 100vh;
  }
}

@media (min-aspect-ratio: 8/5) {
  .glitch1-img, .glitch2-img, .glitch3-img {
    background-size: 100vw auto;
  }
}

.glitch-img:nth-child(n+2) {
  opacity: 0
}

.question-background .glitch-img:nth-child(n+2) {
  animation-duration: 10s;
  animation-delay: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite
}

.question-background .glitch-img:nth-child(2) {
  background-color: transparent;
  background-blend-mode: none;
  animation-name: glitch-anim-1
}

.question-background .glitch-img:nth-child(3) {
  background-color: transparent;
  background-blend-mode: none;
  animation-name: glitch-anim-2
}

.question-background .glitch-img:nth-child(4) {
  background-color: transparent;
  background-blend-mode: none;
  animation-name: glitch-anim-3
}

.video-background {
  width: 100vw;
  height: 100vh;

  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;

  display: none;

  z-index: -99;
}

.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-background video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-background video {
    width: 300%;
    left: -100%;
  }
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);
}

.background-overlay-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.6);
}

.main {
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  overflow-x: hidden;
  overflow-y: scroll;
}

.header {
  margin-top: 32px;
  margin-left: 32px;

  width: calc(100vw - 64px);

  font-family: FuturaPT, sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 5px;
  color: #1a1a1a;

  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  display: flex;
}

.header div {
  width: 100%;
  vertical-align: text-top;
}

.header .left {
  text-align: left;
}

.header .center {
  text-align: center;
  font-size: 24px;
}

.header .left-back {
  display: none;
}

.header .center:hover, .header .left:hover, .header .left-back:hover {
  cursor: pointer;
}

.header .right {
  text-align: right;
}

.social-icon {
  height: 16px;
  width: auto;
  margin-left: 6px;
}

.header .process-close-icon {
  display: none;
}

.header .process-close-icon:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.landing-content {
  position: absolute;
  top: 60%;
  height: 40%;

  width: 550px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.landing-content-title {
  font-family: FuturaPTLight, sans-serif;
  font-size: 48px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: 8px;
  color: #fafafa;
}

.landing-content-text {
  font-family: FuturaPT, sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fafafa;

  margin-top: 16px;
}

.landing-content-text-title {
  font-weight: bold;
  font-style: italic;
}

.landing-content-button {
  font-family: FuturaPT, sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 5px;
  color: #b9e4fd;

  margin-top: 32px;
}

.landing-content-footer {
  font-family: FuturaPT, sans-serif;
  font-size: 8px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 2px;
  color: #fafafa;

  position: absolute;
  bottom: 16px;
  width: 100%;
}

.landing-content-footer-platoon {
  text-decoration: underline;
}

.landing-content-button, .landing-content-footer-platoon:hover, .social-icon:hover {
  cursor: pointer;
}


.process-content {
  width: 640px;

  position: absolute;
  left: 124px;
  top: calc(50% - 219px);

  display: none;
}

.process-question {
  font-family: FuturaPTLight, sans-serif;
  font-size: 48px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: normal;
  color: #fafafa;

  margin-bottom: 16px;
}

.process-answers .answer {
  font-family: FuturaPT, sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  color: #fafafa;

  margin-top: 48px;
  width: auto;
}

.answer-text {
  display: inline-flex;
  height: 32px;
}

.process-answers span:hover {
  cursor: pointer;
}

.process-answers div img {
  display: none;
  margin-right: 10px;
  padding-top: 2px;
  width: 15px;
  height: 24px;
}

.answer-line {
  width: 16px;
  margin-top: 8px;
  border: solid 1px #b9e4fd;
  visibility: hidden;
}

.process-page-indicator {
  height: 1px;
  display: inline-flex;

  margin-top: 64px;
}

.process-page-indicator div {
  width: 16px;
  margin-right: 8px;
  background-color: rgba(250, 250, 250, 0.5);
  border: solid 1px rgba(250, 250, 250, 0.5);
}

.back-button-active {
  font-family: FuturaPT, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  letter-spacing: 3px;
  color: #b9e4fd;
}

.back-button-active:hover {
  cursor: pointer;
}

.process-footer {
  position: absolute;
  bottom: 32px;
  width: 100%;
  text-align: center;

  font-family: FuturaPT, sans-serif;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 5px;
  color: #fafafa;

  display: none;
}

/**RESULT **/
.result-content {
  width: 1222px;
  height: calc(100vh - (50vh - 250px));

  position: absolute;
  left: calc(50% - 611px);
  top: calc(50% - 250px);

  display: none;
}


.result-content .left {
  width: 670px;
}

.result-content .right {
  width: 500px;
  height: 500px;

  margin-left: 52px;
}

.result-social-icons {
  display: none;
}

.result-footer {
  position: absolute;
  bottom: 16px;
  width: 100%;
  text-align: center;

  font-family: FuturaPT, sans-serif;
  font-size: 8px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 2px;
  color: #fafafa;

  display: none;
}

.title-sub {
  font-family: FuturaPT, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff;
}

.title-main {
  font-family: FuturaPTLight, sans-serif;
  font-size: 48px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 8px;
  color: #fafafa;

  margin-top: 16px;
}

.title-main-2 {
  font-family: FuturaPTLight-Obl, sans-serif;
}

.description {
  font-family: FuturaPT, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  color: #fafafa;

  margin-top: 16px;
}

.share-brainwave-link, .stream-album-link, .enter-experience-link {
  font-family: FuturaPT, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  letter-spacing: 3px;
  color: #b9e4fd;
}

.share-brainwave-link, .enter-experience-link {
  margin-top: 24px;
}

.stream-album-link {
  margin-top: 16px;
}

.share-brainwave-link:hover, .enter-experience-link:hover, .stream-album-link:hover {
  cursor: pointer;
}

.link-arrow {
  height: 12px;
  width: auto;
  margin-left: 4px;
}

.message-sub {
  font-family: FuturaPT, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff;

  margin-top: 64px;
}

.message1, .message2 {
  font-family: FuturaPT-Obl, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  color: #fafafa;

  margin-top: 16px;
}

/** SPEAKER **/
.speaker-button {
  position: fixed;
  right: 32px;
  bottom: 32px;

  display: none;
}

.speaker-button:hover {
  cursor: pointer;
}

/** SHARE ACTION MODAL **/
.share-action-content {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

.share-action-modal {
  background-color: #1F1F1F;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);

  padding: 32px 24px;
}


.share-action-modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 16px;
  padding-right: 16px;
}

.share-actions {
  text-align: center;

  display: inline-flex;
}

.share-action {
  font-family: FuturaPT, sans-serif;
  font-size: 10px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff;

  position: relative;

  height: 42px;
  width: 80px;
}

.share-actions a {
  width: 80px;
  margin-right: 24px;
}

.share-actions a:nth-child(4) {
  margin-right: 0;
}

.share-action img {
  height: 16px;
  width: auto;
}

.share-action-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;

  white-space: nowrap;
}

.share-action-modal-close:hover, .share-action:hover {
  cursor: pointer;
}


@media (hover: hover) and (pointer: fine) {
}

/*Medium devices (tablets, 768px and up)*/
/*1222px + 64px = 1286px: max width of result-container */
@media (min-width: 768px) and (max-width: 1285.98px) {
  .result-content {
    width: calc(100vw - 64px);

    height: calc(100vh - (50vh - 250px));

    position: absolute;
    left: 32px;
    top: calc(50% - 250px);
  }

  .result-content .right {
    width: calc(45vw - 32px);
    margin-left: 32px;
  }

  .album-cover {
    width: calc(45vw - 32px);
    height: auto;
  }
}

/*800px: max width and left of process container */
@media (min-width: 768px) and (max-width: 800px) {
  .process-content {
    left: 32px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {

  .landing-background {
    background-size: auto 80%;
    background-position: left 62% top;
  }

  .video-background video {
    left: -50%;
    width: auto;
    height: 100%;
  }

  .header {
    margin-top: 16px;
    margin-left: 16px;
    width: calc(100vw - 32px);
    display: block;
  }

  .header div {
    text-align: center;
  }

  .header .left {
    text-align: center;

    font-family: FuturaPT, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 5.33px;
    color: #1a1a1a;
  }

  .header .left-back {
    display: none;

    font-family: FuturaPT, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.86;
    letter-spacing: 2.63px;
    color: #b9e4fd;

    position: absolute;
    top: 12px;
    left: 16px;
    width: auto;
    margin-top: 0;
  }

  .header .center {
    text-align: center;

    font-family: FuturaPT, sans-serif;
    font-size: 13.3px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 3.33px;
    color: #1a1a1a;

    margin-top: 12px;
  }

  .header .right {
    text-align: center;
  }

  .header-right-small-landing {
    position: absolute;
    bottom: 42px;
    left: 0;
    z-index: 99;
  }

  .social-icon {
    width: auto;
    height: 16px;
  }

  .main {
    overflow-y: auto;
  }

  .header-right-small-process {
    position: absolute;
    top: 8px;
    right: 16px;
    left: auto;
    bottom: auto;
  }

  .landing-content {
    width: calc(100vw - 32px);
    left: 16px;
    transform: translateX(0);
    top: 50%;
    height: 50%;
  }

  .landing-content-text {
    margin-top: 8px;
  }

  .process-content {
    width: calc(100vw - 32px);
    top: 80px;
    left: 16px;

    height: calc(100% - 80px);
  }

  .process-question {
    font-size: 40px;
  }

  .answer-text {
    height: auto;
  }

  .process-page-indicator {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    position: absolute;
    bottom: 64px;
  }

  .process-footer {
    font-size: 13.3px;
    line-height: 1.2;
    letter-spacing: 3.33px;

    bottom: 16px;
  }

  .result-content {
    width: calc(100vw - 32px);
    left: 0;
    top: 120px;
    position: absolute;
  }

  .result-content .right {
    position: absolute;
    top: 0;
    left: 16px;
    margin-left: 0;

    width: calc(100vw - 32px);
    height: calc(100vw - 32px);
  }

  .album-cover {
    width: calc(100vw - 32px);
    height: calc(100vw - 32px);
  }

  .result-content .left {
    position: absolute;
    top: calc(100vw + 16px);
    left: 16px;
    width: calc(100vw - 32px);
  }

  .title-sub, .message-sub {
    font-size: 12px;

    line-height: 1.33;
    letter-spacing: 2px;

  }

  .title-main {
    font-size: 40px;
  }

  .message-sub {
    margin-top: 48px;
  }

  .result-social-icons {
    width: 100%;
    text-align: center;
    margin-top: 48px;

    display: block;
  }

  .result-social-icons .social-icon {
    margin-left: 6px;
    margin-right: 6px;
  }

  .result-footer {
    position: relative;
    bottom: auto;
    margin-top: 24px;
    margin-bottom: 16px;
  }

  /** SPEAKER **/
  .speaker-button {
    right: 16px;
    bottom: 42px;
  }

  /** SHARE ACTIONS **/
  .share-action-modal {
    padding: 32px 24px;
  }

  .share-actions {
    width: 184px;

    display: flex;
    flex-wrap: wrap;
  }

  .share-action {
    margin: 0;
  }

  .share-actions a {
    margin: 0;
    width: 80px;
  }

  .share-actions a:nth-child(2) {
    margin-left: 24px;
  }

  .share-actions a:nth-child(3) {
    margin-top: 24px;
  }

  .share-actions a:nth-child(4) {
    margin-top: 24px;
    margin-left: 24px;
  }


}

/* X-Small devices */
@media (max-width: 320px) {
}

@media (min-width: 768px) and (max-width: 800px) and (max-height: 800px) {
  .main {
    position: absolute;
    min-height: 900px;

    overflow-y: hidden;
  }

  .landing-background {
    position: absolute;
    height: 700px;
  }

  .result-content {
    min-height: 700px;
  }
}

@media (max-height: 600px) {
  .main {
    position: absolute;
    min-height: 900px;

    overflow-y: hidden;
  }

  .landing-background {
    position: absolute;
    height: 700px;
  }

  .result-content {
    min-height: 700px;
  }

}

/* QUESTION BACKGROUND GLITCH AND ZOOM ANIMATIONS */
@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(10px, 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  1% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  2% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  3% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  4% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  5% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  6% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  8% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  9% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  10% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  10.9% {
    opacity: 1;
    transform: translate3d(10px, 0, 0);
  }
  11%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * 10px), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  3% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  4.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  7.5% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  10.5% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  11%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  0.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  1% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  2% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  2.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  3% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  3.5% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  4% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  4.5% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  5.5% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  6% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  6.5% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  7% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  7.5% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  8% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  8.5% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  9.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
  }
  11%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}