.animated-block {
  position: relative;
  display: inline-block;
  width: 200px;
}
.animated-block img {
  display: block;
  border: 0;
  width: 100%;
}
.animated-block .block-sizer {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  visibility: hidden;
}
.animated-block .block-background {
  --transiton-duration:1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animated-block .block-background img {
  scale: var(--bg-scale, 0.5);
  transition: var(--transiton-duration, 0.5s) ease-in-out;
  margin: 0 auto;
}
.animated-block .block-main {
  --transiton-duration:1.5s;
  --duration: 1.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  translate: -50% -50%;
  scale: var(--main-scale, 0.4);
  transition: var(--transiton-duration, 0.5s) ease-in-out;
}
.animated-block .flip-up {
  transform-origin: 50% 100%;
  transform: rotateX(135deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: 1s;
  transition-delay: calc(var(--transiton-duration) - 0.5s + var(--flip-delay, 0s));
}
.animated-block.appeared {
  --bg-scale:1;
  --main-scale:1;
}
.animated-block.appeared .flip-up {
  transform: rotateX(0deg);
}

@keyframes star-start {
  0% {
    scale: 0.2;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 0.5;
  }
}
@keyframes star-twinkle {
  0% {
    scale: 0.5;
  }
  100% {
    scale: 0.85;
  }
}
#world .block-main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
}
#world img.earth {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
}
#world img.star {
  position: absolute;
  z-index: 1;
  top: var(--top, -100%);
  left: var(--left, -100%);
  width: 13%;
  translate: -50% -50%;
  scale: var(--star-scale, 0);
  transition: var(--transiton-duration, 0.5s) ease-in-out, opacity 0.1s;
  opacity: var(--star-opacity, 0);
  animation-delay: var(--delay, 0), calc(var(--delay, 0) + var(--delay, 0) + var(--duration));
  animation-duration: var(--duration), 2s;
  animation-iteration-count: 1, infinite;
  animation-name: star-start, star-twinkle;
  animation-direction: normal, alternate;
  animation-play-state: var(--star-animation-state, paused);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
#world.appeared {
  --star-scale:1;
  --star-opacity:1;
  --star-animation-state: running;
}

#sewing {
  --flip-up-duration: 1s;
}
#sewing .block-main {
  perspective: 1000px;
}
#sewing .block-main .img,
#sewing .block-main img {
  position: absolute;
  translate: -50% -50%;
}
#sewing img.person {
  top: 0%;
  left: 50%;
  width: 50%;
  translate: -50% 0%;
}
#sewing img.table {
  top: 85%;
  left: 50%;
  width: 90%;
}
#sewing img.arm {
  top: 77%;
  left: 61%;
  width: 27%;
  transform-origin: 90% 10%;
  rotate: 5deg;
  transition: var(--flip-up-duration);
  transition-delay: calc(var(--transiton-duration) + var(--flip-delay, 0s) + var(--flip-up-duration, 0s));
}
#sewing img.machine {
  top: 62%;
  left: 42%;
  width: 33%;
}
#sewing div.img.fabric {
  top: 67.8%;
  left: 40%;
  width: 17%;
  height: 35%;
  translate: none;
  overflow: hidden;
}
#sewing div.img.fabric img {
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  translate: 0% -30%;
  transition: 2s;
  transition-delay: calc(var(--transiton-duration) + var(--flip-delay, 0s) + var(--flip-up-duration, 0s));
  rotate: 10deg;
}
#sewing img.pens {
  top: 73%;
  left: 20%;
  width: 10%;
  --flip-delay:.1s;
}
#sewing img.light {
  top: 62%;
  left: 72%;
  width: 30%;
  --flip-delay:.2s;
}
#sewing.appeared img.arm {
  rotate: -10deg;
}
#sewing.appeared .img.fabric img {
  translate: 0% 0%;
}

