.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-visual {
  position: relative;
}

.mascot {
  position: absolute;
  left: -8%;
  bottom: -12%;
  width: 42%;
  z-index: 2;
  pointer-events: none;
}

.mascot img {
  display: block;
  width: 100%;
  height: auto;
}

.mascot .spit-frame {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: tb-spit 6.5s steps(1, end) infinite;
}

@keyframes tb-spit {
  0%, 18%, 100% { opacity: 0; }
  8%, 16% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot .spit-frame { animation: none; }
}

@media (max-width: 850px) {
  .hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mascot {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(280px, 72%);
    margin: 0 auto -32px;
  }

  .terminal {
    width: 100%;
  }
}