:root {
  --spear-curtain-google: cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * At the real bottom the content keeps travelling into a black, contentless
 * field. Only the content slot moves here, so the full-screen black page still
 * seals the WebGL main page underneath.
 */
.tectonic-next-page.is-spear-curtain-resisting .tectonic-next-page__content {
  opacity: 1;
  transform: translate3d(0, var(--spear-curtain-resistance-shift, 0), 0);
  transition: transform 340ms var(--spear-curtain-google);
  will-change: transform;
}

.tectonic-next-page.is-spear-curtain-resistance-release .tectonic-next-page__content {
  transform: translate3d(0, 0, 0);
  transition: transform 320ms var(--spear-curtain-google);
}

.tectonic-next-page.is-spear-curtain-return,
.tectonic-next-page.is-spear-curtain-return.is-revealing-main {
  pointer-events: none;
  transition: none;
  will-change: transform, opacity;
}

.tectonic-next-page.is-spear-curtain-return.is-leaving .tectonic-next-page__content {
  opacity: 1;
  transform: translate3d(0, var(--spear-curtain-resistance-shift, -105px), 0);
  transition: none;
}

.tectonic-next-page.is-spear-curtain-return.is-leaving .tectonic-next-page__return {
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  transition:
    opacity 180ms var(--spear-curtain-google),
    transform 180ms var(--spear-curtain-google);
}

.tectonic-next-page.is-spear-curtain-return.is-spear-curtain-lifting {
  animation: spear-curtain-resistance-lift 680ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes spear-curtain-resistance-lift {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -104vh, 0);
  }
}

.spear-detail-return-prompt {
  position: absolute;
  right: auto;
  left: 50%;
  bottom: clamp(34px, 4.2vh, 66px);
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(11px, 0.9vw, 17px);
  margin: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(232, 240, 243, 0.86);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(-50%, 14px, 0);
  pointer-events: none;
  transition:
    opacity 420ms var(--spear-curtain-google),
    transform 420ms var(--spear-curtain-google),
    color 240ms var(--spear-curtain-google),
    text-shadow 240ms var(--spear-curtain-google);
}

.spear-detail-return-prompt.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.spear-detail-return-prompt__symbol {
  display: block;
  font-family: var(--tectonic-ui-small-en, "Bahnschrift", "Arial", sans-serif);
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 400;
  line-height: 1;
  transform: translate3d(0, -1px, 0);
}

.spear-detail-return-prompt__copy {
  display: grid;
  gap: 5px;
}

.spear-detail-return-prompt__copy strong {
  font-family: "Microsoft JhengHei UI", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(10px, 0.68vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
}

.spear-detail-return-prompt__copy small {
  color: rgba(183, 214, 228, 0.52);
  font-family: var(--tectonic-ui-small-en, "Bahnschrift", "Arial", sans-serif);
  font-size: clamp(6px, 0.39vw, 8px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: color 240ms var(--spear-curtain-google);
}

.spear-detail-return-prompt:hover,
.spear-detail-return-prompt:focus-visible {
  color: #f5fbfd;
  text-shadow:
    0 0 6px rgba(221, 242, 250, 0.4),
    0 0 14px rgba(165, 216, 235, 0.18);
}

.spear-detail-return-prompt:hover .spear-detail-return-prompt__copy small,
.spear-detail-return-prompt:focus-visible .spear-detail-return-prompt__copy small {
  color: rgba(218, 237, 245, 0.74);
}

.tectonic-next-page.is-spear-curtain-return .spear-detail-return-prompt {
  opacity: 0;
  transform: translate3d(-50%, -10px, 0);
  pointer-events: none;
  transition-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  .tectonic-next-page.is-spear-curtain-resisting .tectonic-next-page__content,
  .tectonic-next-page.is-spear-curtain-resistance-release .tectonic-next-page__content,
  .tectonic-next-page.is-spear-curtain-return,
  .tectonic-next-page.is-spear-curtain-return.is-spear-curtain-lifting,
  .spear-detail-return-prompt {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}