/* email_verifications/show.html.erb - reward "tada" card: the gift icon pops
   in, ten confetti dots burst out from behind it, the copy fades up after. */
@keyframes reward-icon-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes reward-confetti-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.3); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(200deg); }
}
.reward-tada-burst {
  position: relative;
  width: 4rem;
  height: 4rem;
}
.reward-tada-icon {
  animation: reward-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
.reward-tada-text {
  animation: fade-up-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.reward-tada-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 2px;
  opacity: 0;
  animation: reward-confetti-burst 1s ease-out 0.3s both;
}
.reward-tada-confetti-1 { --dx: 0px; --dy: -62px; background: var(--pill-green-text); animation-delay: 0.30s; }
.reward-tada-confetti-2 { --dx: 45px; --dy: -61px; background: var(--pill-amber-text); animation-delay: 0.34s; }
.reward-tada-confetti-3 { --dx: 86px; --dy: -28px; background: var(--pill-blue-text); animation-delay: 0.38s; }
.reward-tada-confetti-4 { --dx: 59px; --dy: 19px; background: var(--pill-green-text); animation-delay: 0.42s; }
.reward-tada-confetti-5 { --dx: 45px; --dy: 61px; background: var(--pill-amber-text); animation-delay: 0.30s; }
.reward-tada-confetti-6 { --dx: 0px; --dy: 90px; background: var(--pill-blue-text); animation-delay: 0.34s; }
.reward-tada-confetti-7 { --dx: -36px; --dy: 50px; background: var(--pill-green-text); animation-delay: 0.38s; }
.reward-tada-confetti-8 { --dx: -72px; --dy: 23px; background: var(--pill-amber-text); animation-delay: 0.42s; }
.reward-tada-confetti-9 { --dx: -86px; --dy: -28px; background: var(--pill-blue-text); animation-delay: 0.30s; }
.reward-tada-confetti-10 { --dx: -36px; --dy: -50px; background: var(--pill-green-text); animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) {
  .reward-tada-icon,
  .reward-tada-text { animation: none; }
  .reward-tada-confetti { display: none; }
}