:root {
  --move: 5s linear forwards;
}

* {
  margin: 0;
}

*::before, *::after {
  content: "";
  position: absolute;
}

body {
  width: 100vw;
  height: 100vh;
  /*display: grid;*/
  place-items: center;
  background-color: #a5acb4;
}

.container {
  width: 1000px;
  height: 400px;
  background: black;
  display: grid;
  place-items: center;
  border: 10px groove lightblue;
  outline: 15px groove purple;
  overflow: hidden;
  position: relative;
}

.pacman {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  animation: move var(--move), move2 var(--move) 6s;
}

.pacman::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient( gold 10%, transparent 10%, transparent 40%, gold 40% );
  animation: mouth 1s linear infinite;
}

.pacman::after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient( gold 10%, transparent 10%, transparent 40%, gold 40% );
  animation: mouth2 1s linear infinite;
}

/* ghost */

.ghost {
  z-index: 3;
  width: 125px;
  height: 125px;
  position: absolute;
  border-radius: 50% 50% 0 0;
  clip-path: polygon( 0 100%, 20% 80%, 35% 100%, 50% 80%, 65% 100%, 80% 80%, 100% 100%, 100% 0, 0 0, 0 100% );
  box-shadow: inset 5px -5px 50px 0 rgba(0, 0, 0, 0.5);
  animation: move var(--move), move2 var(--move) 6s, scared 0.125s linear forwards 6s;
  left: 200px;
}

.ghost::before {
  z-index: 3;
  width: 25px;
  height: 25px;
  background: white;
  border-radius: 50%;
  right: 10px;
  top: 40px;
  box-shadow: -40px 0 0 1px white;
}

.ghost::after {
  z-index: 3;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  right: 11px;
  top: 48px;
  box-shadow: -40px 0 0 1px black;
  animation: scared2 0.125s linear forwards 6s;
}

.container > div.ghost:nth-of-type(2) {
  background: red;
}

.container > div.ghost:nth-of-type(3) {
  background: cyan;
  margin: 0 -130px;
}

.container > div.ghost:nth-of-type(4) {
  background: pink;
  margin: 0 -260px;
}

.container > div.ghost:nth-of-type(5) {
  background: orange;
  margin: 0 -390px;
}

/* text */

.text {
  position: relative;
}

.text::before {
  content: "WAKA WAKA";
  position: relative;
  color: transparent;
  font-family: "Monofett", cursive;
  font-size: 50px;
  background: gold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px black;
  letter-spacing: 3px;
  animation: change 0.125s linear forwards 5s, hue 1s linear infinite 9s;
}

.text::after {
  width: 0;
  height: 100px;
  background: black;
  top: 0;
  left: 0;
  animation: wipe 1s linear forwards 2s, wipe2 1s linear forwards 8s;
}

/* animations */

@keyframes mouth {
  0% {
    transform: rotatez(90deg);
  }
  50% {
    transform: rotatez(-90deg);
  }
  100% {
    transform: rotatez(90deg);
  }
}

@keyframes mouth2 {
  0% {
    transform: rotatez(-90deg);
  }
  50% {
    transform: rotatez(90deg);
  }
  100% {
    transform: rotatez(-90deg);
  }
}

@keyframes scared {
  100% {
    background: cornflowerblue;
  }
}

@keyframes scared2 {
  100% {
    width: 50px;
    height: 25px;
    background: white;
    right: 15px;
    top: 65px;
    box-shadow: none;
    border-radius: 0;
    clip-path: polygon( 0 25%, 10% 100%, 30% 50%, 50% 100%, 70% 50%, 90% 100%, 100% 25%, 90% 75%, 70% 25%, 50% 75%, 30% 25%, 10% 75%, 0 25% );
  }
}

@keyframes change {
  from {
    content: "VIRTUALWIZ";
  }
  to {
    content: "JP ROBOTIC LLC";
    font-family: arial;
    position: relative;
    color: transparent;
    font-family: "Monofett", cursive;
    font-size: 50px;
    background: gold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 1px black;
    letter-spacing: 3px;
  }
}

@keyframes hue {
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes wipe {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes wipe2 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes move {
  from {
    transform: rotatey(0) translatex(-1200px);
  }
  to {
    transform: rotatey(0) translatex(1200px);
  }
}

@keyframes move2 {
  from {
    transform: rotatey(180deg) translatex(-1200px);
  }
  to {
    transform: rotatey(180deg) translatex(1200px);
  }
}