/* Motion and interaction layer. Content stays readable without JavaScript. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:120px}
.reading-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--accent);z-index:100;transform:scaleX(0);transform-origin:left;pointer-events:none}
.header{position:sticky;top:0;z-index:30;transition:background .35s,border-color .35s,box-shadow .35s;padding-inline:0;isolation:isolate}
.header::before{content:'';position:absolute;inset:0 -24px;z-index:-1;border-radius:0 0 14px 14px;border:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
.header.is-scrolled::before{background:#101112eb;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:#383d3266;box-shadow:0 10px 40px #0002}
.header.is-scrolled{border-bottom-color:transparent}
.header nav a{position:relative;padding:8px 0;transition:color .2s}
.header nav a::after{content:'';position:absolute;height:2px;bottom:0;left:0;right:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.header nav a[aria-current=location]{color:var(--accent)}
.header nav a[aria-current=location]::after,.header nav a:hover::after{transform:scaleX(1)}
.header .mobile-contact{display:none}
.hero{isolation:isolate;position:relative;--spot-x:70%;--spot-y:40%}
.hero-atmosphere{position:absolute;z-index:-1;inset:-40px -40px 0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 82% 42%,#a4d3430e,transparent 55%)}
.hero-atmosphere::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#a4c6700a 1px,transparent 1px),linear-gradient(90deg,#a4c6700a 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse at 78% 40%,#000 5%,transparent 65%)}
.hero-atmosphere::after{content:'';position:absolute;inset:0;background:radial-gradient(380px circle at var(--spot-x) var(--spot-y),#c3f06a08,transparent 80%)}
.hero-grid{padding-top:57px;padding-bottom:73px}
.title-line{display:block;overflow:hidden;padding-bottom:.075em;margin-bottom:-.075em}
.title-line>span{display:block;transform-origin:bottom left}
.title-line.accent>span{background:linear-gradient(115deg,#e4ffaf 5%,#cdf86a 55%,#a0ce3d);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-copy h1{letter-spacing:-.058em}
.hero-copy>p{max-width:505px}
.button{position:relative;overflow:hidden;transition:background .25s,box-shadow .3s,transform .4s var(--ease-out);isolation:isolate}
.button.primary{box-shadow:inset 0 1px #fff5,0 5px 22px #c9f66a09}
.button.primary::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,#fff6 50%,transparent 75%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.button.primary:hover::before{transform:translateX(120%)}
.button.primary:hover{box-shadow:inset 0 1px #fff5,0 8px 35px #c9f66a18;transform:translateY(-3px)}
.button>span,.header-contact>span{display:inline-block;transition:transform .35s var(--ease-out)}
.button:hover>span,.header-contact:hover>span{transform:translate(3px,-3px)}
.text-link{position:relative;width:fit-content}
.text-link::after{content:'';position:absolute;bottom:-5px;height:1px;background:currentColor;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.text-link:hover::after{transform:scaleX(1)}
.developer-card{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(2deg);transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;box-shadow:0 32px 80px #0005,0 0 60px #c7ed6a05;border-color:#59624780}
.developer-card:hover{border-color:#82965d;box-shadow:0 36px 90px #0007,0 0 80px #c7ed6a0a}
.code-invitation{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-top:1px solid #39432d;font-size:.82rem;background:#c6ef6806;color:#d5e2bd;gap:20px;transition:background .2s}
.code-invitation:hover{background:#c6ef6810}
.code-next{display:inline-block;border-bottom:1px solid #c7ee6855}
.code-tab{background:#d1ef6c03}
.code-dot{box-shadow:0 0 10px #c0e95f20}
.projects-section{position:relative;background:linear-gradient(180deg,#161819,#141617)}
.project{transition:border-color .45s,box-shadow .45s,transform .45s var(--ease-out)}
.project:hover{border-color:#68774e;box-shadow:0 18px 50px #0003;transform:translateY(-5px)}
.project.featured{border-color:#54654180}
.project-image-button{position:relative;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#344d30 0%,#1c2c22 55%,#14201a 100%);padding:42px 28px 28px;isolation:isolate}
.project[data-accent=blue] .project-image-button{background:radial-gradient(ellipse at 50% 30%,#29455b,#192632 70%)}
.project[data-accent=purple] .project-image-button{background:radial-gradient(ellipse at 50% 30%,#453b60,#282332 70%)}
.project-image-button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg,#ffffff0a,transparent 50%);opacity:.6;transition:opacity .5s}
.project-image-button:hover::before{opacity:1}
.project-image-button img{height:auto;max-height:310px;box-shadow:0 18px 35px #0005;transition:transform .65s var(--ease-out),filter .65s;transform:perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(.96);border:1px solid #ffffff18}
.project.featured .project-image-button img{max-height:360px}
.project-image-button:hover img{transform:perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-4px) scale(1.01)}
.project-window{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;color:#c6d0bf;font:.65rem var(--mono);letter-spacing:.03em;opacity:.7}
.window-dots{font-size:.5rem;letter-spacing:3px;color:#b1c197}
.project-index{position:absolute;bottom:10px;left:19px;font:.7rem var(--mono);color:#bac8af80}
.project-peek{position:absolute;left:var(--pointer-x,75%);top:var(--pointer-y,55%);width:84px;height:84px;border-radius:50%;background:var(--accent);color:#18200f;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:.75rem;font-weight:600;line-height:1.4;box-shadow:0 8px 30px #0004;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease-out);pointer-events:none}
.project-peek>span{font-size:1.5rem;font-weight:400}
.project-image-button:hover .project-peek{opacity:1;transform:translate(-50%,-50%) scale(1)}
.project-image-button:focus-visible{outline-offset:-5px}
.project h3{transition:color .25s}
.project:hover h3{color:#e1efc9}
.project-links button span{display:inline-block;transition:transform .3s var(--ease-out)}
.project-links button:hover span{transform:translate(4px,-4px)}
.tag{transition:border-color .3s,background .3s,color .3s}
.project:hover .tag{border-color:#58604b;background:#a4c66805;color:#dce5ce}
.skill{position:relative;padding-top:3px}
.skill::before{content:'';position:absolute;top:-34px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.skill:hover::before{transform:scaleX(1)}
.journey-item::before{transition:background .3s,box-shadow .3s}
.journey-item:hover::before{background:var(--accent);box-shadow:0 0 0 5px #d0f86c12}
.cert{transition:padding-left .3s var(--ease-out)}
.cert:hover{padding-left:8px}
.contact{position:relative;isolation:isolate}
.contact::before{content:'';position:absolute;inset:0 -30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0 60%,#c5ed6708,transparent 70%)}
.contact h2{max-width:1100px;font-size:clamp(2.8rem,5.3vw,5.15rem)}
.contact-intro{max-width:640px;font-size:1.05rem;line-height:1.85;color:var(--muted);margin:26px 0 36px}
.contact-paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-path{display:block;border:1px solid #3c4433;background:linear-gradient(120deg,#1d2119,#161918);border-radius:10px;padding:28px 30px;transition:border-color .3s,transform .4s var(--ease-out),background .3s}
.contact-path:hover{border-color:#8aab54;transform:translateY(-4px);color:var(--text)}
.path-number{font:.7rem var(--mono);letter-spacing:.075em;color:#a9ba90}
.contact-path h3{display:flex;justify-content:space-between;align-items:start;gap:22px;font:500 1.45rem/1.25 var(--heading);letter-spacing:-.035em;margin:22px 0 14px}
.contact-path h3 span{font:400 1.7rem var(--body);color:var(--accent);transition:transform .4s var(--ease-out)}
.contact-path:hover h3 span{transform:translate(4px,-4px)}
.contact-path p{color:var(--muted);font-size:.93rem;line-height:1.75;max-width:380px;margin-bottom:22px}
.path-link{font-size:.85rem;color:#d5e7b8;border-bottom:1px solid #81915f70;padding-bottom:3px}
.contact-links{align-items:center;gap:28px;margin-top:35px}
.email-group{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.email-group>a{overflow-wrap:anywhere}
#copy-email{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;color:var(--muted);border:1px solid transparent;border-radius:5px;background:transparent;transition:color .2s,border-color .2s}
#copy-email:hover{color:var(--accent);border-color:#414e31}
.copy-status{font-size:.8rem;display:block;min-height:24px;margin-top:8px;color:var(--accent)}
.footer .brand:hover{color:var(--accent)}
.eyebrow,.small-label,.column-label,.featured-label,.tag,.card-foot,.scroll-cue,.project-window,.project-index,.path-number{font-size:.75rem}
@media(min-width:1100px){.hero-grid{min-height:530px}.developer-card{margin-left:8px}.featured .project-body{padding:37px 36px}.featured .project-image-button{min-height:405px}}
@media(max-width:1100px){.hero-atmosphere{inset:-20px -20px 0}.contact-path{padding:25px}.contact-path h3{font-size:1.3rem}}
@media(max-width:800px){.header::before{inset:0 -12px}.hero-grid{padding-block:40px 45px}.developer-card{transform:none}.hero-atmosphere{inset:0 -15px}.hero-atmosphere::after{display:none}.contact-paths{grid-template-columns:1fr}.contact-path p{max-width:500px}.contact-path h3{font-size:1.45rem}.contact h2{font-size:clamp(2.5rem,7vw,3.8rem)}.header .mobile-contact{display:block}.header nav{gap:17px}.header{gap:20px}.project-peek{display:none}.project-image-button img{transform:none}.project-window{padding-inline:17px}.contact::before{inset:0 -15px}.contact-links .email-group{width:100%}}
@media(max-width:520px){.header{min-height:78px}.header nav{gap:13px;font-size:.8rem}.header .brand{font-size:1.65rem}.header .brand-caption{display:none}.hero-copy h1{font-size:clamp(2.9rem,10.5vw,4rem)}.hero-top>.eyebrow{font-size:.7rem}.contact-path{padding:23px}.contact-path h3{font-size:1.3rem}.project-image-button{padding:42px 20px 26px}.contact-links{column-gap:28px;row-gap:14px}.code-invitation{font-size:.78rem;padding:15px}.hero-atmosphere{inset:0 -10px}.hero-actions .button{font-size:.9rem}.hero-actions{gap:22px}.title-line{line-height:1.1}.project-meta{font-size:.72rem}.project-meta>span:first-child{max-width:85%}}
@media(hover:none),(pointer:coarse){.project-peek{display:none}.developer-card{transform:none!important}.project-image-button img{transform:none}.hero-atmosphere::after{display:none}}
@media(max-width:380px){.header{display:grid;grid-template-columns:1fr;gap:4px;padding-block:13px 8px;min-height:104px}.header .brand{justify-self:start}.header nav{justify-content:space-between;gap:10px;font-size:.875rem}.header nav a{padding-block:6px}.about-grid h2 br:nth-child(2){display:block}}
@media(max-width:1100px){.code-body{font-size:.75rem}}
@media(max-width:800px){.about-grid h2 br:nth-child(2){display:block}}
@media(max-width:520px){.hero-top>.eyebrow,.project-meta,.card-foot{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.developer-card,.project-image-button img,.project:hover,.contact-path:hover,.button:hover{transform:none!important}.hero-atmosphere::after,.project-peek{display:none}.button.primary::before{display:none}.title-line>span{transform:none!important;opacity:1!important}.cert:hover{padding-left:0}}