@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Press+Start+2P&family=Sekuya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { --bg:#000; --surface:#111; --surface-raised:#1a1a1a; --text:#fff; --muted:#a3a3a3; --border:#383838; --accent:#fff; --accent-strong:#e5e5e5; --accent-ink:#000; --grid:rgba(255,255,255,.025); --shadow:0 18px 50px rgba(0,0,0,.45); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background-color:var(--bg); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-position:center; background-size:52px 52px,52px 52px; background-attachment:fixed; font-family:"DM Mono",monospace; line-height:1.7; transition:background-color .25s,color .25s; }
a { color:inherit; }.site-header { position:sticky; top:.75rem; z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.navbar,.section,.hero-content,.site-footer { width:min(1120px,calc(100% - 3rem)); margin:0 auto; }.navbar { min-height:72px; display:flex; align-items:center; gap:1.5rem; }.logo { flex:0 0 auto; color:var(--accent); font-family:"Poppins",sans-serif; font-size:1.45rem; font-weight:650; letter-spacing:-.09em; line-height:1; text-decoration:none; transition:color .2s ease,transform .2s ease; }.logo:hover { color:var(--accent-strong); transform:translateY(-2px); }
.nav-links { display:flex; justify-content:center; flex:1; gap:.7rem; margin:0; padding:0; list-style:none; }.nav-links a { position:relative; display:inline-block; padding:.35rem .6rem; color:var(--muted); font-size:.88rem; font-weight:700; text-decoration:none; transition:color .2s ease; }.nav-links a::after { position:absolute; right:.6rem; bottom:.1rem; left:.6rem; height:2px; background:#fff; content:""; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }.nav-links a:hover,.nav-links a:focus-visible { color:#fff; }.nav-links a:hover::after,.nav-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }.social-links a:hover { color:var(--accent); }.nav-chat-button { display:inline-flex; flex:0 0 auto; align-items:center; gap:.55rem; margin-left:auto; padding:.75rem 1.25rem; color:#fff; background:color-mix(in srgb,var(--accent) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent) 60%,var(--border)); border-radius:.55rem; font-size:.9rem; font-weight:700; line-height:1.2; text-decoration:none; transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; }.nav-chat-button svg { width:1.2rem; height:1.2rem; }.nav-chat-button:hover,.nav-chat-button:focus-visible { background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent-strong); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 16%,transparent); transform:translateY(-2px); }
.hero { display:grid; min-height:75vh; align-items:center; background:none; }.hero-content { display:grid; grid-template-columns:minmax(0,1fr) clamp(13rem,28vw,21rem); align-items:center; gap:clamp(2rem,7vw,6rem); padding:5rem 0; }.hero-portrait-wrap { position:relative; justify-self:end; width:100%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; box-shadow:none; }.hero-portrait { display:block; width:100%; height:100%; border:0; border-radius:50%; object-fit:cover; object-position:50% 37%; }.eyebrow { margin:0 0 .65rem; color:var(--accent); font-family:"DM Mono",monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }h1,h2,h3,p { margin-top:0; }h1,h2,h3 { font-family:"Poppins",sans-serif; font-weight:650; }h1 { max-width:800px; margin-bottom:.8rem; font-size:clamp(2.9rem,8vw,6.5rem); line-height:.98; letter-spacing:-.055em; }h2 { margin-bottom:0; font-family:"Inter",sans-serif; font-size:clamp(2rem,5vw,3.4rem); line-height:1; letter-spacing:-.045em; }h3 { line-height:1.08; letter-spacing:-.025em; }.hero-intro { max-width:600px; color:var(--muted); font-size:clamp(.9rem,1.5vw,1rem); }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }.button { display:inline-block; padding:.8rem 1.1rem; color:#fff; background:transparent; border:1px solid var(--accent); border-radius:.5rem; font-weight:500; text-decoration:none; transition:background-color .2s ease,color .2s ease,transform .2s ease; }.button:hover { color:#000; background:#fff; transform:translateY(-2px); }.button-secondary { color:var(--text); background:transparent; border-color:var(--border); }.button-secondary:hover { color:#000; border-color:#fff; background:#fff; }
.section { padding:6rem 0; border-top:1px solid var(--border); }.section-heading { margin-bottom:2.25rem; }.about-content,.contact-section > p { max-width:720px; color:var(--muted); font-size:1.05rem; }.projects-coming-soon,.education-card { max-width:700px; padding:2rem; background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow); }.projects-coming-soon h3,.education-card h3 { margin-bottom:.6rem; }.projects-coming-soon p,.education-card p { margin-bottom:0; color:var(--muted); }
.skills-list { display:flex; flex-wrap:wrap; gap:.8rem; max-width:900px; margin:0; padding:0; list-style:none; }.skills-list li { padding:.75rem 1rem; color:#a0a0a0; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border)); border-radius:.55rem; font-family:"DM Mono",monospace; font-size:.85rem; font-weight:500; transition:transform .2s,background-color .2s; }.skills-list li:hover { transform:translateY(-4px); background:color-mix(in srgb,var(--accent) 18%,var(--surface)); }.institution { color:#a0a0a0!important; font-weight:700; }
.social-links { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:1.5rem; }.social-links a { color:var(--text); font-weight:800; text-decoration-color:var(--accent); text-underline-offset:.25rem; }.site-footer { padding:1.75rem 0; color:var(--muted); border-top:1px solid var(--border); font-size:.85rem; text-align:center; }.site-footer p { margin:0; }
.social-icon-link { display:flex; flex:0 0 4.75rem; width:4.75rem; flex-direction:column; align-items:center; gap:.35rem; padding:.65rem .5rem; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:.75rem; font-size:.72rem; line-height:1.1; text-align:center; text-decoration:none; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }.social-icon-link img { display:block; width:2.1rem; height:2.1rem; object-fit:contain; }.social-icon-link:hover { border-color:var(--accent); box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent); transform:translateY(-5px) rotate(-3deg); }
body:not(.light-theme) .social-icon-link[href*="github"] img { filter:invert(1) brightness(1.8); }

/* Motion */
.hero .eyebrow,.hero h1,.hero-intro,.hero-actions { opacity:0; animation:hero-enter .7s ease-out forwards; }.hero h1 { animation-delay:.1s; }.hero-intro { animation-delay:.22s; }.hero-actions { animation-delay:.34s; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity:1; transform:translateY(0); }.skills-list li { animation:skill-pulse 2.8s ease-in-out infinite; }.skills-list li:nth-child(2) { animation-delay:.15s; }.skills-list li:nth-child(3) { animation-delay:.3s; }.skills-list li:nth-child(4) { animation-delay:.45s; }.skills-list li:nth-child(5) { animation-delay:.6s; }
@keyframes hero-enter { to { opacity:1; transform:translateY(0); } from { opacity:0; transform:translateY(18px); } } @keyframes skill-pulse { 0%,100% { box-shadow:0 0 0 transparent; } 50% { box-shadow:0 0 18px color-mix(in srgb,var(--accent) 20%,transparent); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero .eyebrow,.hero h1,.hero-intro,.hero-actions { opacity:1; animation:none; }.reveal { opacity:1; transform:none; transition:none; }.skills-list li { animation:none; }.button:hover,.skills-list li:hover,.social-icon-link:hover { transform:none; } }
@media (max-width:700px) { .navbar { flex-wrap:wrap; padding:1rem 0; gap:.9rem; }.nav-links { order:3; flex-basis:100%; justify-content:flex-start; gap:1rem; overflow-x:auto; }.nav-chat-button { gap:.4rem; padding:.52rem .75rem; font-size:.76rem; }.nav-chat-button svg { width:1rem; height:1rem; }.hero-content { grid-template-columns:1fr; gap:2.25rem; }.hero-portrait-wrap { order:-1; justify-self:start; width:min(15rem,62vw); }.section { padding:4.5rem 0; } } @media (max-width:420px) { .navbar,.section,.hero-content,.site-footer { width:min(100% - 2rem,1120px); }.nav-links { gap:.75rem; }.nav-links a { font-size:.78rem; }.projects-coming-soon,.education-card { padding:1.4rem; } }

.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; }.project-grid > h3,.project-grid > p { display:none; }.project-card { position:relative; display:flex; min-height:30rem; flex-direction:column; justify-content:space-between; overflow:hidden; padding:1.8rem; background:linear-gradient(145deg,var(--surface),#080808); border:1px solid var(--border); border-radius:.35rem; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.project-card::before { position:absolute; inset:0 auto 0 0; width:3px; background:transparent; content:""; transition:background-color .25s ease; }.project-card:hover { border-color:#fff; box-shadow:var(--shadow); transform:translateY(-6px); }.project-card:hover::before { background:#fff; }.project-card-featured::before { background:var(--accent); }.project-code { position:absolute; top:2.8rem; left:50%; margin:0; color:color-mix(in srgb,var(--text) 5%,transparent); font-size:clamp(4.5rem,9vw,8.5rem); font-weight:800; letter-spacing:-.1em; line-height:1; transform:translateX(-50%); user-select:none; }.project-details { position:relative; z-index:1; margin-top:auto; }.project-meta { margin-bottom:.65rem; color:var(--accent); font-family:"DM Mono",monospace; font-size:.68rem; font-weight:500; letter-spacing:.1em; }.project-details h3 { margin-bottom:.7rem; font-size:1.45rem; }.project-details > p:not(.project-meta) { min-height:4.8rem; margin-bottom:1.4rem; color:var(--muted); font-family:"DM Mono",monospace; font-size:.76rem; line-height:1.7; }.project-status { color:var(--muted); font-family:"DM Mono",monospace; font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }.project-status::after { margin-left:.45rem; color:var(--accent); content:"•"; }.github-projects-link { display:flex; width:max-content; max-width:100%; align-items:center; gap:.7rem; margin:2rem auto 0; padding:.7rem 1rem; color:var(--text); border:1px solid var(--border); font-family:"DM Mono",monospace; font-size:.72rem; font-weight:500; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; transition:border-color .2s ease,color .2s ease,transform .2s ease; }.github-projects-link:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-3px); }
@media (max-width:850px) { .project-grid { grid-template-columns:1fr; }.project-card { min-height:22rem; }.project-code { font-size:7rem; } } @media (max-width:420px) { .project-card { padding:1.35rem; } }

.skills-list li { animation:none; }

.contact-quote { max-width:900px; margin:0 0 2rem; font-family:"Playfair Display",serif; font-size:clamp(3rem,6vw,5rem); font-style:italic; font-weight:500; line-height:1.05; letter-spacing:-.055em; }.quote-primary { color:var(--text); text-shadow:none; }.contact-quote strong { color:#a3a3a3; font:inherit; -webkit-text-stroke:0; text-shadow:none; }
.skills-quote { margin:0 0 2rem; font-family:"Playfair Display",serif; font-size:clamp(3rem,6vw,5rem); font-style:italic; font-weight:500; line-height:1.05; letter-spacing:-.055em; }.skills-quote span:nth-child(odd) { color:var(--text); }.skills-quote span:nth-child(even) { color:#a3a3a3; }
.intro-statement { width:min(1120px,calc(100% - 3rem)); margin:0 auto; padding:1.5rem 0 6rem; }.intro-quote { max-width:970px; margin:0; font-family:"Playfair Display",serif; font-size:clamp(3rem,6vw,5rem); font-style:italic; font-weight:500; line-height:1.05; letter-spacing:-.055em; }.intro-quote span:nth-child(odd) { color:var(--text); }.intro-quote span:nth-child(even) { color:#a3a3a3; }

/* Portrait orbit */
.hero-portrait-wrap { isolation:isolate; }
.hero-portrait-wrap::before { position:absolute; z-index:0; inset:-.8rem; border:1px solid rgba(255,255,255,.22); border-radius:50%; content:""; }
.hero-portrait-wrap::after { position:absolute; z-index:2; inset:-1.1rem; border-radius:50%; background:radial-gradient(circle at 50% 0, #fff 0 .34rem, #000 .36rem .48rem, transparent .5rem); box-shadow:0 -1.1rem 1.35rem -.65rem rgba(255,255,255,.8); content:""; pointer-events:none; animation:portrait-orbit 7s linear infinite; }
.hero-portrait { position:relative; z-index:1; }
@keyframes portrait-orbit { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) { .hero-portrait-wrap::before,.hero-portrait-wrap::after { animation:none; } }

/* Skills enter in sequence once their section reaches the viewport. */
.skills-list li { opacity:0; transform:translateY(18px) scale(.96); transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s; }
.reveal.is-visible .skills-list li { opacity:1; transform:translateY(0) scale(1); }
.reveal.is-visible .skills-list li:nth-child(1) { transition-delay:.08s; }
.reveal.is-visible .skills-list li:nth-child(2) { transition-delay:.16s; }
.reveal.is-visible .skills-list li:nth-child(3) { transition-delay:.24s; }
.reveal.is-visible .skills-list li:nth-child(4) { transition-delay:.32s; }
.reveal.is-visible .skills-list li:nth-child(5) { transition-delay:.40s; }
.skills-list li:hover { box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 18%,transparent); transition-delay:0s; }

@media (prefers-reduced-motion:reduce) { .skills-list li { opacity:1; transform:none; transition:none; } }

.hero h1 { font-family:"Anton","Archivo Black",sans-serif; font-size:clamp(3.8rem,10vw,7.5rem); font-weight:400; line-height:.78; letter-spacing:.015em; }
.hero-first-name,.hero-last-name { display:block; }
.hero-first-name { color:var(--text); font-family:inherit; text-shadow:none; }
.hero-last-name { margin-top:.12em; margin-left:.32em; color:transparent; font-family:inherit; -webkit-text-stroke:1.5px var(--text); text-shadow:none; }

/* Continuous right-to-left skills marquee */
.skills-marquee { 
  overflow: hidden; 
  width: 100%; 
  max-width: 100%; 
  display: block;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); 
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.skills-track { 
  display: flex; 
  width: max-content; 
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
  animation: skills-marquee 20s linear infinite; 
}

.skills-marquee .skills-list { 
  display: flex; 
  flex-direction: row;
  flex-wrap: nowrap; 
  gap: .8rem; 
  margin: 0; 
  padding: 0 .4rem; 
  list-style: none; 
}

.skills-marquee .skills-list li { 
  display: inline-flex; 
  flex: 0 0 auto; 
  align-items: center; 
  gap: .55rem; 
  padding: .75rem 1rem; 
  color: #a0a0a0; 
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); 
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); 
  border-radius: .55rem; 
  font-family: "DM Mono", monospace; 
  font-size: .85rem; 
  font-weight: 500; 
  white-space: nowrap;
}

.skills-marquee .skills-list li::before { 
  color: #C1A2FF;
  content: "\2022"; 
  font-size: 1.25rem; 
  line-height: 0; 
  text-shadow: none;
}

.skills-marquee .skills-list li:hover { 
  background: color-mix(in srgb, var(--accent) 18%, var(--surface)); 
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent); 
  transform: translateY(-4px); 
}

.skills-marquee:hover .skills-track { 
  animation-play-state: paused; 
}

/* Infinite seamless keyframe */
@keyframes skills-marquee {
  0% { 
    transform: translate3d(0, 0, 0); 
  }
  100% { 
    transform: translate3d(-50%, 0, 0); 
  }
}

@media (prefers-reduced-motion: reduce) { 
  .skills-track { width: auto; flex-wrap: wrap; animation: none; }
  .skills-marquee .skills-list[aria-hidden="true"] { display: none; } 
}