/** Butterfly */
.butterfly {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  --perspective: 1200px;
}

@media screen and (min-width: 701px) {
  .butterfly {
    width: 450px;
    height: 450px;
  }
}

@media screen and (max-width: 700px) {
  .butterfly {
    width: 250px;
    height: 250px;
  }
}

.butterfly-upper-axis {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0%;
  -webkit-perspective: var(--perspective);
  perspective: var(--perspective);
  transform-style: preserve-3d;
  z-index: 10;
}

.butterfly-lower-axis {
  position: absolute;
  width: 100%;
  left: 0%;
  height: 50%;
  top: 50%;
  -webkit-perspective: var(--perspective);
  perspective:  var(--perspective);
  transform-style: preserve-3d;
  z-index: 1;
}

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
  .butterfly-upper-axis,
  .butterfly-lower-axis {
      transform-style: flat !important;
  }
}}

.butterfly-shadow {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%);
  top: 0%;
  z-index: 5;
  --angle-left: 45deg;
  --basecolor: rgba(0,0,0, 0.0);
  --luminance: rgba(0,0,0,0.4);
  background: linear-gradient(to right,
                              var(--basecolor) 0%,
                              var(--basecolor) 10%,
                              var(--luminance) 25.0%,
                              var(--luminance) 35.0%,
                              var(--basecolor) 50%,
                              var(--basecolor) 60%,
                              var(--luminance) 75.0%,
                              var(--luminance) 85.0%,
                              var(--basecolor) 100%);
}

.butterfly-wing {
  width: 50%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0%;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: 2s;
  transition-delay: 0s;
  background-size: contain;
  background-repeat: no-repeat;
}

.butterfly-wing-upper-left {
  left: 0%;
  top: 0%;
  background-position: right bottom;
  transform-origin: center right;
  z-index: 5;
}

.butterfly-wing-upper-right {
  left: 50%;
  top: 0%;
  background-position: left bottom;
  transform-origin: center left;
  z-index: 2;
}

.butterfly-wing-lower-left {
  width: 35%;
  height: 90%;
  left: 15%;
  background-position: right top;
  transform-origin: center right;
}

.butterfly-wing-lower-right {
  width: 35%;
  height: 90%;
  left: 50%;
  background-position: left top;
  transform-origin: left center;
}

.butterfly-wing-texture {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  background-position: inherit;
  background-size: inherit;
  background-repeat: no-repeat;
  --filter-start:  invert(0%);
  --filter-end: invert(0%);
  --filter-fixed: contrast(130%) drop-shadow(-10px 5px 10px rgba(0,0,0,0.75));
  filter: var(--filter-start) var(--filter-fixed);
  // animation-name: lamb;
  animation-duration: 0.01s;
  animation-delay: 3.0s;
  animation-timing-function: steps();
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.negative .butterfly-wing-texture {
  filter: invert(100%) var(--filter-fixed) !important;
}

@keyframes lamb {
  0% {
    filter: invert(100%) var(--filter-fixed);
  }
  100% {
    filter: var(--filter-end) var(--filter-fixed);
  }
}

.butterfly-wing-upper-left .butterfly-texture-shadow {

}

.butterfly-wing-upper-right .butterfly-texture-shadow {
}

.butterfly-texture-inverted {
  transform: scaleX(-1);
}

/** Animations */
.butterfly[stage=emerge] .butterfly-wing {
  animation-iteration-count: 1;
  animation-duration: 1.75s;
  display: block;
}
.butterfly[stage=emerge] .butterfly-wing-upper-left {
  animation-name: emerge-left;
  animation-delay: 1.15s;
  transform: rotateY(90deg);
}

.butterfly[stage=emerge] .butterfly-wing-lower-left {
  animation-name: emerge-left;
  animation-delay: 1.2s;
  transform: rotateY(90deg);
}

.butterfly[stage=emerge] .butterfly-wing-upper-right {
  animation-name: emerge-right;
  animation-delay: 1.15s;
  transform: rotateY(-90deg);
}

.butterfly[stage=emerge] .butterfly-wing-lower-right {
  animation-name: emerge-right;
  animation-delay: 1.2s;
  transform: rotateY(-90deg);
}

@keyframes emerge-left {
  60% {
    transform: rotateY(0deg)
  }
  100% {
    transform: rotateY(10deg)
  }
}

@keyframes emerge-right {
  60% {
    transform: rotateY(0deg)
  }
  100% {
    transform: rotateY(-10deg)
  }
}

.butterfly[stage=flutter] .butterfly-wing {
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 0s;
  display: block;
}
.butterfly[stage=flutter] .butterfly-wing-upper-left {
  animation-name: flutter-left;
  transform: rotateY(10deg);
}

.butterfly[stage=flutter] .butterfly-wing-lower-left {
  animation-name: flutter-left;
  animation-delay: 0.1s;
  transform: rotateY(10deg);
}

.butterfly[stage=flutter] .butterfly-wing-upper-right {
  animation-name: flutter-right;
  animation-delay: 0.05s;
  transform: rotateY(-10deg);
}

.butterfly[stage=flutter] .butterfly-wing-lower-right {
  animation-name: flutter-right;
  animation-delay: 0.2s;
  transform: rotateY(-10deg);
}


@keyframes flutter-left {
  20% {
    transform: rotateY(30deg);
  }
  40% {
    transform: rotateY(50deg);
  }
  55% {
    transform: rotateY(45deg);
  }
  80% {
    transform: rotateY(80deg);
  }
  100% {
    transform: rotateY(10deg);
  }
}

@keyframes flutter-right {
  20% {
    transform: rotateY(-30deg);
  }
  40% {
    transform: rotateY(-50deg);
  }
  55% {
    transform: rotateY(-45deg);
  }
  80% {
    transform: rotateY(-80deg);
  }
  100% {
    transform: rotateY(-10deg);
  }
}