:root{--background:#000;--foreground:#f2f0ec;--accent:#8e1b1b;--reveal-duration:4.2s;--glow-delay:4.2s;--view-duration:.9s}*{box-sizing:border-box}html,body{background:var(--background);min-width:320px;height:100%;margin:0}html{overscroll-behavior:none;overflow:hidden}body{color:var(--foreground);overscroll-behavior:none;touch-action:none;font-family:Georgia,Times New Roman,serif;overflow:hidden}main{height:100svh;min-height:100%;overflow:hidden}.site-shell{isolation:isolate;height:100%;position:relative;overflow:hidden}.site-shell:before{content:"";z-index:0;filter:blur(18px)brightness(.62);animation:background-focus var(--reveal-duration) cubic-bezier(.2, .8, .2, 1) both;background:url(/app_background.png) 50%/cover no-repeat;position:absolute;inset:-2rem;transform:scale(1.06)}.hero,.about,.contacts{opacity:0;visibility:hidden;z-index:0;height:100%;min-height:100%;transition:opacity var(--view-duration) ease, transform var(--view-duration) cubic-bezier(.2, .8, .2, 1), visibility 0s linear var(--view-duration);position:absolute;inset:0;transform:translateY(2rem)}.site-shell[data-view=hero] .hero,.site-shell[data-view=about] .about,.site-shell[data-view=contacts] .contacts,html:not(.has-js) .site-shell:has(#about-me:target) .about,html:not(.has-js) .site-shell:has(#contacts:target) .contacts{opacity:1;visibility:visible;z-index:2;transition-delay:0s;transform:translate(0,0)}.site-shell[data-view=about] .hero,.site-shell[data-view=contacts] .hero,html:not(.has-js) .site-shell:has(#about-me:target) .hero,html:not(.has-js) .site-shell:has(#contacts:target) .hero,.site-shell[data-view=contacts] .about,html:not(.has-js) .site-shell:has(#contacts:target) .about{opacity:0;visibility:hidden;z-index:0;transform:translateY(-2rem)}.nav-container{z-index:10;position:fixed;bottom:clamp(.5rem,2vw,1rem);left:clamp(.5rem,2vw,2rem)}.nav-container__links{align-items:center;gap:clamp(1rem,2vw,2rem);display:flex}.nav-container__link{color:var(--foreground);letter-spacing:.14em;opacity:.5;text-transform:uppercase;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:.72rem;text-decoration:none;transition:color .3s,opacity .3s;display:inline-block}.nav-container__link:hover,.nav-container__link:focus-visible,html:not(.has-js):has(#about-me:target) .nav-container__link[href=\#about-me],html:not(.has-js):has(#contacts:target) .nav-container__link[href=\#contacts],.nav-container__link[aria-current=page]{color:#fff;opacity:1}.nav-copyright{z-index:10;color:#f2f0ec7a;letter-spacing:.08em;white-space:nowrap;margin:0;font-size:.68rem;position:fixed;bottom:clamp(.5rem,2vw,1rem);right:clamp(.5rem,2vw,2rem)}.nav-container__link:focus-visible{outline-offset:.45rem;outline:1px solid}@keyframes background-focus{0%{filter:blur(18px)brightness(.62);transform:scale(1.06)}to{filter:blur()brightness(.86);transform:scale(1)}}@media (prefers-reduced-motion:reduce){.hero,.about,.contacts{transition:none}.site-shell:before{filter:none;animation:none;transform:none}}.hero{isolation:isolate;background:0 0;position:absolute;overflow:hidden}.hero__title-position{z-index:1;text-align:center;width:min(100% - 2rem,80rem);position:absolute;bottom:27vh;left:50%;transform:translate(-50%)}.hero__title{color:var(--foreground);letter-spacing:.09em;white-space:nowrap;animation:title-reveal var(--reveal-duration) cubic-bezier(.2, .8, .2, 1) both;margin:0;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:clamp(1.05rem,5.75vw,5.85rem);font-weight:600;line-height:1.1;position:relative}.hero__accent{color:var(--accent)}.hero__title:before,.hero__title:after{content:"KHIEM HANZO TRAN";pointer-events:none;color:#0000;-webkit-text-fill-color:transparent;mix-blend-mode:screen;background-repeat:no-repeat;background-size:300% 100%;-webkit-background-clip:text;background-clip:text;position:absolute;inset:0}.hero__title:before{filter:blur(7px);animation:title-glow-soft 6.5s linear var(--glow-delay) infinite both;background-image:linear-gradient(100deg,#0000 35%,#f2f0ec0a 43%,#ffffff3d 50%,#f2f0ec0a 57%,#0000 65%)}.hero__title:after{filter:blur(1px);animation:title-glow-sharp 6.5s linear var(--glow-delay) infinite both;background-image:linear-gradient(100deg,#0000 42%,#ffffff14 47%,#ffffff75 50%,#ffffff14 53%,#0000 58%)}@keyframes title-reveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes title-glow-soft{0%{opacity:0;background-position:-140% 0}8%{opacity:.08;background-position:-120% 0}28%{opacity:.18;background-position:-30% 0}58%{opacity:.12;background-position:70% 0}72%,to{opacity:0;background-position:140% 0}}@keyframes title-glow-sharp{0%{opacity:0;background-position:-140% 0}10%{opacity:.12;background-position:-120% 0}30%{opacity:.3;background-position:-30% 0}58%{opacity:.18;background-position:70% 0}70%,to{opacity:0;background-position:140% 0}}@media (prefers-reduced-motion:reduce){.hero__title{clip-path:none;animation:none}.hero__title:before,.hero__title:after{display:none}}@media (width<=480px){.hero__title-position{width:calc(100% - 2rem)}.hero__title{letter-spacing:.045em}}.about{isolation:isolate;background:0 0;place-items:center;display:grid;position:absolute;overflow:hidden}.about__content{z-index:1;grid-template-columns:minmax(0,29vw) minmax(0,1fr) minmax(0,25vw);align-items:center;column-gap:clamp(1.5rem,4vw,5rem);padding:0 clamp(1.5rem,4vw,4.5rem);display:grid;position:absolute;inset:0}.about__left,.about__right{opacity:1;width:100%;max-width:none;transition:opacity var(--view-duration) ease, transform var(--view-duration) cubic-bezier(.2, .8, .2, 1);transform:translateY(0)}.about__left{grid-column:1;justify-self:stretch}.about__right{grid-column:3;justify-self:stretch}.about__eyebrow{color:#f2f0ec9e;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:.72rem}.about h2{color:var(--foreground);letter-spacing:.015em;margin:0;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:clamp(2.45rem,3.85vw,4.75rem);font-weight:600;line-height:.98}.about h2 span{color:var(--accent)}.about__right p{color:#f2f0ecd1;margin:0;font-size:clamp(.95rem,1.2vw,1.25rem);line-height:1.55}.about__right p+p{color:#f2f0ec94;margin-top:1.25rem}.site-shell[data-view=hero] .about__left,.site-shell[data-view=hero] .about__right{opacity:0;transform:translateY(2rem)}.site-shell[data-view=about] .about__left,.site-shell[data-view=about] .about__right,html:not(.has-js) .site-shell:has(#about-me:target) .about__left,html:not(.has-js) .site-shell:has(#about-me:target) .about__right{opacity:1;transition-delay:.16s;transform:translateY(0)}.site-shell[data-view=about] .about__right,html:not(.has-js) .site-shell:has(#about-me:target) .about__right{transition-delay:.3s}@media (prefers-reduced-motion:reduce){.about__left,.about__right{transition:none}.site-shell[data-view=about] .about__left,.site-shell[data-view=about] .about__right,html:not(.has-js) .site-shell:has(#about-me:target) .about__left,html:not(.has-js) .site-shell:has(#about-me:target) .about__right{opacity:1;transform:none}}@media (width<=760px){.about__content{grid-template-columns:1fr;align-content:space-between;row-gap:2.5rem;padding:13vh 1rem 11vh}.about__left,.about__right{grid-column:1;justify-self:start;max-width:none}.about__right{align-self:end}}@media (width>=761px) and (height<=700px){.about h2{font-size:clamp(2.25rem,3.5vw,4rem)}.about__right p{font-size:clamp(.9rem,1.05vw,1.1rem)}}.contacts__content{z-index:1;grid-template-columns:minmax(0,31vw) minmax(0,1fr) minmax(0,25vw);align-items:center;column-gap:clamp(1.5rem,4vw,5rem);padding:0 clamp(1.5rem,4vw,4.5rem);display:grid;position:absolute;inset:0}.contacts__left,.contacts__right{opacity:1;width:100%;transition:opacity var(--view-duration) ease, transform var(--view-duration) cubic-bezier(.2, .8, .2, 1);transform:translateY(0)}.contacts__left{grid-column:1}.contacts__right{grid-column:3}.contacts__eyebrow{color:#f2f0ec9e;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:.72rem}.contacts h2{color:var(--foreground);letter-spacing:.015em;margin:0 0 2rem;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:clamp(2.45rem,3.85vw,4.75rem);font-weight:600;line-height:.98}.contacts h2 span{color:var(--accent)}.contact-form{gap:.85rem;display:grid}.contact-form__field{color:#f2f0ec9e;letter-spacing:.12em;text-transform:uppercase;gap:.35rem;font-size:.72rem;display:grid}.contact-form__field input,.contact-form__field textarea{resize:vertical;width:100%;color:var(--foreground);font:inherit;letter-spacing:normal;text-transform:none;background:0 0;border:0;border-bottom:1px solid #f2f0ec59;border-radius:0;outline:0;padding:.55rem 0 .65rem;font-size:1rem;transition:border-color .3s,background-color .3s}.contact-form__field input:focus,.contact-form__field textarea:focus{background:#f2f0ec0a;border-color:#fff}.contact-form__field input:autofill,.contact-form__field input:-webkit-autofill,.contact-form__field input:-webkit-autofill:hover,.contact-form__field input:-webkit-autofill:focus,.contact-form__field textarea:autofill,.contact-form__field textarea:-webkit-autofill,.contact-form__field textarea:-webkit-autofill:hover,.contact-form__field textarea:-webkit-autofill:focus{-webkit-appearance:none;appearance:none;caret-color:var(--foreground);color-scheme:dark;-webkit-text-fill-color:var(--foreground)!important;background:0 0!important;transition:background-color 9999s ease-in-out!important;-webkit-box-shadow:inset 0 0 0 1000px #0000!important;box-shadow:inset 0 0 0 1000px #0000!important}.contact-form__field input:-moz-autofill,.contact-form__field textarea:-moz-autofill{appearance:none;color-scheme:dark;color:var(--foreground)!important;background:0 0!important;box-shadow:inset 0 0 0 1000px #0000!important}.contact-form__field textarea{min-height:5.5rem}.contact-form__actions{align-items:center;gap:1rem;margin-top:.4rem;display:flex}.contact-form__actions button{color:var(--foreground);font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #f2f0ecb8;padding:.7rem 1rem;font-size:.72rem;transition:background-color .3s,color .3s,opacity .3s}.contact-form__actions button:hover,.contact-form__actions button:focus-visible{background:var(--foreground);color:var(--background)}.contact-form__actions button:disabled{opacity:.55;cursor:wait}.contact-form__status{color:#f2f0eca3;min-height:1.2em;margin:0;font-size:.82rem;line-height:1.35}.contact-form__status[data-state=success]{color:#dceedae6}.contact-form__status[data-state=error]{color:#f4bebeeb}.contact-form__trap{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.contacts__right h3{color:var(--foreground);letter-spacing:.03em;margin:0;font-family:Cinzel,Georgia,Times New Roman,serif;font-size:clamp(1.65rem,2.1vw,2.4rem);font-weight:600;line-height:1.05}.ecosystems{border-top:1px solid #f2f0ec42;margin-top:2rem;display:grid}.ecosystems a{color:#f2f0ecdb;border-bottom:1px solid #f2f0ec42;justify-content:space-between;align-items:center;padding:.85rem 0;font-size:1rem;text-decoration:none;transition:color .3s,padding .3s;display:flex}.ecosystems a:hover,.ecosystems a:focus-visible{color:#fff;padding-inline:.35rem}.ecosystems a span{color:var(--accent);font-size:1.1rem}.contacts__note{color:#f2f0ec8f;margin:1.5rem 0 0;font-size:.95rem;line-height:1.55}.site-shell[data-view=hero] .contacts__left,.site-shell[data-view=hero] .contacts__right,.site-shell[data-view=about] .contacts__left,.site-shell[data-view=about] .contacts__right{opacity:0;transform:translateY(2rem)}.site-shell[data-view=contacts] .contacts__left,.site-shell[data-view=contacts] .contacts__right,html:not(.has-js) .site-shell:has(#contacts:target) .contacts__left,html:not(.has-js) .site-shell:has(#contacts:target) .contacts__right{opacity:1;transition-delay:.16s;transform:translateY(0)}.site-shell[data-view=contacts] .contacts__right,html:not(.has-js) .site-shell:has(#contacts:target) .contacts__right{transition-delay:.3s}@media (prefers-reduced-motion:reduce){.contacts__left,.contacts__right{transition:none}}@media (width<=760px){.contacts__content{grid-template-columns:1fr;align-content:space-between;row-gap:3rem;padding:10vh 1rem 9vh}.contacts__left,.contacts__right{grid-column:1}.contacts__right{align-self:end}.contacts h2{margin-bottom:1.25rem;font-size:clamp(2.35rem,12vw,4rem)}.contact-form__actions{flex-direction:column;align-items:flex-start}}