/* ============================================================
   Carlos Dias Jr. — portfolio
   ============================================================ */

:root{
  --bg:#0b0f14;
  --bg-alt:#0e141b;
  --panel:#111922;
  --panel-2:#151f2a;
  --line:#1e2b38;
  --line-2:#2a3b4c;
  --tx:#c6d4e1;
  --tx-hi:#eaf2fa;
  --tx-dim:#7d8fa1;
  --tx-faint:#5a6b7b;
  --acc:#4ea1ff;
  --acc-dim:#2b6fc0;
  --acc-soft:rgba(78,161,255,.12);
  --grn:#3fb950;
  --amb:#d9a441;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.30);
  --r:10px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="light"]{
  --bg:#fdfdfb;
  --bg-alt:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#f7f9fb;
  --line:#e2e8ef;
  --line-2:#cfd9e3;
  --tx:#2a3743;
  --tx-hi:#0d151d;
  --tx-dim:#5c6c7b;
  --tx-faint:#8496a5;
  --acc:#0d6ad4;
  --acc-dim:#0d6ad4;
  --acc-soft:rgba(13,106,212,.09);
  --grn:#1a7f37;
  --amb:#9a6700;
  --shadow:0 1px 2px rgba(20,40,60,.06), 0 8px 26px rgba(20,40,60,.07);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:74px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{font-family:var(--mono)}
.dim{color:var(--tx-faint)}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--tx-hi); line-height:1.2; margin:0}
strong,b{color:var(--tx-hi); font-weight:600}
em{color:var(--tx-dim)}

.wrap{width:min(1140px, 100% - 3rem); margin-inline:auto}
@media (max-width:640px){ .wrap{width:calc(100% - 2rem)} }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acc); color:#fff; padding:.6rem 1rem; border-radius:0 0 6px 0;
}
.skip:focus{left:0}

/* ---------- language switching ----------
   Hide only the inactive language. Elements keep whatever display their own
   rules give them, so a .lang element can also be a block, a grid item, etc. */
html[data-lang="pt"] .lang.en,
html[data-lang="en"] .lang.pt{display:none !important}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:1.5rem; height:60px}

.brand{display:flex; align-items:center; gap:.6rem; color:var(--tx-hi); font-weight:600}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:7px; background:linear-gradient(145deg,var(--acc),var(--acc-dim));
  color:#fff; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:-.5px;
}
.brand-txt{font-family:var(--mono); font-size:14.5px}
.cursor{color:var(--acc); animation:blink 1.15s steps(2,start) infinite}
@keyframes blink{to{opacity:0}}
@media (prefers-reduced-motion:reduce){ .cursor{animation:none} }

.nav{display:flex; gap:1.5rem; margin-left:auto; font-size:14px}
.nav a{color:var(--tx-dim); font-weight:500}
.nav a:hover{color:var(--tx-hi); text-decoration:none}
@media (max-width:720px){ .nav{display:none} }

.toggles{display:flex; gap:.4rem; margin-left:auto}
@media (min-width:721px){ .toggles{margin-left:1.4rem} }
.tgl{
  display:grid; place-items:center; min-width:34px; height:30px; padding:0 .5rem;
  border:1px solid var(--line); border-radius:7px;
  background:var(--panel); color:var(--tx-dim); cursor:pointer;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.4px;
  transition:.16s;
}
.tgl:hover{color:var(--tx-hi); border-color:var(--line-2); background:var(--panel-2)}
.ico-moon{display:none}
html[data-theme="light"] .ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:block}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:5.5rem 0 4.5rem; overflow:hidden}
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.5;
  mask-image:radial-gradient(ellipse 80% 62% at 30% 24%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 30% 24%, #000 0%, transparent 78%);
}
.hero-in{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:3.5rem; align-items:center;
}

.portrait{position:relative; margin:0; width:clamp(230px, 26vw, 310px)}
.portrait::before{
  content:""; position:absolute; inset:14px -14px -14px 14px; z-index:0;
  border:1px solid var(--acc); border-radius:18px; opacity:.55;
}
.portrait img{
  position:relative; z-index:1; display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;
  border-radius:18px; border:1px solid var(--line-2); box-shadow:var(--shadow);
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:2rem}
  .portrait{order:-1; width:132px}
  .portrait::before{display:none}
  .portrait img{aspect-ratio:1; border-radius:50%; object-position:50% 28%}
}

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:12.5px; color:var(--tx-dim); letter-spacing:.02em;
  padding:.34rem .8rem .34rem .7rem; margin:0 0 1.6rem;
  border:1px solid var(--line); border-radius:999px; background:var(--panel);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--grn); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--grn) 20%, transparent);
}

