/* Shared animated finish for claimable rewards and Zeus vocabulary cards. */
:root {
  --reward-claim-panel-background:
    radial-gradient(circle at center, rgba(0, 255, 255, 0.2), transparent 34%),
    linear-gradient(145deg, #071016 0%, #111111 52%, #233146 100%);
  --reward-claim-panel-scan:
    linear-gradient(115deg, transparent 0 18%, rgba(0, 255, 0, 0.14) 19%, transparent 20% 45%, rgba(0, 255, 255, 0.12) 46%, transparent 48% 100%);
  --reward-claim-panel-dots:
    radial-gradient(circle at 18% 24%, rgba(218, 236, 38, 0.94) 0 5px, rgba(218, 236, 38, 0.24) 6px 17px, transparent 18px),
    radial-gradient(circle at 70% 34%, rgba(47, 216, 139, 0.9) 0 6px, rgba(47, 216, 139, 0.24) 7px 20px, transparent 21px),
    radial-gradient(circle at 84% 78%, rgba(0, 255, 255, 0.52) 0 4px, rgba(0, 255, 255, 0.16) 5px 15px, transparent 16px);
}

@keyframes rewardsScan {
  from { background-position: 0 0; }
  to { background-position: 260px 260px; }
}

@keyframes rewardsReadyCardPulse {
  0%, 100% { box-shadow: 0 10px 0 rgba(7, 16, 22, 0.34), 0 0 18px rgba(0, 255, 255, 0.24); }
  50% { box-shadow: 0 10px 0 rgba(7, 16, 22, 0.34), 0 0 34px rgba(0, 255, 255, 0.46); }
}

@keyframes rewardsReadyDots {
  0%, 100% { opacity: 0.82; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(2px, -3px, 0); }
}