.drift-wall{position:relative;width:100%;height:100%;overflow:hidden;perspective:var(--dw-perspective, 1200px);perspective-origin:50% 50%;--dw-tile-w: 200px;--dw-tile-h: 132px;--dw-gap: 18px;--dw-radius: 14px;--dw-lift: 64px;--dw-dim: .55;--dw-gray: 0;--dw-overlay: #060010;--dw-edge: 40%;-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 46%,#000 var(--dw-edge),transparent 100%),linear-gradient(to top,#000 var(--dw-edge),transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 78% 82% at 50% 46%,#000 var(--dw-edge),transparent 100%),linear-gradient(to top,#000 var(--dw-edge),transparent 100%);mask-composite:intersect}.drift-wall__plane{position:absolute;top:50%;left:50%;display:flex;flex-direction:row;transform-style:preserve-3d;cursor:pointer;transform-origin:50% 50%;will-change:transform}.drift-wall__col{position:relative;width:calc(var(--dw-tile-w) + var(--dw-gap));transform-style:preserve-3d}.drift-wall__track{display:flex;flex-direction:column;will-change:transform;transform-style:preserve-3d}.drift-wall__tile{position:relative;display:block;width:100%;height:calc(var(--dw-tile-h) + var(--dw-gap));flex:0 0 auto;outline:none;transform-style:preserve-3d}.drift-wall__inner{position:absolute;inset:calc(var(--dw-gap) / 2);display:block;border-radius:var(--dw-radius);overflow:hidden;background:#0b0b12;opacity:var(--dw-dim);transform:translateZ(0);pointer-events:none;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1)}.drift-wall__tile img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(var(--dw-gray)) saturate(.92);transition:filter .42s cubic-bezier(.22,1,.36,1);-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.drift-wall__overlay{position:absolute;inset:0;background:var(--dw-overlay);opacity:.42;pointer-events:none;transition:opacity .42s cubic-bezier(.22,1,.36,1)}.drift-wall__tile.is-active .drift-wall__inner,.drift-wall__tile:focus-visible .drift-wall__inner{opacity:1;transform:translateZ(var(--dw-lift));box-shadow:0 24px 60px -18px #000000b3}.drift-wall__tile.is-active img,.drift-wall__tile:focus-visible img{filter:grayscale(0) saturate(1.05)}.drift-wall__tile.is-active .drift-wall__overlay,.drift-wall__tile:focus-visible .drift-wall__overlay{opacity:0}.drift-wall__tile:focus-visible .drift-wall__inner{box-shadow:0 24px 60px -18px #000000b3,0 0 0 2px #ffffffe6}@media(prefers-reduced-motion:reduce){.drift-wall__plane,.drift-wall__track{will-change:auto}}:root{--folder-color: #70a1ff;--folder-back-color: #4785ff;--paper-1: #12151c;--paper-2: #161a22;--paper-3: #1a1f28}.folder{transition:all .2s ease-in;cursor:pointer}.folder:not(.folder--click):hover{transform:translateY(-8px)}.folder:not(.folder--click):hover .paper{transform:translate(-50%)}.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:6;cursor:zoom-in}.folder.open .paper:nth-child(1){transform:translate(calc(-120% + var(--magnet-x, 0px)),calc(-70% + var(--magnet-y, 0px))) rotate(-15deg)}.folder.open .paper:nth-child(1):hover{transform:translate(calc(-120% + var(--magnet-x, 0px)),calc(-70% + var(--magnet-y, 0px))) rotate(-15deg) scale(1.1)}.folder.open .paper:nth-child(2){transform:translate(calc(10% + var(--magnet-x, 0px)),calc(-70% + var(--magnet-y, 0px))) rotate(15deg);height:80%}.folder.open .paper:nth-child(2):hover{transform:translate(calc(10% + var(--magnet-x, 0px)),calc(-70% + var(--magnet-y, 0px))) rotate(15deg) scale(1.1)}.folder.open .paper:nth-child(3){transform:translate(calc(-50% + var(--magnet-x, 0px)),calc(-100% + var(--magnet-y, 0px))) rotate(5deg);height:80%}.folder.open .paper:nth-child(3):hover{transform:translate(calc(-50% + var(--magnet-x, 0px)),calc(-100% + var(--magnet-y, 0px))) rotate(5deg) scale(1.1)}.folder.open .folder__front{transform:skew(15deg) scaleY(.6)}.folder.open .right{transform:skew(-15deg) scaleY(.6)}.folder__back{position:relative;width:100px;height:80px;background:var(--folder-back-color);border-radius:0 10px 10px}.folder__back:after{position:absolute;z-index:0;bottom:98%;left:0;content:"";width:30px;height:10px;background:var(--folder-back-color);border-radius:5px 5px 0 0}.paper{position:absolute;z-index:2;bottom:10%;left:50%;transform:translate(-50%,10%);width:70%;height:80%;background:var(--paper-1);border-radius:8px;border:1px solid rgba(255,255,255,.06);transition:all .3s ease-in-out;overflow:hidden;isolation:isolate;box-shadow:0 10px 28px #00000073}.paper:nth-child(2){background:var(--paper-2);width:80%;height:70%}.paper:nth-child(3){background:var(--paper-3);width:90%;height:60%}.paper img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:inherit;backface-visibility:hidden;transform:translateZ(0)}.folder-lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.25rem;background:#080a0ee6;cursor:zoom-out}.folder-lightbox-frame{position:relative;max-width:min(96vw,72rem);max-height:88vh;border-radius:.75rem;overflow:hidden;background:#0b0d12;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px #0000008c;cursor:default}.folder-lightbox-frame img{display:block;width:100%;height:100%;max-width:min(96vw,72rem);max-height:88vh;object-fit:contain;background:#0b0d12}.folder-lightbox-close{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid rgba(255,255,255,.16);border-radius:.55rem;background:#10141adb;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:1}.folder__front{position:absolute;z-index:3;width:100%;height:100%;background:var(--folder-color);border-radius:5px 10px 10px;transform-origin:bottom;transition:all .3s ease-in-out}.folder:focus-visible{outline:2px solid #ffffff;outline-offset:4px;border-radius:10px}
