#petals-container,.petal{position:fixed;top:0;left:0;pointer-events:none}
.petal{z-index:99;opacity:0;animation:12s linear forwards fall;will-change:transform,opacity}
#petals-container{width:100%;height:100%;overflow:hidden;z-index:10}
@keyframes fall{
0%{opacity:.8;transform:translateY(-10vh) translateX(0) rotate(0)}
20%{opacity:.8;transform:translateY(20vh) translateX(20px) rotate(15deg)}
40%{opacity:.7;transform:translateY(40vh) translateX(-20px) rotate(30deg)}
60%{opacity:.5;transform:translateY(60vh) translateX(20px) rotate(45deg)}
80%{opacity:.3;transform:translateY(80vh) translateX(-20px) rotate(55deg)}
100%{opacity:0;transform:translateY(110vh) translateX(0) rotate(70deg)}
}
@media (max-width:768px){
@keyframes fall{
0%{opacity:.8;transform:translateY(-10vh) translateX(0) rotate(0)}
25%{opacity:.8;transform:translateY(25vh) translateX(10px) rotate(10deg)}
50%{opacity:.6;transform:translateY(50vh) translateX(-10px) rotate(20deg)}
75%{opacity:.6;transform:translateY(75vh) translateX(10px) rotate(30deg)}
100%{opacity:0;transform:translateY(110vh) translateX(0) rotate(40deg)}
}
}
.name-left,.name-right{position:relative;display:inline-block;opacity:0;animation-duration:1.5s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.42,0,0.58,1);animation-delay:.2s}
.name-left{transform:translateX(-300%);animation-name:slideInFromLeft}
.name-right{transform:translateX(300%);animation-name:slideInFromRight}
@keyframes slideInFromLeft{
0%{transform:translateX(-300%);opacity:0}
40%{opacity:.4}
100%{transform:translateX(0);opacity:1}
}
@keyframes slideInFromRight{
0%{transform:translateX(300%);opacity:0}
40%{opacity:.4}
100%{transform:translateX(0);opacity:1}
}