:root{--folder-color:#14b8a6;--folder-back-color:#0f766e;--paper-1:#fff;--paper-2:#fff;--paper-3:#fff}.folder{cursor:pointer;margin-top:140px;margin-bottom:40px;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-block;position:relative}.folder:not(.folder--click):hover{transform:translateY(-8px)}.folder:not(.folder--click):hover .paper{transform:translate(-50%,-10px)}.folder:not(.folder--click):hover .folder__front{transform:skew(10deg)scaleY(.8)}.folder:not(.folder--click):hover .right{transform:skew(-10deg)scaleY(.8)}.folder.open{transform:translateY(-8px)}.folder.open .folder__front{transform:skew(15deg)scaleY(.3)translateY(20px)}.folder.open .right{transform:skew(-15deg)scaleY(.3)translateY(20px)}.folder__back{background:var(--folder-back-color);border-radius:0 16px 16px;width:360px;height:240px;position:relative;box-shadow:0 10px 30px -10px #00000026}.folder__back:after{z-index:0;content:"";background:var(--folder-back-color);border-radius:12px 12px 0 0;width:120px;height:24px;position:absolute;bottom:98%;left:0}.paper{z-index:2;background:var(--paper-1);pointer-events:none;transform-origin:bottom;border:1px solid #0000000d;border-radius:24px;justify-content:flex-start;align-items:stretch;width:320px;height:440px;padding:0;font-size:16px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;display:flex;position:absolute;bottom:10px;left:50%;overflow:visible;transform:translate(-50%);box-shadow:0 -4px 15px -5px #0000001a}.folder.open .paper{pointer-events:auto;box-shadow:0 20px 40px -10px #0003}.paper:nth-child(2){background:var(--paper-2)}.paper:nth-child(3){background:var(--paper-3)}.folder__front{z-index:4;background:var(--folder-color);transform-origin:bottom;border-radius:8px 16px 16px;width:100%;height:100%;transition:all .4s cubic-bezier(.4,0,.2,1);position:absolute;box-shadow:0 -2px 15px -5px #0003}.folder.open .paper:first-child{transform:translate(calc(-155% + var(--magnet-x,0px)), calc(0% + var(--magnet-y,0px))) rotateZ(-6deg)}.folder.open .paper:first-child:hover{transform:translate(calc(-155% + var(--magnet-x,0px)), calc(0% + var(--magnet-y,0px))) rotateZ(-6deg) scale(1.05);z-index:5}.folder.open .paper:nth-child(2){transform:translate(calc(-50% + var(--magnet-x,0px)), calc(-10% + var(--magnet-y,0px))) rotateZ(0deg)}.folder.open .paper:nth-child(2):hover{transform:translate(calc(-50% + var(--magnet-x,0px)), calc(-10% + var(--magnet-y,0px))) rotateZ(0deg) scale(1.05);z-index:5}.folder.open .paper:nth-child(3){transform:translate(calc(55% + var(--magnet-x,0px)), calc(0% + var(--magnet-y,0px))) rotateZ(6deg)}.folder.open .paper:nth-child(3):hover{transform:translate(calc(55% + var(--magnet-x,0px)), calc(0% + var(--magnet-y,0px))) rotateZ(6deg) scale(1.05);z-index:5}