*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
  background-color: hsl(207 100% 5%);
  background-image: linear-gradient(hsl(207 100% 15%), hsl(207 100% 5%));
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: clip;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  position: relative;
  
  * { position: absolute; }
}

.butterfly {
  position: absolute;
  -webkit-animation: fly calc(12s + var(--random) * 6s) calc(var(--random) * -100s) infinite linear;
          animation: fly calc(12s + var(--random) * 6s) calc(var(--random) * -100s) infinite linear;
   
  &::before, &::after {
    box-shadow: 0 0 15px #0007 inset;
    content: '';
    position: absolute;
    width: 30px;
    height: 53px;
    background-color: hsl(calc(197 + var(--random) * 20) 100% 50%);
    -webkit-clip-path: path('m0 24.949c 2.6262-5.4316 9.7782-15.554 16.428-20.546 4.798-3.6021 12.572-6.3892 12.572 2.4795 0 1.7712-1.0155 14.879-1.6111 17.007-2.0703 7.3984-9.6144 9.2854-16.325 8.1433 11.73 1.9964 14.714 8.6092 8.2697 15.222-12.239 12.559-17.591-3.1511-18.963-7.1766-.2514-.73797-.36904-1.0832-.37077-.78964z');
            clip-path: path('m0 24.949c 2.6262-5.4316 9.7782-15.554 16.428-20.546 4.798-3.6021 12.572-6.3892 12.572 2.4795 0 1.7712-1.0155 14.879-1.6111 17.007-2.0703 7.3984-9.6144 9.2854-16.325 8.1433 11.73 1.9964 14.714 8.6092 8.2697 15.222-12.239 12.559-17.591-3.1511-18.963-7.1766-.2514-.73797-.36904-1.0832-.37077-.78964z');
    transform-origin: left;
  }
  &::before {
    -webkit-animation: flapB calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
            animation: flapB calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
  }
  
  &::after {
    -webkit-animation: flapA calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
            animation: flapA calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
  }    
}

@-webkit-keyframes fly {
  0% { transform: rotateX(90deg) rotate(calc(var(--random) * 360deg)) translateX(200px) translateZ(-70vh); }
  100% { transform: rotateX(90deg) rotate(calc(var(--random) * 360deg - 720deg)) translateX(200px) translateZ(70vh); }
}

@keyframes fly {
  0% { transform: rotateX(90deg) rotate(calc(var(--random) * 360deg)) translateX(200px) translateZ(-70vh); }
  100% { transform: rotateX(90deg) rotate(calc(var(--random) * 360deg - 720deg)) translateX(200px) translateZ(70vh); }
}

@-webkit-keyframes flapB {
  from { rotate: y 15deg; } 
  to { rotate: y -30deg; } 
}

@keyframes flapB {
  from { rotate: y 15deg; } 
  to { rotate: y -30deg; } 
}
@-webkit-keyframes flapA {
  from { rotate: y 165deg; } 
  to { rotate: y 210deg; } 
}
@keyframes flapA {
  from { rotate: y 165deg; } 
  to { rotate: y 210deg; } 
}