:root{--folder-color:#ea580c;--folder-back-color:#c2410c;--paper-1:#fbfbfb;--paper-2:#fcfcfc;--paper-3:#ffffff}.folder{transition:all .3s cubic-bezier(.16,1,.3,1);cursor:pointer;position:relative;width:320px;height:220px}.folder:hover{transform:translateY(-8px)}.folder.peek:not(.open):hover .paper{transform:translate(-50%,-14%);opacity:1}.folder:hover .folder__front{transform:skew(15deg) scaleY(.5)}.folder:hover .right{transform:skew(-15deg) scaleY(.5)}.folder.open{transform:translateY(-8px)}.folder.open .paper:first-child{transform:translate(calc(-110% + var(--magnet-x, 0px)),calc(-52% + var(--magnet-y, 0px))) rotate(-4deg);z-index:10;transition-delay:0s}.folder.open .paper:first-child:hover{transform:translate(calc(-110% + var(--magnet-x, 0px)),calc(-52% + var(--magnet-y, 0px))) rotate(-4deg) scale(1.04);z-index:25;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);transition-delay:0s!important}.folder.open .paper:nth-child(2){transform:translate(calc(10% + var(--magnet-x, 0px)),calc(-52% + var(--magnet-y, 0px))) rotate(4deg);z-index:11;transition-delay:.15s}.folder.open .paper:nth-child(2):hover{transform:translate(calc(10% + var(--magnet-x, 0px)),calc(-52% + var(--magnet-y, 0px))) rotate(4deg) scale(1.04);z-index:25;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);transition-delay:0s!important}.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x, 0px)),calc(-90% + var(--magnet-y, 0px))) rotate(0deg);z-index:12;transition-delay:.3s}.folder.open .paper:nth-child(3):hover{transform:translate(calc(-50% + var(--magnet-x, 0px)),calc(-90% + var(--magnet-y, 0px))) rotate(0deg) scale(1.04);z-index:25;box-shadow:0 20px 40px -10px rgba(0,0,0,.15);transition-delay:0s!important}.folder.open .folder__front{transform:skew(15deg) scaleY(.4);filter:brightness(.95)}.folder.open .right{transform:skew(-15deg) scaleY(.4);filter:brightness(.95)}.folder__back{position:relative;width:100%;height:100%;border-radius:0 24px 24px 24px;box-shadow:0 10px 30px -10px rgba(0,0,0,.15)}.folder__back,.folder__back:after{background:var(--folder-back-color)}.folder__back:after{position:absolute;z-index:0;bottom:99%;left:0;content:"";width:90px;height:22px;border-radius:12px 12px 0 0}.paper{position:absolute;z-index:2;bottom:16px;left:50%;transform:translate(-50%);opacity:0;width:78%;height:78%;background:var(--paper-1);border-radius:16px;border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 12px -2px rgba(0,0,0,.04);transition:all .8s cubic-bezier(.16,1,.3,1);overflow:hidden;padding:16px}.paper:nth-child(2){background:var(--paper-2);width:82%;height:75%;bottom:22px}.paper:nth-child(3){background:var(--paper-3);width:86%;height:72%;bottom:28px}.folder.peek .paper{transform:translate(-50%,-6%);opacity:1}.folder.open .paper{opacity:1}.paper-peek-label{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);font-family:serif;font-size:52px;font-weight:800;letter-spacing:.02em;color:#525252;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1);z-index:15;user-select:none}.folder:hover .paper-peek-label{opacity:1}.folder.open .paper-peek-label{opacity:0}.paper-content{width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1)}.folder.open .paper-content{opacity:1;pointer-events:auto}.folder__front{position:absolute;bottom:0;left:0;z-index:20;width:50%;height:80%;background:var(--folder-color);border-radius:0 0 0 24px;transform-origin:bottom left;transition:all .35s cubic-bezier(.16,1,.3,1)}.folder__front.right{left:50%;border-radius:0 24px 24px 0;transform-origin:bottom right}.folder:focus-visible{outline:2px solid #ea580c;outline-offset:4px;border-radius:24px}.folder__indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;pointer-events:none;display:flex;align-items:flex-start;justify-content:flex-start;width:1px;height:1px}.folder__indicator-pulse{width:8px;height:8px;background-color:#ffffff;border-radius:50%;box-shadow:0 0 6px rgba(255,255,255,.8)}.folder__indicator-pulse,.folder__indicator-pulse-outer{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.folder__indicator-pulse-outer{width:20px;height:20px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;animation:indicator-ping 1.6s cubic-bezier(0,0,.2,1) infinite}.folder__indicator-cursor{position:absolute;top:-2px;left:-2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:indicator-bounce 1.6s ease-in-out infinite;transform-origin:top left}@keyframes indicator-ping{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}70%,to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}@keyframes indicator-bounce{0%,to{transform:translate(0) scale(1)}45%,55%{transform:translate(2px,2px) scale(.85)}}.folder__indicator-heart-wrapper{position:absolute;top:55px;left:0;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:30;pointer-events:none}.folder__indicator-heart{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(255,255,255,.9));animation:heart-pulse 1.4s ease-in-out infinite}@keyframes heart-pulse{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.2);opacity:1}}