:root {
    --primary-color: #686de0;
    --dark-color: #4448b3;
    --white-color: #ffffff;
    --light-color: #f1f2f6;
    --black-color: #0e111c;
}

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

body {
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8;
    font-family: sans-serif;
    color: var(--primary-color);
    background: var(--black-color);
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.site {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    nav {
        position: relative;
        width: 440px;
        padding: 10px 20px;
        background: var(--white-color);
        border-radius: 35px;

        ul {
            display: flex;

            li {

                a {
                    height: 60px;
                    width: 60px;
                    margin: 0 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.5em;
                    z-index: 10;
                    transition: transform .3s, text-shadow .3s;
                }

                .sub_menoo {
                    position: absolute;
                    background: var(--dark-color);
                    left: -100%;
                    top: -100px;
                    align-items: center;
                    justify-content: center;
                    border-radius: 30px;
                    z-index: 10;
                    clip-path: inset(0 120px 0 round 60px);

                    li {

                        a {
                            margin: 0;
                            color: var(--white-color);
                            font-size: 1.15em;
                            border-radius: 50%;
                            clip-path: inset(10px round 20px);
                            transition: background .3s, color .3s, clip-path .3s;
                        }

                        a:hover {
                            background: rgb(255 255 255 /20%);
                        }
                    }
                }
            }

            li.active > a {
                background-color: var(--primary-color);
                color: var(--white-color);
                border-radius: 50%;
                transform: translateY(-40px);
            }

            li.last {
                position: absolute;
                width: 100px;
                height: 80px;
                background: var(--black-color);
                border-radius: 0 0 50% 50% / 0 0 80% 80% ;
                top: -40px;
                left: 10px;
                transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            li.last::before,
            li.last::after {
                content: "";
                position: absolute;
                top: 50%;
                width: 40px;
                height: 40px;
                background: transparent;
                box-shadow: 0 -20px 0 0 var(--black-color);
            }

            li.last::before {
                left: -21px;
                box-shadow: 0 -20px 0 0 var(--black-color);
                border-top-right-radius: 40px;
            }

            li.last::after {
                right: -21px;
                box-shadow: 0 -20px 0 0 var(--black-color);
                border-top-left-radius: 40px;
            }

            li:nth-child(1).active ~ .last {
                transform: translateX(calc(80px * 0));
            }

            li:nth-child(1) {

                .sub_menoo {
                    left: 10px;
                    right: auto;
                    clip-path: inset(0 100% 0 0); 
                }
            }

            li:nth-child(2).active ~ .last {
                transform: translateX(calc(80px * 1));
            }

            li:nth-child(2) {

                .sub_menoo {
                    left: 10px;
                    right: auto;
                    clip-path: inset(0 100% 0 0); 
                }
            }

            li:nth-child(3).active ~ .last {
                transform: translateX(calc(80px * 2));
            }

            li:nth-child(4).active ~ .last {
                transform: translateX(calc(80px * 3));
            }

            li:nth-child(4) {

                .sub_menoo {
                    left: auto;
                    right: 10px;
                    clip-path: inset(0 0 0 100%); 
                }
            }

            li:nth-child(5).active ~ .last {
                transform: translateX(calc(80px * 4));
            }


            li:nth-child(5) {

                .sub_menoo {
                    left: auto;
                    right: 10px;
                    clip-path: inset(0 0 0 100%); 
                }
            }

            li.has_child.active > a{
                animation: jump 1s both;
                transition: transform .3s 1s, background .1s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            li.active > a > i {
                transform: scale(1);
                transition: transform .1s 1s;
            }

            li.has_child.active > a i {
                transform: scale(0);
            }

            li.has_child.active > .sub_menoo {
                clip-path: inset(0 0 0 0);
                transition: clip-path .3s;
                transition-delay: 1s;
            } 
        }
    }

    nav :where(li, li a) {
        position: relative;
    } 

    nav > ul > li > a:hover {
        text-shadow: 3px 5px 15px;
    }

    nav :where(li:nth-child(1), li:nth-child(2)) .sub_menoo {
        position: relative;
        left: 10px;
        right: auto;
        clip-path: inset(0 100% 0 0);
    }
}

@keyframes jump {
    0% {
        transform: translateY(-20px);
    }

    20% {
        transform: translateY(-40px);
    }

    40% {
        transform: translateY(-40px);
    }

    60% {
        transform: translateY(-100px);
    }

    80% {
        transform: translateY(-100px) scale(1.4);
    }

    97% {
        transform: translateY(-100px) scale(1.4);
        background: var(--primary-color);
    }

    100% {
        transform: translateY(-100px) scale(1);
        background: var(--dark-color);
    }
}