.glass{
position: relative;
width: 300px;
height: 400px;
transform: translate(-50%, -50%);
aspect-ratio: 9/16;
background: linear-gradient(to top, #8B9467, #964B00);
animation: shattered 10s ease-out;
}
.square{
position: absolute;
aspect-ratio: 1;
width: 10px;
height: 10px;
background-color: #964B00;
transform-origin: left;
animation: slow 5s ease-out;
animation-delay: 2s;
top: 50%;
left: 50%;
z-index: 2;
}
.square.fast{
animation: fast 5s ease-out;
animation-delay: 2s;
top: 50%;
left: 50%;
z-index: 1;
}
.square.slower{
animation: slow2 5s ease-out;
animation-delay: 2s;
top: 50%;
left: 50%;
z-index: 3;
}
.square.second{
animation-delay: 6s;
}
.square.second-slow{
animation-delay: 6.5s;
animation: slow 5s ease-out;
}
}