/* scroll-cue.css: a quiet "Scroll" prompt, bottom right of the hero.
   Pattern taken from travelai.com (18 Oct 2026): a short label above a 1px hairline, with a
   brighter segment falling down the line. Rebuilt in this site's tokens.

   WHY THE SEGMENT IS COPPER. Copper already means "motion" on this site: the wordmark sweep
   in animations.css is copper. The label and track use the secondary ink, so the cue sits
   below the hero copy in the visual order and never competes with "Email Mike".

   WHY IT RUNS THREE TIMES AND STOPS. TravelAI loops forever at 2s a pass. WCAG 2.2 criterion
   2.2.2 (Pause, Stop, Hide, Level A) says automatic movement lasting more than five seconds
   needs a way to stop it. Three passes at 2s would be 6s and fail. Each pass is 1.6s here, so
   three passes take 4.8s and no control is needed. The 0.8s delay before the first pass has
   no movement and does not count. KEEP passes x duration UNDER 5s if either number changes.

   WHY THE WORD SITS IN CSS. "Scroll" is drawn with ::before rather than written in the HTML,
   so search engines and AI crawlers never read it as page content. The wrapper carries
   aria-hidden, so screen readers skip it too. It is decoration, not a control.

   WHERE IT SITS. The hero is 100svh tall but starts under the 77px sticky header, so its
   bottom edge is 77px below the fold on load. Anchoring to the hero's bottom put the cue
   half off screen (measured live, 1440x900, 18 Oct 2026). It is anchored from the TOP
   instead: one viewport height, minus the header, minus the bottom gap, then lifted by its
   own height. If the header height ever changes, change --cue-head to match.

   WHERE IT HIDES. The hero copy runs to the right edge of the 1120px wrap, which sits only
   24px from the screen edge until the window is wider than about 1270px. Below 1320px the
   cue would land on the copy, so it is hidden. Measured clearances: 1320px wide, 33px
   between copy and cue. 1440px, 88px. It never prints.

   Loaded from its own file because the site's Content-Security-Policy is style-src 'self':
   an inline <style> block would be refused by the browser. */

.scroll-cue{
  position:absolute;
  right:clamp(1.5rem,3vw,3rem);
  --cue-head:77px;
  top:calc(100svh - var(--cue-head) - clamp(2rem,5vw,3.5rem));
  transform:translateY(-100%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.625rem;
  pointer-events:none;
}
.scroll-cue::before{
  content:"Scroll";
  font-family:var(--sans);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);
}
.scroll-cue-line{
  display:block;position:relative;overflow:hidden;
  width:1px;height:3rem;
  background:rgba(233,234,236,.2);
}
.scroll-cue-line::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:50%;
  background:var(--copper);
  transform:translateY(-100%);
  animation:cue-fall 1.6s ease-in-out .8s 3 forwards;
}
@keyframes cue-fall{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(200%)}
}

@media (max-width:1319px){.scroll-cue{display:none}}

/* Reduced motion: no movement. The copper segment rests in the top half of the line, so the
   cue still reads as "there is more below". */
@media (prefers-reduced-motion:reduce){
  .scroll-cue-line::after{animation:none !important;transform:none}
}
@media print{.scroll-cue{display:none !important}}