#plane-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;

    --dark: 1;
    --base-size: 4;
    --plane-height: calc(var(--base-size) * 1vmin);
    --plane-width: calc(var(--plane-height) * 1.6);

    --white-one: hsl(220, 20%, 92%);
    --white-two: hsl(220, 18%, 86%);
    --white-three: hsl(220, 16%, 80%);
    --white-four: hsl(220, 14%, 74%);
    --accent-one: #6c63ff;
    --accent-two: #7c74ff;
    --accent-three: #5b52e0;
    --accent-four: #4a42c9;
    --accent-five: #8880ff;
    --metal-one: hsl(220, 12%, 65%);
    --metal-two: hsl(220, 12%, 55%);
    --metal-three: hsl(220, 12%, 48%);
    --screen: hsla(210, 80%, 50%, 0.25);
    --wheel-one: #1a1a1a;
    --wheel-two: #0d0d0d;
    --wheel-three: #000;
    --wheel-hub: hsl(0, 0%, 78%);
    --alpha: 0;
}

#plane-wrapper *,
#plane-wrapper *:after,
#plane-wrapper *:before {
    box-sizing: border-box;
    transform-style: preserve-3d;
}

#plane-wrapper .cuboid {
    width: 100%;
    height: 100%;
    position: relative;
}

#plane-wrapper .cuboid__side:nth-of-type(1) {
    height: calc(var(--thickness) * 1vmin);
    width: 100%;
    position: absolute;
    top: 0;
    transform: translate(0, -50%) rotateX(90deg);
}

#plane-wrapper .cuboid__side:nth-of-type(2) {
    height: 100%;
    width: calc(var(--thickness) * 1vmin);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%) rotateY(90deg);
}

#plane-wrapper .cuboid__side:nth-of-type(3) {
    width: 100%;
    height: calc(var(--thickness) * 1vmin);
    position: absolute;
    bottom: 0;
    transform: translate(0%, 50%) rotateX(90deg);
}

#plane-wrapper .cuboid__side:nth-of-type(4) {
    height: 100%;
    width: calc(var(--thickness) * 1vmin);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(90deg);
}

#plane-wrapper .cuboid__side:nth-of-type(5) {
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
    position: absolute;
    top: 0;
    left: 0;
}

#plane-wrapper .cuboid__side:nth-of-type(6) {
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
}

.plane-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transition: none;
}

.plane-scene .plane-pivot {
    position: absolute;
    top: 0; left: 0;
    transform: rotateX(-15deg) rotateY(15deg);
}

