/* The post-reveal cue on scene 3, under the foil card.
 *
 * Port of the reference app's `_scrollInstruction_` block: it is rendered only
 * once the card is revealed (js/main.js drops the `hidden` attribute), arrives
 * on the `revealInstruction` keyframe and then the two lines pulse and the
 * arrow bounces, exactly as `pulseText` / `elegantBounce`.
 *
 * The keyframe's own delay is 0.6s, not the reference's 1.5s: at 1.5s the arrow
 * turned up after the celebration had finished, so the payoff and the "there is
 * more below" signal never coincided.
 *
 * Sizes are in PSD design px because the cue lives inside the 1080x1920 frame.
 * At 390x844 the frame scale is 0.4396, so 34 design px reads as ~15 CSS px and
 * the 9 px tracking as ~4 CSS px -- the reference's own clamp(.9rem,3.5vw,1.2rem)
 * and letter-spacing: 4px.
 */
.scratch-cue {
  position: absolute;
  left: 0;
  right: 0;
  top: 950px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;

  opacity: 0;
  transform: translateY(-10px);
  animation: reveal-instruction 1.5s 0.6s forwards;
}
@keyframes reveal-instruction {
  to { opacity: 1; transform: translateY(0); }
}

.scratch-cue__sub {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.5;
  letter-spacing: 9px;
  text-indent: 9px;         /* tracking is trailing-side; re-centre the line */
  text-transform: uppercase;
  color: var(--c-brown-deep);
  margin-bottom: 45px;
  animation: cue-pulse 2s infinite alternate;
}
@keyframes cue-pulse {
  0%   { opacity: 0.7; text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
  100% { opacity: 1;   text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
}

.scratch-cue__arrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 62px;
  line-height: 1;
  /* The reference paints this gold on a near-black wine ground; here the
     ground is the PSD's light sand, where gold all but disappears. Same
     brown as the copy it belongs to. */
  color: var(--c-brown-mid);
  animation: cue-bounce 2.5s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .scratch-cue { opacity: 1; transform: none; animation: none; }
  .scratch-cue__sub,
  .scratch-cue__arrow { animation: none !important; }
}