/* ============================================================
   scroll-cue.css — "there is more below this."

   A hairline rail with a dot falling down it, at the bottom of a hero. It
   answers one question a long page cannot answer for itself: on load, every
   section under the fold is a [data-dd-reveal] that has not fired, so the
   page looks finished when it is nine chapters long.

   The visual is the component; the *placement* is the host's, because heroes
   end in different places. A 100vh hero positions it absolutely at its own
   bottom (home). A band taller than the fold uses --sticky, which pins the
   cue to the bottom of the viewport for as long as the hero is on screen and
   lets it scroll away with it — no magic number for the fold.
   ============================================================ */
.dd-scroll-cue {
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-2);
}
.dd-scroll-cue:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Pinned to the bottom of the viewport while its hero is in view. The pull-up
   is the cue's own height, so adding one does not lengthen the hero. */
.dd-scroll-cue--sticky {
  position: sticky;
  bottom: var(--space-6);
  width: max-content;
  margin: -4.5rem auto 0;
}

.dd-scroll-cue__track {
  position: relative;
  display: block;
  width: 2px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.dd-scroll-cue__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  animation: ddScrollCue 1.9s var(--ease-soft) infinite;
}
@keyframes ddScrollCue {
  0%   { transform: translateY(-2px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}

/* The cue still points; it just stops falling. */
@media (prefers-reduced-motion: reduce) {
  .dd-scroll-cue__dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}