.card{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:flex-end;perspective:2500px}.cover-image{width:100%;height:100%;object-fit:cover}.wrapper{transition:all .5s;position:absolute;width:100%;z-index:-1}.card:hover .wrapper{transform:perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);box-shadow:2px 35px 32px -8px #000000a6;-webkit-box-shadow:2px 35px 32px -8px rgba(0,0,0,.65);-moz-box-shadow:2px 35px 32px -8px rgba(0,0,0,.65);filter:blur(2px);-webkit-filter:blur(2px)}.wrapper:before,.wrapper:after{content:"";opacity:0;width:100%;height:80px;transition:all .5s;position:absolute;left:0}.wrapper:before{top:0;height:100%;background-image:linear-gradient(to top,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.wrapper:after{bottom:0;opacity:1;background-image:linear-gradient(to bottom,transparent 46%,rgba(12,13,19,.5) 68%,rgba(12,13,19) 97%)}.card:hover .wrapper:before,.wrapper:after{opacity:1}.card:hover .wrapper:after{height:120px}.title{width:100%;transition:transform .5s}.card:hover .title{transform:translate3d(0,-50px,100px)}.character{width:100%;opacity:0;transition:all .5s;position:absolute;z-index:-1}.card:hover .character{opacity:1;transform:translate3d(0,-30%,100px)}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}