.work-collection{--folder-width:320px;--folder-height:236px;position:relative;max-width:1120px;margin:0 auto;min-height:580px;--card-width:256px;--card-height:210px;--card-spread:280px}.collection-back{position:absolute;width:var(--folder-width);height:var(--folder-height);bottom:48px;left:50%;transform:translate(-50%);background:#3f3f46;border-radius:0 20px 20px}.collection-back:before{content:"";position:absolute;left:0;bottom:98%;width:42%;height:24px;background:#3f3f46;border-radius:17px 17px 0 0}.collection-cards{position:absolute;inset:0;pointer-events:none}.collection-card{position:absolute;left:50%;bottom:65px;width:calc(var(--folder-width)*.8);height:var(--card-height);z-index:2;--card-x:calc((var(--card-index) - 1.5)*var(--card-spread));transform:translate(-50%) rotate(calc((var(--card-index) - 1.5)*3deg));transition:width .55s cubic-bezier(.22,1,.36,1),bottom .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);outline:none}.collection-card-paper{height:100%;border:1px solid #dedee1;border-radius:12px;background:#fff;box-shadow:0 7px 20px #00000012;padding:20px;display:flex;flex-direction:column;justify-content:space-between}.collection-card:nth-child(1) .collection-card-paper{background:#e6e6e6}.collection-card:nth-child(2) .collection-card-paper{background:#eeeeef}.collection-card:nth-child(3) .collection-card-paper{background:#f5f5f5}.collection-card-number{font-size:13px;letter-spacing:.04em;color:#85858b}.collection-card-placeholder{font-size:15px;line-height:1.5;color:#777}.collection-card-placeholder small{display:block;font-size:12px;color:#93939a;margin-top:3px}.collection-card-name{position:absolute;bottom:calc(100% + 18px);left:50%;width:calc(100% + 26px);transform:translate(-50%,6px);font-size:16px;line-height:1.3;text-align:center;letter-spacing:-.025em;color:#252529;opacity:0;pointer-events:none;transition:opacity .18s,transform .22s}.collection-trigger{position:absolute;left:50%;bottom:48px;transform:translate(-50%);width:var(--folder-width);height:var(--folder-height);padding:0;background:none;border:0;z-index:3;border-radius:20px;perspective:700px}.collection-front{position:absolute;inset:0;background:linear-gradient(180deg,#606069,#52525b 65%);color:#f5f5f5;border-radius:14px 20px 20px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:30px;box-shadow:0 14px 34px #0000001a;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}.collection-front>span{font-size:20px}.collection-front small{font-size:14px;opacity:.6}.collection-trigger:focus-visible{outline:2px solid #52525b;outline-offset:8px}.collection-hint{position:absolute;bottom:0;left:0;width:100%;text-align:center;margin:0;color:#7b7b82;font-size:14px;line-height:1.5}.work-collection.is-open .collection-card{width:var(--card-width);bottom:326px;transform:translate(calc(-50% + var(--card-x))) rotate(calc((var(--card-index) - 1.5)*2deg));transition-delay:calc(var(--card-index)*40ms);pointer-events:auto}.work-collection.is-open .collection-front{transform:rotateX(-28deg) scaleY(.76)}.work-collection.is-open .collection-card:is(:hover,:focus-visible,.label-visible) .collection-card-name{opacity:1;transform:translate(-50%)}.collection-card:focus-visible .collection-card-paper{outline:2px solid #52525b;outline-offset:4px}@media(hover:hover){.work-collection:has(.collection-trigger:hover):not(.is-open) .collection-front{transform:rotateX(-22deg) scaleY(.83)}.work-collection:has(.collection-trigger:hover):not(.is-open) .collection-card{transform:translate(-50%,-35px) rotate(calc((var(--card-index) - 1.5)*3deg))}}@media(max-width:1200px){.work-collection{--card-width:clamp(118px, calc((100vw - 100px)/2) ,256px)}.work-collection.is-open{min-height:800px}.work-collection.is-open .collection-card{--card-x:calc((var(--card-width) + 22px)*-.5);bottom:536px;transform:translate(calc(-50% + var(--card-x))) rotate(-2deg)}.work-collection.is-open .collection-card:nth-child(2n){--card-x:calc((var(--card-width) + 22px)*.5);transform:translate(calc(-50% + var(--card-x))) rotate(2deg)}.work-collection.is-open .collection-card:nth-child(n+3){bottom:270px}.collection-card-paper{padding:16px}.collection-card-name{font-size:15px}.collection-hint{font-size:13px}}@media(max-width:800px){.work-collection{--folder-width:280px;--folder-height:205px;--card-width:clamp(118px, calc((100vw - 100px)/2) ,224px);--card-height:190px;min-height:470px}}@media(prefers-reduced-motion:reduce){.collection-card,.collection-front,.collection-card-name{transition:none!important}}