/* about-me — cornelcaba.com. Tokens first; nothing below uses a raw colour. */
@font-face{font-family:"0xProto";src:url(fonts/0xProto-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"0xProto";src:url(fonts/0xProto-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#050805; --panel:#0b110c; --panel-a:rgba(8,13,9,.86); --line:rgba(0,224,18,.20);
  --text:#d8ffdc; --muted:#86b890; --acc:#00e012; --acc-ink:#031306;
  --ring:rgba(0,224,18,.6); --e1:0 1px 0 rgba(0,224,18,.06); --e2:0 14px 34px rgba(0,0,0,.5);
  --ctl-h:44px; --ctl-r:10px; --ctl-fs:14px; --pad:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"0xProto","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef2ee; --panel:#ffffff; --panel-a:rgba(255,255,255,.9); --line:rgba(11,117,102,.24);
  --text:#102a1c; --muted:#476553; --acc:#0b7566; --acc-ink:#ffffff;
  --ring:rgba(11,117,102,.55); --e1:0 1px 2px rgba(16,42,28,.08); --e2:0 14px 34px rgba(16,42,28,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 var(--font);overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
.sprite{position:absolute}
.ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
#app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}
#app>main{flex:1 0 auto}

#loader{position:fixed;inset:0;z-index:3000;display:grid;place-content:center;justify-items:center;gap:10px;background:var(--bg);
  color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .6s var(--ease),visibility 0s .6s}
#loader i{display:block;width:120px;height:2px;background:var(--line);overflow:hidden;position:relative}
#loader i::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:left;animation:load 1.1s var(--ease) infinite}
@keyframes load{from{transform:scaleX(0)}60%{transform:scaleX(1)}to{transform:scaleX(1);opacity:0}}
.ready #loader{opacity:0;visibility:hidden}

/* ---------- controls: one system ---------- */
.btn,.iconbtn,.back,.seg button{min-height:var(--ctl-h);border-radius:var(--ctl-r);font-size:var(--ctl-fs);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;
  border:1px solid var(--line);background:var(--panel);transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.btn{padding:0 18px;font-weight:700;flex:0 0 auto}
.btn:active,.iconbtn:active{transform:translateY(1px)}
.btn-primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn-primary:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn-ghost:hover,.iconbtn:hover,.back:hover{border-color:var(--acc);color:var(--acc)}
.iconbtn{width:var(--ctl-h);padding:0;flex:0 0 auto}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;gap:10px;padding:12px var(--pad);
  padding-top:max(12px,env(safe-area-inset-top))}
.top{justify-content:space-between}
.back{padding:0 14px 0 12px;background:var(--panel-a);font-weight:700;letter-spacing:.06em}
.back .ic{width:22px;height:22px}
.top .iconbtn{background:var(--panel-a)}
:root[data-theme="dark"] .ic-moon,:root[data-theme="light"] .ic-sun{display:none}


/* ---------- hero ---------- */
.hero{position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;
  padding:96px var(--pad) 124px}
.hero h1{font-size:clamp(30px,5.4vw,76px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;font-weight:700;overflow-wrap:anywhere}
.mono-tag{color:var(--acc);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px}
.hero-lede{justify-self:end;max-width:30ch;color:var(--muted);font-size:13px;line-height:1.7;text-transform:uppercase;letter-spacing:.06em}
.scroll-cue{position:absolute;left:var(--pad);bottom:40px;min-height:var(--ctl-h);display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;color:var(--muted);font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;border-radius:var(--ctl-r)}
.scroll-cue:hover{color:var(--acc)}
.hero-id,.hero-lede,.scroll-cue{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.ready .hero-id,.ready .hero-lede,.ready .scroll-cue{opacity:1;transform:none}
.ready .hero-lede{transition-delay:.7s}.ready .scroll-cue{transition-delay:1s}
@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);align-content:end;gap:12px;padding-bottom:104px}
  .hero-lede{justify-self:start;max-width:36ch}
}

/* ---------- work ---------- */
.work{position:relative;padding:96px var(--pad)}
.work h2,.about h2{font-size:clamp(22px,3vw,36px);text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
.work-pin{margin-bottom:28px}
.work-count,.work-detail,.work-skip{display:none}
.work-count{color:var(--muted);font-size:12px;letter-spacing:.2em;margin-top:8px}
.pf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.pf-card{display:flex}
.pf-card[data-more]{display:none}
.show-all .pf-card[data-more]{display:flex}
.pf-card a{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-content:start;padding:16px;text-decoration:none;
  background:var(--panel-a);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e1);
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.pf-card a:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--e2)}
.pf-n{color:var(--acc);font-size:11px;letter-spacing:.14em;padding-top:3px}
.pf-t{font-weight:700;overflow-wrap:anywhere}
.pf-d{grid-column:2;color:var(--muted);font-size:13px;line-height:1.55}
.pf-more{margin-top:18px}
.show-all .pf-more{display:none}

/* desktop + WebGL: the list becomes a pinned 3D reel */
.is3d .work{padding-block:0}
.is3d .work-pin{position:sticky;top:0;height:100dvh;margin:0;display:flex;align-items:center;pointer-events:none}
.is3d .work-side{width:min(40vw,440px);pointer-events:auto}
.is3d .work-count,.is3d .work-skip{display:block}
.is3d .work-detail{display:block;margin-top:28px;padding:20px;background:var(--panel-a);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e1)}
.is3d .work-detail h3{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.is3d .work-detail p{color:var(--muted);font-size:13px;margin-top:8px;min-height:7.8em}
.work-actions{display:flex;flex-wrap:nowrap;gap:8px;margin-top:14px}
.work-actions .btn{margin-right:auto}
.is3d .work-skip{display:inline-flex;margin-top:14px}
.is3d .pf-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.is3d .pf-more{display:none}

/* ---------- about ---------- */
.about{padding:120px var(--pad) 96px}
.about-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--panel-a);border:1px solid var(--line);border-radius:14px}
.seg button{min-height:36px;min-width:44px;padding:0 14px;border-color:transparent;background:transparent;color:var(--muted);position:relative}
.seg button::after{content:"";position:absolute;inset:-4px 0}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{background:var(--acc);color:var(--acc-ink);font-weight:700}
.no-gl .seg{display:none}
.about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:stretch}
.panel{background:var(--panel-a);border:1px solid var(--line);border-radius:16px;box-shadow:var(--e1);padding:clamp(18px,2.4vw,28px)}
.about-bio{display:flex;flex-direction:column;gap:14px}
.about-bio .mono-tag,.about-xp .mono-tag,.about-skills .mono-tag{margin:0 0 4px}
.about-bio p:not(.mono-tag):not(.big){color:var(--muted)}
.big{font-size:clamp(17px,1.7vw,22px);line-height:1.45;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats li{display:flex;flex-direction:column;gap:6px;justify-content:center}
.stats b{font-size:clamp(28px,3.6vw,48px);line-height:1;color:var(--acc)}
.stats span{color:var(--muted);font-size:12.5px;line-height:1.5}
.about-xp{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.xp{align-self:stretch;display:grid;gap:0}
.xp li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.xp li:first-child{border-top:0;padding-top:0}
.xp time{color:var(--muted);font-size:12.5px;padding-top:2px}
.xp b,.xp span{display:block}
.xp span{color:var(--muted);font-size:13px}
.about-xp .btn{margin-top:auto}
.skills{display:grid;gap:0}
.skills>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.skills>div:first-child{border-top:0;padding-top:0}
.skills dt{color:var(--acc);font-size:12.5px;padding-top:2px}
.skills dd{color:var(--muted);font-size:13px}
@media (max-width:900px){.about-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.xp li,.skills>div{grid-template-columns:minmax(0,1fr);gap:2px}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- contact + footer ---------- */
.contact{min-height:78dvh;display:grid;align-content:center;justify-items:center;text-align:center;gap:18px;padding:96px var(--pad) 128px}
.contact h2{font-size:clamp(26px,5vw,64px);line-height:1.05;text-transform:uppercase;max-width:16ch;overflow-wrap:anywhere}
.contact p{color:var(--muted);max-width:46ch}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.foot{flex:none;margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:0 12px;flex-wrap:wrap;color:var(--muted);font-size:12px;
  padding:4px var(--pad) max(6px,env(safe-area-inset-bottom))}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--text);text-decoration:none}
.foot a:hover{color:var(--acc)}

@media (pointer:coarse){input,select,textarea{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal,.hero-id,.hero-lede,.scroll-cue{opacity:1;transform:none}
}

.no-gl .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url(face.webp) center/min(70vh,90vw) no-repeat;opacity:.9}
@media (max-width:480px){.contact-actions{flex-direction:column;align-self:stretch}.contact-actions .btn{width:100%}}

/* arriving from the brain: the last frame of the jump covers the page until WebGL shows the same portrait */
.from-brain #loader{display:none}
html.from-brain::before{content:"";position:fixed;inset:0;z-index:2000;background:var(--bg) center/100% 100% no-repeat;pointer-events:none;transition:opacity .5s var(--ease)}
html.from-brain.gl-ready::before{opacity:0}
html.from-brain::before{animation:fbout .5s 4s forwards}
@keyframes fbout{to{opacity:0;visibility:hidden}}

/* ---------- /datacenter ---------- */
.dc-hero{grid-template-columns:minmax(0,1fr);align-content:center}
.dc-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:860px}
.dc-index .btn{font-weight:400;background:var(--panel-a)}
.dc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;align-items:stretch;padding:24px var(--pad) 96px;max-width:1500px;margin:0 auto}
.dc-card{display:flex;flex-direction:column;gap:10px;scroll-margin-top:76px}
.dc-card h2{display:flex;align-items:center;gap:12px;font-size:clamp(18px,1.8vw,24px);line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.dc-card h2 .ic{width:26px;height:26px;color:var(--acc)}
.dc-card h3{font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-top:10px}
.dc-lede,.dc-note{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;max-width:100%;overflow-wrap:anywhere}
.dc-ul{display:grid;gap:6px;color:var(--muted);font-size:13.5px}
.dc-ul li{position:relative;padding-left:18px}
.dc-ul li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:2px;background:var(--acc)}
.dc-cta{margin-top:auto;align-self:flex-start}
.dc-note+.dc-cta,.dc-ul+.dc-cta{margin-top:auto}
@media (max-width:480px){.dc-index .btn{flex:1 1 auto}}