:root{
  --bg:#050508;--ink:#f4f4f6;--muted:#9a9aa4;--dim:#5f5f68;
  --line:#20202a;--line2:#31313d;--accent:#4a6cff;--accent-soft:#7f97ff;
  --panel:rgba(10,11,16,.82);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
.mono{font-family:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;}

#stars{position:fixed;inset:0;z-index:0;display:block;}
#scene{position:fixed;inset:0;z-index:10;pointer-events:none;}

/* ---------- top bar: name + icons, one line, no box ---------- */
#topbar{position:fixed;top:16px;left:24px;z-index:70;display:flex;align-items:center;gap:16px;}
#topbar .brand{font-size:15px;font-weight:600;letter-spacing:1px;color:var(--ink);white-space:nowrap;}
#topbar .brand .dot{color:var(--accent);}
#social{display:flex;gap:12px;align-items:center;}
#social a{width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);transition:.18s;}
#social a:hover{color:var(--accent-soft);filter:drop-shadow(0 0 8px rgba(127,139,255,.7));transform:translateY(-1px);}
#social svg{width:19px;height:19px;fill:currentColor;}
#sound{width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;color:var(--dim);transition:.18s;}
#sound:hover{color:var(--accent-soft);filter:drop-shadow(0 0 8px rgba(127,139,255,.7));transform:translateY(-1px);}
#sound svg{width:19px;height:19px;fill:currentColor;}
#sound.off{color:#6b6b78;}

/* ---------- intro overlay ---------- */
#intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 60%,rgba(74,108,255,.05),rgba(5,5,8,0) 60%);pointer-events:none;}
#intro .intro-block{pointer-events:none;}
#introActions.show,#introActions.show *{pointer-events:auto;}
#introMsg{font-size:clamp(28px,6vw,58px);font-weight:600;letter-spacing:-1px;text-align:center;
  max-width:90vw;line-height:1.15;transition:opacity .5s ease;pointer-events:none;}
#introMsg.count{font-size:clamp(90px,22vw,220px);font-weight:700;letter-spacing:-4px;
  color:var(--accent-soft);text-shadow:0 0 60px rgba(74,108,255,.4);}
#introMsg.liftoff{color:#fff;text-shadow:0 0 80px rgba(74,108,255,.7);letter-spacing:2px;}
#introMsg.fade-out{opacity:0;}
#introMsg.typing::after{content:"▌";color:var(--accent-soft);margin-left:2px;animation:blink 1s steps(1) infinite;}

/* intro sub-actions (repeat/abort buttons + connect links shown over starfield) */
#introActions{margin-top:34px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap;align-items:center;
  opacity:0;transition:opacity .5s;pointer-events:none;}
#introActions.show{opacity:1;pointer-events:auto;}
.intro-block{display:flex;flex-direction:column;align-items:center;}

/* text buttons — plain text that glows on hover, no box */
.txt-btn{font-size:15px;letter-spacing:.5px;color:var(--muted);background:none;border:none;
  cursor:pointer;padding:4px 2px;text-decoration:none;transition:color .18s, text-shadow .18s;font-family:inherit;}
.txt-btn:hover{color:#fff;text-shadow:0 0 14px rgba(127,139,255,.85);}
.txt-btn.accent{color:var(--accent-soft);}
.txt-btn.accent:hover{color:#fff;text-shadow:0 0 16px rgba(74,108,255,.95);}

#skip{position:fixed;bottom:26px;right:28px;z-index:60;font-size:12px;letter-spacing:1.5px;
  color:var(--dim);background:none;border:none;cursor:pointer;transition:color .18s,text-shadow .18s;font-family:inherit;}
#skip:hover{color:#fff;text-shadow:0 0 12px rgba(127,139,255,.8);}
@keyframes blink{50%{opacity:0;}}

/* ---------- flight HUD ---------- */
#hud{position:fixed;top:16px;right:0;z-index:20;display:flex;justify-content:flex-end;
  padding:2px 26px;font-size:12px;letter-spacing:1.2px;color:var(--muted);opacity:0;transition:opacity .6s;}
