.stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;  
  width: 100%;
  max-width: 900px;
  overflow-y: hidden;
  z-index: 1000;
}

.mariposa {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;  
  width: 200px;
  height: 200px;
  opacity: 0; /* start at 0 so they don't appear while loading */
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  animation: fly 4s infinite linear;
  animation-delay: .125s;
  
  &:nth-child(2) {
    animation-delay: 0.4s;
        
    .mariposa-turn {
      animation-delay: 0.75s;
            
      .mariposa-flutter {
        transform: scale(0.7) rotateX(65deg);
      }
    }
  }
  
  &:nth-child(3) {
    animation-delay: 0.75s;
       
    .mariposa-turn {
      animation-delay: 1.25s;
            
      .mariposa-flutter {
        transform: scale(0.3) rotateX(45deg);
      }
    }   
  }
    
  .mariposa-turn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 150px;
    perspective: 1000px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform-origin: 50% 80%; /* turn from a natural center */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation: turn 3s infinite cubic-bezier(.31,.09,.77,1.5);
    transform-style: preserve-3d;
    filter: drop-shadow(50px 30px 10px rgba(0, 0, 0, 0.5));
  }
}

.mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/motyli/butterfly-body.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg);
    
  &::before,
  &::after {
    position: absolute;
    top: 5%;
    margin: auto;
    content: "";
    height: 100%;
    width: 250%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform-style: preserve-3d;
    animation-delay: 0;
  }
  
  &::before {
    background-image: url("../img/motyli/butterfly-wing.png");
    transform-origin: 0% 50%;
    animation: flutter-r 0.3s infinite ease-out;
    left: 55%;
  }
  
  &::after {
    background-image: url("../img/motyli/butterfly-wing-l.png");
    transform-origin: 100% 50%;
    animation: flutter-l 0.3s infinite ease-out;
    right: 55%;
  }
}

.mariposa-flutter-2 {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/motyli/butterfly-body-blue.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg);
    
  &::before,
  &::after {
    position: absolute;
    top: 5%;
    margin: auto;
    content: "";
    height: 100%;
    width: 250%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform-style: preserve-3d;
    animation-delay: 0;
  }
  
  &::before {
    background-image: url("../img/motyli/butterfly-wing-blue.png");
    transform-origin: 0% 50%;
    animation: flutter-r 0.3s infinite ease-out;
    left: 55%;
  }
  
  &::after {
    background-image: url("../img/motyli/butterfly-wing-l-blue.png");
    transform-origin: 100% 50%;
    animation: flutter-l 0.3s infinite ease-out;
    right: 55%;
  }
}

@keyframes flutter-r {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-40deg);
  }
}

@keyframes flutter-l {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(40deg);
  }
}


@keyframes turn {
  0%, 100% {
    transform: translateX(-20%) rotateZ(30deg);
  }
  25% {
    transform: translateX(50%) rotateZ(-30deg);
  }
  50% {
    transform: translateX(-80%) rotateZ(30deg);
  }
  75% {
    transform: translateX(30%) rotateZ(-30deg);
  }
}


@keyframes fly {
  0% {
    opacity: 0;
    transform: translateY(50vh);
  }
  3%, 99% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50vh);
  }
}