/* swipe-hint.css — The animated swipe cue that teaches the feed gesture.
   Split from app.module.css; load order in app.html preserves the original cascade. */

/* ---------- swipe hint ---------- */
/* The cue appears at the same instant as the answer sheet, so for as long as it
   floated it was either underneath the sheet (invisible) or on top of it
   (covering the correct answer and the explanation — an opaque pill eating
   "It's: English, We___ Gaelic"). Neither is a z-index problem. It now sits in
   the sheet's own flow, after the answer and any expanded explanation, which is
   the order a learner reads in: what it was, why, then what to do next. */
.hint {
  margin: 14px auto 2px;
  width: fit-content;
  display: none;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  padding: 7px 14px 7px 9px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: 0 3px 0 var(--lip);
}

.hint.show {
  display: flex;
  animation: hint-in 0.3s var(--ease) backwards;
}

/* Y only. The -50% here was half of the old `left: 50%` centring; once the pill
   moved into the sheet's flow the implicit `to` became `none`, so the cue slid
   in from half its own width to the left instead of rising into place. */
@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* The gesture is the instruction: a thumb touches down, travels up the track,
   and lifts off. Words tell you the name of the move; this shows the move, and
   it reads without English. Flat colour and a solid dot like the rest of the
   UI — the motion carries it, so the pill itself holds still. */
.hint-gesture {
  position: relative;
  flex: none;
  width: 15px;
  height: 26px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  overflow: hidden;
}

/* Base state is the end of the travel — thumb at the top, no trail. Anyone
   who asked for less motion gets that as a still frame, which still reads up. */
.hint-thumb {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-13px);
}

.hint-trail {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 12px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: var(--brand-line);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  opacity: 0;
}

.hint.show .hint-thumb {
  animation: hint-thumb 2.1s var(--ease) infinite;
}

.hint.show .hint-trail {
  animation: hint-trail 2.1s var(--ease) infinite;
}

@keyframes hint-thumb {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0;
  }

  14% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  56% {
    transform: translateY(-13px) scale(1);
    opacity: 1;
  }

  70%,
  100% {
    transform: translateY(-13px) scale(0.4);
    opacity: 0;
  }
}

@keyframes hint-trail {
  0%,
  14% {
    transform: scaleY(0);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  56% {
    transform: scaleY(1);
    opacity: 1;
  }

  70%,
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

.chip.streak.lit {
  color: var(--amber-text);
}