.body {
    display: grid;
    place-items: center;
    height: 80vh;
}

.lightsaber {
    transition: transform 0.3s ease-in-out;
    width: 30vw;
    height: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.metal {
    background: linear-gradient(
        to bottom,
        #ccdbee 10%,
        #607088 35%,
        #ccdbee 70%,
        #607088
    );
}

.black-metal {
    background: linear-gradient(
        to bottom,
        #767a83 10%,
        #202432 35%,
        #767a83 70%,
        #202432
    );
}

.copper {
    background: linear-gradient(
        to bottom,
        #70413a 10%,
        #90645a 35%,
        #70413a 70%,
        #401f21
    );
}

.pommel-cap {
    height: 90%;
    width: 10%;
    border-radius: 10% 0 0 10%;
    box-shadow: 0 0 5vw black;
}

.grip {
    height: 100%;
    width: 45%;
    border-radius: 5%;
    box-shadow: 0 0 5vw black;
}

.hilt {
    height: 80%;
    width: 35%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.hilt > .segment {
    width: 8%;
    height: 100%;
    flex-grow: 1;
}

.hilt > .segment .black-metal {
    width: 20%;
}

.focusing-ring {
    height: 70%;
    width: 15%;
    display: flex;
}

.focusing-ring > .segment {
    width: 40%;
    height: 100%;
    flex-grow: 1;
}

.focusing-ring > .segment .metal {
    width: 8%;
}

.blade-emitter {
    height: 100%;
    width: 10%;
    z-index: 1;

    display: flex;
    align-items: center;
}

.blade-emitter > .segment {
    width: 40%;
    height: 100%;
    flex-grow: 1;
}

.blade-emitter > .segment .start {
    height: 60%;
    width: 8%;
}

.blade-emitter > .segment .middle {
    height: 80%;
}

.blade-emitter > .segment .end {
    height: 100%;
    width: 8%;
}

.blade {
    position: absolute;
    height: 70%;
    width: 300%;
    left: 100%;
    background: linear-gradient(
        to bottom,
        var(--lightsaber-color),
        white 25%,
        white 75%,
        var(--lightsaber-color)
    );
    border-top-right-radius: 10vw;
    border-bottom-right-radius: 10vw;
}

.blade > .glow {
    border-radius: inherit;
    border: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5vw var(--lightsaber-color);
}

.blade > .glow .large {
    box-shadow: 0 0 30vw 10vw var(--lightsaber-color);
    opacity: 0.7;
}

.controls {
    height: 25%;
    width: 50%;
    position: absolute;
    left: 45%;
    bottom: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    z-index: -1;
}

.controls > .button {
    height: 0.75vw;
    width: 0.75vw;
    background: black;
    border-radius: 50%;
}

.controls:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: 100%;
    background: #b16521;
}

.button.-up {
    background-color: #117305;
}

.button.-down {
    background-color: #a8141e;
}

:root {
    --ease: cubic-bezier(0.5, 0, 0.2, 1);
    --duration: 10s;
    --delay: 0s;
    --speed: 0.75;
}

:root * {
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
}

.pommel-cap {
    --delay: 0s;
    --duration: 1s, 0.5s;
    animation-name: enter-reverse, fade-in;
}

.grip {
    --delay: 0.3s;
    --duration: 1s, 0.5s;
    animation-name: enter, fade-in;
}

.controls {
    --delay: 1s;
    --duration: 1s, 0.5s;
    animation-name: slide-down, fade-in;
}

.controls .button {
    animation-name: scale-up;
    --delay: calc(1.5s + (var(--i, 0) * 0.1s));
    --duration: 0.5s;
}

.hilt .segment {
    --delay: calc(1.25s + (var(--i, 0) * 0.05s));
    --duration: 1s, 1s;
    animation-name: slide-down, fade-in;
}

.hilt .segment:nth-child(even) {
    animation-name: slide-up, fade-in;
}

.focusing-ring .segment {
    --delay: calc(2.25s + (var(--i, 0) * 0.05s));
    --duration: 1s, 1s;
    animation-name: enter, fade-in;
}

.blade-emitter .segment {
    --delay: calc(3s + (var(--i, 0) * 0.05s));
    --duration: 1s, 1s;
    animation-name: enter, fade-in;
}

.lightsaber {
    animation-name: lightsaber, lightsaber-out;
    animation-fill-mode: backwards, forwards;
    --ease: cubic-bezier(0.5, 0, 0.2, 1), cubic-bezier(0.82, -0.38, 0.14, 1.35);
    --delay: 0s, 10s;
    --duration: 10s, 1s;
}

.blade {
    --delay: 4.5s;
    --duration: 1s, 1s;
    transform-origin: left center;
    animation-name: blade, fade-in;
}

.blade .glow {
    --delay: 4.5s;
    --duration: 3s;
    --ease: linear;
    animation-name: flicker;
    animation-iteration-count: infinite;
}

@keyframes scale-up {
    from {
        transform: scale(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes enter {
    from {
        transform: translateX(10vw);
    }
}

@keyframes enter-reverse {
    from {
        transform: translateX(-10vw);
    }
}

@keyframes slide-down {
    from {
        transform: translateY(-10vw);
    }
}

@keyframes slide-up {
    from {
        transform: translateY(10vw);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

@keyframes lightsaber {
    from {
        transform: translateX(10%);
    }
    22% {
        transform: translateX(-15%);
    }
    30% {
        transform: translateX(-30%);
    }
    45% {
        transform: translateX(-40%) scale(0.9);
        animation-timing-function: cubic-bezier(0.7, 0, 0, 1);
    }
    55%,
    to {
        transform: translateX(-100%) scale(0.7);
    }
}

@keyframes lightsaber-out {
    from {
        transform: translateX(-100%) scale(0.7);
    }
    to {
        transform: translateX(-100%) scale(0.7) translateX(50%) rotate(360deg)
            translateX(-50%);
    }
}

@keyframes blade {
    from {
        transform: scaleX(0);
    }
}

@keyframes flicker {
    20% {
        opacity: 0.5;
    }
    40% {
        opacity: 0.7;
    }
    60% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.6;
    }
}