*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-size: 16px;
    background-color: #fff;
}


.container{
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    width:200px;
    aspect-ratio: 1/1.1;
    background-image: url(/assets/images/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}


.logo span:before, .logo span:after {
 content: '';
 display: block;
 position: absolute;
 height: 100%;
}


.logo span {
	width: 100%;
    height: 100%;
    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: -120%;
	left:0;
    transition: top 0.6s cubic-bezier(0, 0.3, 1, 0.7);
    z-index: 100;
    overflow: hidden;
}

.logo.blink span{

     top:120%;

}



.logo span:before {
    width: 160%;
    top: inherit;
    left: -20%;
    opacity: 0.5;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0));
    transform: rotate(-20deg);
}

.logo span:after {
    width:100%;
    top:0;
    opacity:0;
    box-shadow: inset -5px -15px 40px rgba(0, 0, 0, 0.1);
    background-image: radial-gradient(35% 25%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    transition: all 0.6s cubic-bezier(0, 0.3, 1, 0.7);
}