.plane-scene .plane {
    height: var(--plane-height);
    width: var(--plane-width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plane-scene .plane__floater {
    position: absolute;
    width: var(--plane-width);
    height: var(--plane-width);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.plane-scene .plane__looper {
    position: absolute;
    width: var(--plane-width);
    height: var(--plane-width);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transform-origin: 50% 0;
}

.plane-scene .plane * {
    position: absolute;
}

.plane-scene .plane__body {
    height: 40%;
    width: 36%;
    bottom: 20%;
    left: 10%;
}

.plane-scene .plane__wheels {
    bottom: 0;
    width: calc(var(--plane-height) * 0.2);
    left: 32%;
    transform: translate(-50%, 0);
    height: 20%;
}

.plane-scene .plane__axle {
    height: 50%;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plane-scene .plane__wheel { height: 100%; width: 100%; top: 0; left: 0; }
.plane-scene .plane__wings { height: 70%; width: 40%; bottom: 19%; left: 12%; }
.plane-scene .plane__tail { height: 40%; width: 54%; bottom: 20%; left: 46%; }
.plane-scene .plane__nose { height: 30%; width: 10%; bottom: 25%; }

.plane-scene .plane__stabilizer--horizontal {
    height: 9%; width: 16%; right: 1%; bottom: 50%;
}

.plane-scene .plane__screen {
    bottom: 60%; left: 30%; width: 6%; height: 14%;
}

.plane-scene .plane__propellor {
    height: calc(var(--base-size) * 0.75vmin);
    width: calc(var(--base-size) * 0.75vmin);
    left: -1%; bottom: 40%;
    transform: translate(-50%, 50%) rotateY(-90deg);
}

.plane-scene .plane__propellor:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate3d(-50%, -50%, 2px);
    height: 16%; width: 16%;
    border-radius: 50%;
    background: var(--white-one);
}

.plane-scene .plane__stabilizer--vertical {
    height: 20%; width: 20%; right: 0; bottom: 60%;
}

.plane-scene .plane__beacon {
    right: 1%; bottom: 80%; height: 2%; width: 2%;
}

.plane-scene .plane__wheel--left {
    transform: translate3d(0, 0, calc(var(--base-size) * 0.3vmin));
}

.plane-scene .plane__wheel--right {
    transform: translate3d(0, 0, calc(var(--base-size) * -0.3vmin));
}

.plane-scene .propellor { height: 100%; width: 100%; }

.plane-scene .propellor:after,
.plane-scene .propellor:before {
    content: '';
    height: 100%; width: 10%;
    position: absolute;
    top: 50%; left: 50%;
    background: linear-gradient(transparent 0 5%, var(--accent-two) 5% 15%, transparent 15% 85%, var(--accent-two) 85% 95%, transparent 95%), #000;
    transform: translate(-50%, -50%) rotate(calc(var(--r, 45) * 1deg));
}

.plane-scene .propellor:after { --r: -45; }

.plane-scene .wings__ghost { height: 80%; width: 80%; left: 50%; bottom: 10%; transform: translate(-50%, 0); }
.plane-scene .wings__top { top: 0; height: 10%; width: 100%; left: 0; }
.plane-scene .wings__bottom { bottom: 0; height: 10%; width: 100%; left: 0; }

.plane-scene .wings__strobe { bottom: 10%; height: 4%; width: 4%; left: 50%; }
.plane-scene .wings__strobe--left { transform: translate3d(-50%, 0, calc(var(--base-size) * 1vmin)); }
.plane-scene .wings__strobe--right { transform: translate3d(-50%, 0, calc(var(--base-size) * -1vmin)); }

#plane-wrapper .cuboid--body { --thickness: calc(var(--base-size) * 0.4); }
#plane-wrapper .cuboid--body div { background: var(--white-two); }
#plane-wrapper .cuboid--body div:nth-of-type(1) { background: var(--white-one); }
#plane-wrapper .cuboid--body div:nth-of-type(2) { background: var(--white-two); }
#plane-wrapper .cuboid--body div:nth-of-type(3) { background: var(--white-three); }
#plane-wrapper .cuboid--body div:nth-of-type(4) { background: var(--white-four); }

#plane-wrapper .cuboid--screen { --thickness: calc(var(--base-size) * 0.26); }
#plane-wrapper .cuboid--screen div { background: var(--screen); }

#plane-wrapper .cuboid--tail { --thickness: calc(var(--base-size) * 0.3); }
#plane-wrapper .cuboid--tail div { background: var(--white-two); }
#plane-wrapper .cuboid--tail div:nth-of-type(1) { background: var(--white-one); }
#plane-wrapper .cuboid--tail div:nth-of-type(1):after {
    content: '';
    position: absolute;
    height: 74%;
    width: 50%;
    background: var(--metal-three);
    top: 50%;
    right: 50%;
    transform: translate3d(-50%, -50%, 1px);
}
#plane-wrapper .cuboid--tail div:nth-of-type(2) { background: linear-gradient(var(--white-two) 0 30%, transparent 30%); }
#plane-wrapper .cuboid--tail div:nth-of-type(3) { background: linear-gradient(90deg, var(--white-two) 0 20%, transparent 20%); }
#plane-wrapper .cuboid--tail div:nth-of-type(3):after {
    content: '';
    position: absolute;
    background: var(--white-four);
    top: 0%; left: 20%;
    height: 100%; width: 87%;
    transform-origin: 0 50%;
    transform: rotateY(-22deg);
}
#plane-wrapper .cuboid--tail div:nth-of-type(5) { background: transparent; overflow: hidden; }
#plane-wrapper .cuboid--tail div:nth-of-type(5):after {
    content: '';
    position: absolute;
    bottom: 70%; height: 100%; width: 100%;
    background: var(--white-two);
    transform-origin: 100% 100%;
    transform: rotate(-22deg) scale(2) translate(10%, 0);
}
#plane-wrapper .cuboid--tail div:nth-of-type(6) { background: transparent; overflow: hidden; }
#plane-wrapper .cuboid--tail div:nth-of-type(6):after {
    content: '';
    position: absolute;
    bottom: 70%; height: 100%; width: 100%;
    background: var(--white-two);
    transform-origin: 0% 100%;
    transform: rotate(22deg) scale(2) translate(-10%, 0);
}

