:root{
  --paper:#eee6da;--ink:#0a0a0a;--cream:#d7bd82;--line:rgba(255,255,255,.12);
  --muted:#8e8e8e;--page-pad:clamp(20px,5vw,80px);--nav-h:76px
}
*{box-sizing:border-box}
.custom-scrollbar{position:fixed;z-index:130;top:12px;right:10px;bottom:12px;width:5px;border-radius:999px;background:rgba(10,10,10,.12);mix-blend-mode:multiply;touch-action:none}.custom-scrollbar[hidden]{display:none}.custom-scrollbar>span{position:absolute;top:0;left:0;width:100%;min-height:38px;border-radius:999px;background:var(--ink);cursor:grab;transition:background .2s ease}.custom-scrollbar>span:hover,.custom-scrollbar>span.is-dragging{background:var(--cream);cursor:grabbing}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);overflow-x:hidden;scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{margin:0;background:var(--ink);color:#f7f4ee;font-family:'DM Sans',sans-serif;overflow-x:hidden}
.intro-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#050505;color:var(--cream);opacity:1;transition:opacity .8s cubic-bezier(.4,0,.2,1);pointer-events:auto}.intro-screen.is-done{opacity:0;pointer-events:none}.intro-lottie{width:min(72vw,500px);height:min(72vw,500px);display:grid;place-items:center}.intro-lottie svg{width:100%;height:100%;overflow:visible}.intro-word{font-family:'Dancing Script',cursive;font-size:clamp(104px,18vw,270px);font-weight:600;line-height:.8;letter-spacing:-.045em;will-change:transform,opacity,filter,clip-path;animation:hello-write 1.65s cubic-bezier(.65,0,.35,1) both}.intro-word-change{animation:hello-write 1.65s cubic-bezier(.65,0,.35,1) both}@keyframes hello-write{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-8px) scale(.96);filter:blur(8px);letter-spacing:.02em}65%{opacity:1;filter:blur(0)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none;letter-spacing:-.045em}}body.intro-active{overflow:hidden}
img{max-width:100%;display:block}button,a{font:inherit}
a{color:inherit}
.mono{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.page-grid{position:relative;background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:80px 80px}
.dark.page-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px)}
.nav{height:var(--nav-h);padding:0 var(--page-pad);display:flex;align-items:center;justify-content:space-between;background:var(--paper);color:var(--ink);position:sticky;top:0;z-index:50}
.wordmark{font-family:Georgia,serif;font-size:28px;font-style:italic;text-decoration:none;white-space:nowrap}.wordmark span{color:#b79a63}
.nav nav{display:flex;gap:clamp(18px,2.5vw,34px);align-items:center}.nav nav a{font-size:10px;font-weight:700;color:inherit;text-decoration:none;letter-spacing:.04em;transition:opacity .2s}.nav nav a:hover{opacity:.5}
.menu{display:none;border:0;background:none;padding:8px;cursor:pointer}.menu span{display:block;width:18px;height:1px;background:var(--ink);margin:4px 0;transition:transform .2s,opacity .2s}
.hero{position:relative;min-height:calc(100svh - var(--nav-h));background-color:var(--paper);color:var(--ink);padding:20px var(--page-pad) 24px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-top,.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.hero-top{flex-wrap:wrap}
.hero-center{text-align:center;margin:auto 0;min-width:0;position:relative;z-index:1}.hero-kicker,.hero-title{font-family:'Anton',Impact,sans-serif;font-weight:400;line-height:.8;letter-spacing:-.045em}.hero-kicker{font-size:clamp(72px,16vw,250px);white-space:nowrap;color:transparent;background:linear-gradient(110deg,#0a0a0a 12%,#66583f 48%,#0a0a0a 82%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(10,10,10,.08);filter:drop-shadow(0 15px 20px rgba(10,10,10,.08))}.hero-title{font-size:clamp(58px,11vw,175px);margin:12px 0 0;position:relative;color:var(--ink);text-shadow:3px 3px 0 rgba(183,154,99,.22),0 18px 30px rgba(10,10,10,.08)}.hero-title:after{content:"";position:absolute;left:10%;right:10%;bottom:-15px;height:2px;background:linear-gradient(90deg,transparent,var(--cream),transparent);transform:scaleX(.25);transform-origin:center;animation:title-line 3.5s cubic-bezier(.2,.8,.2,1) infinite}
.hero-sub{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:24px;font-size:10px;font-weight:700;flex-wrap:wrap}.hero-sub i{width:4px;height:4px;background:var(--ink);border-radius:50%}
.hero-note{max-width:330px;font-size:10px;line-height:1.45;text-transform:uppercase}.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9px}.scroll-cue b{font-size:17px;font-weight:400}
.stamp{width:76px;height:76px;border:1px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:8px;line-height:1.05;transform:rotate(12deg);flex:none}.stamp small{font-size:6px;margin:2px 0}.stamp b{font-size:14px;font-weight:400}
.marquee{height:54px;display:flex;overflow:hidden;border-bottom:1px solid var(--line);border-top:1px solid var(--line);white-space:nowrap;font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.02em}.marquee div{padding:13px 0;min-width:max-content;animation:marquee 22s linear infinite}@keyframes marquee{to{transform:translateX(-100%)}}
.section{padding:100px var(--page-pad)}.section-index{font-size:10px;color:#777;margin-bottom:70px}
.about-grid{display:grid;grid-template-columns:minmax(260px,30%) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:center}.portrait-card{height:540px;border:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(circle at 65% 30%,#454545 0 2%,transparent 3%),linear-gradient(135deg,#191919,#050505)}.portrait-card:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.04),transparent 70%)}
.portrait-orb{position:absolute;width:min(270px,62%);height:min(420px,78%);border-radius:48% 52% 45% 55%;background:linear-gradient(120deg,#272727,#060606);left:50%;bottom:-40px;transform:translateX(-50%);box-shadow:-30px 20px 60px rgba(255,255,255,.04);overflow:hidden}.portrait-orb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);mix-blend-mode:screen;opacity:.92}.portrait-text{position:absolute;font-family:'Anton';font-size:clamp(130px,14vw,230px);line-height:1;left:32px;top:80px;color:#e8e1d6;opacity:.9}.portrait-card>span{position:absolute;left:20px;bottom:18px;font-family:'DM Mono';font-size:9px;line-height:1.5}
.about-copy h2{font-size:clamp(40px,5.6vw,86px);line-height:.94;letter-spacing:-.05em;margin:12px 0 32px;max-width:920px}.about-copy h2 em,.contact h2 em{font-style:normal;color:var(--cream)}
.copy-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px;max-width:800px;color:#9b9b9b;font-size:13px;line-height:1.65}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:55px;padding-top:18px;border-top:1px solid var(--line)}.facts small,.facts b{display:block}.facts small{font:8px 'DM Mono';color:#666;margin-bottom:9px}.facts b{font-size:10px}
.expertise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:clamp(40px,7vw,110px)}.expertise .section-index{grid-column:1/-1}.expertise-head{grid-column:1;align-self:start;display:flex;justify-content:space-between;gap:20px}.expertise-head h2{font-size:clamp(55px,7vw,105px);line-height:.8;letter-spacing:-.06em;margin:0}.expertise-head h2 span{color:#eee}.expertise-head p{font-size:13px;color:#8d8d8d;line-height:1.5;max-width:310px;margin-top:35px}
.skills{grid-column:2}.skill{display:grid;grid-template-columns:50px minmax(0,1fr) 25px;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}.skill>span{font:9px 'DM Mono';color:#666}.skill h3{font-size:20px;margin:0 0 6px}.skill p{font-size:11px;color:#777;margin:0;max-width:620px}.skill>b{font-weight:400}
.work{padding-top:70px}.work-title{position:relative;overflow:hidden;margin-bottom:25px}.giant{font-family:'Anton';font-size:clamp(150px,28vw,430px);line-height:.75;color:var(--cream);letter-spacing:-.04em;white-space:nowrap}.drip{position:absolute;left:34%;bottom:5%;font-size:70px;letter-spacing:25px;color:var(--cream)}.work-meta{display:flex;justify-content:space-between;gap:20px;color:#6d6d6d;margin:20px 0 60px}.project-list{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));gap:18px}.project{display:block;color:inherit;text-decoration:none;min-width:0}.project-art{height:540px;position:relative;overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s ease}.project-art span{font-family:'Anton';font-size:70px;line-height:.8}.project-art small{font:8px 'DM Mono'}.art-one{background:#e9e2d7;color:#0a0a0a}.art-circle{position:absolute;width:min(310px,70%);aspect-ratio:1;border-radius:50%;border:50px solid #0a0a0a;left:18%;top:28%;mix-blend-mode:multiply}.art-two{background:#c7ad72;color:#0a0a0a}.art-grid{position:absolute;inset:100px 30px 30px;background:linear-gradient(90deg,transparent 49%,rgba(0,0,0,.25) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(0,0,0,.25) 50%,transparent 51%);background-size:60px 60px}.art-three{background:#f1eee7;color:#0a0a0a}.art-line{position:absolute;width:120%;height:45px;background:#0a0a0a;transform:rotate(-35deg);left:-10%;top:55%}.project-caption{display:grid;grid-template-columns:30px minmax(0,1fr) 25px;gap:15px;padding:15px 3px;border-bottom:1px solid var(--line);align-items:start;color:inherit}.project-caption b{font:9px 'DM Mono';color:#777}.project-caption h3{font-size:14px;margin:0 0 4px}.project-caption p{font-size:10px;color:#777;margin:0}.project-caption>span{font-size:16px}
.work-loading{grid-column:1/-1;color:#777;padding:40px 0}.work-loading a{color:var(--cream)}.project-updated{display:block;font:8px 'DM Mono';color:#666;margin-top:10px}
.certificates{padding-top:90px}.certificates-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:55px}.certificates-head h2{font-size:clamp(55px,7vw,105px);line-height:.8;letter-spacing:-.06em;margin:14px 0 0}.certificates-head h2 em{font-style:normal;color:var(--cream)}.certificates-head>p{max-width:310px;color:#8d8d8d;font-size:13px;line-height:1.5;margin:0 0 4px}.certificate-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.certificate{min-width:0}.certificate-image{display:block;position:relative;overflow:hidden;background:#151515;border:1px solid #292929;aspect-ratio:1.58;text-decoration:none}.certificate-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease}.certificate-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 35%,rgba(215,189,130,.22),transparent 65%);transform:translateX(-120%);transition:transform .65s ease}.certificate-image-label{position:absolute;z-index:1;right:14px;bottom:12px;padding:7px 9px;color:var(--paper);background:rgba(10,10,10,.78);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}.certificate:hover .certificate-image img,.certificate-image:focus-visible img{transform:scale(1.045);filter:brightness(1.08)}.certificate:hover .certificate-image:after{transform:translateX(120%)}.certificate:hover .certificate-image-label,.certificate-image:focus-visible .certificate-image-label{opacity:1;transform:none}.certificate-caption{display:grid;grid-template-columns:30px minmax(0,1fr) 24px;gap:15px;padding:17px 3px;border-bottom:1px solid var(--line);align-items:start}.certificate-number{color:#666}.certificate-issuer{color:#777;margin:0 0 9px}.certificate-copy h3{font-size:19px;line-height:1.05;margin:0 0 9px}.certificate-copy>p:not(.certificate-issuer){font-size:11px;color:#888;line-height:1.5;margin:0;max-width:360px}.certificate-meta{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 0;color:#666}.certificate-meta div{min-width:100px}.certificate-meta dt{font-size:7px;margin-bottom:5px}.certificate-meta dd{font-size:8px;color:#aaa;margin:0;overflow-wrap:anywhere}.certificate-link{font-size:20px;text-decoration:none;transition:color .3s ease,transform .3s ease}.certificate:hover .certificate-link{color:var(--cream);transform:translate(4px,-4px) rotate(45deg)}
.certificate-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.certificate-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}.certificate-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px)}.certificate-modal-panel{position:relative;z-index:1;width:min(1120px,100%);max-height:min(90svh,900px);overflow:auto;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.45);transform:translateY(20px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.certificate-modal.is-open .certificate-modal-panel{transform:none}.certificate-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #bbb;color:#666}.certificate-modal-close{border:0;background:none;color:var(--ink);font-size:30px;line-height:1;cursor:pointer}.certificate-modal-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:36px;padding:28px}.certificate-modal-preview{display:grid;place-items:center;min-height:300px;background:#151515;overflow:hidden}.certificate-modal-preview img{width:100%;height:auto;max-height:65svh;object-fit:contain}.certificate-modal-preview iframe{width:100%;height:min(65svh,680px);border:0;background:#fff}.certificate-modal-details{align-self:center}.certificate-modal-details h2{font-size:clamp(30px,4vw,58px);line-height:.92;letter-spacing:-.05em;margin:12px 0 22px}.certificate-modal-details>p:not(.certificate-issuer){color:#666;font-size:13px;line-height:1.6;margin:0}.certificate-modal-details .certificate-meta{border-top:1px solid #bbb;padding-top:18px;color:#777}.certificate-modal-details .certificate-meta dd{color:#222}.certificate-modal-source{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:32px;padding:14px 0;border-bottom:1px solid #777;color:var(--ink);text-decoration:none;font:10px 'DM Mono';transition:color .25s ease,padding .25s ease}.certificate-modal-source:hover{color:#8d7244;padding-left:8px;padding-right:8px}.certificate-modal-source span:last-child{font-size:22px}.certificate-modal-open{overflow:hidden}
.certificate-pdf-thumb{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:none}
.giant{font-size:clamp(130px,22vw,340px)}.project-art span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.project-caption h3,.project-caption p{overflow-wrap:anywhere}
.contact{background:var(--paper);color:var(--ink);min-height:100svh;padding:90px var(--page-pad) 30px}.contact .section-index{color:#777}.contact-inner{max-width:1100px;margin:0 auto;padding:5vh 0 10vh}.contact-inner p{color:#666}.contact h2{font-family:'Anton';font-size:clamp(64px,9vw,135px);line-height:.8;letter-spacing:-.045em;margin:20px 0 50px}.contact-links{display:grid;gap:18px}.email{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #aaa;padding-bottom:14px;text-decoration:none;color:var(--ink);font-size:clamp(14px,2vw,16px);word-break:break-word}.email span{font-size:28px;flex:none}.sponsor-link{color:#6f5730;border-bottom-color:#b79a63}.contact-foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #bbb;padding-top:14px;color:#777}
footer{padding:20px var(--page-pad);display:flex;justify-content:space-between;gap:20px;color:#666;font:9px 'DM Mono';border-top:1px solid var(--line)}footer a{text-decoration:none}.cursor-dot,.cursor-ring{position:fixed;pointer-events:none;z-index:100;mix-blend-mode:difference}.cursor-dot{width:7px;height:7px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.cursor-ring{width:34px;height:34px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}
.motion-item{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .8s ease var(--motion-delay),transform .8s cubic-bezier(.2,.7,.2,1) var(--motion-delay)}.motion-item.is-visible{opacity:1;transform:none}.skill,.project,.email,.telegram-link{transition:transform .3s ease,opacity .3s ease}.skill:hover,.project:hover,.email:hover,.telegram-link:hover{transform:translateY(-4px)}.github-profile{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s ease}.github-profile:hover{transform:translateY(-6px);border-color:#555}button,.nav a,.project-art,.email,.telegram-link{transition:opacity .25s ease,transform .3s ease}
@media(max-width:1050px){.nav nav{gap:18px}.hero-kicker{font-size:20vw}.about-grid{grid-template-columns:minmax(220px,34%) minmax(0,1fr)}.project-list{grid-template-columns:1fr 1fr}.project:first-child{grid-column:1/-1}.project:first-child .project-art{height:500px}.certificate-list{grid-template-columns:repeat(2,minmax(0,1fr))}.certificate:last-child{grid-column:1/-1;max-width:calc(50% - 14px)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.expertise{grid-template-columns:1fr}.expertise .section-index,.expertise-head,.skills{grid-column:auto}.skills{margin-top:30px}}
@media(max-width:800px){
  :root{--nav-h:64px}.nav{height:var(--nav-h);padding:0 18px}.wordmark{font-size:23px}.menu{display:block;position:relative;z-index:61}.nav nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 16px;background:var(--paper);border-top:1px solid rgba(0,0,0,.1);box-shadow:0 15px 25px rgba(0,0,0,.08);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}.nav nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.nav nav a{padding:15px 0;border-bottom:1px solid rgba(0,0,0,.12)}.nav nav a:last-child{border-bottom:0}.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu[aria-expanded="true"] span:nth-child(2){opacity:0}.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .hero{min-height:calc(100svh - var(--nav-h));padding:16px 18px 22px}.hero-top{align-items:flex-start}.hero-top span:last-child{display:none}.hero-center{width:100%}.hero-kicker{font-size:clamp(68px,22vw,150px)}.hero-title{font-size:clamp(54px,17vw,120px);margin-top:10px}.hero-sub{gap:8px;margin-top:20px}.hero-bottom{align-items:flex-end}.hero-note{max-width:55%;font-size:9px}.scroll-cue{display:none}.stamp{width:58px;height:58px}.marquee{height:48px;font-size:19px}.marquee div{padding:12px 0}
  .section{padding:70px 20px}.section-index{margin-bottom:48px}.about-grid,.expertise{grid-template-columns:1fr}.about-grid{gap:45px}.portrait-card{height:390px}.portrait-text{font-size:150px;top:60px}.portrait-orb{width:210px;height:330px}.copy-columns,.facts{grid-template-columns:1fr}.facts{gap:16px}.expertise .section-index,.expertise-head,.skills{grid-column:auto}.expertise-head{margin-bottom:20px}.expertise-head h2{font-size:19vw}.skills{margin-top:10px}.skill{grid-template-columns:30px minmax(0,1fr) 20px;gap:12px;padding:20px 0}.skill h3{font-size:17px}.skill p{font-size:10px;line-height:1.5}
  .work{padding-top:60px}.giant{font-size:31vw}.drip{font-size:42px;letter-spacing:14px}.work-meta{font-size:8px;margin-bottom:35px}.work-meta span:last-child{display:none}.project-list{grid-template-columns:1fr}.project:first-child{grid-column:auto}.project:first-child .project-art,.project-art{height:420px}.project-art span{font-size:58px}.art-circle{border-width:35px}.project-caption{grid-template-columns:24px minmax(0,1fr) 20px;gap:10px}.project-caption h3{font-size:13px}.certificates{padding-top:60px}.certificates-head{display:block;margin-bottom:38px}.certificates-head>p{margin-top:25px}.certificates-head h2{font-size:19vw}.certificate-list{grid-template-columns:1fr;gap:35px}.certificate:last-child{grid-column:auto;max-width:none}.certificate-caption{grid-template-columns:24px minmax(0,1fr) 20px;gap:10px}.certificate-copy h3{font-size:17px}.certificate-modal{padding:12px}.certificate-modal-panel{max-height:94svh}.certificate-modal-body{display:block;padding:16px}.certificate-modal-preview{min-height:180px;margin-bottom:24px}.certificate-modal-preview iframe{height:55svh}.certificate-modal-details h2{font-size:12vw}.certificate-modal-head{padding:14px 16px}
  .contact{min-height:90svh;padding:70px 20px 25px}.contact-inner{padding:3vh 0 8vh}.contact h2{font-size:22vw;margin-bottom:40px}.contact-foot,footer{font-size:7px}.contact-foot{align-items:flex-start}.contact-foot span:last-child{text-align:right}.email{font-size:14px}
}
@media(max-width:420px){.hero-kicker{font-size:21vw}.hero-title{font-size:16vw}.hero-sub{font-size:8px}.portrait-card{height:340px}.portrait-orb{width:180px;height:285px}.portrait-text{font-size:125px}.project-art{height:360px}.contact h2{font-size:21vw}}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}.project-art{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}.marquee div{animation:none}.project-art{transition:none}.nav nav{transition:none}}

/* --- Profile + drawer refinement --- */
.drawer-backdrop,.drawer-head{display:none}
.github-profile{min-width:0;border:1px solid #2b2b2b;background:#101010;padding:22px;color:#f5f2eb;position:relative;overflow:hidden}
.github-profile:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 45%);pointer-events:none}
.github-profile-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;color:#777}
.profile-status{font:8px 'DM Mono';letter-spacing:.08em;display:flex;align-items:center;gap:6px;color:#9b9b9b}.profile-status i{width:6px;height:6px;border-radius:50%;background:#8fae83;display:block}
.github-avatar-wrap{position:relative;z-index:1;width:118px;height:118px;margin:42px auto 24px;border-radius:50%;padding:5px;border:1px solid #444;background:#151515}
.github-avatar-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1);background:#222}
.github-name-row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.github-name-row h3{margin:0;font-size:20px;line-height:1.05;letter-spacing:-.03em}.github-name-row p{margin:7px 0 0;font:9px 'DM Mono';color:#777}.github-name-row a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #444;text-decoration:none;font-size:17px;flex:none}
.github-bio{position:relative;z-index:1;margin:18px 0 16px;font-size:11px;color:#d0d0d0}.github-bio span{color:#666;margin:0 4px}
.github-meta{position:relative;z-index:1;display:grid;gap:8px;font:8px 'DM Mono';color:#777;line-height:1.4}
.github-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:24px 0 18px;border:1px solid #292929;background:#292929}.github-stats div{background:#101010;padding:13px 8px;text-align:center}.github-stats b,.github-stats span{display:block}.github-stats b{font-size:18px;font-weight:500}.github-stats span{font:7px 'DM Mono';color:#666;margin-top:4px}
.telegram-link{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #292929;padding-top:14px;color:#aaa;text-decoration:none;font:8px 'DM Mono';letter-spacing:.08em}.telegram-link b{font-size:14px;font-weight:400;color:#f5f2eb}

@media(max-width:800px){
  body.drawer-open{overflow:hidden}
  .drawer-backdrop{display:block;position:fixed;inset:0;border:0;background:rgba(0,0,0,.48);opacity:0;visibility:hidden;pointer-events:none;z-index:59;transition:opacity .25s,visibility .25s}
  .nav:has(#site-nav.open) .drawer-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .nav nav{position:fixed;left:auto;right:0;top:0;bottom:0;width:min(88vw,380px);height:100dvh;padding:0 26px 28px;background:var(--paper);border:0;box-shadow:-24px 0 70px rgba(0,0,0,.22);transform:translateX(105%);opacity:1;visibility:hidden;pointer-events:none;z-index:60;overflow-y:auto;overscroll-behavior:contain;transition:transform .28s cubic-bezier(.2,.75,.2,1),visibility 0s linear .28s}
  .nav nav.open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .28s cubic-bezier(.2,.75,.2,1),visibility 0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 0 24px;border-bottom:1px solid rgba(0,0,0,.14)}
  .drawer-close{border:0;background:none;font-size:30px;line-height:1;padding:0;cursor:pointer;color:var(--ink)}
  .nav nav a{font-family:'Anton',Impact,sans-serif;font-size:clamp(42px,12vw,60px);font-weight:400;letter-spacing:-.035em;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.13);line-height:.9}
  .nav nav a{opacity:0;transform:translateX(24px);transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1),color .2s ease}.nav nav.open a{opacity:1;transform:translateX(0)}.nav nav.open a:nth-of-type(1){transition-delay:.06s}.nav nav.open a:nth-of-type(2){transition-delay:.11s}.nav nav.open a:nth-of-type(3){transition-delay:.16s}.nav nav.open a:nth-of-type(4){transition-delay:.21s}.nav nav.open a:nth-of-type(5){transition-delay:.26s}.nav nav a:last-child{border-bottom:0}
  .github-profile{order:1}.about-copy{order:2}
  .github-avatar-wrap{margin-top:34px}
}
@media(max-width:420px){
  .nav nav{width:92vw;padding-left:20px;padding-right:20px}
  .github-profile{padding:18px}.github-name-row h3{font-size:18px}.github-stats b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.drawer-backdrop,.nav nav,.nav nav a{transition:none!important}}

/* --- Hero glitch showpiece --- */
.hero-kicker.glitch-target,.hero-title.glitch-target{isolation:isolate;will-change:transform,filter}
.hero-title.glitch-target{animation:hero-heading-float 7s ease-in-out infinite alternate,hero-heading-glitch 9s steps(1,end) infinite}
.hero-kicker.glitch-target{animation:hero-kicker-float 8s ease-in-out infinite alternate,hero-kicker-glitch 11s steps(1,end) infinite}
.hero-title .glitch-main,.hero-kicker .glitch-main{position:relative;will-change:transform,filter}
.hero-title .glitch-main:before,.hero-kicker .glitch-main:before{content:"";position:absolute;z-index:-1;inset:-4% -2%;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(10,10,10,.14) 9px 10px,transparent 11px 17px);mix-blend-mode:multiply;opacity:.12;pointer-events:none;animation:scanline-sweep 4.5s linear infinite}
.hero-title .glitch-main:after,.hero-kicker .glitch-main:after{inset:-2%;background:linear-gradient(90deg,transparent 0 12%,rgba(215,189,130,.25) 13% 14%,transparent 15% 82%,rgba(10,10,10,.15) 83% 84%,transparent 85%);mix-blend-mode:screen;opacity:.16;animation:signal-sweep 6s ease-in-out infinite}
.hero-title .glitch-red,.hero-title .glitch-cyan,.hero-title .glitch-green,.hero-kicker .glitch-red,.hero-kicker .glitch-cyan,.hero-kicker .glitch-green{opacity:0;filter:blur(.15px);will-change:transform,clip-path,opacity}
.hero-title .glitch-red,.hero-kicker .glitch-red{animation:rgb-red-burst 9s steps(1,end) infinite}
.hero-title .glitch-cyan,.hero-kicker .glitch-cyan{animation:rgb-cyan-burst 9s steps(1,end) infinite -.12s}
.hero-title .glitch-green,.hero-kicker .glitch-green{animation:rgb-green-burst 9s steps(1,end) infinite -.24s}
.hero-title:hover,.hero-kicker:hover{filter:contrast(1.08) saturate(1.18);animation:hero-hover-shake .42s steps(2,end) infinite!important}
.hero-title:hover .glitch-main,.hero-kicker:hover .glitch-main{filter:drop-shadow(3px 0 rgba(255,23,68,.35)) drop-shadow(-3px 0 rgba(0,217,255,.35))}
.hero-title:hover .glitch-red,.hero-kicker:hover .glitch-red{opacity:.8;transform:translate(8px,-1px);clip-path:inset(8% 0 72% 0);animation:hero-hover-red .3s steps(2,end) infinite}
.hero-title:hover .glitch-cyan,.hero-kicker:hover .glitch-cyan{opacity:.8;transform:translate(-8px,1px);clip-path:inset(58% 0 20% 0);animation:hero-hover-cyan .27s steps(2,end) infinite}
.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-green{opacity:.5;transform:translate(4px);clip-path:inset(30% 0 45% 0);animation:hero-hover-green .22s steps(2,end) infinite}
@keyframes hero-heading-float{0%,100%{transform:translate3d(0,0,0) skewX(0);text-shadow:3px 3px 0 rgba(183,154,99,.22),0 18px 30px rgba(10,10,10,.08)}50%{transform:translate3d(0,-4px,0) skewX(-.35deg);text-shadow:5px 5px 0 rgba(183,154,99,.2),0 24px 38px rgba(10,10,10,.12)}}
@keyframes hero-kicker-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4px,-5px,0) skewX(-.3deg)}}
@keyframes hero-heading-glitch{0%,76%,100%{clip-path:inset(0)}78%{clip-path:inset(9% 0 70% 0);transform:translate(-2px,1px)}79%{clip-path:inset(58% 0 14% 0);transform:translate(3px,-1px)}80%{clip-path:inset(0);transform:none}}
@keyframes hero-kicker-glitch{0%,82%,100%{clip-path:inset(0)}84%{clip-path:inset(12% 0 64% 0);transform:translate(2px)}85%{clip-path:inset(62% 0 9% 0);transform:translate(-3px)}86%{clip-path:inset(0);transform:none}}
@keyframes rgb-red-burst{0%,76%,100%{opacity:0;transform:none;clip-path:inset(0)}78%{opacity:.72;transform:translate(7px,-1px);clip-path:inset(8% 0 70% 0)}80%{opacity:.38;transform:translate(-4px,1px);clip-path:inset(59% 0 18% 0)}82%{opacity:0}}
@keyframes rgb-cyan-burst{0%,77%,100%{opacity:0;transform:none;clip-path:inset(0)}79%{opacity:.72;transform:translate(-7px,1px);clip-path:inset(40% 0 40% 0)}81%{opacity:.38;transform:translate(4px,-1px);clip-path:inset(76% 0 5% 0)}83%{opacity:0}}
@keyframes rgb-green-burst{0%,78%,100%{opacity:0;transform:none;clip-path:inset(0)}80%{opacity:.52;transform:translate(3px);clip-path:inset(20% 0 57% 0)}82%{opacity:.24;transform:translate(-3px);clip-path:inset(68% 0 12% 0)}84%{opacity:0}}
@keyframes scanline-sweep{0%,20%{transform:translateY(-40%);opacity:0}35%{opacity:.6}70%,100%{transform:translateY(40%);opacity:0}}
@keyframes signal-sweep{0%,20%{transform:translateX(-35%);opacity:0}40%{opacity:.42}75%,100%{transform:translateX(35%);opacity:0}}
@keyframes hero-hover-shake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px) skewX(-.7deg)}50%{transform:translate(2px,-1px) skewX(.7deg)}75%{transform:translate(-1px)}}
@keyframes hero-hover-red{50%{transform:translate(11px,-2px)}}
@keyframes hero-hover-cyan{50%{transform:translate(-11px,2px)}}
@keyframes hero-hover-green{50%{transform:translate(5px)}}
@media(prefers-reduced-motion:reduce){.hero-title.glitch-target,.hero-kicker.glitch-target,.hero-title .glitch-main:before,.hero-kicker .glitch-main:before,.hero-title .glitch-main:after,.hero-kicker .glitch-main:after,.hero-title .glitch-red,.hero-title .glitch-cyan,.hero-title .glitch-green,.hero-kicker .glitch-red,.hero-kicker .glitch-cyan,.hero-kicker .glitch-green{animation:none}.hero-title:hover,.hero-kicker:hover{animation:none}.hero-title:hover .glitch-red,.hero-kicker:hover .glitch-red,.hero-title:hover .glitch-cyan,.hero-kicker:hover .glitch-cyan,.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-green{animation:none;transform:none}}

/* --- Motion polish --- */
::selection{background:var(--cream);color:var(--ink)}
.nav{backdrop-filter:blur(12px);transition:box-shadow .35s ease,background-color .35s ease}
.nav:hover{box-shadow:0 8px 30px rgba(0,0,0,.08)}
.nav.is-scrolled{box-shadow:0 10px 32px rgba(0,0,0,.12);background-color:rgba(238,230,218,.92)}
.hero-center{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.wordmark{transition:letter-spacing .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.wordmark:hover{letter-spacing:.08em;transform:translateX(3px)}
.nav nav a{position:relative;overflow:hidden}
.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cream);transition:right .35s cubic-bezier(.2,.8,.2,1)}
.nav nav a:hover:after{right:0}
.hero{isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;background:radial-gradient(circle at 15% 20%,rgba(215,189,130,.18),transparent 22%),radial-gradient(circle at 85% 75%,rgba(10,10,10,.08),transparent 30%);animation:ambient-drift 12s ease-in-out infinite alternate}
.hero-kicker{background-size:220% 100%;animation:hero-breathe 7s ease-in-out infinite alternate,text-sheen 9s ease-in-out infinite}
.hero-title{animation:hero-breathe 7s ease-in-out infinite alternate}
.hero-title{animation-delay:-2s}
.hero-sub i{animation:dot-pulse 1.8s ease-in-out infinite}
.hero-sub i:nth-of-type(2){animation-delay:.45s}
.stamp{animation:stamp-float 5s ease-in-out infinite;transition:background .35s ease,color .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.stamp:hover{background:var(--ink);color:var(--paper);transform:rotate(0) scale(1.12)}
.scroll-cue b{animation:scroll-bounce 1.6s ease-in-out infinite}
.marquee:hover div{animation-play-state:paused}
.portrait-card:before{transform:translateX(-120%);animation:card-sheen 7s ease-in-out infinite}
.portrait-orb{animation:orb-breathe 6s ease-in-out infinite alternate;transition:filter .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.portrait-card:hover .portrait-orb{filter:brightness(1.25);transform:translateX(-50%) scale(1.04) rotate(2deg)}
.github-avatar-wrap{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.github-profile:hover .github-avatar-wrap{transform:rotate(-5deg) scale(1.06);box-shadow:0 0 0 8px rgba(215,189,130,.08)}
.profile-status i{animation:status-pulse 2.2s ease-in-out infinite}
.github-profile:after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 40%,rgba(215,189,130,.09),transparent 60%);transform:translateX(-65%) rotate(8deg);animation:profile-sweep 10s ease-in-out infinite;pointer-events:none}
.facts>div{transition:transform .35s ease,color .35s ease}
.facts>div:hover{transform:translateY(-5px);color:var(--cream)}
.skill{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),padding-left .35s ease,border-color .35s ease}
.skill:before{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--cream);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.skill:hover{padding-left:12px;border-color:rgba(215,189,130,.35)}
.skill:hover:before{width:100%}
.skill>b{transition:transform .35s ease,color .35s ease}
.skill:hover>b{color:var(--cream);transform:translate(4px,-4px) rotate(45deg)}
.work-title .giant{display:inline-block;animation:title-sway 8s ease-in-out infinite alternate}
.drip{animation:drip-blink 2.4s ease-in-out infinite}
.project{position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.project:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.project:hover{transform:translateY(-8px)}
.project:hover:before{transform:scaleX(1)}
.project-caption{transition:background .35s ease,padding .35s ease}
.project:hover .project-caption{background:rgba(215,189,130,.05);padding-left:10px;padding-right:10px}
.project-caption h3{transition:color .3s ease;position:relative;width:max-content;max-width:100%}
.project-caption h3:after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--cream);transition:right .35s ease}
.project:hover .project-caption h3{color:var(--cream)}
.project:hover .project-caption h3:after{right:0}
.project-caption>span{transition:transform .35s ease,color .35s ease}
.project:hover .project-caption>span{color:var(--cream);transform:translate(4px,-4px) rotate(45deg)}
.email{position:relative;overflow:hidden;transition:color .35s ease,padding-left .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.email:before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:0;background:var(--ink);transition:height .4s cubic-bezier(.2,.8,.2,1)}
.email:hover{color:var(--paper);padding-left:14px;padding-right:14px}
.email:hover:before{height:100%}
.sponsor-link:hover{color:var(--paper);border-color:var(--ink)}
.contact h2 em{display:inline-block;animation:cream-pulse 4s ease-in-out infinite alternate}
footer a{transition:color .3s ease}
.section-index{animation:index-flicker 5s ease-in-out infinite}
.page-grid{animation:grid-drift 24s linear infinite}
.email>span:last-child{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.email:hover>span:last-child{transform:translate(6px,-6px) rotate(45deg)}

@keyframes ambient-drift{to{transform:scale(1.08) translate(2%,-1%)}}
@keyframes grid-drift{0%{background-position:0 0,0 0}50%{background-position:18px -12px,-14px 10px}100%{background-position:0 0,0 0}}
@keyframes hero-breathe{to{transform:translateY(-4px);text-shadow:0 12px 28px rgba(0,0,0,.08)}}
@keyframes text-sheen{0%,35%{background-position:0 50%}70%,100%{background-position:100% 50%}}
@keyframes dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.45}}
@keyframes stamp-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes scroll-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes card-sheen{0%,45%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@keyframes orb-breathe{to{transform:translateX(-50%) translateY(-7px) scale(1.015)}}
@keyframes title-sway{to{transform:translateX(8px) skewX(-1deg)}}
@keyframes drip-blink{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}
@keyframes cream-pulse{to{text-shadow:0 0 24px rgba(215,189,130,.22)}}
@keyframes title-line{0%,100%{transform:scaleX(.25);opacity:.35}50%{transform:scaleX(1);opacity:1}}
@keyframes status-pulse{0%,100%{box-shadow:0 0 0 0 rgba(143,174,131,.35)}50%{box-shadow:0 0 0 5px rgba(143,174,131,0)}}
@keyframes profile-sweep{0%,58%{transform:translateX(-65%) rotate(8deg)}78%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes index-flicker{0%,92%,100%{opacity:1}95%{opacity:.55}}

@media(prefers-reduced-motion:reduce){
  .hero:before,.hero-kicker,.hero-title,.hero-title:after,.hero-sub i,.stamp,.scroll-cue b,.portrait-card:before,.portrait-orb,.work-title .giant,.drip,.contact h2 em,.profile-status i,.github-profile:after,.section-index,.page-grid{animation:none}
  .nav,.wordmark,.nav nav a:after,.hero-center,.stamp,.portrait-orb,.github-avatar-wrap,.skill,.skill:before,.skill>b,.project,.project:before,.project-caption,.project-caption h3:after,.project-caption>span,.email,.email:before{transition:none}
}

/* --- Extra idle details --- */
.hero-center:before,.hero-center:after{content:"";position:absolute;left:50%;top:50%;border:1px solid rgba(183,154,99,.22);border-radius:50%;pointer-events:none;z-index:-1}
.hero-center:before{width:min(72vw,720px);height:min(72vw,720px);transform:translate(-50%,-50%);animation:orbit-breathe 8s ease-in-out infinite}
.hero-center:after{width:min(48vw,500px);height:min(48vw,500px);transform:translate(-50%,-50%);border-style:dashed;animation:orbit-spin 26s linear infinite}
.github-profile{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease}
.github-profile:hover{transform:translateY(-8px);border-color:#555;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.project:after{content:"";position:absolute;right:0;top:0;width:7px;height:7px;border:1px solid var(--cream);opacity:.35;transform:rotate(45deg) scale(.5);transition:transform .45s ease,opacity .35s ease}
.project:hover:after{opacity:1;transform:rotate(135deg) scale(1)}
.cursor-ring{transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .25s ease}
@keyframes orbit-breathe{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .hero-center:before,.hero-center:after{animation:none}
  .github-profile,.project:after{transition:none}
}

@media(max-width:800px){
  .nav:has(#site-nav.open)>.menu{opacity:0;pointer-events:none;transform:scale(.72) rotate(-90deg)}
}

/* --- Hero type treatment --- */
.hero-kicker,.hero-title{position:relative;display:inline-block}
.hero-kicker:before{content:"DX / 04 / GREY";position:absolute;left:4%;top:-.18em;font:500 clamp(7px,1vw,11px) 'DM Mono',monospace;letter-spacing:.25em;color:rgba(10,10,10,.48);-webkit-text-stroke:0;animation:label-drift 5s ease-in-out infinite}
.hero-kicker:after{content:"";position:absolute;inset:4% -1% 4%;border:1px solid rgba(183,154,99,.28);clip-path:inset(0 100% 0 0);animation:type-frame 7s cubic-bezier(.2,.8,.2,1) infinite}
.hero-title:before{content:"01";position:absolute;left:-.42em;top:.08em;font:500 clamp(8px,1vw,12px) 'DM Mono',monospace;letter-spacing:.08em;color:#9b8151;transform:rotate(-90deg);transform-origin:center;animation:number-float 4s ease-in-out infinite}
.hero-title{background:linear-gradient(180deg,#0a0a0a 35%,#4b3d27 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(10,10,10,.12);text-shadow:none}
.hero-title:after{bottom:-18px;left:4%;right:4%;height:3px;box-shadow:0 0 16px rgba(215,189,130,.28)}
.hero-sub{position:relative}
.hero-sub:before{content:"";width:clamp(30px,8vw,120px);height:1px;background:var(--cream);opacity:.65;animation:sub-line 3s ease-in-out infinite alternate}
.hero-title{background-size:180% 180%;animation:hero-breathe 7s ease-in-out infinite alternate,title-color-pulse 6s ease-in-out infinite}
.hero-kicker:hover,.hero-title:hover{animation:headline-glitch .65s steps(2,end) both}
.hero-kicker:hover{filter:drop-shadow(4px 0 rgba(183,154,99,.42)) drop-shadow(-4px 0 rgba(10,10,10,.18))}
.hero-title:hover{-webkit-text-stroke-color:rgba(183,154,99,.5)}
.hero-sub span{transition:color .3s ease,letter-spacing .3s ease,transform .3s ease}
.hero-sub span:hover{color:#8d7244;letter-spacing:.18em;transform:translateY(-3px)}
.hero-sub i{transition:transform .3s ease,background .3s ease}
.hero-sub:hover i{background:var(--cream);transform:scale(1.8) rotate(45deg)}
@keyframes label-drift{0%,100%{transform:translateX(0);opacity:.48}50%{transform:translateX(12px);opacity:.9}}
@keyframes type-frame{0%,20%{clip-path:inset(0 100% 0 0);opacity:0}45%,78%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 100%);opacity:0}}
@keyframes number-float{0%,100%{transform:rotate(-90deg) translateX(0);opacity:.5}50%{transform:rotate(-90deg) translateX(-6px);opacity:1}}
@keyframes sub-line{to{transform:scaleX(.55);opacity:.25}}
@keyframes title-color-pulse{0%,100%{background-position:0 30%}50%{background-position:100% 70%}}
@keyframes headline-glitch{0%{transform:translate(0);clip-path:inset(0)}20%{transform:translate(-3px,1px);clip-path:inset(10% 0 58% 0)}40%{transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}60%{transform:translate(-1px);clip-path:inset(0)}100%{transform:translate(0);clip-path:inset(0)}}
@media(max-width:800px){
  .hero-kicker:before{left:2%;top:-.24em}
  .hero-title:before{left:-.3em}
  .hero-sub:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-kicker:before,.hero-kicker:after,.hero-title,.hero-title:before,.hero-sub:before{animation:none}
}

/* Smooth ping-pong loops: no hard jump from the last frame to the first. */
.hero-kicker{animation:hero-breathe 7s ease-in-out infinite alternate,text-sheen 9s ease-in-out infinite alternate}
.hero-title{animation:hero-breathe 7s ease-in-out infinite alternate,title-color-pulse 6s ease-in-out infinite alternate}
.portrait-card:before{animation:card-sheen 7s ease-in-out infinite alternate}
.github-profile:after{animation:profile-sweep 10s ease-in-out infinite alternate}
@keyframes card-sheen{0%{transform:translateX(-120%)}48%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes profile-sweep{0%{transform:translateX(-65%) rotate(8deg)}48%{transform:translateX(-65%) rotate(8deg)}100%{transform:translateX(65%) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){
  .hero-kicker,.hero-title,.portrait-card:before,.github-profile:after{animation:none}
}

/* RGB-split glitch treatment inspired by the reference: short bursts, sliced layers, calm idle time. */
.glitch-target{isolation:isolate;overflow:visible}
.glitch-target:before,.glitch-target:after{content:none}
.glitch-main{position:relative;z-index:3;display:inline-block}
.hero-kicker .glitch-main{color:transparent;background:linear-gradient(110deg,#0a0a0a 12%,#66583f 48%,#0a0a0a 82%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(10,10,10,.08)}
.hero-title .glitch-main{color:transparent;background:linear-gradient(180deg,#0a0a0a 35%,#4b3d27 100%);background-size:180% 180%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(10,10,10,.12)}
.glitch-layer{position:absolute;inset:0;z-index:2;display:block;pointer-events:none;opacity:0;white-space:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;mix-blend-mode:multiply}
.glitch-red{color:#ff1744;text-shadow:2px 0 #ff1744;opacity:.1;animation:glitch-idle-red 7s ease-in-out infinite alternate}
.glitch-cyan{color:#00d9ff;text-shadow:-2px 0 #00d9ff;opacity:.1;animation:glitch-idle-cyan 7s ease-in-out infinite alternate}
.glitch-green{color:#00d084;text-shadow:1px 0 #00d084;opacity:.06;animation:glitch-idle-green 8s ease-in-out infinite alternate}
.glitch-main:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.22) 10px 11px,transparent 12px 18px);mix-blend-mode:overlay;opacity:.025;pointer-events:none;animation:glitch-idle-scan 9s ease-in-out infinite alternate}
.glitch-target:hover{animation:none!important;filter:none}
.glitch-target:hover .glitch-red{opacity:.78;transform:translate(5px,0);clip-path:none;animation:none}
.glitch-target:hover .glitch-cyan{opacity:.78;transform:translate(-5px,0);clip-path:none;animation:none}
.glitch-target:hover .glitch-green{opacity:.48;transform:translate(2px,0);clip-path:none;animation:none}
.glitch-target:hover .glitch-main:after{opacity:.16;animation:none}
.glitch-layer{transition:opacity .18s ease,transform .18s ease}
.glitch-main:after{transition:opacity .18s ease}
@keyframes glitch-red{0%,82%,100%{opacity:0;transform:none;clip-path:inset(0)}84%{opacity:.7;transform:translate(5px,-1px) skewX(-2deg);clip-path:inset(8% 0 66% 0)}86%{opacity:.55;transform:translate(-3px,1px);clip-path:inset(52% 0 28% 0)}88%{opacity:0}}
@keyframes glitch-cyan{0%,83%,100%{opacity:0;transform:none;clip-path:inset(0)}85%{opacity:.7;transform:translate(-5px,1px) skewX(2deg);clip-path:inset(38% 0 42% 0)}87%{opacity:.55;transform:translate(3px,-1px);clip-path:inset(74% 0 8% 0)}89%{opacity:0}}
@keyframes glitch-green{0%,84%,100%{opacity:0;transform:none;clip-path:inset(0)}86%{opacity:.5;transform:translate(2px,0);clip-path:inset(18% 0 58% 0)}88%{opacity:.38;transform:translate(-2px,0);clip-path:inset(66% 0 18% 0)}90%{opacity:0}}
@keyframes glitch-scan{0%,82%,100%{opacity:0}85%,89%{opacity:.35}91%{opacity:0}}
@keyframes glitch-idle-red{0%,100%{opacity:.07;transform:translate(1px,0)}50%{opacity:.16;transform:translate(2px,-1px)}}
@keyframes glitch-idle-cyan{0%,100%{opacity:.07;transform:translate(-1px,0)}50%{opacity:.16;transform:translate(-2px,1px)}}
@keyframes glitch-idle-green{0%,100%{opacity:.04;transform:translate(0,0)}50%{opacity:.1;transform:translate(1px,0)}}
@keyframes glitch-idle-scan{0%,100%{opacity:.015;transform:translateY(-3%)}50%{opacity:.06;transform:translateY(3%)}}
@media(prefers-reduced-motion:reduce){
  .glitch-red,.glitch-cyan,.glitch-green,.glitch-main:after{animation:none;transition:none}
}

/* --- Global smooth motion pass --- */
h1,h2,h3,.giant{animation:heading-breathe 6s ease-in-out infinite alternate}
.skill h3{animation-delay:-1s}.project-caption h3{animation-delay:-2s}.contact h2{animation-delay:-3s}
.hero-top>span,.hero-note,.work-meta>span,.contact-foot>span,footer>span{animation:soft-presence 6s ease-in-out infinite alternate}
.hero-top>span:last-child{animation-delay:-2s}.work-meta>span:last-child{animation-delay:-1.5s}.contact-foot>span:last-child{animation-delay:-2.5s}
.hero-sub span,.facts>div,.github-meta span,.project-updated,footer a{transition:color .45s ease,opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.hero-sub span:hover,.facts>div:hover,.github-meta span:hover,.project-updated:hover,footer a:hover{color:var(--cream);opacity:1;transform:translateY(-3px)}
.copy-columns p{animation:copy-breathe 8s ease-in-out infinite alternate}
.copy-columns p:nth-child(2){animation-delay:-3s}
.expertise-head p{animation:copy-breathe 7s ease-in-out infinite alternate -1.5s}
.github-meta span{animation:meta-blink 5s ease-in-out infinite}
.github-meta span:nth-child(2){animation-delay:-2s}
.contact-inner>p,.contact-foot{animation:soft-presence 7s ease-in-out infinite alternate -2s}
.drawer-head .mono{animation:soft-presence 5s ease-in-out infinite alternate}
.drawer-close,.menu{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease,background .35s ease}
.drawer-close:hover{transform:rotate(90deg) scale(1.08);color:var(--cream)}
.menu:hover{transform:scale(1.12)}
@keyframes soft-presence{0%{opacity:.72}100%{opacity:1}}
@keyframes copy-breathe{0%{opacity:.78}100%{opacity:1}}
@keyframes meta-blink{0%,100%{opacity:.62}50%{opacity:.95}}
@keyframes heading-breathe{0%{text-shadow:0 0 0 rgba(215,189,130,0)}100%{text-shadow:0 0 18px rgba(215,189,130,.16)}}
@media(prefers-reduced-motion:reduce){
  h1,h2,h3,.giant{animation:none}
  .hero-top>span,.hero-note,.work-meta>span,.contact-foot>span,footer>span,.copy-columns p,.expertise-head p,.github-meta span,.contact-inner>p,.contact-foot,.drawer-head .mono{animation:none}
  .hero-sub span,.facts>div,.github-meta span,.project-updated,footer a,.drawer-close,.menu{transition:none}
}

/* RGB channels stay alive between glitch bursts instead of looking static. */
.hero-title .glitch-red,.hero-kicker .glitch-red{animation:rgb-red-live 5.8s steps(1,end) infinite}
.hero-title .glitch-cyan,.hero-kicker .glitch-cyan{animation:rgb-cyan-live 6.35s steps(1,end) infinite -.9s}
.hero-title .glitch-green,.hero-kicker .glitch-green{animation:rgb-green-live 7.1s steps(1,end) infinite -1.7s}
@keyframes rgb-red-live{0%,64%,100%{opacity:.045;transform:translate(1px,0);clip-path:inset(0)}66%{opacity:.18;transform:translate(3px,-1px);clip-path:inset(12% 0 68% 0)}68%{opacity:.72;transform:translate(8px,-1px) skewX(-2deg);clip-path:inset(8% 0 70% 0)}70%{opacity:.22;transform:translate(-4px,1px);clip-path:inset(56% 0 22% 0)}72%,100%{opacity:.045;transform:translate(1px,0);clip-path:inset(0)}}
@keyframes rgb-cyan-live{0%,67%,100%{opacity:.045;transform:translate(-1px,0);clip-path:inset(0)}69%{opacity:.2;transform:translate(-3px,1px);clip-path:inset(42% 0 38% 0)}71%{opacity:.7;transform:translate(-8px,1px) skewX(2deg);clip-path:inset(40% 0 40% 0)}73%{opacity:.2;transform:translate(4px,-1px);clip-path:inset(74% 0 7% 0)}75%,100%{opacity:.045;transform:translate(-1px,0);clip-path:inset(0)}}
@keyframes rgb-green-live{0%,70%,100%{opacity:.025;transform:translate(0);clip-path:inset(0)}72%{opacity:.12;transform:translate(2px);clip-path:inset(20% 0 57% 0)}74%{opacity:.45;transform:translate(4px) skewX(-1deg);clip-path:inset(66% 0 15% 0)}76%{opacity:.12;transform:translate(-2px);clip-path:inset(30% 0 42% 0)}78%,100%{opacity:.025;transform:translate(0);clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.hero-title .glitch-red,.hero-title .glitch-cyan,.hero-title .glitch-green,.hero-kicker .glitch-red,.hero-kicker .glitch-cyan,.hero-kicker .glitch-green{animation:none}}

.hero-title:hover .glitch-red,.hero-kicker:hover .glitch-red{animation:rgb-hover-red .24s steps(2,end) infinite!important}
.hero-title:hover .glitch-cyan,.hero-kicker:hover .glitch-cyan{animation:rgb-hover-cyan .2s steps(2,end) infinite!important}
.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-green{animation:rgb-hover-green .17s steps(2,end) infinite!important}
@keyframes rgb-hover-red{0%,100%{opacity:.45;transform:translate(6px,-1px);clip-path:inset(8% 0 72% 0)}35%{opacity:.95;transform:translate(12px,1px) skewX(-3deg);clip-path:inset(42% 0 36% 0)}70%{opacity:.62;transform:translate(4px,-2px);clip-path:inset(73% 0 5% 0)}}
@keyframes rgb-hover-cyan{0%,100%{opacity:.45;transform:translate(-6px,1px);clip-path:inset(58% 0 20% 0)}40%{opacity:.95;transform:translate(-12px,-1px) skewX(3deg);clip-path:inset(12% 0 64% 0)}75%{opacity:.58;transform:translate(-4px,2px);clip-path:inset(78% 0 3% 0)}}
@keyframes rgb-hover-green{0%,100%{opacity:.3;transform:translate(3px);clip-path:inset(30% 0 45% 0)}45%{opacity:.7;transform:translate(7px,-1px) skewX(-2deg);clip-path:inset(66% 0 14% 0)}80%{opacity:.38;transform:translate(1px,1px);clip-path:inset(6% 0 78% 0)}}
@media(prefers-reduced-motion:reduce){.hero-title:hover .glitch-red,.hero-title:hover .glitch-cyan,.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-red,.hero-kicker:hover .glitch-cyan,.hero-kicker:hover .glitch-green{animation:none!important;transform:none;clip-path:none}}

/* Longer hover cycles add pauses, micro-flickers and irregular bursts. */
.hero-title:hover,.hero-kicker:hover{animation:hero-hover-chaos 3.7s steps(1,end) infinite!important}
.hero-title:hover .glitch-main,.hero-kicker:hover .glitch-main{animation:hover-main-flicker 3.1s steps(1,end) infinite}
.hero-title:hover .glitch-main:before,.hero-kicker:hover .glitch-main:before{animation:hover-scan-jump 2.8s steps(1,end) infinite}
.hero-title:hover .glitch-main:after,.hero-kicker:hover .glitch-main:after{animation:hover-signal-jump 4.2s steps(1,end) infinite}
.hero-title:hover .glitch-red,.hero-kicker:hover .glitch-red{animation:rgb-hover-red-var 1.83s steps(1,end) infinite!important}
.hero-title:hover .glitch-cyan,.hero-kicker:hover .glitch-cyan{animation:rgb-hover-cyan-var 2.47s steps(1,end) infinite -.63s!important}
.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-green{animation:rgb-hover-green-var 3.19s steps(1,end) infinite -1.14s!important}
@keyframes hero-hover-chaos{0%,18%,100%{transform:translate(0);filter:contrast(1.08) saturate(1.18)}20%{transform:translate(-2px,1px) skewX(-.5deg)}22%{transform:translate(3px,-1px)}24%{transform:translate(0)}47%{transform:translate(1px,0)}49%{transform:translate(-4px,2px) skewX(1deg);filter:contrast(1.3) saturate(1.4)}51%{transform:translate(2px,-2px)}53%{transform:translate(0);filter:contrast(1.08) saturate(1.18)}76%{transform:translate(0)}78%{transform:translate(5px,0) skewX(-1.4deg)}80%{transform:translate(-3px,1px)}82%{transform:translate(0)}}
@keyframes hover-main-flicker{0%,16%,100%{filter:none}18%{filter:drop-shadow(4px 0 rgba(255,23,68,.4)) drop-shadow(-4px 0 rgba(0,217,255,.4))}20%{filter:none}47%{filter:brightness(1.2)}49%{filter:drop-shadow(-6px 0 rgba(0,217,255,.5)) drop-shadow(5px 0 rgba(255,23,68,.45))}52%{filter:none}78%{filter:brightness(.85) contrast(1.5)}81%{filter:none}}
@keyframes hover-scan-jump{0%,30%,100%{opacity:.12;transform:translateY(-40%)}35%{opacity:.7;transform:translateY(8%)}39%{opacity:.18;transform:translateY(42%)}62%{opacity:.12;transform:translateY(-22%)}66%{opacity:.8;transform:translateY(30%)}70%{opacity:.12;transform:translateY(42%)}}
@keyframes hover-signal-jump{0%,22%,100%{opacity:.16;transform:translateX(-35%)}27%{opacity:.65;transform:translateX(8%)}31%{opacity:.12;transform:translateX(34%)}54%{opacity:.16;transform:translateX(30%)}58%{opacity:.7;transform:translateX(-8%)}62%{opacity:.12;transform:translateX(-35%)}}
@keyframes rgb-hover-red-var{0%,12%,100%{opacity:.36;transform:translate(5px,-1px);clip-path:inset(8% 0 72% 0)}16%{opacity:.9;transform:translate(13px,1px) skewX(-3deg);clip-path:inset(42% 0 36% 0)}21%{opacity:.18;transform:translate(-2px);clip-path:inset(75% 0 3% 0)}48%{opacity:.62;transform:translate(7px,-2px);clip-path:inset(18% 0 64% 0)}53%{opacity:.9;transform:translate(15px,2px);clip-path:inset(61% 0 12% 0)}58%{opacity:.12;transform:translate(0);clip-path:inset(0)}82%{opacity:.48;transform:translate(4px);clip-path:inset(30% 0 44% 0)}}
@keyframes rgb-hover-cyan-var{0%,18%,100%{opacity:.34;transform:translate(-5px,1px);clip-path:inset(58% 0 20% 0)}23%{opacity:.92;transform:translate(-14px,-1px) skewX(3deg);clip-path:inset(12% 0 64% 0)}29%{opacity:.12;transform:translate(0);clip-path:inset(0)}57%{opacity:.7;transform:translate(-7px,2px);clip-path:inset(74% 0 7% 0)}63%{opacity:.88;transform:translate(-12px,-2px);clip-path:inset(35% 0 43% 0)}69%{opacity:.16;transform:translate(2px);clip-path:inset(0)}88%{opacity:.5;transform:translate(-4px,1px);clip-path:inset(6% 0 78% 0)}}
@keyframes rgb-hover-green-var{0%,24%,100%{opacity:.24;transform:translate(3px);clip-path:inset(30% 0 45% 0)}30%{opacity:.74;transform:translate(8px,-1px) skewX(-2deg);clip-path:inset(66% 0 14% 0)}36%{opacity:.08;transform:translate(0);clip-path:inset(0)}66%{opacity:.55;transform:translate(5px,1px);clip-path:inset(6% 0 78% 0)}72%{opacity:.82;transform:translate(9px,-2px);clip-path:inset(48% 0 28% 0)}78%{opacity:.1;transform:translate(-1px);clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.hero-title:hover,.hero-kicker:hover,.hero-title:hover .glitch-main,.hero-kicker:hover .glitch-main,.hero-title:hover .glitch-main:before,.hero-kicker:hover .glitch-main:before,.hero-title:hover .glitch-main:after,.hero-kicker:hover .glitch-main:after,.hero-title:hover .glitch-red,.hero-kicker:hover .glitch-red,.hero-title:hover .glitch-cyan,.hero-kicker:hover .glitch-cyan,.hero-title:hover .glitch-green,.hero-kicker:hover .glitch-green{animation:none!important}}