@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#09090c;color:#eae9ee;font:15px/1.5 'Manrope',sans-serif;min-height:100svh;display:grid;place-items:center;-webkit-font-smoothing:antialiased}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#74638712,transparent 55%)}main{width:min(100% - 44px,420px);padding:70px 0}.identity{margin-bottom:46px}.typing-title{display:flex;justify-content:center;align-items:baseline;margin:0;font-size:clamp(36px,10vw,56px);line-height:1.2;letter-spacing:-2.5px;font-weight:600;height:1.3em;white-space:nowrap}.typing-cursor{width:2px;height:.75em;margin-left:8px;background:#a69bb8;animation:blink 1s steps(1) infinite}.networks{display:grid;gap:12px}.networks>a{display:flex;align-items:center;gap:16px;min-height:68px;padding:20px 22px;color:inherit;text-decoration:none;border:1px solid #ffffff15;border-radius:16px;background:linear-gradient(110deg,#ffffff07,#ffffff02);transition:border-color .25s,background .25s;position:relative;overflow:hidden}.networks>a>svg{width:22px;height:22px;color:#c2bdcc;flex-shrink:0}.networks>a>div{font-weight:500}.networks>a>.arrow-icon{margin-left:auto;width:16px;height:16px;color:#787181}.networks>a:hover{background:#ffffff09;border-color:#ffffff30}.email{display:flex;align-items:center;justify-content:center;gap:12px;color:#93909f;text-decoration:none;font-size:13px;margin-top:32px;min-height:44px}.email svg{width:13px;height:13px}.email:hover{color:#ded7e8}a:focus-visible{outline:2px solid #b8a8ce;outline-offset:5px}.motion-enabled .reveal{opacity:0;translate:0 12px;transition:opacity .7s ease var(--delay,0ms),translate .7s ease var(--delay,0ms)}.motion-enabled .shown{opacity:1;translate:0 0}.networks>a:after{content:"";position:absolute;inset:0;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),#ffffff09,transparent);pointer-events:none;opacity:0}.tilting:after{opacity:1}@keyframes blink{50%{opacity:0}}@media(max-width:380px){main{width:calc(100% - 36px);padding:40px 0}.networks>a{min-height:62px;padding:17px 20px}.identity{margin-bottom:35px}}@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;translate:none!important}.typing-cursor{display:none}}
/* Keep the layout independent of the animated title's intrinsic width. */
body{display:block}main{width:calc(100% - 44px);max-width:420px;margin-inline:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center}.identity{width:100%;min-width:0}.typing-title{width:100%;min-width:0}.networks{width:100%;min-width:0;flex-shrink:0}.networks>a{width:100%;min-width:0}@media(max-width:380px){main{width:calc(100% - 36px)}}
/* Centered identity, horizontal social links, email underneath. */
main{max-width:920px;text-align:center}.identity{margin-bottom:36px}.networks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.networks>a{justify-content:center;gap:12px;padding:19px 16px;min-height:66px}.networks>a>.arrow-icon{margin-left:0;width:13px;height:13px}.email{align-self:center;margin-top:28px}.typing-title{justify-content:center}@media(max-width:650px){main{max-width:460px}.networks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.networks>a{padding:17px 12px;gap:10px;font-size:14px}.networks>a>svg{width:20px;height:20px}}@media(max-width:380px){.networks>a{gap:8px;padding:16px 10px}.networks>a>.arrow-icon{display:none}}
/* Plain clickable social names and vector logos. */
.networks>a{border:0;border-radius:0;background:none;min-height:48px;padding:12px 8px;overflow:visible}.networks>a:hover{background:none;border-color:transparent;color:#fff}.networks>a:after{display:none}.networks>a>.arrow-icon{display:none}.networks>a>svg{transition:color .2s}.networks>a:hover>svg{color:#fff}
/* Slow, dark atmospheric light; isolated from the content layout. */
#root{isolation:isolate}
.ambient{z-index:-1;overflow:hidden;background:#09090c}
.ambient::before,.ambient::after{content:"";position:absolute;pointer-events:none;inset:-25%;will-change:transform;animation:ambient-drift 26s ease-in-out infinite alternate}
.ambient::before{background:radial-gradient(ellipse at 35% 42%,#76618e24 0%,#5541640c 28%,transparent 55%),radial-gradient(ellipse at 72% 68%,#3d555e19 0%,transparent 45%)}
.ambient::after{background:radial-gradient(ellipse at 65% 38%,#77708419 0%,transparent 42%);animation:ambient-counter 34s ease-in-out infinite alternate}
@keyframes ambient-drift{from{transform:translate3d(-5%,-3%,0) rotate(-8deg) scale(1)}to{transform:translate3d(7%,5%,0) rotate(8deg) scale(1.12)}}
@keyframes ambient-counter{from{transform:translate3d(6%,4%,0) scale(1.1)}to{transform:translate3d(-8%,-5%,0) scale(.95)}}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none!important;will-change:auto}}
/* Identity-led entrance: draw, resolve, connect. All times share one timeline. */
:root{--intro-ease:cubic-bezier(.16,1,.3,1)}
.cinematic{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#b397d321,transparent 55%);animation:light-resolve 4s ease-out both}
.identity{position:relative;isolation:isolate}
.signature{position:absolute;left:50%;top:50%;width:160px;height:100px;pointer-events:none;transform:translate(-50%,-50%);animation:signature-resolve 2.65s var(--intro-ease) both}
.signature svg{width:100%;height:100%;overflow:visible;stroke:#e8e0f1;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(0 0 12px #b098d366)}
.signature path{stroke-dasharray:1;stroke-dashoffset:1;animation:signature-draw 1.15s .25s cubic-bezier(.65,0,.35,1) forwards}
.signature .signature-k{animation-delay:.6s}
.identity::after{content:"";position:absolute;left:50%;bottom:-20px;width:min(78vw,700px);height:1px;background:linear-gradient(90deg,transparent,#c2a7df55,transparent);pointer-events:none;animation:connection-line 3.8s var(--intro-ease) both}
.typing-title{animation:identity-resolve 1.1s 2s var(--intro-ease) both}
.typing-cursor{animation:blink 1s 3.2s steps(1) infinite;opacity:0}
.networks>a{animation:presence-resolve 1.05s 2.55s var(--intro-ease) both;isolation:isolate;transition:color .3s}
.networks>a:nth-child(2){animation-delay:2.67s}.networks>a:nth-child(3){animation-delay:2.79s}.networks>a:nth-child(4){animation-delay:2.91s}
.email{animation:presence-resolve 1.15s 3.1s var(--intro-ease) both;transition:color .3s}
.networks>a::after{display:block;inset:-16px;z-index:-1;border-radius:50%;background:radial-gradient(85px circle at calc(var(--mx,50%) + 16px) calc(var(--my,50%) + 16px),#b897e026,transparent);opacity:0;transition:opacity .45s}
.networks>a>svg:first-child{transition:transform .5s var(--intro-ease),filter .5s,color .3s}
@media(hover:hover) and (pointer:fine){.networks>a:hover::after{opacity:1}.networks>a:hover>svg:first-child{transform:translateY(-3px) rotate(-5deg) scale(1.1);filter:drop-shadow(0 0 8px #bda2dc77)}}
.networks>a:focus-visible::after{opacity:1}.networks>a:active>svg:first-child{transform:scale(.94)}
/* Keyboard users can reach the links immediately, including during the entrance. */
.networks>a:focus-visible,.email:focus-visible{animation:none;opacity:1;transform:none;filter:none}
@keyframes signature-draw{to{stroke-dashoffset:0}}
@keyframes signature-resolve{0%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}12%,65%{opacity:1;filter:blur(0)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;filter:blur(5px);transform:translate(-50%,-50%) scale(.62);visibility:hidden}}
@keyframes identity-resolve{from{opacity:0;filter:blur(8px);transform:translateY(6px) scale(.94)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes presence-resolve{from{opacity:0;filter:blur(4px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes connection-line{0%,48%{opacity:0;transform:translateX(-50%) scaleX(0)}67%{opacity:1;transform:translateX(-50%) scaleX(1)}100%{opacity:0;transform:translateX(-50%) scaleX(1.08)}}
@keyframes light-resolve{0%{opacity:0;transform:scale(.8)}40%{opacity:1}100%{opacity:0;transform:scale(1.2);visibility:hidden}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@media(max-width:650px){.signature{width:136px;height:85px}}
@media(prefers-reduced-motion:reduce){.cinematic,.signature,.identity::after{display:none}.typing-title,.networks>a,.email{animation:none;opacity:1;filter:none;transform:none}.networks>a>svg:first-child{transform:none!important;filter:none!important}}
/* Use the title typography for the opening signature as well. */
.signature svg{stroke:none;filter:none}
.signature text{font-family:'Manrope',sans-serif;font-size:56px;font-weight:600;letter-spacing:-2.5px;fill:#eae9ee;animation:signature-type 1.5s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes signature-type{from{opacity:0;filter:blur(5px);clip-path:inset(0 100% 0 0)}to{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0)}}
@keyframes signature-resolve{0%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}12%,65%{opacity:1;filter:blur(0)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;filter:blur(3px);transform:translate(-50%,-50%) scale(.94);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.signature text{animation:none}}