/**
 * scroll-hint.css — The Gentle Studio
 *
 * The styles for js/scroll-hint.js, in their own file for the same reason the
 * script is: three pages show it — index.html, pages/page.html and
 * pages/project.html — and only two of them load css/homepage.css, where this
 * used to live. A project page would have rendered the mark unstyled: a bare
 * line of text at the top of the document rather than a fixed mark at the foot
 * of the window.
 *
 * `--page-ink` is honoured here so a portfolio that sets its own ink carries
 * the hint with it — see **A portfolio page's own ink** in CLAUDE.md.
 */

#scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 50;
  pointer-events: none;
}
#scroll-hint.visible { opacity: 1; }
/* Beats the `display: flex` above on specificity, so the UA's own
   `[hidden] { display: none }` is not simply overridden. */
#scroll-hint[hidden] { display: none; }

/* On a touch screen the mark goes above the words rather than beside them.
   Side by side, the arrow sits where a thumb rests and the whole thing reads
   as one long line at the bottom of a narrow screen; stacked, the arrow is
   the first thing seen and the sentence explains it. */
@media (pointer: coarse) {
  #scroll-hint {
    flex-direction: column;
    gap: 8px;
  }
}

/* The mark says which way the content moves: a sweeping line down a page, and
   the same line with a head at each end across one. The heads are drawn in
   `currentColor`, so they follow the hint's own colour — including the page
   ink, where a portfolio sets one. */
.scroll-hint-mark {
  position: relative;
  display: flex;
  align-items: center;
}
#scroll-hint[data-axis="x"] .scroll-hint-mark::before,
#scroll-hint[data-axis="x"] .scroll-hint-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
#scroll-hint[data-axis="x"] .scroll-hint-mark::before {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}
#scroll-hint[data-axis="x"] .scroll-hint-mark::after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

.scroll-hint-line {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-muted);
  position: relative;
  overflow: hidden;
}
.scroll-hint-line::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  animation: scanline 2.4s ease-in-out infinite;
}
@keyframes scanline { 0% { left: -100%; } 100% { left: 100%; } }

html.has-page-ink #scroll-hint { color: var(--page-ink); }
html.has-page-ink .scroll-hint-line { background: var(--page-ink); }