/* Public portfolio refresh. No font downloads or animation dependencies. */
:root {
  --bg: #070c12;
  --bg2: #0b151f;
  --surface: rgba(15, 27, 38, .86);
  --text: #f1f5f2;
  --muted: #a0b2c1;
  --green: #8cf0c9;
  --line: rgba(168, 196, 205, .16);
  --line2: rgba(140, 240, 201, .4);
  --radius: 24px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
html { scroll-padding-top: 110px; }
body { background: var(--bg); -webkit-font-smoothing: antialiased; isolation: isolate; }
body::before { opacity: .018; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 5px;
}
.section { padding-block: 104px; }
.section[id] { scroll-margin-top: 18px; }
.container { min-width: 0; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress > span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--green), #82baff); }
.header { background: rgba(7, 12, 18, .72); backdrop-filter: blur(20px); border-bottom-color: var(--line); }
.header.scrolled { background: rgba(7, 12, 18, .94); box-shadow: 0 10px 40px #0002; }
.nav { height: 82px; }
.brand { letter-spacing: -.025em; font-size: 1.15rem; }
.brand img { width: 36px; height: 36px; }
.menu { gap: 20px; }
.menu > a:not(.nav-cta) { position: relative; font-size: .84rem; padding-block: 12px; }
.menu > a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.menu > a:hover::after, .menu > a[aria-current="location"]::after { transform: scaleX(1); }
.menu > a[aria-current="location"] { color: var(--green); }
.lang, .motion-toggle { min-height: 44px; }
.nav-cta { border-radius: 999px; font-size: .74rem; }
.nav-cta i { animation: status-breathe 3s ease-in-out infinite; }
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 .65rem var(--mono); cursor: pointer; white-space: nowrap; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--text); border-color: var(--line2); }
.motion-toggle:disabled { cursor: default; }
.motion-icon { display: flex; align-items: center; gap: 2px; height: 15px; }
.motion-icon i { width: 2px; height: 11px; background: var(--green); transform-origin: center; animation: equalizer 1.1s ease-in-out infinite alternate; }
.motion-icon i:nth-child(2) { animation-delay: -.4s; height: 15px; }
.motion-icon i:nth-child(3) { animation-delay: -.7s; height: 8px; }

/* Fixed depth layers sit behind the page, never above its controls or text.
   Only transform/opacity animate; no canvas, WebGPU, filters or JS frame loop. */
.grid-bg { z-index: -1; overflow: hidden; pointer-events: none; mask-image: none; }
.grid-bg::before, .grid-bg::after {
  content: ''; position: absolute; width: min(100vmax, 1100px); height: min(100vmax, 1100px);
  border-radius: 50%; pointer-events: none;
}
.grid-bg::before {
  top: -32%; left: -22%; opacity: .85;
  background: radial-gradient(ellipse at 45% 45%, #65ddbc2e, #399bb611 38%, transparent 68%);
}
.grid-bg::after {
  bottom: -38%; right: -24%; opacity: .8;
  background: radial-gradient(ellipse at 55% 55%, #7e91ef2b, #63cabe14 38%, transparent 68%);
}
html[data-motion="running"] .grid-bg::before { animation: depth-near 22s ease-in-out -7s infinite alternate; }
html[data-motion="running"] .grid-bg::after { animation: depth-far 28s ease-in-out -13s infinite alternate; }
@keyframes depth-near { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(13vw, 12vh, 0) scale(1.08); opacity: 1; } }
@keyframes depth-far { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12vw, -10vh, 0) scale(1.12); opacity: .6; } }

