.traces-preview-btn{position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);border:2px solid var(--base-500);background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(10px);border-radius:50px;color:#fff;padding:.75rem 2rem;font-size:1rem;cursor:pointer;transition:all .3s ease;font-family:Host Grotesk,sans-serif;z-index:10;display:flex;align-items:center;gap:.5rem}.traces-preview-btn i{font-size:1.2rem;display:inline-block;transition:all .3s ease}.traces-preview-btn:hover{color:var(--base-100)}@keyframes arrowBounce{0%,to{transform:translate(0)}25%{transform:translate(5px)}50%{transform:translate(0)}75%{transform:translate(5px)}}.traces-container{position:relative;width:100%;height:100vh;max-width:2000px;margin:0 auto;overflow:hidden}.traces-container .traces-nav,.traces-container .traces-footer{position:absolute;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;z-index:1}.traces-container .traces-nav{top:4rem}.traces-container .traces-footer{bottom:0}.traces-container .traces-nav p,.traces-container .traces-footer p{padding:.6rem 1rem;background-color:#f2eeda0d;border:1px solid rgba(242,238,218,.15);border-radius:.25rem;-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);color:var(--base-100)}.traces-container .traces-nav .trace-name p{background:#ffffff0a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(10px);color:var(--base-100);font-weight:600;border-radius:8px;padding:.5rem 1rem}.traces-container .traces-slider{position:absolute;width:100%;height:100svh;overflow:hidden}.traces-container .traces-slider .traces{position:absolute;width:300px;height:350px;top:41.5%;left:50%;transform:translate(-50%,-50%)}.traces-container .traces-slider .traces li{position:absolute;display:flex;align-items:center;justify-content:center;will-change:transform;width:100%;aspect-ratio:4/5;padding:.5rem;filter:url(#goo);transform:translateZ(0) scale(0);backface-visibility:hidden;perspective:1000px}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-img-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;filter:url(#goo);transform:translateZ(0);backface-visibility:hidden}.traces-container .traces-slider .traces li .outline-wrapper{z-index:-1}.traces-container .traces-slider .traces li .product-item-bg-wrapper{z-index:0}.traces-container .traces-slider .traces li .product-img-wrapper{z-index:1}.traces-container .traces-slider .traces li .product-img-wrapper{padding:.75rem}.traces-container .traces-slider .traces li .product-item-bg-wrapper .product-item-bg{width:100%;height:100%;clip-path:polygon(2.5rem 0%,calc(100% - 2.5rem) 0%,100% 2.5rem,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,2.5rem 100%,0% calc(100% - 2.5rem),0% 2.5rem);background:var(--base-300);z-index:0}.traces-container .traces-slider .traces li .outline-wrapper .product-bg-outline{width:100%;height:100%;clip-path:polygon(2.5rem 0%,calc(100% - 2.5rem) 0%,100% 2.5rem,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,2.5rem 100%,0% calc(100% - 2.5rem),0% 2.5rem);transform:scaleX(1.0095) scaleY(1.0075);background-color:#3c3c3c}.traces-container .traces-slider .traces li img{width:100%;height:100%;clip-path:polygon(2rem 0%,calc(100% - 2rem) 0%,100% 2rem,100% calc(100% - 2rem),calc(100% - 2rem) 100%,2rem 100%,0% calc(100% - 2rem),0% 2rem);transform:translateZ(0);backface-visibility:hidden}.traces-container .traces-slider .controller{position:absolute;bottom:2rem;left:50%;transform:translate(-50%) translateY(300px);width:11rem;height:11rem;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:10}.traces-container .traces-slider .controller .controller-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5rem;height:5rem;background:#383838;border:1px solid rgba(242,238,218,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;clip-path:circle(40% at 50% 50%);will-change:clip-path;cursor:pointer;z-index:1}.traces-container .traces-slider .controller .controller-inner .controller-close-icon{position:relative;width:24px;height:24px}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span{position:absolute;top:50%;left:50%;width:0;height:2px;background:var(--base-200);transform-origin:center}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span:first-child{transform:translate(-50%,-50%) rotate(45deg)}.traces-container .traces-slider .controller .controller-inner .controller-close-icon span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.traces-container .traces-slider .controller .controller-outer{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffff0a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(242,238,218,.15);border-radius:50%;clip-path:circle(50% at 50% 50%);will-change:clip-path;z-index:-1}.traces-container .traces-slider .controller .controller-outer .controller-label p{position:absolute;top:1rem;left:50%;transform:translate(-50%);text-transform:uppercase;color:var(--base-1000);will-change:opacity}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn{position:absolute;top:50%;transform:translateY(-50%);color:var(--base-1000);will-change:opacity;cursor:pointer;transition:transform .3s ease-out}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn:active{transform:translateY(-50%) scale(.75)}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn ion-icon{font-size:1.25rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.prev{left:.75rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.next{right:.75rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.disabled{opacity:.25;pointer-events:none}.traces-container .traces-preview{position:fixed;width:75%;height:72.5%;padding:1rem;border-radius:.5rem;background:#ffffff0a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(242,238,218,.15);display:flex;flex-direction:column;gap:1rem;z-index:2}.traces-container .traces-preview .traces-preview-info{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem}.traces-container .traces-preview .traces-preview-info .traces-preview-tag p{text-transform:uppercase}.traces-container .traces-preview .traces-preview-img{width:100%;aspect-ratio:1;border-radius:.25rem;background-color:var(--base-1000);overflow:hidden}.traces-container .traces-preview .traces-preview-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.traces-container .traces-preview:hover .traces-preview-img img{transform:scale(1.05)}.traces-container .traces-preview:hover .traces-preview-btn i{animation:arrowBounce 1.5s ease-in-out infinite;rotate:45deg}@media(max-width:1000px){.traces-preview-btn{bottom:2.5rem;padding:.5rem 1.5rem;font-size:.8rem}.traces-container .traces-nav{position:fixed;top:8%;left:0;right:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:2rem 1.5rem;margin:3rem 0;z-index:100}.traces-container .traces-nav .traces-logo{position:absolute;left:1.5rem}.traces-container .traces-nav .trace-name{position:absolute;right:1.5rem}.traces-container .traces-footer{display:none}.traces-container .traces-slider .traces{top:40%}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-img-wrapper{transform:scale(.8)}.traces-container .traces-slider .controller{bottom:1rem;width:9rem;height:9rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.prev{left:.5rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.next{right:.5rem}.traces-container .traces-slider .controller .controller-outer .controller-label p{font-size:.7rem}.traces-container .traces-preview{width:calc(100% - 2rem);height:max-content;justify-content:center}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper{display:block;visibility:visible;opacity:1}}@media(max-width:500px){.traces-container .traces-nav{position:fixed;top:5%;left:0;right:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1rem;margin:1rem 0;z-index:100}.traces-container .traces-nav .traces-logo{position:absolute;left:1rem}.traces-container .traces-nav .trace-name{position:absolute;right:1rem}.traces-container .traces-footer{display:none!important}.traces-container .traces-slider .traces{top:40%}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-img-wrapper{transform:scale(1)}.traces-container .traces-slider .traces li .product-item-bg-wrapper,.traces-container .traces-slider .traces li .outline-wrapper,.traces-container .traces-slider .traces li .product-bg-outline{display:block!important;visibility:visible!important;opacity:1!important}.traces-container .traces-slider .traces li{border:none;outline:none}.traces-container .traces-slider .controller{bottom:5rem;width:9rem;height:9rem;border:none;outline:none}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.prev{left:.5rem}.traces-container .traces-slider .controller .controller-outer .traces-controller-nav-btn.next{right:.5rem}.traces-container .traces-slider .controller .controller-outer .controller-label p{font-size:.7rem}.traces-container .traces-preview{width:calc(100% - 2rem);height:max-content;justify-content:center;margin:0 auto;border:1px solid rgba(242,238,218,.15);outline:none}.traces-container .traces-preview-img{max-height:40vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.traces-container .traces-preview-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.traces-container .traces-preview-info{margin-bottom:2rem}}h1{font-family:DM Sans;font-size:2.75rem;font-weight:400;color:#000}p{text-transform:uppercase;font-family:DM Mono;font-size:.8rem;font-weight:500;color:#000}h1,p{transition:color .25s ease;line-height:1}.folders{width:100%;height:70vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.row{position:relative;width:100%;display:flex}.folder{position:relative;flex:1;height:200px;display:flex;flex-direction:column;cursor:pointer}.row:nth-child(2) .folder:nth-child(1){flex:2}.row:nth-child(2) .folder:nth-child(2){flex:3}.folder-preview{position:absolute;top:0;left:0;width:25rem;height:100%;pointer-events:none}.folder-preview-img{position:absolute;top:50%;width:8rem;height:12rem}.folder-preview-img:nth-child(1){left:20%;transform-origin:top left}.folder-preview-img:nth-child(2){left:50%;transform-origin:center}.folder-preview-img:nth-child(3){left:80%;transform-origin:top right}.folder-wrapper{position:relative;width:100%;height:100%;will-change:transform}.folder-index{position:relative;width:40%;padding:.75rem}.folder-index:after{content:"";position:absolute;top:0;left:99%;height:101%;aspect-ratio:1;clip-path:polygon(0 0,25% 0,100% 100%,0% 100%)}.folder-name{width:100%;height:100%;display:flex;align-items:flex-start;padding:0 .25rem 0 2rem}.folder-index,.folder-index:after,.folder-name{transition:background-color .25s ease}.folder.variant-1 .folder-index,.folder.variant-1 .folder-index:after,.folder.variant-1 .folder-name{background-color:var(--variant-1)}.folder.variant-2 .folder-index,.folder.variant-2 .folder-index:after,.folder.variant-2 .folder-name{background-color:var(--variant-2)}.folder.variant-3 .folder-index,.folder.variant-3 .folder-index:after,.folder.variant-3 .folder-name{background-color:var( --base-500)}.folder.disabled .folder-index,.folder.disabled .folder-index:after,.folder.disabled .folder-name{background-color:var( --base-300)}.folder.disabled p,.folder.disabled h1{color:var(--disabled-folder-fg)}.row:nth-child(1){bottom:-13rem}.row:nth-child(2){bottom:-7.5rem}.row:nth-child(3){bottom:-2rem}@media(max-width:1000px){h1{font-size:2rem}p{font-size:.7rem}.folders{height:50vh}.folder{height:150px}.folder-preview{width:18rem}.folder-preview-img{width:6rem;height:9rem}.folder-index{width:35%;padding:.5rem}.folder-name{padding-left:.8rem}.row:nth-child(1){bottom:-9rem}.row:nth-child(2){bottom:-5rem}.row:nth-child(3){bottom:-1rem}}
