:root{--bg:#050A14;--panel:#0B1424;--fg:#EAF2FF;--muted:#93A6C2;--line:#1B2A44;--a:#5BE3FF;--b:#8E7BFF;--ink:#04101C;--grid:rgba(91,227,255,.07);
--disp:"Sora","Trebuchet MS",system-ui,sans-serif;--body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#EEF3FA;--panel:#FFFFFF;--fg:#0A1426;--muted:#465875;--line:#CBD6E6;--a:#0877A0;--b:#5B45E0;--ink:#fff;--grid:rgba(10,20,38,.06)}}
:root[data-theme="light"]{--bg:#EEF3FA;--panel:#FFFFFF;--fg:#0A1426;--muted:#465875;--line:#CBD6E6;--a:#0877A0;--b:#5B45E0;--ink:#fff;--grid:rgba(10,20,38,.06)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth;overflow-x:clip;max-width:100%;touch-action:pan-y pinch-zoom}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.05rem/1.7 var(--body);overflow-x:clip;max-width:100%;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 25%,#000,transparent)}
#glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 20%,transparent),transparent 65%);pointer-events:none;z-index:-1;transform:translate(var(--gx,50vw),var(--gy,20vh))}
img{max-width:100%;display:block}a{color:inherit}p{margin:0}
:focus-visible{outline:3px solid var(--a);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(4rem,9vw,7.5rem) 0}
.lead{color:var(--muted);max-width:62ch;margin-top:1rem}
.mono{font:500 .8rem/1 var(--mono);color:var(--a)}
#rail{position:fixed;left:0;top:0;bottom:0;width:3px;background:var(--line);z-index:30}
#rail i{position:absolute;inset:0;background:linear-gradient(var(--a),var(--b));transform-origin:top;transform:scaleY(0)}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:56px}
nav ul{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0;font-size:.92rem;font-weight:600}
nav a{text-decoration:none;color:var(--muted)}nav a:hover{color:var(--fg)}
@media(max-width:720px){nav ul li:nth-child(n+4){display:none}}
/* hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 0}
.idrow{display:flex;align-items:center;gap:clamp(1.1rem,4vw,3.5rem)}
.orb{--D:clamp(150px,28vw,340px);--s:0;position:relative;flex:none;width:var(--D);height:var(--D)}
.orb::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(from 0deg,var(--a),var(--b),transparent 55%,var(--a));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orb .clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#3a1a6e,#123a8a);box-shadow:0 0 60px color-mix(in srgb,var(--a) 30%,transparent);transform:scale(0);animation:grow .9s .1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes grow{to{transform:scale(1)}}
.orb .clip img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform,opacity;backface-visibility:hidden;animation:rise 1.1s .5s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rise{from{opacity:0;transform:scale(.72)}}
.orb .jp{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font:800 calc(var(--D)*.34)/1 var(--disp);background:linear-gradient(135deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:clamp(0,calc((var(--s) - .6)*3),1);pointer-events:none}
.hero h1{min-width:0;font-size:clamp(2.5rem,7.4vw,6rem);font-weight:800;line-height:1}
.hero h1 .l{display:block;white-space:nowrap}
.hero h1 .l+.l{background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.role{margin-top:2rem;font:600 clamp(1.15rem,2.6vw,1.6rem)/1.3 var(--disp);min-height:1.4em}
.role span{color:var(--a)}.role::after{content:"";display:inline-block;width:.1em;height:1em;margin-left:.15em;background:var(--a);vertical-align:-.12em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.intro{margin-top:1rem;color:var(--muted);max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 1.4rem;border-radius:12px;font-weight:600;text-decoration:none;border:1.5px solid var(--line);background:var(--panel);transition:transform .25s,border-color .25s}
.btn.pri{background:linear-gradient(135deg,var(--a),var(--b));border-color:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-2px);border-color:var(--a)}
#wave{display:block;width:100%;height:110px;margin-top:2.5rem}
.tick{border-block:1px solid var(--line);overflow:hidden;padding:.9rem 0;white-space:nowrap}
.tick div{display:inline-flex;gap:2.2rem;animation:slide 32s linear infinite;font:600 .95rem var(--disp);color:var(--muted)}
.tick i{color:var(--a);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
/* cards */
.card{--mx:50%;--my:50%;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;min-width:0;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--a) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card p,.card li{color:var(--muted);font-size:.97rem}
/* about */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:start}
.about .big{font:500 clamp(1.2rem,2.4vw,1.55rem)/1.5 var(--disp);letter-spacing:-.01em;margin-top:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:1.2rem 0 0;list-style:none}
.chips li{padding:.3rem .8rem;border:1px solid var(--line);border-radius:99px;font-size:.85rem;font-weight:500;color:var(--fg)}
dl{margin:0;display:grid;gap:.9rem}dt{font:500 .75rem/1 var(--mono);color:var(--a)}dd{margin:.3rem 0 0;color:var(--fg);font-size:.98rem;line-height:1.4}
@media(max-width:820px){.about{grid-template-columns:1fr}}
/* craft */
.craft{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem}
.card.photo{grid-column:1/-1;flex-direction:row;align-items:center;gap:2rem}.card.photo .demo{flex:0 0 min(380px,45%);height:auto;aspect-ratio:4/5}.card.photo .txt2{display:grid;gap:1rem}.card.photo p{max-width:48ch}
.demo{height:190px;border-radius:14px;background:var(--bg);border:1px solid var(--line);position:relative;overflow:hidden}
@media(max-width:820px){.craft{grid-template-columns:1fr}.card.photo{flex-direction:column;align-items:stretch}.card.photo .demo{flex:none;width:100%}}
.cmp{--x:50%}.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cmp .raw{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--a);transform:translateX(-1.5px);box-shadow:0 0 14px var(--a);pointer-events:none}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp:focus-within .bar{box-shadow:0 0 0 3px var(--fg)}
.cmp small{position:absolute;bottom:8px;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;font-weight:600}
.cmp small:first-of-type{left:8px}.cmp small:last-of-type{right:8px}
.tl{padding:14px 10px}.trk{height:34px;margin-bottom:8px;position:relative;background:color-mix(in srgb,var(--fg) 6%,transparent);border-radius:6px}
.clip2{position:absolute;top:3px;bottom:3px;border-radius:5px;background:var(--a);opacity:.9;transform-origin:left;animation:grow2 5s ease-in-out infinite alternate}
.clip2.b{background:var(--b)}
@keyframes grow2{from{transform:scaleX(.6)}to{transform:scaleX(1)}}
.ph{position:absolute;top:0;bottom:0;width:2px;background:var(--fg);left:10px;animation:scrub 6s linear infinite}
.ph::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--fg)}
@keyframes scrub{to{left:calc(100% - 12px)}}
.eq{display:flex;align-items:flex-end;gap:4px;padding:18px 16px 14px;height:100%}
.eq i{flex:1;height:100%;background:linear-gradient(to top,var(--a),var(--b));border-radius:3px;transform-origin:bottom;animation:eq var(--d) ease-in-out infinite alternate;--lo:calc(var(--r)*.18);--hi:calc(.35 + var(--r)*.65)}
@keyframes eq{from{transform:scaleY(var(--lo))}to{transform:scaleY(var(--hi))}}
.demo.master .eq i{--lo:calc(.6 + var(--r)*.1);--hi:calc(.82 + var(--r)*.14)}
.toggle{align-self:flex-start;min-height:40px;padding:0 1.1rem;border-radius:10px;border:1.5px solid var(--line);background:none;color:var(--fg);font:600 .9rem var(--body);cursor:pointer}
.toggle[aria-pressed="true"]{background:linear-gradient(135deg,var(--a),var(--b));border-color:transparent;color:var(--ink)}
.code{background:#050A14;color:#CFE0F5;font:500 .8rem/1.7 var(--mono);padding:14px 16px;white-space:pre;overflow:hidden;height:100%}
.code em{color:#5BE3FF;font-style:normal}.code u{color:#B3A8FF;text-decoration:none}
.code .cur{display:inline-block;width:8px;height:1em;background:#5BE3FF;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.poster{--c1:#5BE3FF;--c2:#8E7BFF;background:linear-gradient(160deg,#0a1226,#13224c);color:#fff}
.poster .pr{position:absolute;width:120%;aspect-ratio:1;right:-45%;top:-18%;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c1));opacity:.9;animation:spin 14s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 63%);mask:radial-gradient(farthest-side,transparent 62%,#000 63%)}
.poster .pt{position:absolute;left:8%;bottom:20%;font:800 clamp(2.2rem,9vw,3.6rem)/.92 var(--disp);letter-spacing:-.03em}
.poster .ps{position:absolute;left:8%;bottom:9%;font:500 .72rem var(--mono);color:var(--c1)}
.poster .pb{position:absolute;left:8%;bottom:15%;width:46px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.sw{display:flex;gap:.7rem}.sw button{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:var(--x);cursor:pointer;transition:transform .2s,border-color .2s}.sw button:hover{transform:scale(1.1);border-color:var(--fg)}
@media(min-width:821px){.card.photo.rev{flex-direction:row-reverse}}
/* work */
.grid{columns:3 260px;column-gap:1.1rem;margin-top:2.5rem}
.work{break-inside:avoid;margin:0 0 1.1rem;display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden;cursor:zoom-in;text-align:left;color:inherit;font:inherit;transition:border-color .3s,box-shadow .3s}
.work:hover{border-color:var(--a);box-shadow:0 0 30px color-mix(in srgb,var(--a) 22%,transparent)}
.work img{width:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.work:hover img{transform:scale(1.04)}
.work span{display:block;padding:.8rem 1rem;font-size:.92rem;font-weight:600;border-top:1px solid var(--line)}
dialog{border:0;background:transparent;padding:0;max-width:min(94vw,820px);max-height:92vh;color:#fff;overflow:visible}
dialog::backdrop{background:rgba(3,7,16,.9);backdrop-filter:blur(6px)}
dialog img{max-height:78vh;width:auto;margin:auto;border-radius:12px}
dialog p{text-align:center;margin-top:.8rem;font-size:.95rem}
dialog button{position:absolute;top:-46px;right:0;min-height:40px;padding:0 1rem;border-radius:10px;border:1.5px solid #fff;background:none;color:#fff;font:600 .9rem var(--body);cursor:pointer}
dialog[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)}@keyframes pop{from{opacity:0;transform:scale(.94)}}
/* study */
.study{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem}
.study .big{grid-column:1/-1;border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.card ul.plain{margin:0;padding-left:1.1rem}.card ul.plain li{margin-bottom:.4rem}
.card .chips{margin-top:0}
@media(max-width:820px){.study{grid-template-columns:1fr}}
.mail{display:inline-block;font:800 clamp(1.5rem,5.8vw,4rem)/1.1 var(--disp);letter-spacing:-.03em;text-decoration:none;margin-top:1.5rem;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-all}
.links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
footer{padding:2rem 0 3rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.orb .clip{transform:none}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* =====================================================================
   MOTION LAYER: cinematic intro, aurora light, film grain, scroll-scrubbed
   reveals, animated borders, lens streak, shimmer. Pure CSS.
   ===================================================================== */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}

/* cinematic curtain wipe on load */
html::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--b) 28%,var(--bg)));animation:curtain 1s .05s cubic-bezier(.77,0,.18,1) forwards}
@keyframes curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.orb .clip{animation-delay:.8s}
.orb .clip img{animation-delay:1.15s}

/* drifting aurora light behind everything */
html::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(38% 42% at 18% 22%,color-mix(in srgb,var(--b) 34%,transparent),transparent 70%),radial-gradient(34% 38% at 82% 28%,rgba(255,110,196,.2),transparent 70%),radial-gradient(44% 46% at 55% 88%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%);background-size:160% 160%;animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{0%{background-position:0% 0%}50%{background-position:100% 40%}100%{background-position:30% 100%}}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");animation:grain .7s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-30px 20px}40%{background-position:25px -35px}60%{background-position:-15px -10px}80%{background-position:35px 30px}100%{background-position:0 0}}

/* hero: floating light, anamorphic lens streak, shimmering surname */
.hero{position:relative}
.hero::before{content:"";position:absolute;right:0;top:4%;width:min(42vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--b) 42%,transparent),transparent 65%);filter:blur(12px);z-index:-1;pointer-events:none;animation:float 11s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0) scale(1)}to{transform:translateY(46px) scale(1.12)}}
.hero::after{content:"";position:absolute;left:0;right:0;top:44%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--a),#fff,var(--b),transparent) no-repeat;background-size:36% 100%;box-shadow:0 0 22px var(--a);opacity:.0;animation:streak 5.5s 2s ease-in-out infinite}
@keyframes streak{0%{background-position:-60% 0;opacity:0}12%{opacity:.8}45%{background-position:160% 0;opacity:0}100%{background-position:160% 0;opacity:0}}
.hero h1 .l+.l,.mail{background-image:linear-gradient(90deg,var(--a),var(--b),var(--a));background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.orb::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--a) 55%,transparent);animation:spin 32s linear infinite reverse;pointer-events:none}
.orb{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--b) 38%,transparent))}

