:root{--folder-color:#70a1ff;--folder-back-color:#4785ff;--paper-1:#e6e6e6;--paper-2:#f2f2f2;--paper-3:#fff}.folder{cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.folder:not(.folder--click):hover{transform:translateY(-8px)}.folder:not(.folder--click):hover .folder__front{transform:skew(15deg)scaleY(.6)}.folder:not(.folder--click):hover .right{transform:skew(-15deg)scaleY(.6)}.folder.open{transform:translateY(-8px)}.folder.open .paper{z-index:10}.folder.open .paper:first-child{transform:translate(-270%,-150%)rotate(-20deg)}.folder.open .paper:first-child:hover{z-index:20;transform:translate(-270%,-160%)rotate(-20deg)scale(1.3)}.folder.open .paper:nth-child(2){transform:translate(-160%,-230%)rotate(-10deg)}.folder.open .paper:nth-child(2):hover{z-index:20;transform:translate(-160%,-240%)rotate(-10deg)scale(1.3)}.folder.open .paper:nth-child(3){transform:translate(-50%,-260%)rotate(0)}.folder.open .paper:nth-child(3):hover{z-index:20;transform:translate(-50%,-270%)rotate(0)scale(1.3)}.folder.open .paper:nth-child(4){transform:translate(60%,-230%)rotate(10deg)}.folder.open .paper:nth-child(4):hover{z-index:20;transform:translate(60%,-240%)rotate(10deg)scale(1.3)}.folder.open .paper:nth-child(5){transform:translate(170%,-150%)rotate(20deg)}.folder.open .paper:nth-child(5):hover{z-index:20;transform:translate(170%,-160%)rotate(20deg)scale(1.3)}.folder__icon-float{justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s ease-out;display:flex}.folder.open .paper .folder__icon-float{animation:2.8s ease-in-out infinite floatBob}.folder.open .paper:hover .folder__icon-float{animation-play-state:paused}.folder.open .paper:first-child .folder__icon-float{animation-delay:0s}.folder.open .paper:nth-child(2) .folder__icon-float{animation-delay:.35s}.folder.open .paper:nth-child(3) .folder__icon-float{animation-delay:.7s}.folder.open .paper:nth-child(4) .folder__icon-float{animation-delay:.35s}.folder.open .paper:nth-child(5) .folder__icon-float{animation-delay:0s}@keyframes floatBob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.folder.open .folder__front{transform:skew(15deg)scaleY(.6)}.folder.open .right{transform:skew(-15deg)scaleY(.6)}.folder__back{background:var(--folder-back-color);border-radius:0 10px 10px;width:100px;height:80px;position:relative}.folder__back:after{z-index:0;content:"";background:var(--folder-back-color);border-radius:5px 5px 0 0;width:30px;height:10px;position:absolute;bottom:98%;left:0}.paper{z-index:2;background:var(--paper-1);border-radius:10px;width:70%;height:80%;transition:transform .35s cubic-bezier(.25,1,.5,1),opacity .2s ease-in;position:absolute;bottom:10%;left:50%;transform:translate(-50%,10%)}.paper:nth-child(2){background:var(--paper-2)}.paper:nth-child(3){background:var(--paper-3)}.folder__front{z-index:3;background:var(--folder-color);transform-origin:bottom;border-radius:5px 10px 10px;width:100%;height:100%;transition:all .3s ease-in-out;position:absolute}.folder.icon-mode .paper{border-radius:9999px;justify-content:center;align-items:center;display:flex;box-shadow:none!important;background:0 0!important;width:40px!important;height:40px!important}.folder:not(.open).icon-mode .paper{opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.25,1,.5,1),opacity .2s ease-in;transform:translate(-50%)}.folder.open.icon-mode .paper{opacity:1;pointer-events:auto;transition:transform .4s cubic-bezier(.34,1.2,.64,1),opacity .15s ease-out}.folder:focus-visible{outline-offset:4px;border-radius:10px;outline:2px solid #fff}