@import "https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@300;400;500;600&display=swap";
@font-face{font-family:VTF MisterPixel;src:local(VTF MisterPixel),local(Courier New);font-weight:400;font-style:normal}:root{--color-primary:#0fd;--color-text:#e7f2ef;--color-text-secondary:#31917e;--color-background-dark:#021219;--color-stack-bar:#133b3342;--font-body:"Encode Sans Expanded", sans-serif;--font-pixel:"VTF MisterPixel", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-background-dark);width:100%;min-height:100vh;color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.5;overflow-x:hidden}.header{z-index:100;flex-direction:column;display:flex;position:fixed;top:0;left:0;right:0}.header-nav-bar{background-color:var(--color-background-dark);opacity:0;z-index:0;transition:opacity .35s,transform .35s;position:absolute;inset:0;transform:translateY(-100%)}.header-nav-bar.nav-visible{opacity:1;transform:translateY(0)}.header-content{z-index:1;justify-content:space-between;align-items:center;padding:24px 48px;display:flex;position:relative}.logo-container{align-items:center;height:40px;display:flex;position:relative}.logo{width:auto;height:40px;transition:opacity .35s,transform .35s}.logo-full{opacity:1;position:relative;transform:translate(0)}.logo-full.logo-hidden{opacity:0;pointer-events:none}.logo-s{opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;position:absolute;left:0;transform:translate(-8px)}.logo-s.logo-visible{opacity:1;pointer-events:auto;transform:translate(0)}.header-right{align-items:center;gap:16px;display:flex}.btn-about{color:var(--color-primary);font-family:var(--font-body);opacity:0;pointer-events:none;align-items:center;gap:8px;font-size:16px;font-weight:400;text-decoration:none;transition:opacity .35s,transform .35s;display:flex;transform:translate(8px)}.btn-about.btn-about-visible{opacity:1;pointer-events:auto;transform:translate(0)}.btn-about:hover{opacity:.8}.btn-arrow{width:20px;height:auto}.btn-primary{background-color:var(--color-primary);color:var(--color-background-dark);font-family:var(--font-body);cursor:pointer;border:none;border-radius:4px;padding:12px 24px;font-size:16px;font-weight:500;text-decoration:none;transition:opacity .2s}.btn-primary:hover{opacity:.9}.hero{width:100%;height:100vh;min-height:700px;position:relative;overflow:hidden}.hero-background{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.hero-video-overlay{z-index:2;pointer-events:none;opacity:1;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s ease-out;display:flex;position:absolute;top:0;left:0}.hero-video-overlay.video-fading{opacity:0}.hero-video{object-fit:contain;object-position:center;width:100%;height:100%}.hero-content{z-index:10;justify-content:space-between;align-items:flex-end;padding:0 48px;display:flex;position:absolute;bottom:48px;left:0;right:0}.hero-left{align-items:flex-end;gap:24px;max-width:600px;display:flex}.hero-description{font-family:var(--font-body);color:var(--color-text);font-size:16px;line-height:1.6}.scroll-indicator{flex-shrink:0;width:24px;height:auto}.hero-right{align-items:center;gap:16px;display:flex}.worked-with-text{font-family:var(--font-body);color:var(--color-text);white-space:nowrap;font-size:16px}.client-logo{opacity:.9;width:auto;height:32px}.stack-bar{background-color:var(--color-stack-bar);flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all .6s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.stack-bar:before,.stack-bar:after{content:"";z-index:50;pointer-events:none;width:200px;position:absolute;top:0;bottom:0}.stack-bar:before{background:linear-gradient(to right, var(--color-background-dark) 0%, #021219cc 30%, transparent 100%);left:0}.stack-bar:after{background:linear-gradient(to left, var(--color-background-dark) 0%, #021219cc 30%, transparent 100%);right:0}.stack-bar.collapsed{height:33.33vh;min-height:200px;padding:24px 0}.stack-bar.expanded{height:auto;min-height:80px;padding:24px 0}.stack-bar .stack-content-collapsed{opacity:1;transition:opacity .4s,transform .4s;transform:scale(1)}.stack-bar .stack-content-expanded{opacity:1;transition:opacity .4s .2s,transform .4s .2s;transform:scale(1)}.stack-bar.transitioning .stack-content-collapsed{opacity:0;transform:scale(.95)}.stack-bar.transitioning .stack-content-expanded{opacity:0;transform:scale(1.05)}.stack-content-collapsed{flex-direction:column;justify-content:center;align-items:center;gap:0;display:flex}.stack-content-collapsed .stack-row:first-child{margin-bottom:-22px}.stack-content-expanded{flex-direction:column;justify-content:center;align-items:center;gap:0;display:flex}.stack-content-expanded .stack-row:first-child{margin-bottom:-22px}.stack-row{justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.stack-label{font-family:var(--font-pixel);white-space:nowrap;padding:8px 24px;font-size:24px}.stack-label.design{color:var(--color-text)}.stack-label.tech{color:var(--color-text-secondary)}.marquee-container{width:100%;position:relative;overflow:hidden}.marquee{width:fit-content;animation:45s linear infinite marquee;display:flex}.marquee-content{white-space:nowrap;padding-right:0;display:flex}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.bottom-section{background-color:var(--color-background-dark);text-align:left;padding:80px 48px}.contact-text{font-family:var(--font-body);color:var(--color-text);max-width:600px;margin:0;font-size:16px;line-height:2}.footer{background-color:var(--color-background-dark);border-top:1px solid #e7f2ef1a;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;padding:48px;display:flex}.footer-left,.footer-center,.footer-right{font-family:var(--font-body);color:var(--color-text);font-size:16px}.footer-center a,.footer-right a{color:var(--color-text);text-decoration:none;transition:opacity .2s}.footer-center a:hover,.footer-right a:hover{opacity:.7}.footer-links{gap:8px;display:flex}.header-about .header-nav-bar{opacity:1;transform:translateY(0)}.back-arrow-link{justify-content:center;align-items:center;width:40px;height:40px;display:flex}.back-arrow{opacity:.7;width:32px;height:auto;transition:opacity .2s;transform:rotate(180deg)}.back-arrow:hover{opacity:1}.about-hero{background-color:#000;width:100%;height:100vh;min-height:700px;position:relative;overflow:hidden}.about-background{z-index:1;background-color:#000;position:absolute;inset:90px 0 0}.about-image-placeholder{background-color:#000;width:100%;height:100%}.download-resume-section{z-index:10;background-color:#000;padding:48px;position:absolute;bottom:0;left:0;right:0}.btn-download-resume{color:var(--color-primary);font-family:var(--font-body);align-items:center;gap:8px;font-size:16px;font-weight:400;text-decoration:none;transition:opacity .2s;display:flex}.btn-download-resume:hover{opacity:.8}.btn-download-resume .btn-arrow{width:20px;height:auto}@media (max-width:768px){.header{padding:16px 24px}.hero-content{flex-direction:column;align-items:flex-start;gap:32px;padding:0 24px;bottom:32px}.hero-left{flex-direction:column;align-items:flex-start;gap:16px;max-width:100%}.hero-right{flex-wrap:wrap;gap:12px}.stack-label{padding:6px 16px;font-size:18px}.bottom-section{padding:48px 24px}.footer{flex-direction:column;gap:16px;padding:32px 24px}}
