/* ----------------- GLOBAL
Theme-Name: MOLECO GmbH
Author: MOLECO GmbH
Author URI: http://www.moleco.de
Description: MOLECO Theme
Version: 1.0
*/

:root{
    --walk-right-1: 0px;
    --walk-right-2: -180px;
    --walk-right-3: -360px;
    --walk-right-4: -540px;
    --walk-right-5: -720px;
    --walk-right-6: -900px;
    --walk-right-7: -1080px;
    --walk-right-8: -1260px;
    --stand-right: -1440px;
    --stand-left: -1620px;
    --walk-left-1: -1800px;
    --walk-left-2: -1980px;
    --walk-left-3: -2160px;
    --walk-left-4: -2340px;
    --walk-left-5: -2520px;
    --walk-left-6: -2700px;
    --walk-left-7: -2880px;
    --walk-left-8: -3060px;
}

@keyframes walk-left {
    0% {background-position: var(--walk-left-8) 0px;}
    12.5% {background-position: var(--walk-left-7) 0px;}
    25% {background-position: var(--walk-left-6) 0px;}
    37.5% {background-position: var(--walk-left-5) 0px;}
    50% {background-position: var(--walk-left-4) 0px;}
    62.5% {background-position: var(--walk-left-3) 0px;}
    75% {background-position: var(--walk-left-2) 0px;}
    87.5% {background-position: var(--walk-left-1) 0px;}
    100% {background-position: var(--stand-left) 0px;}
}

@keyframes walk-right {
    0% {background-position: var(--walk-right-1) 0px;}
    12.5% {background-position: var(--walk-right-2) 0px;}
    25% {background-position: var(--walk-right-3) 0px;}
    37.5% {background-position: var(--walk-right-4) 0px;}
    50% {background-position: var(--walk-right-5) 0px;}
    62.5% {background-position: var(--walk-right-6) 0px;}
    75% {background-position: var(--walk-right-7) 0px;}
    87.5% {background-position: var(--walk-right-8) 0px;}
    100% {background-position: var(--stand-right) 0px;}
}

@keyframes stand {
    0% {background-position: var(--stand-right) 0px;}
    100% {background-position: var(--stand-right) 0px;}
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.content {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
  background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/hintergrund.JPG');
  background-size: cover;
  background-position: center bottom;
}

.figure {
    width: 180px;
    height: 160px;
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 1;
    transform-origin: left top;
}
.figure[data-type="sprite1"] {
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite1.png');
}
.figure[data-type="sprite2"] {
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite2.png');
}
.figure[data-type="sprite3"] {
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite3.png');
}
.figure[data-type="sprite4"] {
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite4.png');
}
.figure[data-type="sprite5"] {
    background-image: url('https://azubimesse.moco-server.de/wp-content/themes/messe/assets/sprite5.png');
}

.figure img {
  position: absolute;
  top: -35px;
  left: 50%;
  width: 50px;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: top;
  height: 50px;
}

.figure::before {
  content: attr(title);
  position: absolute;
  top: -55px;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  font-size: 10px;
  color: #ffffff;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 3px 5px;
  border-radius: 5px;
}

.figure.left {
  animation: walk-left 1.5s steps(1) infinite;
}

.figure.right {
  animation: walk-right 1.5s steps(1) infinite;
}

.figure.stand {
  animation: stand 1.5s steps(1) infinite;
}