/* cue.css -- scroll hint on the cover (js/cue.js). Sits in the open maroon below the
   monogram, centred; only opacity and the svg's transform animate. */
.cue {
  position: absolute;
  left: calc(510 * var(--u));
  top: calc(1580 * var(--u));
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  z-index: 60;
  color: #f4e7c8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cue.is-on { opacity: 0.8; }
.cue svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: cue-bob 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(-12%); }
  50% { transform: translateY(14%); }
}
@media (prefers-reduced-motion: reduce) {
  .cue { transition: none; }
  .cue svg { animation: none; }
}