#hud > span:first-child{display:none;} /* name now lives in #topbar */
#hud.show{opacity:1;}
#hud .live{color:#3ad07a;}
#alt{color:var(--accent-soft);}

.sep-note{position:fixed;top:44%;left:50%;transform:translate(-50%,-50%);z-index:22;
  font-size:13px;letter-spacing:2px;color:var(--accent-soft);opacity:0;pointer-events:none;
  text-shadow:0 0 30px rgba(74,108,255,.6);text-align:center;}
.sep-note.flash{animation:flash 1.2s ease;}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-40%);}25%{opacity:1;transform:translate(-50%,-50%);}75%{opacity:1;}100%{opacity:0;}}

/* ---------- star -> window connecting line ---------- */
#starLine{position:fixed;inset:0;z-index:47;pointer-events:none;opacity:0;transition:opacity .4s;}
#starLine.show{opacity:1;}
#starLineSeg{stroke:rgba(150,175,255,.9);stroke-width:1.4;
  filter:drop-shadow(0 0 6px rgba(120,150,255,.9));
  stroke-dasharray:6 7;stroke-linecap:round;
  animation:beamflow 1s linear infinite;}
@keyframes beamflow{to{stroke-dashoffset:-26;}}

/* ---------- info window ---------- */
#winScrim{position:fixed;inset:0;z-index:45;background:rgba(4,4,7,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .35s;}
#winScrim.open{opacity:1;pointer-events:auto;}
#win{position:fixed;z-index:50;left:66%;top:50%;
  width:min(560px,86vw);max-height:80vh;
  transform:translate(-50%,-50%) scale(.4);opacity:0;transform-origin:center;
  background:var(--panel);border:.5px solid var(--line2);border-radius:16px;
  backdrop-filter:blur(16px);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(74,108,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
  display:flex;flex-direction:column;overflow:hidden;}
#win.open{transform:translate(-50%,-50%) scale(1);opacity:1;}
.win-head{display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:.5px solid var(--line);flex-shrink:0;gap:10px;}
.win-head .tag{font-size:11px;letter-spacing:2px;color:var(--accent);}
.win-head .sep{font-size:11px;letter-spacing:1px;color:var(--dim);margin-left:auto;}
.win-close{width:30px;height:30px;border-radius:50%;border:.5px solid var(--line2);background:transparent;
  color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0;}
.win-close:hover{color:#fff;border-color:var(--accent);}
.win-hint{flex-shrink:0;padding:9px 22px;font-size:11px;letter-spacing:.5px;
  color:var(--dim);background:rgba(255,255,255,.02);border-bottom:.5px solid var(--line);
  display:flex;align-items:center;gap:6px;}
.win-hint .x{color:var(--accent);font-size:12px;animation:hintPulse 1.8s ease-in-out infinite;}
@keyframes hintPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.win-body{padding:26px 28px 30px;overflow-y:auto;flex:1;}
.win-body h2{font-size:clamp(22px,4vw,30px);font-weight:600;letter-spacing:-.5px;margin-bottom:16px;min-height:34px;}
.win-body .type-line{font-size:15px;color:var(--muted);line-height:1.75;white-space:pre-wrap;}
.caret::after{content:"▌";color:var(--accent-soft);animation:blink 1s steps(1) infinite;}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;}
.reveal.in{opacity:1;transform:none;}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.tag2{border:.5px solid var(--line2);color:var(--muted);padding:4px 12px;border-radius:999px;font-size:12px;}
.row{border-left:.5px solid var(--line2);padding:0 0 16px 16px;position:relative;margin-top:4px;}
.row:last-child{padding-bottom:0;}
.row::before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.row .role{font-size:15px;font-weight:500;}
.row .meta{font-size:12px;color:var(--dim);margin:2px 0 5px;}
.row .d{font-size:13px;color:var(--muted);line-height:1.6;}
.sh{font-size:11px;letter-spacing:1.5px;color:var(--dim);margin:14px 0 8px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:12px;padding:6px 12px;border-radius:8px;border:.5px solid var(--line);background:rgba(255,255,255,.03);}
.certs{list-style:none;margin-top:6px;}
.certs li{font-size:14px;color:var(--muted);padding:9px 0;border-bottom:.5px solid var(--line);display:flex;gap:10px;align-items:baseline;}
.certs li:last-child{border-bottom:none;}
.certs li b{color:var(--ink);font-weight:500;}
.certs .yr{color:var(--accent);font-size:12px;margin-left:auto;}

