/* ---------- Tokens ---------- */
:root {
  --bg: #1d1d1d;
  --side: #181818;
  --ink: #f2f2f2;
  --muted: #a3a3a3;
  --dim: #6b6b6b;
  --accent: #1fe07a;        /* headings, timeline, borders */
  --accent-deep: #0d7a40;   /* 3D extrusion */
  --doodle: #2fb46a;        /* handwritten code tags */
  --hot: #ff6a2b;           /* skills cloud, secondary chips */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-line: rgba(31, 224, 122, 0.22);
  --side-w: 72px;
  --font: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --hand: "La Belle Aurore", "Segoe Script", "Comic Sans MS", cursive;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.65;
  padding-left: var(--side-w);
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--accent); color: #111; padding: .5rem 1rem; }
.skip:focus { left: calc(var(--side-w) + .5rem); }
.muted { color: var(--muted); font-weight: 400; }

/* ---------- Starfield ---------- */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }

/* ---------- Handwritten code-tag doodles ---------- */
.doodle, .tag { font-family: var(--hand); color: var(--doodle); font-size: 1.05rem; line-height: 1.2; user-select: none; }
.doodle { position: fixed; z-index: 2; left: calc(var(--side-w) + 2rem); pointer-events: none; opacity: .85; }
.doodle-top { top: 1.25rem; }
.doodle-bottom { bottom: 1rem; left: calc(var(--side-w) + 1rem); }
.tag { display: block; margin-left: -1.4rem; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 20;
  background: var(--side); display: flex; flex-direction: column; align-items: center;
  border-right: 1px solid #222;
}
.logo { display: flex; flex-direction: column; align-items: center; padding: 1rem 0 .5rem; text-decoration: none; }
.logo-mark {
  font-weight: 900; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; color: var(--accent);
  text-shadow: 1px 1px 0 var(--accent-deep), 2px 2px 0 var(--accent-deep), 3px 3px 0 #0a5a30;
}
.logo-name { color: var(--ink); font-size: .85rem; margin-top: .25rem; font-weight: 600; }
.nav, .social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.sidebar nav { flex: 1; display: flex; align-items: center; }
.nav { gap: .35rem; }
.social { gap: .5rem; padding-bottom: 1.25rem; }
.nav a, .social a {
  position: relative; display: grid; place-items: center; width: 48px; height: 44px; color: #4d4d4d; border-radius: 6px;
}
.nav svg, .social svg { width: 22px; height: 22px; fill: currentColor; transition: color .2s; }
.social svg { width: 19px; height: 19px; }
.nav a:hover, .social a:hover, .nav a.is-active { color: var(--accent); }
.nav a.is-active { color: #ffd700; }
.nav a::after {
  content: attr(data-tip); position: absolute; left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%);
  background: #111; color: var(--accent); font-size: .8rem; padding: .2rem .6rem; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.nav a:hover::after, .nav a:focus-visible::after { opacity: 1; }

/* ---------- Panels ---------- */
.panel {
  min-height: 100vh; display: grid; align-items: center;
  padding: 6rem clamp(1.5rem, 6vw, 6rem) 5rem clamp(2.5rem, 7vw, 7rem);
  gap: 3rem;
}
.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.text p { color: var(--ink); max-width: 36rem; margin-top: 1rem; font-size: 1rem; }

h1, h2 { font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(2.6rem, 5.5vw, 4.25rem); color: var(--accent); line-height: 1.05; }

/* Letter-by-letter "rubber band" */
[data-letters] .word { display: inline-block; white-space: nowrap; }
[data-letters] .ch { display: inline-block; transition: color .2s; }
[data-letters] .ch.space { width: .28em; }
[data-letters] .ch:hover { color: var(--accent); }
h2[data-letters] .ch:hover { color: #fff; }
.ch.rubber { animation: rubber .8s ease both; }
@keyframes rubber {
  0% { transform: scale3d(1,1,1); } 30% { transform: scale3d(1.25,.75,1); }
  40% { transform: scale3d(.75,1.25,1); } 50% { transform: scale3d(1.15,.85,1); }
  65% { transform: scale3d(.95,1.05,1); } 75% { transform: scale3d(1.05,.95,1); }
  100% { transform: scale3d(1,1,1); }
}

/* ---------- Hero ---------- */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.06; color: #fff; }
.hero h1 .line { display: block; }
.js .bounce-in .ch { opacity: 0; transform: translateY(-.6em) scale(.6); animation: drop .55s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes drop { to { opacity: 1; transform: none; } }
.sub { margin-top: 1.25rem; color: #8d8d8d; font-size: .95rem; letter-spacing: .14em; max-width: 34rem; }
.btn-outline {
  display: inline-block; margin-top: 2.5rem; padding: .85rem 1.6rem; border: 1px solid var(--accent); border-radius: 4px;
  color: var(--accent); background: transparent; font: 600 .95rem/1 var(--font); letter-spacing: .2em; text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s;
}
.btn-outline:hover { background: var(--accent); color: #111; }

.hero-art { display: grid; place-items: center; perspective: 1200px; min-height: 22rem; }
.mono3d {
  position: relative; transform-style: preserve-3d;
  font-weight: 900; font-size: clamp(9rem, 22vw, 20rem); line-height: .8; letter-spacing: -.06em;
  animation: sway 9s ease-in-out infinite;
}
.mono3d span { position: absolute; inset: 0; display: block; white-space: nowrap; }
.mono3d .front { position: relative; color: var(--accent); }
@keyframes sway { 0%,100% { transform: rotateY(-32deg) rotateX(6deg); } 50% { transform: rotateY(28deg) rotateX(-4deg); } }

/* ---------- About: rotating cube ---------- */
.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; max-width: 36rem; }
.creds h3 { color: var(--accent); font-size: 1rem; font-weight: 700; }
.creds ul { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
.creds li + li { margin-top: .25rem; }
.visual { display: grid; place-items: center; min-height: 24rem; }
.cube-wrap { --cube: 15rem; perspective: 1000px; width: var(--cube); height: var(--cube); }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin 16s linear infinite; }
.face {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(40,40,40,.88); border: 1px solid rgba(255,255,255,.35);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 22px rgba(31,224,122,.35), inset 0 0 26px rgba(255,255,255,.08);
  color: var(--accent); font-weight: 800; font-size: 1.45rem; letter-spacing: -.01em;
}
.f1 { transform: translateZ(calc(var(--cube) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); color: #ff4d4d; }
.f3 { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); color: #fff; }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); color: #ffd23f; }
.f5 { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); color: #b28dff; }
.f6 { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); color: #4fc3ff; }
@keyframes spin {
  0% { transform: rotateX(-20deg) rotateY(0); }
  50% { transform: rotateX(20deg) rotateY(180deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* ---------- Experience timeline ---------- */
.timeline-wrap, .cards-wrap {
  max-height: 78vh; overflow-y: auto; padding-right: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--accent) #2a2a2a;
}
.timeline-wrap::-webkit-scrollbar, .cards-wrap::-webkit-scrollbar { width: 6px; }
.timeline-wrap::-webkit-scrollbar-track, .cards-wrap::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 3px; }
.timeline-wrap::-webkit-scrollbar-thumb, .cards-wrap::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.timeline { list-style: none; margin: 0; padding: .5rem 0 .5rem 2.5rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: .7rem; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(31,224,122,.6); }
.tl-item { position: relative; }
.tl-item + .tl-item { margin-top: 2rem; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-2.5rem + .7rem - 11px); top: 1.4rem; width: 24px; height: 24px; border-radius: 50%;
  background: #1d1d1d; border: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(31,224,122,.18), 0 0 14px rgba(31,224,122,.6);
}
.tl-item::after { content: ""; position: absolute; left: calc(-2.5rem + .7rem - 3px); top: calc(1.4rem + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tl-card, .card {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 10px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.tl-card { padding: 1.4rem 1.6rem; }
.tl-card h3 { color: var(--accent); font-size: 1.2rem; font-weight: 800; }
.tl-role { color: #fff; margin-top: .2rem; font-size: .98rem; }
.tl-date { color: var(--accent); font-size: .88rem; margin-top: .6rem; }
.tl-place { color: var(--muted); font-style: italic; font-size: .85rem; }
.tl-card ul, .card ul.feat { list-style: none; padding: 0; margin: .9rem 0 0; }
.tl-card li { position: relative; padding-left: 1.2rem; color: #d6d6d6; font-size: .92rem; }
.tl-card li + li { margin-top: .5rem; }
.tl-card li::before { content: ""; position: absolute; left: 0; top: .5em; border: 5px solid transparent; border-left: 7px solid var(--accent); }

/* ---------- Projects ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; max-width: 36rem; }
.pill {
  background: rgba(31,224,122,.08); color: #d0f5df; border: 1px solid rgba(31,224,122,.25); border-radius: 999px;
  padding: .45rem 1rem; font: 500 .88rem/1 var(--font); cursor: pointer; transition: background .2s, color .2s;
}
.pill:hover { background: rgba(31,224,122,.18); }
.pill.is-on { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; padding: .25rem; }
.card { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; transition: transform .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); border-color: rgba(31,224,122,.55); }
.card[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(31,224,122,.15); color: var(--accent); font-weight: 600; }
.chip-alt { background: rgba(255,106,43,.16); color: var(--hot); }
.card h3 { font-size: 1.12rem; font-weight: 800; color: #fff; line-height: 1.25; }
.org { color: var(--accent); font-size: .85rem; }
.card > p:not(.chips):not(.org) { color: #c9c9c9; font-size: .9rem; }
.techs { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .4rem; }
.techs li { font-size: .75rem; color: #bdbdbd; background: rgba(255,255,255,.07); padding: .2rem .55rem; border-radius: 999px; }

/* ---------- Skills sphere ---------- */
.sphere { list-style: none; margin: 0; padding: 0; position: relative; width: min(34rem, 100%); aspect-ratio: 1; }
.sphere li {
  position: absolute; left: 50%; top: 50%; white-space: nowrap; font-weight: 700; color: var(--hot);
  will-change: transform, opacity; cursor: default; transition: color .2s;
}
.sphere li:hover { color: #fff; }
.no-js-sphere .sphere { display: flex; flex-wrap: wrap; gap: .5rem 1rem; aspect-ratio: auto; }
.no-js-sphere .sphere li { position: static; }

/* ---------- Contact ---------- */
.contact { align-items: stretch; padding-right: 0; padding-block: 0; }
.contact .text { align-self: center; padding-block: 6rem 4rem; }
.form { margin-top: 1.75rem; max-width: 36rem; display: grid; gap: .75rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form input, .form textarea {
  width: 100%; background: #2b2b2b; border: 1px solid transparent; color: var(--ink); border-radius: 2px;
  padding: .9rem 1rem; font: 400 1rem/1.4 var(--font); resize: vertical;
}
.form input::placeholder, .form textarea::placeholder { color: #8a8a8a; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form .btn-outline { margin-top: .25rem; justify-self: end; border-color: var(--hot); color: var(--hot); }
.form .btn-outline:hover { background: var(--hot); color: #111; }
.form-msg { min-height: 1.4em; font-size: .9rem; color: var(--hot); margin: 0; }
.map-wrap { position: relative; min-height: 100vh; }
#map { position: absolute; inset: 0; background: #2a2a2a; }
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.7); }
.map-card {
  position: absolute; z-index: 500; top: 2rem; left: 2rem; background: rgba(0,0,0,.85); color: #fff;
  padding: 1rem 1.25rem; border-radius: 4px; font-size: .95rem; line-height: 1.5; border-left: 3px solid var(--accent);
}
.map-email { display: inline-block; margin-top: .4rem; }

.footer { position: relative; padding: 1.5rem clamp(2.5rem, 7vw, 7rem) 3.5rem; color: var(--dim); font-size: .85rem; border-top: 1px solid #2a2a2a; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --side-w: 0px; }
  body { padding-bottom: 64px; }
  .sidebar {
    inset: auto 0 0 0; width: 100%; height: 64px; flex-direction: row; justify-content: center;
    border-right: 0; border-top: 1px solid #262626;
  }
  .logo, .social { display: none; }
  .nav { flex: 0 1 auto; flex-direction: row; margin: 0; gap: .25rem; }
  .nav a::after { display: none; }
  .doodle { display: none; }
  .tag { margin-left: 0; }
  .panel, .hero, .split { grid-template-columns: 1fr; min-height: auto; padding: 4.5rem 1.5rem 3rem; }
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-art { min-height: 14rem; order: -1; }
  .mono3d { font-size: 9rem; }
  .visual { min-height: 18rem; }
  .cube-wrap { --cube: 10.5rem; }
  .face { font-size: 1.05rem; }
  .sidebar nav { flex: 0 1 auto; }
  .timeline-wrap, .cards-wrap { max-height: none; overflow: visible; padding-right: 0; }
  .contact { padding: 0; }
  .contact .text { padding: 4.5rem 1.5rem 2rem; }
  .map-wrap { min-height: 22rem; }
  .form .row, .creds { grid-template-columns: 1fr; }
  .footer { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mono3d { animation: none; transform: rotateY(-22deg); }
  .cube { animation: none; transform: rotateX(-18deg) rotateY(-30deg); }
  .js .bounce-in .ch { animation: none; opacity: 1; transform: none; }
  .ch.rubber { animation: none; }
}