/* One viewport cue for the whole page, independent of its sticky scenes. */
html.page-scroll-cue-ready :is(.scroll-hint, .door-hint, .kb-hint, .rl-hint, .so-hint, .dr-hint, .br-hint) {
  display: none !important;
}

.page-scroll-cue {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: var(--ink, #f4f1e8);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page-scroll-cue[hidden],
body.menu-open .page-scroll-cue { display: none; }

.page-scroll-cue__label {
  display: block;
  margin-bottom: .6rem;
  color: var(--grey, #c6c6c6);
  font-family: var(--f-mono, monospace);
  font-size: .65rem;
  line-height: 1.2;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
}

/* Keep the arrow in the same place when its label disappears. */
.page-scroll-cue[data-minimal] .page-scroll-cue__label { visibility: hidden; }

.page-scroll-cue__arrow {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  animation: page-scroll-cue-pulse 2.2s ease-in-out infinite;
}

.page-scroll-cue:focus-visible {
  outline: 2px solid var(--brass, #eb771b);
  outline-offset: 6px;
}

@keyframes page-scroll-cue-pulse {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-scroll-cue__arrow { animation: none; }
}