.folder{cursor:pointer;transform-origin:bottom;width:320px;height:240px;position:relative}.paper{z-index:4;opacity:0;width:180px;height:126px;transform:scale(.6) translate(var(--magnet-x,0), var(--magnet-y,0));background:#fff;border-radius:10px;margin-left:-90px;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s;position:absolute;bottom:30px;left:50%;overflow:hidden;box-shadow:0 4px 24px #0000001f}.paper img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.paper-1{z-index:4}.paper-2{z-index:3}.paper-3{z-index:2}.folder.open .paper{opacity:1}.folder.open .paper-1{transform:translate(calc(-60px + var(--magnet-x,0)), calc(-100px + var(--magnet-y,0))) rotate(-12deg) scale(1);z-index:8}.folder.open .paper-2{transform:translate(calc(20px + var(--magnet-x,0)), calc(-125px + var(--magnet-y,0))) rotate(2deg) scale(1);z-index:7}.folder.open .paper-3{transform:translate(calc(100px + var(--magnet-x,0)), calc(-100px + var(--magnet-y,0))) rotate(16deg) scale(1);z-index:6}@keyframes folder-float{0%,to{transform:translate(-50%)translateY(0)rotate(0)}25%{transform:translate(-50%)translateY(-4px)rotate(.5deg)}50%{transform:translate(-50%)translateY(-2px)rotate(-.3deg)}75%{transform:translate(-50%)translateY(-5px)rotate(.2deg)}}.folder__icon{z-index:5;pointer-events:none;filter:drop-shadow(0 4px 16px #0000001a);width:150px;height:auto;animation:4s ease-in-out infinite folder-float;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.folder:hover .folder__icon,.folder.open .folder__icon{transition:transform .3s;animation-play-state:paused;transform:translate(-50%)translateY(-5px)scale(1.03)}