* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background: #0d0d0d;
}

.container {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: 100%;
    position: relative;
    transform: scale(0.5);
}

.container img.layer-1 {
    animation: revealSymbolBg 10s ease-in-out 0s 1 forwards;
}

.container img.layer-2 {
    animation: revealSymbol 5s ease-in-out 0s 1 forwards;
}

.img-container {
    position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 1/1;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
}

.clip-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-self: center;
    animation: unBlur 5s ease-in-out 0s 1 forwards;
}

.clip {
    position: absolute;
    width: auto;
    height: 100%;
    background: #0c0e0d;
    clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    aspect-ratio: 1/1;
    animation: revealSymbolReverse 5s ease-in-out 0s 1 forwards;
}

@keyframes revealSymbol {

    0% {
        transform: scale(0.1);
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    }

    20% {
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    }

    60% {
        /* clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%); */
    }


    100% {
        transform: scale(2);
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    }

}


@keyframes revealSymbolBg {

    0% {
        transform: scale(0.1) translateY(-100px);
        filter: blur(140px);
        opacity: 0;
    }

    10% {
        transform: scale(0.1) translateY(-100px);
    }

    18% {
        filter: blur(140px);
        opacity: 1;
    }

    25% {
        filter: blur(50px);
    }
    40% {
        filter: blur(0);

    }


    50% {
        transform: scale(2) translateY(0px) rotate(0deg);
    }
    100% {
        transform: scale(2) translateY(0px) rotate(0deg);

    }

}


@keyframes revealSymbolReverse {
    0% {
        transform: scale(0.1);
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
        border-radius: 100%;
    }

    10% {
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    }

    20% {
        clip-path: polygon(42% 38%, 50% 25%, 58% 38%, 67% 51%, 75% 62%, 51% 62%, 26% 62%, 35% 48%);
    }

    50% {
        clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    }


    100% {
        transform: scale(0.28);
        border-radius: 100%;
        clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);

    }
}

@keyframes  unBlur {

    0% {
        filter: blur(0px);
    }

    40% {
        filter: blur(0);
    }

    60% {
        filter: blur(20px);
        opacity: 1;
    }

    80% {
        filter: blur(30px);

    }

    100% {
        filter: blur(40px);
        opacity: 0;
    }

}