.hero h1{
  font-size:clamp(2.6rem, 7.5vw, 4.6rem);
  font-weight:700; letter-spacing:-.035em; margin:0 0 .7rem;
  background:linear-gradient(160deg, var(--tx-hi) 20%, var(--tx-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.roles{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:13px; color:var(--acc); margin:0 0 1.7rem; letter-spacing:.01em;
}
.roles i{color:var(--tx-faint); font-style:normal}

.lede{max-width:60ch; font-size:clamp(1rem, 2.1vw, 1.145rem); color:var(--tx); margin:0 0 2.2rem}

.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.5rem}
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.66rem 1.15rem; border-radius:8px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--tx-hi);
  font-size:14px; font-weight:500; transition:.16s;
}
.btn:hover{background:var(--panel-2); border-color:var(--acc); text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--acc); border-color:var(--acc); color:#fff}
.btn-primary:hover{background:var(--acc); filter:brightness(1.12); border-color:var(--acc)}
html[data-theme="light"] .btn-primary{color:#fff}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:4.6rem 0; border-top:1px solid var(--line)}
.sec-alt{background:var(--bg-alt)}

.sec-h{
  display:flex; align-items:baseline; gap:.85rem;
  font-size:clamp(1.5rem,3.4vw,2rem); font-weight:650; letter-spacing:-.022em;
  margin:0 0 .6rem;
}
.num{color:var(--acc); font-size:.62em; font-weight:700; letter-spacing:.05em}
.sec-sub{color:var(--tx-dim); margin:0 0 2.4rem; max-width:62ch; font-size:15px}
.sec-h + .two-col, .sec-h + .cards{margin-top:2.2rem}

.two-col{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:2.6rem}
@media (max-width:900px){ .two-col{grid-template-columns:1fr; gap:2rem} }

.prose p{margin:0 0 1.05rem; max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose h4{
  font-size:12px; font-family:var(--mono); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--acc);
  margin:2rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.prose h4:first-child{margin-top:0}

/* ---------- side panels ---------- */
.side{display:flex; flex-direction:column; gap:1rem}
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:1.25rem;
}
.panel-h{
  font-size:11.5px; color:var(--tx-faint); letter-spacing:.05em;
  margin:0 0 .95rem;
}
.tags{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0}
.tags li{
  font-family:var(--mono); font-size:11.5px; color:var(--tx-dim);
  padding:.25rem .6rem; border:1px solid var(--line); border-radius:5px;
  background:var(--panel-2);
}
.links{list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.8rem}
.links li{display:flex; flex-direction:column; gap:.1rem}
.links .k{font-family:var(--mono); font-size:11.5px; color:var(--acc); letter-spacing:.04em}
.links .v{font-size:13.5px; color:var(--tx-dim); line-height:1.4}
.panel-link{font-size:12.5px; display:inline-block}

/* ============================================================
   APP CARDS
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1.4rem}

.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  color:inherit; transition:.2s ease;
}
.card:hover{
  text-decoration:none; transform:translateY(-4px);
  border-color:var(--acc); box-shadow:var(--shadow);
}
@media (prefers-reduced-motion:reduce){ .card:hover{transform:none} }

.card-vis{
  height:184px; display:grid; place-items:center; padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--acc-soft), transparent 62%),
    var(--panel-2);
}
.card-vis svg{width:100%; height:100%; max-height:148px}

/* ladder art — energised wires in green, like the app's own simulation view */
.card-vis-ladder .rail{stroke:var(--tx-faint); stroke-width:2.6; stroke-linecap:round}
.card-vis-ladder .w{stroke:var(--tx-dim); stroke-width:2; fill:none; stroke-linecap:round}
.card-vis-ladder .w.on{stroke:var(--grn)}
.card-vis-ladder .flow{
  stroke:var(--tx-hi); stroke-width:2; fill:none; stroke-linecap:round; opacity:.7;
  stroke-dasharray:.1 11; animation:flow 1.1s linear infinite;
}
@keyframes flow{to{stroke-dashoffset:-11.1}}
.card-vis-ladder .lbl{font-family:var(--mono); font-size:8.5px; fill:var(--tx-dim); text-anchor:middle}
.card-vis-ladder .lbl-hi{fill:var(--tx-hi); font-weight:700}
.card-vis-ladder .ton-track{fill:var(--line-2)}
.card-vis-ladder .ton-bar{
  fill:var(--grn); transform-box:fill-box; transform-origin:left;
  animation:ton 4s linear infinite;
}
@keyframes ton{0%{transform:scaleX(0)} 70%,94%{transform:scaleX(1)} 94.1%,100%{transform:scaleX(0)}}
.card-vis-ladder .t-out{animation:ton-out 4s linear infinite}
@keyframes ton-out{0%,69.9%{stroke:var(--tx-dim)} 70%,94%{stroke:var(--grn)} 94.1%,100%{stroke:var(--tx-dim)}}
.card-vis-ladder .tank{fill:none; stroke:var(--tx-dim); stroke-width:2}
.card-vis-ladder .tick{stroke:var(--tx-faint); stroke-width:1.6}
.card-vis-ladder .liquid{
  fill:var(--acc); opacity:.32; transform-box:fill-box; transform-origin:bottom;
  animation:fill 6s ease-in-out infinite alternate;
}
@keyframes fill{from{transform:scaleY(.2)} to{transform:scaleY(.85)}}
.card-vis-ladder .pipe{stroke:var(--acc); stroke-width:2.2; fill:none; stroke-linejoin:round}
.card-vis-ladder .pipe-flow{
  stroke:var(--tx-hi); stroke-width:2; fill:none; stroke-linecap:round; opacity:.6;
  stroke-dasharray:.1 8; animation:pipe-flow .9s linear infinite;
}
@keyframes pipe-flow{to{stroke-dashoffset:-8.1}}
.card-vis-ladder .pump{fill:var(--panel-2); stroke:var(--grn); stroke-width:2}
.card-vis-ladder .pump-in{fill:var(--grn)}
.card:hover .card-vis-ladder .on,
.card:hover .card-vis-ladder .pump{filter:drop-shadow(0 0 4px var(--grn))}
@media (prefers-reduced-motion:reduce){
  .card-vis-ladder .flow,.card-vis-ladder .pipe-flow{display:none}
  .card-vis-ladder .ton-bar,.card-vis-ladder .t-out,.card-vis-ladder .liquid{animation:none}
  .card-vis-ladder .t-out{stroke:var(--grn)}
  .card-vis-ladder .liquid{transform:scaleY(.6)}
}

/* pneumatic art */
.card-vis-pneu .pneu rect{fill:none; stroke:var(--tx-dim); stroke-width:2.2}
.card-vis-pneu .pneu line{stroke:var(--tx-dim); stroke-width:2.2; stroke-linecap:round}
.card-vis-pneu .piston{fill:var(--tx-dim); stroke:none}
.card-vis-pneu .rod{stroke:var(--tx-faint)}
.card-vis-pneu .vsym{stroke:var(--tx-faint); stroke-width:1.6; fill:none}
.card-vis-pneu .pipe{stroke:var(--acc); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.card-vis-pneu .air{fill:var(--grn)}
.card:hover .card-vis-pneu .piston{fill:var(--acc)}
.card:hover .card-vis-pneu .pipe{filter:drop-shadow(0 0 5px var(--acc))}

.card-body{padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1}
.card-tag{font-size:11px; color:var(--tx-faint); letter-spacing:.05em; margin:0 0 .55rem}
.card h3{font-size:1.35rem; letter-spacing:-.02em; margin:0 0 .6rem}
.card-body p{margin:0 0 1.3rem; color:var(--tx-dim); font-size:14.5px; line-height:1.6}
.mod{
  font-family:var(--mono); font-size:.58em; font-weight:700; vertical-align:.35em;
  color:var(--amb); border:1px solid currentColor; border-radius:4px;
  padding:.1em .38em; letter-spacing:.06em; margin-left:.15em;
}
.card-go{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-size:12.5px; font-weight:700; color:var(--acc); letter-spacing:.02em;
}
.card-go svg{transition:transform .18s}
.card:hover .card-go svg{transform:translateX(4px)}

/* ============================================================
   FEATURE LISTS
   ============================================================ */
.feat{list-style:none; padding:0; margin:0}
.feat li{
  padding:.85rem 0 .9rem 0; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--tx-dim); line-height:1.6;
}
.feat li:last-child{border-bottom:0}
/* only the leading label is a block — <b> used for emphasis inside the text stays inline */
.feat li > b{display:block; color:var(--tx-hi); font-size:14px; margin-bottom:.2rem}
.feat-check li{position:relative; padding-left:1.7rem}
.feat-check li::before{
  content:"✓"; position:absolute; left:0; top:.85rem;
  color:var(--grn); font-weight:700; font-size:13px; font-family:var(--mono);
}

/* ============================================================
   RESEARCH REPOS
   ============================================================ */
.repos{display:flex; flex-direction:column; gap:.75rem}
.repo{
  display:block; padding:1rem 1.15rem; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); transition:.16s; color:inherit;
}
.repo:hover{border-color:var(--acc); text-decoration:none; background:var(--panel-2)}
.repo-n{display:flex; align-items:center; gap:.6rem; font-size:13.5px; color:var(--acc); font-weight:500}
.repo-d{display:block; margin-top:.4rem; font-size:13px; color:var(--tx-dim); line-height:1.55}
.lg{
  font-size:10px; font-weight:700; letter-spacing:.04em; padding:.1rem .42rem;
  border-radius:20px; border:1px solid currentColor;
}
.lg-rust{color:#e07b53}
.lg-verilog{color:#b2b7f8}
.lg-css{color:#a06ee1}

/* ============================================================
   SPACE
   ============================================================ */
.space-top{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:2.6rem; align-items:center; margin:2rem 0 2.4rem;
}
@media (max-width:900px){ .space-top{grid-template-columns:1fr; gap:1.6rem} }

.facts{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.facts li{background:var(--panel); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.2rem}
.facts b{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.15rem; color:var(--acc); letter-spacing:-.01em;
}
.facts li > span{font-size:12.5px; color:var(--tx-dim); line-height:1.45}

.space-card{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.space-card-img{position:relative; margin:0; min-height:340px; border-right:1px solid var(--line)}
.space-card-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 72%;
}
.space-card-img figcaption{
  position:absolute; left:.8rem; bottom:.8rem; right:.8rem; width:max-content; max-width:calc(100% - 1.6rem);
  padding:.35rem .65rem; border-radius:6px; font-size:11px; letter-spacing:.03em;
  color:#eaf2fa; background:rgba(11,15,20,.72); backdrop-filter:blur(6px);
}
.space-card-body{padding:1.8rem 2rem}
.space-card-body h3{font-size:clamp(1.35rem,2.6vw,1.65rem); letter-spacing:-.02em; margin:0 0 .9rem}
.space-card-body > p{margin:0 0 1rem; font-size:15px}
.space-card-body .feat{border-top:1px solid var(--line)}
@media (max-width:900px){
  .space-card{grid-template-columns:1fr}
  .space-card-img{min-height:0; aspect-ratio:4/3; border-right:0; border-bottom:1px solid var(--line)}
  .space-card-img img{object-position:50% 66%}
  .space-card-body{padding:1.4rem 1.3rem}
}

.space-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:1.4rem; margin-top:1.4rem; align-items:stretch;
}
@media (max-width:900px){ .space-row{grid-template-columns:1fr} }

.photo{
  margin:0; overflow:hidden; border-radius:14px; display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--panel);
}
/* the image does not size the row: the stacked competition list beside it does */
.photo-fill{position:relative; flex:1; min-height:300px}
.photo-fill img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%}
@media (max-width:900px){ .photo-fill{min-height:0; aspect-ratio:4/3} }
.photo figcaption{
  padding:.7rem 1rem; font-size:11.5px; color:var(--tx-faint); letter-spacing:.03em;
  border-top:1px solid var(--line); background:var(--panel-2);
}
.space-row .comp-stack{grid-template-columns:1fr; margin-top:0}
.comp-stack .comp-i{display:flex; flex-direction:column; justify-content:center}

.yr{
  color:var(--grn); font-size:.9em; border:1px solid currentColor; border-radius:4px;
  padding:0 .35em; margin-left:.3em;
}
.comp{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:2rem;
}
.comp-i{background:var(--panel); padding:1.2rem 1.3rem}
.comp-i p:first-child{
  color:var(--acc); font-size:12.5px; font-weight:700; letter-spacing:.05em; margin:0 0 .5rem;
}
.comp-i p{margin:0; font-size:13.5px; color:var(--tx-dim); line-height:1.6}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; margin-top:1.6rem;
  padding:1.5rem 1.6rem; border:1px solid var(--line); border-radius:14px; background:var(--panel);
}
.contact p{margin:0; max-width:52ch; color:var(--tx-dim); font-size:15px}
.contact-mail{margin-left:auto}
.contact-mail .mono{font-size:13.5px}
@media (max-width:640px){
  .contact-mail{margin-left:0; width:100%; justify-content:center}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line); padding:2.4rem 0; background:var(--bg-alt)}
.foot-in{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start}
.foot p{margin:0; font-size:13px; color:var(--tx-faint)}
.foot-n{color:var(--tx-hi) !important; font-size:14px !important; margin-bottom:.3rem !important}
.foot-l{display:flex; flex-wrap:wrap; gap:1.3rem; margin-left:auto; font-size:12.5px}
.foot-l a{color:var(--tx-dim)}
.foot-l a:hover{color:var(--acc)}