@import "https://fonts.googleapis.com/css2?family=Bree+Serif&family=Inter:wght@300;400;500;600;700;900&family=Kavoon&family=Leckerli+One&family=Koulen&display=swap";:root{--color-text:#000;--color-bg:#fff;--color-accent:#662dfa;--color-project-a-lie:#fcf4ba;--color-project-uit-thuis:#f08a4b;--color-project-friction-feed:#d1f2ff;--color-project-befungi:#f3f1e5;--font-logo-text:"Inter", sans-serif;--font-logo-name:"Bree Serif", serif;--font-heading:"Bree Serif", serif;--font-body:"Inter", sans-serif;--font-quirky:"Kavoon", sans-serif;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:900;--radius-pill:70px;--corner-radius:75px;--border-width-default:.8px;--border-width-quirky:4.8px;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:25px;--spacing-xl:35px;--spacing-xxl:40px;--spacing-xxxl:50px;--layout-max-width:1440px;--layout-header-height:120px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:100%;font-size:16px}html.snap-enabled{scroll-snap-type:y proximity}body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100%;display:flex;overflow-x:hidden}#root{flex-direction:column;flex:1;display:flex}img,svg{max-width:100%;height:auto;display:block}button{font:inherit;cursor:pointer;background:0 0;border:none;outline:none}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-regular)}.text-logo-digital{font-family:var(--font-body);font-weight:var(--weight-light);font-size:clamp(1.25rem,1vw + 1rem,1.5rem)}.text-logo-daniel{font-family:var(--font-logo-name);margin-left:2px;font-size:clamp(1.75rem,1.5vw + 1.25rem,2.25rem)}.text-welcome-hey{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:clamp(2rem,2vw + 1.5rem,3rem)}.text-welcome-name{font-family:var(--font-heading);font-size:clamp(3.5rem,4vw + 2rem,6rem);line-height:1.1}.text-welcome-desc{font-family:var(--font-body);font-weight:var(--weight-regular);flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-top:10px;font-size:clamp(1.5rem,1.5vw + 1rem,2.25rem);display:flex}.text-welcome-desc-highlight{font-family:var(--font-quirky)}.text-nav-item{font-size:clamp(1.25rem,1vw + 1rem,2.25rem)}.text-card-title{font-family:var(--font-body);font-weight:var(--weight-black);font-size:clamp(2rem,2vw + 1.5rem,3rem)}.text-card-description{font-family:var(--font-body);font-size:clamp(1.125rem,.75vw + 1rem,1.75rem);line-height:1.4}.portfolio-container{max-width:var(--layout-max-width);padding:0 var(--spacing-xxxl);flex-direction:column;width:100%;margin:0 auto;display:flex;position:relative}@media (width<=768px){.portfolio-container{padding:0 var(--spacing-md)}}.header-wrapper{padding:var(--spacing-lg) 0;z-index:10;justify-content:space-between;align-items:flex-end;width:100%;display:flex}html.snap-enabled .header-wrapper{scroll-snap-align:start}.nav-links{gap:var(--spacing-xl);align-items:center;display:flex}.nav-link{cursor:pointer;font-size:clamp(1.125rem,.8vw + .8rem,1.75rem);transition:opacity .2s;position:relative}.nav-link:hover{opacity:.7}.nav-link:after{content:"";background-color:var(--color-text);transform-origin:100% 100%;width:100%;height:2px;transition:transform .25s ease-out;position:absolute;bottom:-4px;left:0;transform:scaleX(0)}.nav-link:hover:after{transform-origin:0 100%;transform:scaleX(1)}.welcome-wrapper{justify-content:center;align-items:center;gap:var(--spacing-xxl);margin-top:40px;margin-bottom:60px;display:flex}.welcome-avatar-container{background:radial-gradient(circle,#e0e0e0 0%,#bdbdbd 100%);border-radius:50%;flex-shrink:0;width:clamp(150px,20vw,318px);height:clamp(150px,20vw,318px);position:relative;overflow:hidden}.welcome-avatar-img{object-fit:cover;width:100%;height:100%;position:absolute}.welcome-text-container{flex-direction:column;gap:12px;display:flex}@media (width<=768px){.welcome-wrapper{text-align:center;flex-direction:column;align-items:center}}.filter-bar{justify-content:center;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xxxl);flex-wrap:wrap;display:flex}.filter-btn{background:var(--color-bg);border:var(--border-width-default) solid var(--color-text);border-radius:var(--radius-pill);align-items:center;gap:8px;padding:10px 24px;font-size:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.filter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.filter-btn.active{background:var(--color-text);color:var(--color-bg)}.filter-btn.active img{filter:invert()}.filter-btn-quirky{background-image:linear-gradient(var(--color-bg), var(--color-bg)), linear-gradient(90deg, #f05, #f90, #3c3, #09f, #70f, #f05, #f90, #3c3, #09f, #70f, #f05);background-size:100% 100%,200% 100%;background-origin:border-box;background-clip:padding-box,border-box;border:2px solid #0000;animation:6s linear infinite rainbow-border-move}.filter-btn-quirky:hover{animation:3s linear infinite rainbow-border-move;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.filter-btn-quirky.active{background-image:linear-gradient(var(--color-text), var(--color-text)), linear-gradient(90deg, #f05, #f90, #3c3, #09f, #70f, #f05, #f90, #3c3, #09f, #70f, #f05);color:var(--color-bg);animation:6s linear infinite rainbow-border-move}.filter-icon{object-fit:contain;width:auto;height:24px}.projects-list{gap:var(--spacing-xxxl);margin-bottom:var(--spacing-xxxl);flex-direction:column;display:flex}.project-card{border-radius:var(--corner-radius);will-change:height;justify-content:flex-start;align-items:center;height:575px;padding:0 60px;transition:height .5s cubic-bezier(.16,1,.3,1),opacity .4s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}html.snap-enabled .project-card{scroll-snap-align:center;scroll-margin:40px 0}@media (width>=1025px){.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000014}html.snap-enabled .project-card:hover{box-shadow:none;transform:none}html.snap-enabled .project-card.is-snap-active:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000014}html.snap-enabled .project-card{opacity:.75;height:250px}html.snap-enabled .project-card.is-snap-active{opacity:1;height:575px}html.snap-enabled .project-card .project-card-content{gap:var(--spacing-md);transition:gap .4s cubic-bezier(.16,1,.3,1)}html.snap-enabled .project-card.is-snap-active .project-card-content{gap:var(--spacing-xxxl)}html.snap-enabled .project-card .text-card-description{opacity:0;pointer-events:none;max-height:0;margin:0;transition:opacity .2s,max-height .4s,margin .4s;overflow:hidden}html.snap-enabled .project-card.is-snap-active .text-card-description{opacity:1;max-height:300px;margin-top:var(--spacing-md);pointer-events:auto;transition:opacity .35s .15s,max-height .4s,margin .4s}html.snap-enabled .project-card .project-logo{transition:height .4s cubic-bezier(.16,1,.3,1);height:45px!important}html.snap-enabled .project-card.is-snap-active .project-logo{height:clamp(60px,8vh,120px)!important}html.snap-enabled .project-card .uit-thuis-logo{transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1);width:90px!important;height:66.5px!important}html.snap-enabled .project-card.is-snap-active .uit-thuis-logo{width:188px!important;height:139px!important}html.snap-enabled .project-card .befungi-logo-container{transform-origin:0;margin-bottom:-20px;transition:transform .4s cubic-bezier(.16,1,.3,1),margin-bottom .4s cubic-bezier(.16,1,.3,1);transform:scale(.6)}html.snap-enabled .project-card-reverse .befungi-logo-container{transform-origin:100%}html.snap-enabled .project-card.is-snap-active .befungi-logo-container{margin-bottom:0;transform:scale(1)}html.snap-enabled .project-card .text-card-title{font-size:1.75rem;transition:font-size .4s cubic-bezier(.16,1,.3,1)}html.snap-enabled .project-card.is-snap-active .text-card-title{font-size:clamp(2rem,3.5vw,3.5rem)}html.snap-enabled .project-card .see-more-btn{padding:8px 22px;font-size:1.15rem;transition:padding .4s cubic-bezier(.16,1,.3,1),font-size .4s cubic-bezier(.16,1,.3,1)}html.snap-enabled .project-card.is-snap-active .see-more-btn{padding:12px 30px;font-size:1.5rem}}.project-card-reverse{justify-content:flex-end}@media (width>=1025px){.project-card-reverse .project-card-content{text-align:right;align-items:flex-end}.project-card-reverse .see-more-btn,.project-card-reverse .project-logo,.project-card-reverse .befungi-logo-container{align-self:flex-end}}.befungi-logo-container{align-self:flex-start;align-items:flex-start;gap:4.44px;width:322.56px;height:85.29px;display:flex}.befungi-logo-container .logo-icon{object-fit:contain;width:106.66px!important;height:73.89px!important}.befungi-logo-container .logo-text{object-fit:contain;width:211.46px!important;height:85.29px!important;margin-top:1.36px!important}.project-card-content{gap:var(--spacing-xxxl);z-index:10;flex-direction:column;max-width:550px;display:flex;position:relative}.project-card-text{gap:var(--spacing-md);flex-direction:column;display:flex}.project-logo{object-fit:contain;align-self:flex-start;width:auto;height:clamp(60px,8vh,120px)}.uit-thuis-logo{object-fit:contain!important;width:188px!important;height:139px!important;max-height:none!important}.see-more-btn{background:var(--color-bg);border-radius:var(--radius-pill);font-size:1.5rem;font-family:var(--font-body);align-self:flex-start;padding:12px 30px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s,box-shadow .2s;box-shadow:0 2px 6px #0000000d}.see-more-btn:hover{background-color:#f7f7f7;transform:scale(1.05);box-shadow:0 6px 16px #0000001a}.project-card-mockup-wrapper{transition:transform .5s cubic-bezier(.16,1,.3,1)}@media (width>=1025px){.a-lie-mockup{aspect-ratio:1037/796;display:block;inset:13.57% 3.7% auto 48.45%;overflow:visible;position:absolute!important}.a-lie-imac-frame{object-fit:contain;width:100%;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.a-lie-chatbot-screen{pointer-events:all;border-radius:4px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:2.55% 2.21% 32.8% 2.15%;overflow:hidden}.project-card:hover .a-lie-imac-frame,.project-card:hover .a-lie-chatbot-screen{transform:scale(1.03)}.uit-thuis-mockup{pointer-events:none;width:100%;height:100%;display:block;top:0;left:0;position:absolute!important}.uit-thuis-phone-left{object-fit:contain;width:709px;height:532px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;top:25px;left:-189px;transform:rotate(-.2deg)}.uit-thuis-phone-right{object-fit:contain;width:876px;height:657px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;top:-45px;left:54px;transform:rotate(6.61deg)}.project-card:hover .uit-thuis-phone-left{transform:scale(1.03)rotate(-.2deg)}.project-card:hover .uit-thuis-phone-right{transform:scale(1.03)rotate(6.61deg)}.friction-feed-mockup{pointer-events:none;width:745px;height:651px;transition:transform .5s cubic-bezier(.16,1,.3,1);display:block;top:33px;left:644px;position:absolute!important}.friction-feed-flattened-image{object-fit:fill;width:100%;height:100%}.project-card:hover .friction-feed-mockup{transform:scale(1.03)}.befungi-mockup{pointer-events:none;width:100%;height:100%;display:block;top:0;left:0;position:absolute!important}.befungi-laptop-image{object-fit:fill;width:693px;height:601px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;top:-27px;left:30px}.befungi-mushroom-pink{object-fit:contain;z-index:3;width:123px;height:173px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:320px}.befungi-mushroom-growable{object-fit:contain;z-index:3;width:144px;height:144px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;bottom:7px;right:430px}.project-card:hover .befungi-laptop-image{transform:scale(1.03)}.project-card:hover .befungi-mushroom-pink,.project-card:hover .befungi-mushroom-growable{transform:scale(1.05)translateY(-5px)}}@media (width<=1024px){.project-card{flex-direction:column;align-items:flex-start;gap:40px;height:auto;padding:40px;display:flex}.project-card-reverse{flex-direction:column}.project-card-content{max-width:100%}.project-card-reverse .project-card-content{text-align:left;align-items:flex-start}.project-card-reverse .see-more-btn,.project-card-reverse .project-logo,.project-card-reverse .befungi-logo-container{align-self:flex-start}.a-lie-mockup,.uit-thuis-mockup,.friction-feed-mockup,.befungi-mockup{justify-content:center;align-items:center;pointer-events:auto!important;width:100%!important;height:350px!important;display:flex!important;position:relative!important;inset:auto!important;overflow:visible!important;transform:none!important}.a-lie-mockup{height:300px!important}.a-lie-imac-frame{object-fit:contain;width:auto;max-height:100%}.a-lie-chatbot-screen{pointer-events:all;border-radius:2px;width:66%;height:52%;position:absolute;top:7.2%;left:17%;overflow:hidden}.uit-thuis-mockup{height:300px!important}.uit-thuis-phone-left{width:auto;height:90%;position:absolute;top:auto;bottom:0;left:10%;transform:rotate(-2deg)}.uit-thuis-phone-right{width:auto;height:100%;position:absolute;top:auto;bottom:0;right:10%;transform:rotate(6.6deg)}.friction-feed-mockup{justify-content:center;align-items:center;height:350px!important;display:flex!important;overflow:visible!important}.friction-feed-flattened-image{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;transform:none!important}.befungi-mockup{justify-content:center;align-items:center;height:300px!important;display:flex!important;position:relative!important}.befungi-laptop-image{aspect-ratio:1.153;object-fit:contain!important;width:auto!important;height:85%!important;position:relative!important;top:auto!important;left:auto!important;transform:none!important}.befungi-mushroom-pink{width:auto;height:80px;position:absolute;bottom:0;right:10px}.befungi-mushroom-growable{width:auto;height:70px;position:absolute;bottom:0;left:10px}}.drawer-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background-color:#0006;justify-content:flex-end;transition:opacity .3s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;inset:0}.drawer-overlay.open{opacity:1;pointer-events:auto}.drawer-content{background:var(--color-bg);flex-direction:column;width:min(600px,100%);height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow-y:auto;transform:translate(100%);box-shadow:-10px 0 30px #00000026}.drawer-overlay.open .drawer-content{transform:translate(0)}.drawer-header{background:var(--color-bg);z-index:10;border-bottom:1px solid #efefef;justify-content:space-between;align-items:center;padding:30px;display:flex;position:sticky;top:0}.drawer-close{border-radius:50%;padding:4px 12px;font-size:2rem;line-height:1;transition:background-color .2s}.drawer-close:hover{background-color:#f0f0f0}.drawer-body{flex-direction:column;gap:30px;padding:30px;display:flex}.drawer-meta-grid{background-color:#f9f9f9;border-radius:12px;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px;display:grid}.drawer-meta-item h5{font-family:var(--font-body);font-weight:var(--weight-bold);text-transform:uppercase;color:#666;margin-bottom:5px;font-size:.9rem}.drawer-meta-item p{font-size:1.1rem}.drawer-section h4{margin-bottom:15px;font-size:1.5rem}.drawer-section p{color:#333;margin-bottom:15px;font-size:1.1rem;line-height:1.6}.footer-text{text-align:center;font-family:var(--font-body);font-weight:var(--weight-light);padding:var(--spacing-xxxl) 0;border-top:1px solid #eee;margin-top:auto;font-size:1.25rem;font-style:italic}html.snap-enabled .footer-text{scroll-snap-align:end}.animate-fade-in{animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rainbow-border-move{0%{background-position:0 0,0 0}to{background-position:0 0,200% 0}}.word-switcher{vertical-align:middle;text-align:center;opacity:0;justify-content:center;align-items:center;min-width:187px;height:1.2em;line-height:1;transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.34,1.56,.64,1);display:inline-flex;transform:translateY(8px)}.word-switcher.fade-in{opacity:1;transform:translateY(0)}.text-welcome-font-personal{font-family:var(--font-quirky);color:var(--color-text);line-height:1}.text-welcome-font-quirky,.text-welcome-font-joyful{color:var(--color-text);font-family:Leckerli One,cursive;line-height:1}.text-welcome-font-digital{letter-spacing:2px;color:var(--color-text);text-transform:uppercase;font-family:Koulen,sans-serif;line-height:1}.cg-container{width:100%;height:100%;font-family:var(--font-body), sans-serif;background:#fff;flex-direction:column;display:flex;overflow:hidden}.cg-switch{background:#eee;border-radius:12px;flex-shrink:0;margin:10px;padding:3px;display:flex}.cg-switch-btn{cursor:pointer;font-size:10px;font-weight:700;font-family:var(--font-body), sans-serif;color:#888;background:0 0;border:none;border-radius:9px;flex:1;padding:7px 6px;transition:background .2s,color .2s}.cg-switch-btn--active-fake{color:#fff!important;background:#f40!important}.cg-switch-btn--active-real{color:#fff!important;background:#444!important}.cg-chat-box{scrollbar-width:thin;scrollbar-color:#ddd transparent;overscroll-behavior:contain;flex-direction:column;flex:1;gap:8px;padding:10px 12px;display:flex;overflow-y:auto}.cg-chat-box::-webkit-scrollbar{width:4px}.cg-chat-box::-webkit-scrollbar-track{background:0 0}.cg-chat-box::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px}.cg-empty-state{text-align:center;color:#bbb;margin-top:20px;font-size:11px}.cg-msg{word-break:break-word;border-radius:14px;max-width:88%;padding:9px 12px;font-size:11px;line-height:1.45}.cg-msg--user{color:#fff;background:#1a1a1a;border-radius:14px 14px 3px;align-self:flex-end}.cg-msg--bot{color:#222;background:#f4f4f4;border:1px solid #eee;border-radius:14px 14px 14px 3px;align-self:flex-start}.cg-typing{align-items:center;gap:3px;height:14px;display:flex}.cg-typing span{background:#999;border-radius:50%;width:5px;height:5px;animation:1.3s ease-in-out infinite cg-bounce;display:inline-block}.cg-typing span:nth-child(2){animation-delay:.2s}.cg-typing span:nth-child(3){animation-delay:.4s}@keyframes cg-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.cg-input-area{border-top:1px solid #f0f0f0;flex-shrink:0;gap:7px;padding:8px 10px;display:flex}.cg-input{font-size:11px;font-family:var(--font-body), sans-serif;color:#222;background:#f9f9f9;border:1px solid #eee;border-radius:12px;outline:none;flex:1;padding:8px 12px}.cg-input:focus{background:#fff;border-color:#f40}.cg-send-btn{color:#fff;cursor:pointer;font-size:11px;font-weight:700;font-family:var(--font-body), sans-serif;white-space:nowrap;background:#f40;border:none;border-radius:12px;padding:0 16px;transition:opacity .2s}.cg-send-btn:hover{opacity:.85}.scroll-toggle-container{z-index:1000;-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.875rem;font-weight:var(--weight-medium);background:#ffffffbf;border:1px solid #ffffff4d;align-items:center;gap:12px;padding:10px 16px;transition:transform .3s,box-shadow .3s;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 30px #00000014}.scroll-toggle-container:hover{transform:translateY(-2px);box-shadow:0 12px 35px #0000001f}.scroll-toggle-label{color:var(--color-text);-webkit-user-select:none;user-select:none}.scroll-toggle-btn{cursor:pointer;background:#ccc;border:none;border-radius:12px;width:44px;height:24px;transition:background-color .3s;display:block;position:relative}.scroll-toggle-btn.active{background:#333}.scroll-toggle-slider{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .3s cubic-bezier(.25,1,.5,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0000001a}.scroll-toggle-btn.active .scroll-toggle-slider{transform:translate(20px)}.side-project-selector{z-index:1000;-webkit-backdrop-filter:blur(12px);font-family:var(--font-body);background:#ffffffbf;border:1px solid #ffffff4d;border-radius:30px;flex-direction:column;align-items:center;gap:16px;padding:16px 12px;transition:transform .3s,box-shadow .3s;display:flex;position:fixed;top:50%;left:max(20px,50% - 780px);transform:translateY(-50%);box-shadow:0 10px 30px #00000014}@media (width<=1024px){.side-project-selector{display:none!important}}.side-project-selector:hover{transform:translateY(-50%)scale(1.02);box-shadow:0 12px 35px #0000001f}.selector-arrow-btn{color:#333;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background-color .2s,color .2s,transform .2s;display:flex}.selector-arrow-btn:hover:not(:disabled){background:#0000000d;transform:scale(1.1)}.selector-arrow-btn:active:not(:disabled){transform:scale(.95)}.selector-arrow-btn:disabled{color:#ccc;cursor:not-allowed}.selector-indicator{font-size:.95rem;font-weight:var(--weight-bold);color:var(--color-text);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:4px;padding:4px 0;display:flex}.selector-number{font-family:var(--font-heading);text-align:center;min-width:20px}
