.plane-scene {
  perspective: 750px;
  position: absolute;
  width: 60vw;
  height: 300px;
  z-index: 99;
}

.plane-scene div {
  transform-style: preserve-3d;
  background-position: var(--img-offset, inherit);
}

.plane-image {
  width: 300px;
  height: 300px;
}

.plane-image div:empty {
  background-image: var(--img);
  background-size: 300px 300px;
}

.h-box {
  display: flex;
}

.h-box > * {
  flex-grow: 1;
}

.v-box {
  display: flex;
  flex-direction: column;
}

.v-box > * {
  flex-grow: 1;
}

.d-split {
  position: relative;
}

.d-split > * {
  position: absolute;
  width: 100%;
  height: 100%;
}

.plane-image div {
  transition: 1s transform;
}

.wing-l {
  transform-origin: right center;
}

.wing-r {
  --img-offset: 100%;
  transform-origin: left center;
}

.fold-l {
  --_tri-ratio: 0.5;
  --tri-ratio: var(--_tri-ratio);
  --width: calc(300 / 2);
  --height: calc(300);
  --tri-ratio-percent: calc(var(--tri-ratio) * 100%);
  --leg-height: calc(var(--height) * var(--tri-ratio));
  --rot-y: calc(-1 * calc(var(--leg-height) / var(--width)));
  --midpoint: calc(var(--tri-ratio) / 2);
  --midpoint-percent: calc(var(--tri-ratio-percent) / 2);
}
.fold-l--inner {
  --width: 75;
  --tri-ratio: calc(var(--_tri-ratio) / 2);
  --img-offset: 33.333%;
}
.fold-l--outer .fold-l--top {
  clip-path: polygon(0 var(--midpoint-percent), 100% var(--midpoint-percent), 0% var(--tri-ratio-percent));
  transform-origin: center calc(var(--tri-ratio-percent) * 0.75);
}
.fold-l--outer .fold-l--bottom {
  clip-path: polygon(100% calc(var(--tri-ratio-percent) / 2), 100% 100%, 0% 100%, 0% var(--tri-ratio-percent));
}
.fold-l--outer .dangly-bit {
  height: calc(var(--tri-ratio-percent) / 2);
  transform-origin: 100% 100%;
}
.fold-l--outer .dangly-bit .inner-dangle {
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
}
.fold-l--top {
  clip-path: polygon(0 0, 100% 0, 0% var(--tri-ratio-percent));
  transform-origin: center calc(var(--tri-ratio-percent) / 2);
}
.fold-l--bottom {
  clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% var(--tri-ratio-percent));
}

.fold-r {
  --_tri-ratio: 0.5;
  --tri-ratio: var(--_tri-ratio);
  --width: calc(300 / 2);
  --height: calc(300);
  --tri-ratio-percent: calc(var(--tri-ratio) * 100%);
  --leg-height: calc(var(--height) * var(--tri-ratio));
  --rot-y: calc(-1 * calc(var(--leg-height) / var(--width)));
  --midpoint: calc(var(--tri-ratio) / 2);
  --midpoint-percent: calc(var(--tri-ratio-percent) / 2);
}
.fold-r--inner {
  --width: 75;
  --tri-ratio: calc(var(--_tri-ratio) / 2);
  --img-offset: 66.666%;
}
.fold-r--outer .fold-r--top {
  clip-path: polygon(0 var(--midpoint-percent), 100% var(--midpoint-percent), 100% var(--tri-ratio-percent));
  transform-origin: center calc(var(--tri-ratio-percent) * 0.75);
}
.fold-r--outer .fold-r--bottom {
  clip-path: polygon(0% calc(var(--tri-ratio-percent) / 2), 0% 100%, 100% 100%, 100% var(--tri-ratio-percent));
}
.fold-r--outer .dangly-bit {
  --img-offset: 99.99% 0;
  height: calc(var(--tri-ratio-percent) / 2);
  transform-origin: 0% 100%;
}
.fold-r--outer .dangly-bit .inner-dangle {
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
}
.fold-r--top {
  clip-path: polygon(0 0, 100% 0, 100% var(--tri-ratio-percent));
  transform-origin: center calc(var(--tri-ratio-percent) / 2);
}
.fold-r--bottom {
  clip-path: polygon(0 0, 0% 100%, 100% 100%, 100% var(--tri-ratio-percent));
}

.plane-scene.start .plane-image {
  transform-origin: center bottom;
  animation: 15s ease-in 1s forwards plane;
}
.plane-scene.start .wing-l {
  animation: 0.5s linear 1s forwards wing;
}
.plane-scene.start .wing-l .fold-l--top, .plane-scene.start .wing-l .dangly-bit {
  transform: rotate3d(1, var(--rot-y), 0, -179deg);
}
.plane-scene.start .wing-l .inner-dangle {
  --dir: -1;
  animation: 0.5s linear 1s forwards fold-x;
}
.plane-scene.start .wing-l .fold-l.fold-l--outer {
  --dir: -1;
  transform-origin: right center;
  animation: 0.5s linear 1s forwards fold-y;
}
.plane-scene.start .wing-r {
  --dir: -1;
  animation: 0.5s linear 1s forwards wing;
}
.plane-scene.start .wing-r .fold-r--top, .plane-scene.start .wing-r .dangly-bit {
  transform: rotate3d(-1, var(--rot-y), 0, 179deg);
}
.plane-scene.start .wing-r .inner-dangle {
  --dir: -1;
  animation: 0.5s linear 1s forwards fold-x;
}
.plane-scene.start .wing-r .fold-r.fold-r--outer {
  --dir: 1;
  transform-origin: left center;
  animation: 0.5s linear 1s forwards fold-y;
}

@keyframes plane {
  0% {
    transform: rotate3d(1, -0.2, 0.2, 0deg);
  }
  7% {
    transform: rotate3d(1, -0.2, 0.2, 90deg);
  }
  12% {
    transform: rotate3d(1, -0.2, 0.2, 70deg) translate3d(0, -50000px, 0);
  }
  100% {
    transform: rotate3d(1, -0.2, 0.2, 70deg) translate3d(0, -50000px, 0);
  }
}
@keyframes wing {
  0% {
    transform: rotate3d(0, var(--dir, 1), 0, 0deg);
  }
  100% {
    transform: rotate3d(0, var(--dir, 1), 0, 70deg);
  }
}
@keyframes fold-x {
  0% {
    transform: rotate3d(var(--dir, 1), 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(var(--dir, 1), 0, 0, 90deg);
  }
}
@keyframes fold-y {
  0% {
    transform: rotate3d(0, var(--dir, 1), 0, 0deg);
  }
  100% {
    transform: rotate3d(0, var(--dir, 1), 0, 90deg);
  }
}

/*# sourceMappingURL=style.css.map */