#plane-wrapper .cuboid--nose { --thickness: calc(var(--base-size) * 0.3); }
#plane-wrapper .cuboid--nose div { background: var(--metal-three); }
#plane-wrapper .cuboid--nose div:nth-of-type(1) { background: var(--metal-one); }
#plane-wrapper .cuboid--nose div:nth-of-type(2) { background: var(--metal-two); }
#plane-wrapper .cuboid--nose div:nth-of-type(3) { background: var(--metal-one); }

#plane-wrapper .cuboid--wings-ghost,
#plane-wrapper .cuboid--wings-top,
#plane-wrapper .cuboid--wings-bottom { --thickness: calc(var(--base-size) * 2.2); }
#plane-wrapper .cuboid--wings-ghost div,
#plane-wrapper .cuboid--wings-top div,
#plane-wrapper .cuboid--wings-bottom div { background: var(--accent-one); }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(1),
#plane-wrapper .cuboid--wings-top div:nth-of-type(1),
#plane-wrapper .cuboid--wings-bottom div:nth-of-type(1) { background: var(--accent-two); }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(2),
#plane-wrapper .cuboid--wings-top div:nth-of-type(2),
#plane-wrapper .cuboid--wings-bottom div:nth-of-type(2),
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(5),
#plane-wrapper .cuboid--wings-top div:nth-of-type(5),
#plane-wrapper .cuboid--wings-bottom div:nth-of-type(5) { background: var(--accent-three); }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(4),
#plane-wrapper .cuboid--wings-top div:nth-of-type(4),
#plane-wrapper .cuboid--wings-bottom div:nth-of-type(4) { background: var(--accent-four); }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(3),
#plane-wrapper .cuboid--wings-top div:nth-of-type(3),
#plane-wrapper .cuboid--wings-bottom div:nth-of-type(3) { background: var(--accent-five); }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(3),
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(5),
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(6),
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(1) { background: transparent; }
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(2),
#plane-wrapper .cuboid--wings-ghost div:nth-of-type(4) {
    background: linear-gradient(90deg, transparent 0 5%, var(--metal-one) 5% 7%, transparent 7% 33%, var(--metal-one) 33% 35%, transparent 35% 65%, var(--metal-one) 65% 67%, transparent 67% 93%, var(--metal-one) 93% 95%, transparent 95%);
}

#plane-wrapper .cuboid--axle { --thickness: calc(var(--base-size) * 0.5); }
#plane-wrapper .cuboid--axle div { background: var(--metal-two); }
#plane-wrapper .cuboid--axle div:nth-of-type(3) { background: var(--metal-three); }
#plane-wrapper .cuboid--axle div:nth-of-type(2),
#plane-wrapper .cuboid--axle div:nth-of-type(1) { background: var(--metal-one); }
#plane-wrapper .cuboid--axle div:nth-of-type(6) { background: var(--metal-one); }

#plane-wrapper .cuboid--horizontal-stabilizer { --thickness: calc(var(--base-size) * 0.65); }
#plane-wrapper .cuboid--horizontal-stabilizer div { background: var(--accent-one); }
#plane-wrapper .cuboid--horizontal-stabilizer div:nth-of-type(1) { background: var(--accent-two); }
#plane-wrapper .cuboid--horizontal-stabilizer div:nth-of-type(2),
#plane-wrapper .cuboid--horizontal-stabilizer div:nth-of-type(5) { background: var(--accent-three); }
#plane-wrapper .cuboid--horizontal-stabilizer div:nth-of-type(3),
#plane-wrapper .cuboid--horizontal-stabilizer div:nth-of-type(4) { background: var(--accent-four); }

