/* swipe-hint.css — The animated cue that teaches the question-feed gesture. */

/* The cue sits at the foot of the answer sheet, above the nav, so it cannot
   scroll away or tuck under the bar. The gesture is the instruction: a thumb
   travels up the track. Words name the move for anyone who already knows it,
   in the app's visual style. */
.hint {
  flex: none;
  align-self: center;
  margin: 16px auto 0;
  width: fit-content;
  display: none;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
}

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

.hint-label {
  line-height: 1.3;
}

/* 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: color-mix(in srgb, var(--ink-2) 12%, transparent);
  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.is-lit {
  color: var(--amber-text);
}