.runner-strip {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  height: clamp(94px, 17vh, 153px);
  padding-bottom: env(safe-area-inset-bottom, 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.runner-strip.is-loading {
  opacity: 0.4;
}

.runner-strip.is-ready {
  opacity: 0.96;
}

.runner-strip--intro {
  height: clamp(200px, 36vh, 320px);
}

.runner-strip__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 720px) {
  .runner-strip {
    height: clamp(83px, 14vh, 125px);
  }

  .runner-strip--intro {
    height: clamp(176px, 32vh, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skyline-bottom .runner-strip {
    display: none;
  }
}