@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Playfair+Display:wght@700&display=swap";html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;overscroll-behavior:none}body.locked{overflow:hidden!important;height:100vh;position:fixed;inset:0;touch-action:none}#root{min-height:100vh;overflow:visible}.app-main{width:100%;min-height:100vh;overflow:visible}#smooth-wrapper{height:100%;overflow:hidden}#smooth-content{will-change:transform}#orientation-lock{display:none}@media screen and (max-width: 1024px) and (orientation: landscape){body>*:not(#orientation-lock){display:none!important}#orientation-lock{display:flex!important;position:fixed;inset:0;background:#000;color:#fff;font-family:DM Sans,sans-serif;font-size:clamp(1rem,4vw,2rem);align-items:center;justify-content:center;text-align:center;z-index:999999;line-height:1.5}}#orientation-lock{opacity:0;transition:opacity .3s ease}@media screen and (max-width: 1024px) and (orientation: landscape){#orientation-lock{opacity:1}}@font-face{font-family:Chorus;src:url(/assets/CHORUS-BOLD-W2crBpqm.otf)}@font-face{font-family:Climax;src:url(/assets/RRRClimaxVF-CRqWHLNq.ttf)}.scene-wrapper{position:absolute;top:0;width:100dvw;height:100dvh;z-index:10}.scene-wrapper canvas{width:100%;height:100%;display:block}.hero-main{position:relative;height:100vh;overflow:hidden;display:flex;justify-content:flex-start;justify-content:space-around;align-items:center;opacity:0}.hero-main.active{opacity:1!important;pointer-events:auto!important;visibility:visible!important}.content{position:absolute;top:0;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;pointer-events:none}.name{line-height:1;margin:1% auto;padding:0;text-transform:uppercase;font-family:Climax;font-weight:500;color:#111111e0;transform:scaleY(1.5);transform-origin:center top;z-index:20;opacity:.88;display:flex;top:0;text-shadow:0 2px 5px #00000041;pointer-events:none;background:url(/mist_metalness.jpg) center/cover;background-size:20% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;mix-blend-mode:luminosity}.frontend-wrapper{position:relative;width:100vw;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:#0ff}.frontend-bg-wrapper{position:relative;width:100%;height:5em;display:flex;justify-content:center;align-items:center;overflow:visible;margin-top:-8vh}.frontend-bg{position:absolute;inset:0;height:100%;width:100%;background:linear-gradient(135deg,#ff1e1e,#1efc94);mix-blend-mode:exclusion;opacity:.6;transform:scaleX(0);transform-origin:left center;z-index:30}.frontend-developer{position:relative;z-index:2;font-family:DM Sans;font-weight:1000;font-size:clamp(2rem,4vw,4rem);text-transform:uppercase;color:#fff;transform:scaleY(1.2);letter-spacing:.4em;display:flex;justify-content:space-between;align-items:center;width:90%;text-shadow:0 2px 5px #a5a5a5;z-index:32}.face-img{height:120%;position:absolute;top:15%;z-index:33;filter:grayscale(.4) drop-shadow(0px 5px 5px #222);will-change:transform,filter;transition:filter .6s ease}.face-img:hover{filter:grayscale(0) drop-shadow(0px 5px 5px #7e7e7e) drop-shadow(0px 5px 5px #91909075)}.loading-screen{position:fixed;inset:0;background:#0b0b0b;color:#fff;font-family:DM Sans,sans-serif;font-size:2rem;letter-spacing:.3em;display:flex;align-items:center;justify-content:center;z-index:999;opacity:1;transition:opacity .8s ease;max-height:100vh;overflow:hidden}.loading-logo{font-size:clamp(2rem,6vw,6rem);font-weight:800;text-transform:uppercase;animation:pulse 1.8s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1);opacity:.7}to{transform:scale(1.1);opacity:1}}.enter-screen{position:absolute;inset:0;background:#0b0b0b;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:999;opacity:1;transition:opacity .8s ease;color:#fff;max-height:100vh;overflow:hidden;height:100vh}.enter-content{margin:0;text-align:center;animation:fadein 1.5s ease}.enter-logo{font-family:Chorus,sans-serif;font-size:clamp(2rem,22vw,22rem);font-weight:900;letter-spacing:.2em;margin:1.5rem 1.5rem 1.5rem 7vw}.enter-btn{background:none;color:#fff;border:2px solid white;font-size:1.5rem;padding:.7em 2em;cursor:pointer;letter-spacing:.15em;transition:all .3s ease}.enter-btn:hover:not(:disabled){background:#fff;color:#000}.enter-btn:disabled{opacity:.5;cursor:default}@keyframes fadein{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}html,body{overscroll-behavior:none;height:100%}@media (max-width: 1024px){.hero-main{flex-direction:column;justify-content:flex-start;align-items:center;height:100dvh;text-align:center;position:relative}.content{position:absolute;z-index:20;width:100%;height:auto;display:flex;flex-direction:column;align-items:center}.name{font-size:clamp(2rem,14vw,14rem);margin-top:2vh;transform:scaleY(1.2)!important;text-shadow:none;text-align:center}.frontend-bg-wrapper{position:relative;width:100%;height:2.8em;top:auto;z-index:5;margin-top:-.5rem}.frontend-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0eadc9,#970c97);mix-blend-mode:exclusion;opacity:.6;transform:scaleX(1)}.frontend-developer{position:relative;font-size:clamp(1rem,1rem,3rem);letter-spacing:.4em;justify-content:space-around;width:90%;text-align:center;z-index:33}.face-img{position:relative;top:auto;bottom:auto;height:45vh;margin-top:10vh;filter:drop-shadow(0 0 2px #00000069);opacity:.9}.hero-main:after{content:"";display:block;height:40vh}.scene-wrapper{height:100dvh;width:100dvw;z-index:10}#logger{z-index:200;position:absolute;top:0}}@keyframes fadeSlideIn{to{opacity:1;transform:translateY(0)}}.portrait-reveal{position:relative;width:80vw;overflow:hidden}.portrait-wrapper{position:relative;width:60vw}.portrait-image{width:100%;height:100%;object-fit:cover;mask-image:url(#portrait-reveal-mask);mask-repeat:no-repeat;mask-size:cover;-webkit-mask-image:url(#portrait-reveal-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-size:cover}.portrait-mask{position:absolute;inset:0;pointer-events:none}svg .svg-elem-1{stroke-dashoffset:3054.569091796875px;stroke-dasharray:3054.569091796875px;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) 0s,fill .7s cubic-bezier(.47,0,.745,.715) .8s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) 0s,fill .7s cubic-bezier(.47,0,.745,.715) .8s}svg.active .svg-elem-1{stroke-dashoffset:0}svg .svg-elem-2{stroke-dashoffset:426.14459228515625px;stroke-dasharray:426.14459228515625px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .12s,fill .7s cubic-bezier(.47,0,.745,.715) .9s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .12s,fill .7s cubic-bezier(.47,0,.745,.715) .9s}svg.active .svg-elem-2{stroke-dashoffset:0;fill:#112346}svg .svg-elem-3{stroke-dashoffset:944.4091796875px;stroke-dasharray:944.4091796875px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .24s,fill .7s cubic-bezier(.47,0,.745,.715) 1s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .24s,fill .7s cubic-bezier(.47,0,.745,.715) 1s}svg.active .svg-elem-3{stroke-dashoffset:0;fill:#fff}svg .svg-elem-4{stroke-dashoffset:282.5382995605469px;stroke-dasharray:282.5382995605469px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .36s,fill .7s cubic-bezier(.47,0,.745,.715) 1.1s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .36s,fill .7s cubic-bezier(.47,0,.745,.715) 1.1s}svg.active .svg-elem-4{stroke-dashoffset:0;fill:#fff}svg .svg-elem-5{stroke-dashoffset:663.6497192382812px;stroke-dasharray:663.6497192382812px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .48s,fill .7s cubic-bezier(.47,0,.745,.715) 1.2000000000000002s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .48s,fill .7s cubic-bezier(.47,0,.745,.715) 1.2000000000000002s}svg.active .svg-elem-5{stroke-dashoffset:0;fill:#fff}svg .svg-elem-6{stroke-dashoffset:233.69789123535156px;stroke-dasharray:233.69789123535156px;fill:transparent;-webkit-transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .6s,fill .7s cubic-bezier(.47,0,.745,.715) 1.3s;transition:stroke-dashoffset 1s cubic-bezier(.47,0,.745,.715) .6s,fill .7s cubic-bezier(.47,0,.745,.715) 1.3s}svg.active .svg-elem-6{stroke-dashoffset:0;fill:#fff}.profile-main{position:relative;min-height:100vh;padding:10vh 10vw;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:10;box-shadow:inset 0 5px 20px 10px #000,inset 0 15px 60px 10px #353535,inset 20px 5px 30px 10px #353535}.profile-content{animation:fadeUp 1s ease-out both;z-index:100;position:relative;top:12%;display:flex;flex-direction:column;align-items:stretch;gap:2rem}.profile-title{font-family:Playfair Display,serif;font-size:clamp(2.5rem,5vw,4rem);margin-left:30%;letter-spacing:-.03em;line-height:1.1;color:#eee;z-index:100}.profile-body{display:flex;align-items:flex-start;justify-content:center;gap:1rem;max-width:90vw}.profile-img{flex:0 0 25vw;background-color:transparent;mix-blend-mode:difference;display:flex;justify-content:center}.profile-img img{width:60%;height:auto;display:block}.profile-text{flex:1;font-family:DM Sans,sans-serif;font-size:1.2rem;line-height:1.5;color:#949494;mix-blend-mode:difference;text-align:justify;z-index:400}.profile-text span{color:#f0f0f0;font-weight:900;transition:color .3s ease;letter-spacing:.1em}.profile-text span:hover{color:#1efcf1}.visit{width:60%;margin:3em auto 0;color:#eee;font-family:Chorus;font-size:3rem;letter-spacing:.1em;text-align:center}.visit-content{width:100%;display:flex;justify-content:space-around;align-items:center}.visit>span{font-size:1.2rem;font-family:DM Sans;text-transform:uppercase}.wall-exp{border:1px solid white;width:100%;padding:5%}.wall-exp-link{text-decoration:none;color:inherit;display:inline-block}.wall-exp-link:visited,.wall-exp-link:active,.wall-exp-link:hover{color:inherit}@keyframes fadeUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){.profile-main{padding:8vh 6vw}.profile-title{margin-left:10%;font-size:clamp(2.2rem,5vw,3.2rem);text-align:left}.profile-body{gap:2rem;text-align:justify}.profile-img{flex:0 0 30vw}.profile-text{font-size:1.1rem;text-align:justify}}@media (max-width: 768px){.profile-main{padding:6vh 6vw}.profile-content{top:8%;gap:1.5rem}.profile-title{margin-left:0;text-align:center;font-size:clamp(2rem,7vw,2.8rem)}.profile-body{flex-direction:column;align-items:center;gap:1.2rem;text-align:justify}.profile-img{width:60%;flex:none}.profile-text{width:100%;font-size:1rem;line-height:1.6;text-align:justify}.visit{width:80%;font-size:2.4rem;margin-top:1em}.visit-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.visit-content>span{margin-left:1em}.wall-exp{padding:10%;font-size:1.5rem;background-color:#949494;box-shadow:0 0 15px 10px #000000e1}.visit-content>.stay-here{margin-left:1.5em}}@media (max-width: 480px){.profile-main{padding:5vh 5vw}.profile-title{font-size:clamp(1.8rem,8vw,2.4rem)}.profile-img{width:80%}.profile-text{font-size:.95rem;width:80%}.visit{width:90%;font-size:2rem}.visit-content{align-items:center}.visit>span{font-size:1rem}.visit-content>.stay-here {margin-left:1ch;background-color:#1efcf1}}.drip-wrapper{position:absolute;inset:0;overflow:hidden;z-index:3}.black-bg{position:absolute;inset:0;background:#000;transform:scaleY(0);transform-origin:top center;opacity:.9;z-index:1}.drip-layer{position:absolute;width:100%;height:100vh;background-image:url(/dripimg2.png);background-repeat:repeat-x;background-size:50% 100%;background-position:top center;overflow:hidden;opacity:.9;z-index:2}.works-section{background-color:#d3d3d3;color:#f7f7f7;width:100%;overflow:hidden;position:relative;background-image:url(/assets/augustine-wong-kTg4NXEmfs8-unsplash-DV8kDp_9.jpg);background-repeat:repeat;background-size:110%;background-blend-mode:overlay}.works-header{text-align:center;height:40vh;margin:auto;display:flex;flex-direction:column;justify-content:center}.works-header h2{font-family:DM Sans,serif;font-size:clamp(2.5rem,12vw,12rem);color:#111;font-weight:800;letter-spacing:-.03em;line-height:.75;margin:0;padding:0}.animated-title{display:inline-block;font-family:DM Sans,sans-serif;font-variation-settings:"wght" 700,"wdth" 100;font-size:clamp(3rem,8vw,10rem);letter-spacing:-.03em;white-space:nowrap;line-height:1}.animated-title .char{display:inline-block;transform-origin:center bottom;will-change:font-variation-settings}.works-subtitle{font-family:DM Sans,sans-serif;color:#ebebeb;font-size:2.5rem;font-weight:600;line-height:1.6;letter-spacing:.2em;margin:0}.work-block{position:relative;width:100%;height:110vh;margin:auto;padding:1em}.work-visual{position:relative;height:90vh}.work-visual img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center center;will-change:transform}.work-title{position:absolute;bottom:0%;left:2%;font-family:DM Sans,sans-serif;font-size:clamp(3rem,12vw,12rem);font-weight:900;color:#fff;z-index:3;line-height:.9;margin:0;display:inline-block;max-width:40%;letter-spacing:-.08em;text-transform:uppercase;-webkit-text-stroke:#fff 2px;text-shadow:0 0 12px rgb(7,7,7);pointer-events:none}.description-box{position:absolute;bottom:-2%;right:2%;width:30%;max-width:500px;background:#ffffffe6;color:#111;padding:2rem;box-shadow:0 8px 25px #0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:3;pointer-events:none}.description-box .description{font-family:DM Sans,sans-serif;font-size:1rem;line-height:1.5;margin-bottom:1.2rem;text-align:justify;width:80%;margin:auto}.visit-btn{color:#111;text-decoration:none;font-weight:700;letter-spacing:.03em;border:1px solid #111;padding:.6rem 1.2rem;border-radius:999px;display:inline-block;transition:background .3s ease,color .3s ease;pointer-events:all}.visit-btn:hover{background:#111;color:#fff}.img-wrapper{position:relative;width:95%;height:95%;overflow:hidden;margin:auto;pointer-events:auto;box-shadow:0 10px 40px 12px #4e4c471a,0 12px 26px 3px #5c534882}.img-gray,.img-color{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.img-gray{filter:grayscale(100%) brightness(1.1) contrast(.72);z-index:1}.img-color{z-index:2;pointer-events:none;mask-mode:luminance;-webkit-mask-mode:luminance;mask-image:radial-gradient(circle at 50% 50%,white 0%,transparent 0%);-webkit-mask-image:radial-gradient(circle at 50% 50%,white 0%,transparent 0%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transition:mask-image .2s ease-out}.works-noise{position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;pointer-events:none;z-index:20}.works-light{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.12),transparent 60%);mix-blend-mode:soft-light;z-index:2;transition:background .2s ease-out}@media (max-width: 768px){.works-section{overflow:visible!important}.works-header{font-size:2em!important}.works-subtitle{font-size:1.2rem!important;width:90%;margin:1vh auto}.work-block{padding:0;height:auto;margin-bottom:3rem}.work-visual{width:100vw;height:auto;display:flex;flex-direction:column;align-items:center}.img-wrapper{width:100vw;aspect-ratio:16 / 9;border-radius:0;overflow:hidden;margin:0}.img-gray{display:none}.img-color{position:relative;width:100%;height:100%;object-fit:cover;mask-image:none!important;-webkit-mask-image:none!important}.work-title{position:absolute;top:25vh;left:5%;width:90%;max-width:100%;color:#fff;font-size:clamp(2rem,8vw,2.6rem);font-weight:900;line-height:1.1;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.6);z-index:5}.description-box{position:relative;top:0;margin:0 auto;padding:1.2rem 1.5rem;width:90%;background:#fffffff2;color:#111;border-radius:0;box-shadow:0 3px 10px #00000026;overflow:hidden;transition:max-height .4s ease,padding .3s ease;max-height:40vh;display:flex;flex-direction:column;gap:1rem;pointer-events:auto}.description-box.expanded{max-height:none}.description-box .description{font-size:1rem;line-height:1.5;flex:1;overflow:hidden;text-overflow:ellipsis}.read-more-btn{background:none;border:none;color:#111;font-weight:600;font-size:1rem;text-decoration:underline;align-self:flex-start;padding:0;cursor:pointer}.visit-btn{flex-shrink:0;align-self:flex-start;font-size:1rem;border:1px solid #111;color:#111;padding:.5rem 1.2rem;border-radius:999px;transition:background .3s ease,color .3s ease;margin-top:.5rem}.visit-btn:hover{background:#111;color:#fff}}@media (max-width: 480px){.work-title{font-size:1.8rem}.description-box{padding:1rem 1.2rem}.visit-btn{font-size:.9rem}}.contact-footer{position:relative;width:100%;padding:2vh 1vw;height:40vh;background:#0a0a0a;color:#e0e0e0;text-align:center;display:flex;flex-direction:column;justify-content:space-between;font-family:DM Sans,sans-serif;border-top:1px solid rgba(255,255,255,.1);mix-blend-mode:exclusion;background-image:url(/assets/leopard-B0bgC9Vt.png);background-size:40%;box-shadow:inset 0 14px 25px 5px #000000c4,inset 0 10px 25px 10px #000000a4}.contact-footer:before{content:"";position:absolute;inset:0;background:#0a0a0a;opacity:.36;z-index:0}.contact-footer>*{position:relative;z-index:1}.contact-title{font-family:Chorus,serif;font-size:clamp(2rem,8vw,10rem);margin-bottom:1rem;margin-top:.2em;color:#fff;text-transform:uppercase;mix-blend-mode:exclusion;letter-spacing:.2em}.contact-block{font-size:1.1rem;color:#aaa;margin-bottom:2rem;line-height:1.5;background-color:#1a1a1aec;width:40vw;margin:auto;height:30%;display:flex;flex-direction:column;padding:1%}.contact-text span{color:#1efcf1;font-weight:600}.contact-links{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.contact-link{display:flex;align-items:center;gap:.5rem;color:#eee;text-decoration:none;font-size:1rem;transition:color .3s ease,transform .3s ease}.contact-link:hover{color:#1efcf1;transform:translateY(-2px)}.contact-credit{font-size:.9rem;color:#666;width:100vw;margin-bottom:0}@media (max-width: 1024px){.contact-footer{height:auto;background-size:60%}.contact-block{width:60vw;height:auto;font-size:1rem;padding:2rem 1.5rem}.contact-links{gap:1.5rem}.contact-title{font-size:clamp(2rem,20vw,10rem);letter-spacing:.1em}}