/* An editorial hero around the original identity, copy and system illustration. */
.hero { isolation: isolate; min-height: 880px; padding-top: 154px; padding-bottom: 0; }
.hero::before, .hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: min(80vw, 850px); aspect-ratio: 1; border-radius: 50%; }
.hero::before { top: -240px; right: -200px; background: radial-gradient(circle, #4db79320, transparent 66%); animation: ambient-drift 18s ease-in-out infinite alternate; }
.hero::after { bottom: 0; left: -400px; background: radial-gradient(circle, #5686c31a, transparent 68%); animation: ambient-drift 22s ease-in-out -8s infinite alternate-reverse; }
.hero-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 66px; }
.hero-copy { min-width: 0; }
.hero-signature { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.signature-mark { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid var(--line2); border-radius: 14px; color: var(--green); background: #8cf0c908; font: 800 1.1rem var(--mono); }
.hero-signature > div { display: grid; gap: 2px; }
.hero-signature strong { font-size: .9rem; letter-spacing: .01em; }
.hero-signature div > span { color: var(--muted); font-size: .7rem; }
.eyebrow { font-size: .66rem; letter-spacing: .16em; line-height: 1.5; }
.eyebrow > span { display: inline-grid; place-items: center; min-width: 27px; min-height: 23px; border: 1px solid var(--line); border-radius: 5px; font-size: .58rem; }
.hero h1 { font-size: clamp(3.3rem, 5.6vw, 5.2rem); line-height: 1.035; letter-spacing: -.057em; text-wrap: balance; }
.hero h1 em { background-image: linear-gradient(110deg, #8cf0c9 12%, #cdf7df 40%, #8abcf0 66%, #8cf0c9 88%); background-size: 220% 100%; animation: text-light 10s ease-in-out infinite alternate; }
.hero .lead { margin-top: 25px; max-width: 560px; font-size: 1.02rem; line-height: 1.85; }
.hero .actions { gap: 12px; margin-top: 28px; }
.button { min-height: 50px; border-radius: 12px; font-size: .86rem; transition: transform .3s var(--ease-out), background .3s, box-shadow .3s; }
.primary { background: var(--green); box-shadow: 0 8px 30px #8cf0c91a; }
.primary:hover { box-shadow: 0 12px 36px #8cf0c933; }
.button b { transition: transform .3s var(--ease-out); }
.button:hover b { transform: translate(3px, -3px); }
.hero .actions > a:nth-child(n+3) { min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--muted); font-size: .77rem; box-shadow: none; }
.hero .actions > a:nth-child(n+3):hover { color: var(--green); }
.metrics { gap: 0; margin-top: 30px; padding-top: 24px; }
.metrics > div { flex: 1; padding-right: 16px; }
.metrics > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.metrics strong { font-size: 1.6rem; letter-spacing: -.06em; color: var(--text); }
.metrics span { max-width: 140px; margin-top: 4px; line-height: 1.55; font-size: .68rem; }
.terminal-wrap { padding-block: 34px; }
.terminal-wrap::before { content: ''; position: absolute; inset: -22px -24px; border: 1px solid #8cf0c915; border-radius: 50%; transform: rotate(-22deg); pointer-events: none; }
.terminal-wrap::after { content: '+'; position: absolute; right: 8%; bottom: 0; color: var(--green); font: 300 2rem var(--mono); animation: orbit-marker 14s linear infinite; pointer-events: none; }
.halo { top: -14%; right: -10%; width: 100%; height: 110%; background: radial-gradient(ellipse, #77dabd16, #5f8fcb0d 40%, transparent 70%); filter: none; }
.terminal { border-color: #b2e5d331; background: linear-gradient(145deg, #15252f, #0a141f 75%); box-shadow: 0 35px 90px #0007, 0 0 0 7px #8cf0c903; transform: perspective(1100px) rotateX(var(--tilt-x, 2deg)) rotateY(var(--tilt-y, -5deg)); transition: transform .4s var(--ease-out); animation: terminal-float 7s ease-in-out infinite; }
.terminal::after { animation-duration: 10s; }
.terminal-head { font-size: .6rem; padding-inline: 16px; background: #ffffff03; }
.terminal-head small { font-size: .55rem; letter-spacing: .08em; }
.code { min-height: 305px; padding: 25px 20px; font-size: clamp(.64rem, .87vw, .77rem); line-height: 1.65; }
.code b { color: #748da0; padding-right: 10px; }
.code p { white-space: nowrap; }
.prompt { min-height: 22px; }
.nodes { height: 138px; background: #02080d44; }
.nodes path { stroke: #8cf0c95c; stroke-width: 1.5; animation-duration: 9s; }
.node { background: #101f2c; box-shadow: 0 8px 25px #0004; animation: node-breathe 4s ease-in-out infinite; }
.n2 { animation-delay: -1.3s; }
.n3 { animation-delay: -2.6s; }
.terminal-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; max-width: 85%; padding: 12px 16px; border: 1px solid var(--line2); border-radius: 14px; background: #10231feb; box-shadow: 0 15px 35px #0004; pointer-events: none; animation: badge-float 6s ease-in-out infinite; }
.terminal-badge > span { color: var(--green); font: 700 1.3rem var(--mono); }
.terminal-badge > div { display: grid; gap: 3px; }
.terminal-badge small { color: var(--muted); font: .5rem var(--mono); letter-spacing: .12em; }
.terminal-badge strong { font-size: .78rem; font-weight: 600; }
.terminal-badge--top { top: 0; right: -8px; }
.terminal-badge--bottom { bottom: 0; left: -18px; background: #15212feb; animation-delay: -3s; }
.hero-footnote { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 42px; margin-bottom: 28px; }
.scroll-cue { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: var(--muted); font: .66rem var(--mono); }
.scroll-line { position: relative; width: 18px; height: 28px; border: 1px solid var(--line2); border-radius: 10px; }
.scroll-line::after { content: ''; position: absolute; width: 2px; height: 6px; top: 5px; left: 7px; border-radius: 2px; background: var(--green); animation: scroll-hint 2s ease-in-out infinite; }
.hero-note { color: var(--muted); font: .62rem var(--mono); }
.hero .marquee { margin-top: 0; transform: none; background: #ffffff02; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hero .marquee-set { padding-block: 20px; }
.hero .marquee > div { letter-spacing: .09em; color: #b5c9c8; animation: skills-marquee 48s linear infinite; }
@keyframes skills-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Clear hierarchy and smaller, tactile cards; all content remains original. */
.section-head { gap: 60px; margin-bottom: 34px; }
.section-head h2, .about-copy h2, .contact-card h2 { font-size: clamp(2.4rem, 4.1vw, 3.8rem); line-height: 1.08; text-wrap: balance; }
.section-head > p { font-size: .92rem; line-height: 1.8; }
.work-section { background: linear-gradient(180deg, #0c151e66, transparent); }
.filters { gap: 10px; margin-bottom: 30px; }
.filters button { min-height: 44px; padding-inline: 18px; transition: background .25s, color .25s, border-color .25s; }
.projects { gap: 24px; }
.project, .project:first-child { min-height: 0; background: #0f1a24; position: relative; }
.project-image { min-height: 0; aspect-ratio: 16 / 9; background: #101f2c; }
.project:first-child .project-image { min-height: 0; }
.project-image img { transition: transform .8s var(--ease-out); }
.project:hover .project-image img { transform: scale(1.045); }
.project-body { padding: 28px; min-width: 0; }
.project-body > p { font-size: .9rem; line-height: 1.8; }
.title-row h3 { font-size: 1.55rem; letter-spacing: -.035em; line-height: 1.2; }
.title-row > span { color: #8ca2b4; }
.result { background: #8cf0c906; border-color: #8cf0c91f; line-height: 1.6; }
.open-project { width: 46px; height: 46px; border-color: var(--line2); color: var(--green); font-size: 1.1rem; }
.open-project:hover { transform: translate(2px, -2px); }
.badge { backdrop-filter: blur(12px); font-size: .58rem; }
.cap-grid { gap: 18px; }
.cap { min-height: 290px; padding: 28px; background: linear-gradient(145deg, #13232d, #0a141e); }
.cap > span { font: 500 2.2rem var(--mono); letter-spacing: -.09em; color: #8294a42e; }
.cap > i { width: 50px; height: 50px; background: #8cf0c907; transition: transform .4s var(--ease-out), background .4s; }
.cap:hover > i { transform: rotate(-7deg) translateY(-3px); background: #8cf0c914; }
.cap h3 { letter-spacing: -.02em; }
.cap p { line-height: 1.75; }
.project, .cap, .profile-card, .contact-card { position: relative; isolation: isolate; }
.project::after, .cap::after, .profile-card::after, .contact-card::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #a8ffe519, transparent 70%); transition: opacity .4s; }
@media (hover: hover) and (pointer: fine) {
  .project:hover::after, .cap:hover::after, .profile-card:hover::after, .contact-card:hover::after { opacity: 1; }
}
.about-layout { gap: 72px; }
.links { flex-wrap: wrap; gap: 12px 24px; }
.links a { font-size: .84rem; }
.architecture { background: linear-gradient(145deg, #10211f, #0b1520); border-color: var(--line2); }
.architecture header { flex-wrap: wrap; gap: 12px; }
.architecture li > i { background: #8cf0c908; }
.architecture li:not(:last-child)::after { background: linear-gradient(var(--green), #8cf0c912); }
.architecture.visible li { animation: reveal-rise .65s var(--ease-out) backwards; }
.architecture.visible li:nth-child(2) { animation-delay: .12s; }
.architecture.visible li:nth-child(3) { animation-delay: .24s; }
.architecture.visible li:nth-child(4) { animation-delay: .36s; }
.stack, .profile-card { background: #0e1a23; }
.stack-focused .stack-list span, .skill-tags span { transition: border-color .25s, color .25s, background .25s; overflow-wrap: anywhere; }
.stack-focused .stack-list span:hover, .skill-tags span:hover { color: var(--green); border-color: var(--line2); background: #8cf0c90b; }
.language-panel.visible .level-track i { transform-origin: left; animation: level-fill 1.1s var(--ease-out) .2s backwards; }
.contact-card { overflow: hidden; padding: 50px; background: radial-gradient(ellipse at 0 0, #8cf0c911, transparent 55%), #0f1d26; }
.contact-links a { max-width: 100%; overflow-wrap: anywhere; width: fit-content; line-height: 1.7; }
.contact-card > div, .contact-card form { min-width: 0; }
input, textarea { background: #071019a6; border-color: #a8c4cd2e; transition: border-color .25s, box-shadow .25s; }
label { font-weight: 500; font-size: .79rem; }
#contact-form { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #050b112e; }
footer { padding-block: 38px; background: #050a10; }
dialog[open] { animation: dialog-enter .3s var(--ease-out); }
dialog::backdrop { background: #03070cd9; }

/* Progressive enhancement: content is never dependent on an animation firing. */
.reveal { opacity: 1; transform: none; }
html[data-motion="running"] .motion-reveal[data-reveal="pending"] { opacity: 0; transform: translate3d(0, 24px, 0); }
html[data-motion="running"] .motion-reveal[data-reveal="visible"] { animation: reveal-rise .75s var(--ease-out) var(--reveal-delay, 0ms) backwards; }
html[data-motion="running"] .hero-signature,
html[data-motion="running"] .hero-copy > .eyebrow,
html[data-motion="running"] .hero h1,
html[data-motion="running"] .hero .lead,
html[data-motion="running"] .hero .actions,
html[data-motion="running"] .hero .metrics { animation: reveal-rise .9s var(--ease-out) backwards; }
html[data-motion="running"] .hero-copy > .eyebrow { animation-delay: .06s; }
html[data-motion="running"] .hero h1 { animation-delay: .12s; }
html[data-motion="running"] .hero .lead { animation-delay: .2s; }
html[data-motion="running"] .hero .actions { animation-delay: .28s; }
html[data-motion="running"] .hero .metrics { animation-delay: .36s; }
html .motion-reveal:focus-within { opacity: 1 !important; transform: none !important; }
html[data-page-hidden="true"] *, html[data-page-hidden="true"] *::before, html[data-page-hidden="true"] *::after,
[data-in-view="false"], [data-in-view="false"]::before, [data-in-view="false"]::after,
[data-in-view="false"] *, [data-in-view="false"] *::before, [data-in-view="false"] *::after { animation-play-state: paused !important; }
html[data-motion="paused"] { scroll-behavior: auto; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="paused"] .marquee > div { animation: none !important; transform: none !important; }
html[data-motion="paused"] .terminal { transform: none !important; translate: none !important; }
html[data-motion="paused"] .reveal { opacity: 1 !important; transform: none !important; }

@keyframes reveal-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes ambient-drift { to { transform: translate3d(-45px, 65px, 0) scale(1.12); } }
@keyframes terminal-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes text-light { to { background-position: 100% 50%; } }
@keyframes node-breathe { 50% { border-color: #8cf0c994; box-shadow: 0 0 20px #8cf0c913; } }
@keyframes status-breathe { 50% { box-shadow: 0 0 0 7px #8cf0c900, 0 0 16px #8cf0c970; } }
@keyframes equalizer { to { transform: scaleY(.35); } }
@keyframes orbit-marker { to { transform: rotate(360deg); } }
@keyframes scroll-hint { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes level-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 981px) {
  .project:first-child { display: grid; grid-template-columns: 1.06fr 1fr; min-height: 390px; }
  .project:first-child .project-image { aspect-ratio: auto; height: 100%; }
  .project:first-child .project-body { padding: 36px; justify-content: center; }
  .project:first-child .title-row h3 { font-size: 2rem; }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .menu { gap: 14px; }
  .nav-cta { display: none; }
  .hero-layout { gap: 32px; }
  .hero h1 { font-size: 4rem; }
}
@media (max-width: 980px) {
  .hero { padding-top: 128px; }
  .hero-layout, .about-layout, .contact-card { grid-template-columns: minmax(0, 1fr); }
  .hero-layout { gap: 36px; }
  .hero-signature { justify-content: center; text-align: left; }
  .hero h1 { max-width: 760px; margin-inline: auto; font-size: clamp(3.3rem, 8vw, 5rem); }
  .hero .lead { max-width: 630px; }
  .metrics { max-width: 540px; margin-inline: auto; }
  .metrics > div { padding-right: 14px; }
  .terminal-wrap { max-width: 560px; }
  .terminal { transform: none; }
  .terminal-badge--top { right: 10px; }
  .terminal-badge--bottom { left: 10px; }
  .code { font-size: .78rem; }
  .menu { visibility: hidden; top: 74px; max-height: calc(100dvh - 94px); overflow-y: auto; }
  .menu.open { visibility: visible; }
  .menu > a:not(.nav-cta) { min-height: 44px; padding-inline: 12px; }
  .menu > a:not(.nav-cta)::after { left: 12px; right: auto; width: 24px; }
  .motion-toggle { justify-self: start; margin: 8px 0 12px 10px; }
  .nav-cta { margin: 4px 10px; width: fit-content; }
  .section-head { gap: 24px; }
  .contact-card { gap: 30px; }
}
@media (max-width: 680px) {
  .hero .marquee > div { animation-duration: 60s; }
  .grid-bg::before, .grid-bg::after { width: 90vmax; height: 90vmax; }
  .section { padding-block: 72px; }
  .hero { padding-top: 112px; padding-bottom: 0; }
  .hero-signature { margin-bottom: 26px; gap: 10px; }
  .hero-signature div > span { font-size: .62rem; }
  .signature-mark { width: 40px; height: 40px; }
  .hero h1 { font-size: clamp(2.75rem, 11.8vw, 4.4rem); }
  .hero .lead { font-size: .94rem; line-height: 1.8; }
  .hero .actions > a:nth-child(n+3) { width: auto; min-width: 0; max-width: 100%; font-size: .7rem; padding-inline: 5px; }
  .metrics strong { font-size: 1.4rem; }
  .metrics > div, .metrics > div + div { padding-inline: 10px; }
  .metrics span { font-size: .61rem; }
  .terminal-wrap { padding-inline: 3px; margin-top: 6px; }
  .terminal-wrap::before { inset: 0 2px; }
  .terminal-head { gap: 8px; }
  .code { font-size: clamp(.5rem, 2.24vw, .71rem); padding: 24px 12px; min-height: 280px; }
  .code b { padding-right: 5px; }
  .terminal-badge { padding: 10px 13px; }
  .terminal-badge small { font-size: .46rem; }
  .terminal-badge strong { font-size: .7rem; }
  .hero-footnote { margin-top: 20px; margin-bottom: 20px; }
  .hero-note { max-width: 140px; text-align: right; line-height: 1.7; font-size: .54rem; }
  .scroll-cue { font-size: .58rem; gap: 8px; }
  .section-head h2, .about-copy h2, .contact-card h2 { font-size: clamp(2.15rem, 9.5vw, 3rem); }
  .project-body, .cap { padding: 24px; }
  .project .project-image, .project:first-child .project-image { min-height: 205px; }
  .project:first-child, .project { grid-column: 1 / -1; }
  .cap { min-height: 265px; }
  .contact-card { width: calc(100% - 28px); padding: 28px 18px; }
  #contact-form { padding: 18px 12px; }
  .contact-links a { font-size: .75rem; }
  .filters { gap: 8px; }
  .filters button { padding-inline: 13px; font-size: .72rem; }
  .architecture { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="running"]), html:not([data-motion="running"]) * { scroll-behavior: auto !important; }
  html:not([data-motion="running"]) *, html:not([data-motion="running"]) *::before, html:not([data-motion="running"]) *::after { animation: none !important; transition: none !important; }
  html:not([data-motion="running"]) .hero .marquee > div { animation: none !important; transform: none !important; }
  html:not([data-motion="running"]) .terminal { transform: none !important; translate: none !important; }
  html:not([data-motion="running"]) .reveal { opacity: 1 !important; transform: none !important; }
}
@media (forced-colors: active) {
  .grid-bg { display: none; }
  .hero h1 em { color: CanvasText; background: none; }
  .primary { border: 1px solid ButtonText; }
}