/* aatm.ai · scroll-cue override (NOT part of the signed handoff).
   Loaded AFTER the signed site_v1_7.css so these rules win.

   WHY: the court "speak" beat reads like a horizontal carousel (nine figures in
   a row) but has NO horizontal swipe — it advances on vertical scroll. Users
   swipe sideways, nothing happens, they get stuck. This adds a down-chevron
   that says "scroll down".

   FIX (v3): anchor to the STICKY stage, not the tall track.
   The signed structure is a pinned scroll-telling section:
     .speak-track  -> ~380svh tall (7 beats * ~40svh + a screen)
     .speak-stage  -> position:sticky, top:nav, height:~100svh  (THIS is what
                      stays on screen the whole time you're in the beat)
   v1/v2 put the chevron on .speak (the 380svh section) at bottom:92px, so it
   sat ~3 screens below the viewport and never animated usefully. v3 puts it on
   .speak-stage, so it pins to the bottom of the on-screen stage and is visible
   and bouncing the entire time the beat is pinned. No JS / IntersectionObserver
   needed: the stage is on screen for the whole track, so the loop just runs.

   SCOPE: a single ::after on the signed .speak-stage. No signed HTML/CSS/JS
   modified; additive and reversible. The signed version should come via Claude
   Design — interim fix (see PR).

   A11Y: decorative pseudo-element; bounce removed under prefers-reduced-motion
   (static chevron). Desktop hides it (the misread is a touch/mobile problem). */

.speak-stage { position: sticky; }   /* already sticky in signed CSS; keep as the positioning context */

.speak-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Sit in the visible dark band ABOVE the signed sticky "Nine of us" bar.
     The stage reserves padding-bottom:74px (+safe-area) for that bar, and the
     bar is position:fixed; z-index:30. Clear both: ~84px up + z-index above
     the bar, so the chevron is never hidden off-screen behind it. */
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-color: var(--ink2);
  -webkit-mask: var(--aatm-chevron) center / contain no-repeat;
  mask: var(--aatm-chevron) center / contain no-repeat;
  opacity: .8;
  pointer-events: none;
  z-index: 31;
  /* lucide "chevrons-down" */
  --aatm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6l5 5 5-5M7 13l5 5 5-5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .speak-stage::after { animation: aatm-nudge 1.4s ease-in-out infinite; }
}

@keyframes aatm-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .55; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* The confusion is a mobile/touch one; hide the cue on wide (desktop) layouts
   where the stage is laid out differently and there's no swipe instinct. */
@media (min-width: 720px) {
  .speak-stage::after { display: none; }
}