@font-face {
  font-family: "Fragment Mono";
  src: url("/fonts/fragment-mono.woff2") format("woff2");
  font-display: swap;
}

.footer-mountain-page .studio-footer {
  --mountain-top-space: 340px;
  --mountain-lower-edge: calc(50px + 15.171vw - 8px);
}

.footer-mountain-page .studio-footer__prompt {
  position: absolute;
  bottom: calc(15.171vw - 34px);
  margin: 0;
}

.footer-mountain__art {
  position: absolute;
  right: 0;
  bottom: var(--mountain-lower-edge);
  left: 0;
  height: min(20.633971vw, max(80px, calc(100% - var(--mountain-top-space) - var(--mountain-lower-edge))));
  pointer-events: none;
}

.footer-mountain__art img,
.footer-mountain__art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-mountain__art img { object-fit: fill; }

.footer-mountain__art canvas {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.footer-mountain__art.is-ready img { visibility: hidden; }
.footer-mountain__art.is-ready canvas { opacity: 1; }

.footer-mountain__sky {
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
  pointer-events: none;
}

.footer-sky__star,
.footer-sky__letter,
.footer-sky__shooting,
.footer-sky__shooting > span {
  position: absolute;
  display: block;
  color: #fff;
  font: 7px/1 "Fragment Mono", monospace;
  white-space: nowrap;
}

.footer-sky__star { opacity: .65; }
.footer-sky__letter { opacity: 0; }
.footer-mountain-page .footer-sky__letter { color: rgb(255 255 255 / .8); }
.footer-sky__shooting > span { width: 7px; height: 7px; }

.footer-mountain-page .studio-footer__top,
.footer-mountain-page .studio-footer__signature,
.footer-mountain-page .studio-footer__base {
  z-index: 1;
}

@media (max-width: 1199px) {
  .footer-mountain__art {
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    height: 88px;
    margin: 24px -24px 8px;
  }

  .footer-mountain-page .studio-footer__signature,
  .footer-mountain-page .studio-footer__top,
  .footer-mountain-page .studio-footer__base { position: relative; inset: auto; }

  .footer-mountain-page .studio-footer__prompt {
    position: static;
    margin: 0 0 8px;
  }
}

@media (max-width: 560px) {
  .footer-mountain__art {
    width: calc(100% + 36px);
    margin-right: -18px;
    margin-left: -18px;
    height: 56px;
  }
}

/* Reveal the complete range together, including its static fallback. */
.footer-mountain__art { opacity: 0; transition: opacity 900ms cubic-bezier(.4,0,.2,1); }
.footer-mountain__art.is-revealing { opacity: 1; }
.footer-mountain__art img { transition: opacity 450ms ease; }
.footer-mountain__art canvas { transition: opacity 450ms ease; }
.footer-mountain__art.is-ready img { visibility: visible; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .footer-mountain__art, .footer-mountain__art img, .footer-mountain__art canvas { transition: none; }
}