/* connect window */
.connect-list{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.connect-list a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  border:.5px solid var(--line);border-radius:12px;padding:16px 18px;transition:.15s;}
.connect-list a:hover{border-color:var(--accent);background:rgba(74,108,255,.06);transform:translateY(-2px);}
.connect-list .ci{width:26px;height:26px;flex-shrink:0;color:var(--accent-soft);display:flex;align-items:center;justify-content:center;}
.connect-list .ci svg{width:24px;height:24px;fill:currentColor;}
.connect-list .cv{font-size:15px;font-weight:500;}
.connect-list .ck{font-size:12px;color:var(--dim);margin-left:auto;letter-spacing:1px;}

/* projects switcher */
.proj-view{margin-top:6px;}
.proj-card{border:.5px solid var(--line);border-radius:14px;padding:22px;background:rgba(255,255,255,.02);min-height:150px;}
.proj-card .pt{font-size:11px;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;}
.proj-card h3{font-size:19px;font-weight:600;margin-bottom:10px;}
.proj-card p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:16px;}
.proj-card .stk{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.proj-card .stk span{font-size:11px;color:var(--dim);border:.5px solid var(--line2);padding:2px 8px;border-radius:6px;}
.proj-card a{font-size:13px;color:var(--accent);text-decoration:none;}
.proj-card a:hover{text-decoration:underline;}
.proj-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.proj-nav button{background:transparent;border:.5px solid var(--line2);color:var(--ink);
  border-radius:9px;padding:8px 16px;font-size:13px;cursor:pointer;transition:.15s;}
.proj-nav button:hover{border-color:var(--accent);color:var(--accent-soft);}
.proj-nav .dots{display:flex;gap:7px;}
.proj-nav .dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:.2s;font-style:normal;}
.proj-nav .dots i.on{background:var(--accent);width:20px;border-radius:4px;}

#resume{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:60;
  font-size:12px;letter-spacing:1.5px;color:var(--dim);opacity:0;transition:opacity .4s;pointer-events:none;}
#resume.show{opacity:1;}

/* ============================================================
   MOBILE / SMALL SCREENS
   The info window is offset to left:66% on desktop to leave room
   for the star-to-window beam. On phones there's no room, so the
   window centers, widens, and the beam is hidden.
   ============================================================ */
@media (max-width:720px){
  #topbar{top:12px;left:14px;gap:12px;}
  #topbar .brand{font-size:13px;letter-spacing:.5px;}
  #social{gap:11px;}

  #hud{top:12px;padding:2px 14px;font-size:11px;letter-spacing:.8px;}

  /* center + widen the window; hide the connecting beam (no space) */
  #win{left:50%;width:92vw;max-height:82vh;}
  #starLine{display:none;}
  .win-body{padding:22px 20px 26px;}
  .win-head{padding:14px 18px;}
  .win-hint{padding:8px 18px;font-size:10px;}

  #skip{bottom:18px;right:16px;}
  #resume{bottom:18px;font-size:11px;width:90vw;text-align:center;}

  #introActions{gap:22px;margin-top:26px;}
}

/* very narrow phones */
@media (max-width:420px){
  #topbar .brand{font-size:12px;}
  #win{width:94vw;max-height:84vh;}
  .win-body .type-line{font-size:14px;}
}

/* short/landscape phones: keep the window scrollable, not clipped */
@media (max-height:520px){
  #win{max-height:90vh;top:50%;}
  .win-body{padding-top:18px;padding-bottom:18px;}
}

/* ============================================================
   REDUCED MOTION
   Respect visitors who ask the OS to minimise animation.
   JS also reads this (via matchMedia) to skip auto-flight and
   drop the visitor straight onto the first waypoint.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* stop the looping decorative pulses/beams outright */
  .win-hint .x,#starLineSeg,#introMsg.typing::after,.caret::after{animation:none !important;}
  #starLineSeg{stroke-dasharray:none;}
  .win-hint .x{opacity:1;}
}