@keyframes factory-smoke {
  0% {
    top: 30%;
    opacity: 1;
    left: 37%;
  }
  50% {
    opacity: 1;
    left: 37%;
  }
  66% {
    opacity: 1;
  }
  85% {
    top: 2%;
    opacity: 0;
    left: 40%;
  }
  100% {
    top: 0%;
  }
}
#factory .block-background img {
  width: 90%;
}
#factory .block-main {
  perspective: 1000px;
}
#factory .block-main img {
  position: absolute;
  translate: -50% -50%;
}
#factory img.ground {
  top: 86%;
  left: 50%;
  width: 100%;
}
#factory img.building {
  bottom: 14%;
  left: 65%;
  width: 55%;
  translate: -50% 0%;
}
#factory img.building-small {
  bottom: 14%;
  left: 28%;
  width: 25%;
  translate: -50% 0%;
}
#factory .img.smokestack {
  position: absolute;
  bottom: 16%;
  left: 37%;
  height: 84%;
  width: 12%;
  translate: -50% 0%;
  overflow: hidden;
}
#factory .img.smokestack img {
  display: block;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  translate: 0% 70%;
  transition: 1s;
  transition-delay: calc(var(--transiton-duration) - 0.5s + var(--flip-delay, 0s));
}
#factory img.smoke {
  top: 30%;
  left: 37%;
  width: 8%;
  opacity: 0;
  animation-duration: 6s;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: factory-smoke;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--transiton-duration) + var(--flip-delay, 0s) + var(--smoke-delay, 0s) + 0.5s);
}
#factory img.smoke.smoke2 {
  --smoke-delay:2s;
  width: 3%;
}
#factory img.smoke.smoke3 {
  --smoke-delay:1s;
  width: 6%;
}
#factory img.badge {
  top: 51%;
  left: 80%;
  width: 26%;
  scale: 0;
  transition-timing-function: cubic-bezier(0.5, -0.31, 0.67, 1.76);
  transition-duration: 0.3s;
  transition-delay: calc(var(--transiton-duration) - 0.5s + var(--flip-delay, 0s) + 1s);
}
#factory img.checkmark {
  top: 51%;
  left: 80%;
  width: 8%;
  opacity: 0;
  transition: 0.2s ease-in-out;
  transition-delay: calc(var(--transiton-duration) - 0.5s + var(--flip-delay, 0s) + 1.2s);
}
#factory img.ribbon {
  top: 67%;
  left: 79.5%;
  width: 14%;
  translate: -50% -120%;
  opacity: 0;
  transition: translate 0.4s ease-out, opacity 0.2s;
  transition-delay: calc(var(--transiton-duration) - 0.5s + var(--flip-delay, 0s) + 1.4s);
}
#factory.appeared img.smoke {
  animation-play-state: running;
}
#factory.appeared .img.smokestack img {
  translate: 0% 0%;
}
#factory.appeared img.badge {
  scale: 1;
}
#factory.appeared img.checkmark {
  opacity: 1;
}
#factory.appeared img.ribbon {
  opacity: 1;
  translate: -50% -50%;
}

#worker {
  --man-duration: 1s;
  --flip-delay: -.75s;
}
#worker .block-main {
  perspective: 1000px;
}
#worker .block-main .img,
#worker .block-main img {
  position: absolute;
  translate: -50% -50%;
}
#worker img.printer {
  top: 60%;
  left: 73%;
  width: 48%;
}
#worker .img.man {
  width: 52%;
  top: 54%;
  left: 15%;
  translate: -150% -50%;
  transition: translate var(--transiton-duration, 0s) ease-in-out;
}
#worker .img.man img.body {
  position: relative;
  width: 100%;
  translate: none;
}
#worker .img.man img.arm {
  top: 25%;
  left: 87%;
  width: 47%;
  transform-origin: 20% 10%;
  rotate: 15deg;
  translate: none;
  transition-duration: 1s;
  transition-delay: calc(var(--transiton-duration) + var(--man-duration, 0s) - 1.5s);
}
#worker.appeared .img.man {
  translate: -50% -50%;
}
#worker.appeared .img.man img.arm {
  rotate: -8deg;
}/*# sourceMappingURL=style.css.map */