.folder{--folder-color:#341a43;--folder-back-color:#26122f;--paper-1:#fff;--paper-2:#fff;--paper-3:#fff;cursor:pointer;transform-origin:50%;width:100px;height:80px;transition:transform .48s cubic-bezier(.22,1,.36,1);position:relative}.folder.open{transform:translateY(-8px)}.folder__back{background:var(--folder-back-color);z-index:1;border-radius:0 10px 10px;width:100%;height:100%;position:relative}.folder__back:before{content:"";background:var(--folder-back-color);border-radius:7px 7px 0 0;width:48px;height:16px;position:absolute;top:-12px;left:0}.paper{aspect-ratio:9/16;z-index:2;transform-origin:bottom;opacity:1;will-change:transform;-webkit-user-select:none;user-select:none;--magnet-x:0px;--magnet-y:0px;background:0 0;border-radius:8px;width:58%;transition:transform .48s cubic-bezier(.22,1,.36,1);position:absolute;bottom:8%;left:50%;overflow:hidden;transform:translate(-50%,-10%)rotate(0)scale(.62)}.folder.open .paper{z-index:4}.paper img{object-fit:cover;object-position:center center;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;will-change:opacity;border-radius:8px;width:100%;height:100%;transition:opacity .18s ease-out;display:block}.paper:first-child{background:var(--paper-1)}.paper:nth-child(2){background:var(--paper-2)}.paper:nth-child(3){background:var(--paper-3)}.folder.open .paper:first-child{transform:translate(calc(-125% + var(--magnet-x)), calc(-82% + var(--magnet-y))) rotateZ(-15deg) scale(1)}.folder.open .paper:first-child img{opacity:1}.folder.open .paper:nth-child(2){transform:translate(calc(25% + var(--magnet-x)), calc(-82% + var(--magnet-y))) rotateZ(15deg) scale(1)}.folder.open .paper:nth-child(2) img{opacity:1}.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x)), calc(-112% + var(--magnet-y))) rotateZ(5deg) scale(1)}.folder.open .paper:nth-child(3) img{opacity:1}.folder__front{background:var(--folder-color);z-index:3;transform-origin:bottom;pointer-events:none;border-radius:5px 10px 10px;width:100%;height:100%;transition:transform .48s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.folder.open .folder__front{transform:skew(15deg)scaleY(.6)}.folder.open .folder__front.right{transform:skew(-15deg)scaleY(.6)}.folder.covered .paper{visibility:hidden}@media (prefers-reduced-motion:reduce){.folder,.paper,.paper img,.folder__front{transition:none!important}}@media (max-width:640px){.folder,.folder__back{width:90px;height:72px}.paper{border-radius:7px;width:58%;transform:translate(-50%,-10%)rotate(0)scale(.62)}.paper img{border-radius:7px}.folder.open .paper:first-child{transform:translate(calc(-118% + var(--magnet-x)), calc(-78% + var(--magnet-y))) rotateZ(-13deg) scale(1)}.folder.open .paper:nth-child(2){transform:translate(calc(18% + var(--magnet-x)), calc(-78% + var(--magnet-y))) rotateZ(13deg) scale(1)}.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x)), calc(-105% + var(--magnet-y))) rotateZ(5deg) scale(1)}}.folder:focus-visible{outline-offset:6px;outline:2px solid}