@keyframes seesawLeft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); } /* left goes up */
  100% { transform: translateY(0); }
}

@keyframes seesawRight {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(20px); } /* right goes down */
  100% { transform: translateY(0); }
}
@keyframes seesawBar {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(3deg); } /* left up, right down */
  100% { transform: rotate(0deg); }
  
}

#leftscale {
  animation: seesawLeft 4s ease-in-out infinite;
}

#rightscale {
  animation: seesawRight 4s ease-in-out infinite;
}
#scaletop {
 transform-origin: 200px 500px;
  animation: seesawBar 4s ease-in-out infinite;
}
@keyframes sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }   /* small tilt right */
  50%  { transform: rotate(0deg); }   /* back to centre */
  75%  { transform: rotate(-5deg); }  /* small tilt left */
  100% { transform: rotate(0deg); }   /* back to centre */
}

#photoid {
  transform-origin: 110px 170px; /* adjust pivot if needed */
  animation: sway 4s ease-in-out infinite;
}
@keyframes popup {
  0%, 80%, 100% { transform: scale(1); }
  40% { transform: scale(1); }  /* pop */
  60% { transform: scale(0.95); } /* recoil */
}

#messagehome {
  animation: popup 1.25s ease-in-out infinite;
}

#message {
  animation: popup 1.25s ease-in-out infinite;
  animation-delay: .5s; /* starts halfway through */
}

#dollarmessage,
#tickmessage, #bill, #ellipsis, #housemsg {
  display: inline-block;
  margin: 1rem;
  animation: bob 1s ease-in-out infinite;
}

/* Delay one so they alternate */
#tickmessage, #ellipsis  {
  animation-delay: 0.5s;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes cogRotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

#cog {
  display: inline-block;
  animation: cogRotate 8s ease-in-out infinite;
  transform-origin: 33.75% 12.75%; /* ensures rotation around center */
}
@keyframes armBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(4deg);
  }
}

#rightarm {
  display: inline-block;
  transform-origin: 46% 54%; /* pivot from shoulder area */
  animation: armBounce 3s ease-in-out infinite;
}
#lines line {
  stroke: #000; /* or inherit from .cls-3 */
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;

  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation: drawAndErase 2s ease-in-out infinite;
}

#lines line:nth-child(2) {
  animation-delay: 0.4s;
}

#lines line:nth-child(3) {
  animation-delay: 0.8s;
}
#lines2 line {
  stroke: #000; /* or inherit from .cls-3 */
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;

  stroke-dasharray: 100;
  stroke-dashoffset: 100;

  animation: drawAndErase 2s ease-in-out infinite;
}

#lines2 line:nth-child(2) {
  animation-delay: 0.4s;
}

#lines2 line:nth-child(3) {
  animation-delay: 0.8s;
}

@keyframes drawAndErase {
  0% {
    stroke-dashoffset: 100; /* start hidden */
  }
  40% {
    stroke-dashoffset: 0; /* fully drawn */
  }
  60% {
    stroke-dashoffset: 0; /* hold for a moment */
  }
  100% {
    stroke-dashoffset: 100; /* retract (erased) */
  }
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(3deg); }
  30% { transform: rotate(-3deg); }
  45% { transform: rotate(3deg); }
  60% { transform: rotate(-3deg); }
  75% { transform: rotate(0deg); }
}

/* total duration includes the pause time */
#paperwork,
#ID {
  display: inline-block;
  transform-origin: center center;
  animation: shake 4s linear infinite;
}

/* offset one by half the cycle */
#ID {
  animation-delay: 2s;
}