.folder{transition:transform .3s var(--ease-out-soft);cursor:pointer}.folder:not(.open):hover{transform:translateY(-8px)}.folder:not(.open):hover .paper{transform:translate(-50%,-14%)}.folder:not(.open):hover .folder__front{transform:skew(12deg)scaleY(.68)}.folder:not(.open):hover .right{transform:skew(-12deg)scaleY(.68)}.folder.open{transform:translateY(-8px)}.folder.open .paper:first-child{transform:translate(-118%,-44%)rotate(-8deg)}.folder.open .paper:nth-child(2){transform:translate(18%,-44%)rotate(8deg)}.folder.open .paper:nth-child(3){transform:translate(-50%,-205%)rotate(0)}.folder.open .paper:first-child:hover{transform:translate(calc(-118% + var(--magnet-x,0px)), calc(-44% + var(--magnet-y,0px))) rotateZ(-8deg) scale(1.06)}.folder.open .paper:nth-child(2):hover{transform:translate(calc(18% + var(--magnet-x,0px)), calc(-44% + var(--magnet-y,0px))) rotateZ(8deg) scale(1.06)}.folder.open .paper:nth-child(3):hover{transform:translate(calc(-50% + var(--magnet-x,0px)), calc(-205% + var(--magnet-y,0px))) rotateZ(0deg) scale(1.06)}.folder.open .folder__front{transform:skew(12deg)scaleY(.68)}.folder.open .right{transform:skew(-12deg)scaleY(.68)}.folder__back{background:var(--folder-back-color);border-radius:0 12px 12px;width:240px;height:184px;position:relative;box-shadow:inset 0 0 0 1px #ffffff14}.folder__back:after{z-index:0;content:"";background:var(--folder-back-color);border-radius:6px 6px 0 0;width:72px;height:14px;position:absolute;bottom:98%;left:0;box-shadow:inset 0 1px #ffffff14}.paper{z-index:2;background:var(--paper-1);width:78%;height:80%;transition:transform .4s var(--ease-out-soft), box-shadow .3s ease;pointer-events:none;border-radius:12px;position:absolute;bottom:10%;left:50%;transform:translate(-50%,10%)}.paper:nth-child(2){background:var(--paper-2);width:86%;height:72%}.paper:nth-child(3){background:var(--paper-3);width:92%;height:64%}.folder.open .paper{pointer-events:auto;box-shadow:0 12px 34px #0000008c}.folder__front{z-index:3;background:var(--folder-color);transform-origin:bottom;width:100%;height:100%;transition:transform .4s var(--ease-out-soft);border-radius:6px 12px 12px;position:absolute;box-shadow:inset 0 1px #ffffff1a}.folder:focus-visible{outline-offset:6px;border-radius:12px;outline:2px solid #fff}@media (prefers-reduced-motion:reduce){.folder,.paper,.folder__front{transition:none!important}.folder:not(.open):hover,.folder.open{transform:none}.folder.open .paper:first-child,.folder.open .paper:first-child:hover{transform:translate(-118%,-44%)}.folder.open .paper:nth-child(2),.folder.open .paper:nth-child(2):hover{transform:translate(18%,-44%)}.folder.open .paper:nth-child(3),.folder.open .paper:nth-child(3):hover{transform:translate(-50%,-205%)}}