#plane-wrapper .cuboid--vertical-stabilizer { --thickness: calc(var(--base-size) * 0.2); }
#plane-wrapper .cuboid--vertical-stabilizer div { background: var(--accent-one); }
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(1) {
    background: linear-gradient(270deg, var(--accent-two) 0 30%, transparent 30%);
}
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(4) { background: transparent; }
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(4):after {
    content: '';
    background: var(--accent-four);
    height: 150%; bottom: 0; left: 0;
    position: absolute; width: 100%;
    transform-origin: 50% 100%;
    transform: rotateX(-48deg);
}
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(5) { background: transparent; overflow: hidden; }
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(5):after {
    content: '';
    position: absolute;
    top: 100%; transform-origin: 0 0;
    transform: rotate(-42deg);
    background: var(--accent-three);
    height: 150%; width: 160%;
}
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(6) { background: transparent; overflow: hidden; }
#plane-wrapper .cuboid--vertical-stabilizer div:nth-of-type(6):after {
    content: '';
    position: absolute;
    top: 100%; right: 0;
    transform-origin: 100% 0;
    transform: rotate(42deg);
    background: var(--accent-three);
    height: 150%; width: 160%;
}

#plane-wrapper .cuboid--wheel-left,
#plane-wrapper .cuboid--wheel-right { --thickness: calc(var(--base-size) * 0.1); }
#plane-wrapper .cuboid--wheel-left div,
#plane-wrapper .cuboid--wheel-right div { background: var(--wheel-one); }
#plane-wrapper .cuboid--wheel-left div:nth-of-type(1),
#plane-wrapper .cuboid--wheel-right div:nth-of-type(1),
#plane-wrapper .cuboid--wheel-left div:nth-of-type(2),
#plane-wrapper .cuboid--wheel-right div:nth-of-type(2),
#plane-wrapper .cuboid--wheel-left div:nth-of-type(4),
#plane-wrapper .cuboid--wheel-right div:nth-of-type(4) { background: var(--wheel-two); }
#plane-wrapper .cuboid--wheel-left div:nth-of-type(3),
#plane-wrapper .cuboid--wheel-right div:nth-of-type(3) { background: var(--wheel-three); }
#plane-wrapper .cuboid--wheel-left div:nth-of-type(5):after,
#plane-wrapper .cuboid--wheel-right div:nth-of-type(5):after,
#plane-wrapper .cuboid--wheel-left div:nth-of-type(6):after,
#plane-wrapper .cuboid--wheel-right div:nth-of-type(6):after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 40%; width: 40%;
    background: var(--wheel-hub);
}

#plane-wrapper .cuboid--beacon { --thickness: calc(var(--base-size) * 0.02); }
#plane-wrapper .cuboid--beacon div { background: hsla(0, 90%, 50%, var(--alpha)); }

#plane-wrapper .cuboid--strobe { --thickness: calc(var(--base-size) * 0.02); }
#plane-wrapper .cuboid--strobe div { background: hsla(0, 90%, 98%, var(--alpha)); }

#plane-wrapper .plane {
    animation: planeRoll 10s infinite ease-out alternate;
}

#plane-wrapper .plane__floater {
    animation: planeFloat 2s infinite ease-in-out;
}

#plane-wrapper .plane__looper {
    animation: planeLoop 10s infinite ease-in-out;
}

#plane-wrapper .cuboid--beacon {
    animation: planeFlash 1s infinite;
}

#plane-wrapper .cuboid--strobe {
    animation: planeFlash 0.5s infinite;
}

#plane-wrapper .propellor {
    animation: planeSpin 0.35s infinite linear;
}

@keyframes planeFlash {
    50% { --alpha: 1; }
}

@keyframes planeSpin {
    to { transform: rotate(360deg); }
}

@keyframes planeFloat {
    50% { transform: translate(-50%, -40%); }
}

@keyframes planeLoop {
    0%, 40% { transform: translate(-50%, -50%); }
    50%, 100% { transform: translate(-50%, -50%) rotateZ(360deg); }
}

@keyframes planeRoll {
    0%, 85% { transform: translate(-50%, -50%); }
    90%, 100% { transform: translate(-50%, -50%) rotateX(-360deg); }
}

@media (max-width: 768px) {
    #plane-wrapper {
        --base-size: 3;
    }
}