body {
  overflow-x: hidden;
  background: var(--dark);
}
.animation-panes,
.animation-pane {
  display: flex;
  width: 100%;
  height: 100%;
}
.animation-panes.right {
  flex-direction: row-reverse;
}
.text-pane {
  background: #ffd200;
  width: 0;
  animation: text-pane-slide 10s ease-in-out infinite;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.animation-panes.right .text-pane {
  animation: right-text-pane-slide 10s ease-in-out infinite;
}
@keyframes text-pane-slide {
  0% { width: 0 }
  10% { width: 0 }
  16% { width: 97.2% }
  81% { width: 97.2% }
  87% { width: 0 }
  100% { width: 0 }
}
@keyframes right-text-pane-slide {
  0% { width: 0 }
  10% { width: 0 }
  16% { width: 103% }
  81% { width: 103% }
  87% { width: 0 }
  100% { width: 0 }
}
.text-pane-content {
  text-transform: uppercase;
  padding: 1.8vw;
  text-align: center;
}
.text-pane-content .line {
  margin: 0;
  opacity: 0;
  animation: lineFloat 10s infinite;
  font-size: 2rem;
}
@keyframes lineFloat {
  0% { opacity: 0 }
  14% {
    opacity: 0;
    transform: translateY(1em);
  }
  18% {
    opacity: 1;
    transform: translate(0);
  }
  76% {
    transform: none;
    opacity: 1;
  }
  82% {
    transform: translateY(-1em);
    opacity: 0;
  }
  100% { opacity: 0 }
}
.footage-pane video {
  width: 100%;
  object-fit: cover;
}
.pencil-text {
  display: flex;
  position: absolute;
  width: 100%;
  max-width: 100%;
  bottom: -2vw;
  left: 1.8vw;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
}
.pencil-text-char {
  font-size: 13.325vw;
  opacity: 0;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  animation: 10s charFloat ease-in-out infinite;
}
@keyframes charFloat {
  0% {
    opacity: 0;
    transform: translateY(.25em);
  }
  1% { opacity: 1 }
  3% { transform: translateY(.01em) }
  4% {
    opacity: 1;
    transform: translate(0);
  }
  84% {
    transform: none;
    opacity: 1;
  }
  88% { 
    transform: translateY(-.29em);
    opacity: 1;
  }
  89% {
    transform: translateY(-.3em);
    opacity: 0;
  }
  100% { opacity: 0 }
}
.pencil-text-char.spaced {
  padding-left: 4.6vw;
}
.char-gif {
  width: 13.5vw;
  margin: 1.5vw -2.6vw 0;
}
@media (max-width: 1024px) {
  .pencil-text {
    left: 2vw;
    right: 2vw;
  }
  .pencil-text-char {
    font-size: 13.1vw;
  }
  .animation-panes,
  .animation-panes.right {
    flex-direction: column;
  }
  .text-pane,
  .animation-panes.right .text-pane {
    width: 100%;
    height: 0;
    animation-name: text-pane-slide-m;
  }
  @keyframes text-pane-slide-m {
    0% { height: 0 }
    10% { height: 0 }
    16% { height: 100% }
    81% { height: 100% }
    87% { height: 0 }
    100% { height: 0 }
  }
}