.card{position:relative;width:300px;height:300px;background:lightgrey;border-radius:30px;overflow:hidden;box-shadow:0 7px 29px 0 rgba(100,100,111,.2);transition:all .5s cubic-bezier(.25,.7,.35,1)}.background{position:absolute;inset:0;background-color:#7b2ff7;background-image:linear-gradient(45deg,#7b2ff7,#f107a3 50%,#23d5ab)}.logo{position:absolute;right:50%;bottom:50%;transform:translate(50%,50%);transition:all .3s ease;font-size:1.3em;font-weight:600;color:#ffffff;letter-spacing:3px}.logo .logo-svg{fill:white;width:30px;height:30px}.icon{display:inline-block;width:20px;height:20px}.icon .svg{fill:rgba(255,255,255,.797);width:100%;transition:all .25s ease}.box{padding:10px;text-align:right;background:rgba(255,255,255,.389);border-top:2px solid rgb(255,255,255);border-right:1px solid white;border-radius:10% 13% 42% 0/10% 12% 75% 0;box-shadow:-7px 7px 29px 0 rgba(100,100,111,.364);transform-origin:bottom left;transition:all .5s cubic-bezier(.25,.7,.35,1)}.box,.box:before{position:absolute}.box:before{content:"";inset:0;border-radius:inherit;opacity:0;transition:all .25s ease}.box1{width:70%;height:70%;bottom:-70%;left:-70%}.box1:before{background:radial-gradient(circle at 30% 107%,#7b7966 0,#ff31e5 60%,#59e0ff 90%)}.box2{width:50%;height:50%;bottom:-50%;left:-50%;transition-delay:.1s}.box2:before{background:radial-gradient(circle at 30% 107%,#60f6ff 0,#00c2ff 90%)}.box3{width:30%;height:30%;bottom:-30%;left:-30%;transition-delay:.2s}.box3:before{background:radial-gradient(circle at 30% 107%,#b38bff 0,#9a47ff 90%)}.box4{width:10%;height:10%;bottom:-10%;left:-10%;transition-delay:.3s}.box:hover:before{opacity:1}.box:hover .icon .svg{filter:drop-shadow(0 0 5px white)}.card:hover{transform:scale(1.12)}.card:hover .box{bottom:-1px;left:-1px}.card:hover .logo{transform:translate(90px,-60px);letter-spacing:0}