/* nav underline draw */
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--a),var(--b));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
nav a:hover::after{transform:scaleX(1)}

/* buttons: light sheen */
.btn{position:relative;overflow:hidden}
.btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4s 2.2s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(120%)}}
.btn:hover{box-shadow:0 8px 30px color-mix(in srgb,var(--a) 30%,transparent)}

/* ticker edge fade */
.tick{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* heading underline draws in */
h2.rv::after{content:"";display:block;height:3px;width:0;margin-top:.7rem;border-radius:3px;background:linear-gradient(90deg,var(--a),var(--b));transition:width .9s .3s cubic-bezier(.2,.8,.2,1)}
h2.rv.in::after{width:72px}

/* cards: travelling light border */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 60%,var(--a) 80%,var(--b) 94%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .45s;animation:ang 5s linear infinite}
.card:hover::after{opacity:1}
@keyframes ang{to{--ang:360deg}}
.demo{box-shadow:inset 0 0 44px color-mix(in srgb,var(--a) 9%,transparent)}
.eq i{box-shadow:0 0 12px color-mix(in srgb,var(--a) 45%,transparent)}

/* gallery: masked image reveal + sheen on hover */
.work{position:relative}
.work.rv img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s .15s cubic-bezier(.7,0,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.work.rv.in img{clip-path:inset(0 0 0 0)}
.work::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-110%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.work:hover::after{transform:translateX(110%)}

/* scroll-scrubbed motion (Chrome, Edge, Safari 26+); other browsers keep the standard reveal */
@keyframes rvIn{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
@keyframes heroOut{to{opacity:0;transform:translateY(-36px)}}
@supports (animation-timeline:view()){
.rv{opacity:1;transform:none;transition:none!important;animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.idrow,.role,.intro,.cta{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 55vh}
}

@media(prefers-reduced-motion:reduce){html::after,body::after,.hero::after{display:none}.rv{animation:none!important;opacity:1;transform:none}.work.rv img{clip-path:none}.idrow,.role,.intro,.cta{animation:none!important}}

.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;max-width:none}