/* The agents at their desks: the drawings used on the home page's cards and
   in the catch-the-money game. Every shape is an SVG element animated with
   CSS transforms and opacity. Each page decides when they pause and when
   they are still (the hero when off screen, the game when not playing). */

.agent-look-right { transform: translateX(3px); }
.agent-look-left { transform: translateX(-3px); }
.agent-look-down { transform: translate(1px, 2px); }

.agent-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: agent-blink 5s infinite;
}

@keyframes agent-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.12); }
}

.agent-tap {
  animation: agent-tap 0.36s ease-in-out infinite alternate;
}

.agent-tap-r { animation-delay: 0.18s; }

@keyframes agent-tap {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

.scene-scroll {
  animation: scene-scroll 3.2s linear infinite;
}

@keyframes scene-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

.scene-ticket {
  opacity: 0;
  animation: scene-ticket 2.6s ease-in infinite;
}

@keyframes scene-ticket {
  0% { transform: translateY(-26px); opacity: 0; }
  25% { opacity: 1; }
  55% { transform: translateY(12px); opacity: 1; }
  72%, 100% { transform: translateY(16px); opacity: 0; }
}

.scene-magnifier {
  transform: translate(96px, 42px);
  animation: scene-magnify 4s ease-in-out infinite;
}

@keyframes scene-magnify {
  0%, 100% { transform: translate(64px, 26px); }
  25% { transform: translate(98px, 26px); }
  45% { transform: translate(66px, 42px); }
  62%, 84% { transform: translate(96px, 42px); }
}

.scene-finding {
  opacity: 0;
  animation: scene-finding 4s ease-in-out infinite;
}

@keyframes scene-finding {
  0%, 56% { opacity: 0; }
  64%, 86% { opacity: 0.85; }
  100% { opacity: 0; }
}

.scene-steam {
  opacity: 0;
  animation: scene-steam 2.4s ease-in-out infinite;
}

.scene-steam-2 { animation-delay: 1.2s; }

@keyframes scene-steam {
  0% { opacity: 0; transform: translateY(4px); }
  40% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-6px); }
}

.scene-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: scene-bar 3.2s ease-in-out infinite;
}

@keyframes scene-bar {
  0%, 100% { transform: scaleY(0.15); }
  30%, 80% { transform: scaleY(1); }
}

.scene-stamp {
  animation: scene-stamp 1.8s ease-in-out infinite;
}

@keyframes scene-stamp {
  0%, 100% { transform: translateY(0); }
  35%, 50% { transform: translateY(9px); }
  70% { transform: translateY(0); }
}

.scene-check {
  opacity: 0;
  animation: scene-check 1.8s linear infinite;
}

@keyframes scene-check {
  0%, 44% { opacity: 0; }
  52%, 92% { opacity: 1; }
  100% { opacity: 0; }
}