/* ==========================================================================
   Christian B. Famador — portfolio styles
   --------------------------------------------------------------------------
   The page is styled like a network / terminal dashboard.
   Sections below follow the order they appear on the page:

     1. Design tokens (colours for dark and light mode)
     2. Base elements
     3. Background layers (network canvas, 3D shapes, vignette)
     4. Boot screen
     5. Header and navigation
     6. Shared building blocks (headings, panels, buttons, tags)
     7. Hero (name, photo, cyborg lens, 3D globe)
     8. About (text, "sysinfo" box, education, certificates)
     9. Skills
    10. Experience
    11. Capstone project
    12. Contact (form, contact cards, social links)
    13. Pop-up window
    14. Back-to-top button and footer
    15. AI assistant (chat window)
    16. Small screens and reduced motion
   ========================================================================== */


/* 1. Design tokens --------------------------------------------------------
   Every colour lives here. Dark mode is the default; light mode swaps the
   same names, so the rest of the file never hard-codes theme colours.
   --net is an "r, g, b" triple so canvases can add their own transparency. */
:root, :root[data-theme="dark"] {
  --bg: #05080f; --bg2: #0a1120; --panel: rgba(12, 20, 36, .72); --panel-solid: #0c1424;
  --line: rgba(120, 160, 210, .16); --line-strong: rgba(120, 170, 230, .32);
  --ink: #e6f1ff; --muted: #8ea3c0; --faint: #5b6f8c;
  --primary: #22d3ee; --primary-ink: #04121a; --primary-soft: rgba(34, 211, 238, .12);
  --ok: #34d399; --warn: #fbbf24; --violet: #a78bfa;
  --net: 34, 211, 238; --grid: rgba(34, 211, 238, .045);
  --glow: 0 0 0 1px rgba(34,211,238,.25), 0 10px 40px -12px rgba(34,211,238,.35);
  --shadow: 0 20px 60px -24px rgba(0,0,0,.7);
}
:root[data-theme="light"] {
  --bg: #eef4fb; --bg2: #e3ecf7; --panel: rgba(255, 255, 255, .78); --panel-solid: #ffffff;
  --line: rgba(20, 60, 110, .14); --line-strong: rgba(20, 70, 130, .28);
  --ink: #0b1b33; --muted: #4b5d78; --faint: #7f8fa6;
  --primary: #0284c7; --primary-ink: #ffffff; --primary-soft: rgba(2, 132, 199, .1);
  --ok: #059669; --warn: #b45309; --violet: #7c3aed;
  --net: 2, 132, 199; --grid: rgba(2, 132, 199, .07);
  --glow: 0 0 0 1px rgba(2,132,199,.22), 0 10px 30px -14px rgba(2,132,199,.35);
  --shadow: 0 20px 50px -28px rgba(15,40,80,.35);
}


/* 2. Base elements -------------------------------------------------------- */
* { box-sizing: border-box; }
/* Never let anything widen the page on phones (that makes the browser open
   zoomed in), and stop Chrome from enlarging text on its own. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%;
  /* faint blueprint grid behind everything */
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-attachment: fixed; transition: background-color .4s, color .4s;
}
::selection { background: var(--primary); color: var(--primary-ink); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }


/* 3. Background layers ----------------------------------------------------
   Two full-screen canvases drawn by script.js, plus a soft colour glow. */
#net { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }      /* moving network of nodes */
#shapes { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }   /* floating 3D wireframes */
.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 700px at 70% -10%, var(--primary-soft), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(167,139,250,.08), transparent 60%); }


/* 4. Boot screen ----------------------------------------------------------
   A short terminal-style intro that covers the page, then fades away. */
#boot { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; transition: opacity .5s ease, visibility .5s; }
#boot.done { opacity: 0; visibility: hidden; }
.boot-box { width: min(560px, 100% - 40px); font: 500 14px/1.9 "JetBrains Mono", monospace; color: var(--muted); }
.boot-box .ok { color: var(--ok); }
.boot-box .hi { color: var(--primary); }
.boot-bar { height: 3px; margin-top: 18px; background: var(--line); border-radius: 3px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--primary); box-shadow: 0 0 12px var(--primary); transition: width .5s ease; }
.boot-skip { position: absolute; bottom: 28px; right: 28px; background: none; border: 1px solid var(--line-strong); color: var(--muted); font: 500 12px "JetBrains Mono", monospace; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
/* blinking block cursor used after typed text */
.caret::after { content: "▋"; color: var(--primary); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }


/* 5. Header and navigation ------------------------------------------------ */
header.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; }
.bar { display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px "JetBrains Mono", monospace; letter-spacing: .02em; }
/* the "CF" logo is drawn as a little chip with pins on top and bottom */
.chip { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--line-strong); font-size: 12px; }
.chip::before, .chip::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 6px); }
.chip::before { top: -4px; }
.chip::after { bottom: -4px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--muted); font: 500 13px "JetBrains Mono", monospace; padding: 8px 11px; border-radius: 9px; transition: color .2s, background .2s; }
.nav a:hover { color: var(--ink); background: var(--primary-soft); }
.nav a.active { color: var(--primary); background: var(--primary-soft); }
/* "open to work" badge with a pulsing green light */
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 12px "JetBrains Mono", monospace; color: var(--ok); padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: led 2s infinite; }
@keyframes led { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
/* the theme button shows a moon in dark mode and a sun in light mode */
[data-theme="dark"] .sun, [data-theme="light"] .moon { display: none; }
.burger { display: none; }   /* menu button, only on small screens (see section 16) */


/* 6. Shared building blocks ----------------------------------------------- */
section { position: relative; padding: 110px 0 40px; }
/* small "01 · about" label above each section title */
.eyebrow { font: 500 13px "JetBrains Mono", monospace; color: var(--primary); letter-spacing: .04em; display: inline-flex; gap: 10px; align-items: center; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--primary); }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.02em; margin: 0; line-height: 1.1; }
h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 12px 0 14px; }
h2 .grad { background: linear-gradient(90deg, var(--primary), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--muted); max-width: 640px; margin: 0 0 40px; }
/* frosted-glass card used all over the page */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); }
/* glowing corner brackets on a few highlighted panels */
.corners::before, .corners::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--primary); opacity: .7; pointer-events: none; }
.corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.corners::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
/* fake terminal title bar with three coloured dots */
.term-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 12px "JetBrains Mono", monospace; color: var(--faint); }
.term-head .d { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.term-head .d:nth-child(2) { background: #fbbf24; }
.term-head .d:nth-child(3) { background: #34d399; }
.term-head span:last-child { margin-left: auto; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 12px "JetBrains Mono", monospace; color: var(--muted); padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font: 500 12.5px Inter, sans-serif; color: var(--ink); padding: 6px 11px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); }
/* rounded square holding a line icon */
.node-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--line-strong); }
.node-ico svg { width: 20px; height: 20px; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 14px "JetBrains Mono", monospace; padding: 13px 20px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--panel); cursor: pointer; transition: transform .2s, box-shadow .25s, border-color .2s, background .2s; }
.btn:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--glow); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .6; cursor: wait; }
/* Boxes fade in and rise a little as they scroll into view. script.js adds
   the "in" class. It is an animation, not a transition, so each box keeps
   its own hover effects afterwards. */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: fadeUp .6s ease-out backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }
/* a light that sweeps across the top edge of some cards */
@keyframes sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }


/* 7. Hero ---------------------------------------------------------------- */
#home { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.hero { display: grid; grid-template-columns: 1.25fr .9fr; gap: 56px; align-items: center; }
.prompt { font: 500 14px "JetBrains Mono", monospace; color: var(--muted); margin-bottom: 18px; }
.prompt b { color: var(--ok); font-weight: 500; }
.prompt i { color: var(--primary); font-style: normal; }
.hero h1 { font-size: clamp(32px, 4.3vw, 54px); font-weight: 700; }
.hero h1 .last { display: inline; background: linear-gradient(90deg, var(--ink) 0%, var(--primary) 60%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the line that types and erases job titles */
.roles { font: 500 clamp(16px, 2.2vw, 20px) "JetBrains Mono", monospace; color: var(--primary); margin: 18px 0; min-height: 1.6em; }
.roles::before { content: "> "; color: var(--faint); }
.hero p.intro { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 0 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 11px "JetBrains Mono", monospace; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.scroll-hint i { width: 1px; height: 38px; background: linear-gradient(var(--primary), transparent); animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Photo, framed like a chip with pins on all four sides and a scan line */
.portrait { position: relative; width: min(360px, 100%); margin-inline: auto; aspect-ratio: 1; }
.pins { position: absolute; inset: -14px; pointer-events: none; }
.pins::before, .pins::after { content: ""; position: absolute; left: 34px; right: 34px; height: 10px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 16px); }
.pins::before { top: 0; }
.pins::after { bottom: 0; }
.pins i::before, .pins i::after { content: ""; position: absolute; top: 34px; bottom: 34px; width: 10px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 16px); }
.pins i::before { left: 0; }
.pins i::after { right: 0; }
.frame { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--glow); background: var(--bg2);
  cursor: crosshair;
  touch-action: none; }   /* on phones a finger on the photo drags the lens instead of scrolling the page */
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(var(--net), .32) 50%, transparent 52%); background-size: 100% 220%; animation: scan 4.5s linear infinite; pointer-events: none; }
@keyframes scan { from { background-position: 0 -120%; } to { background-position: 0 120%; } }
.frame-label { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px; font: 500 11px "JetBrains Mono", monospace; color: #e6f1ff; padding: 8px 10px; border-radius: 10px; background: rgba(5,8,15,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.frame-label .v { color: #34d399; }
.hover-hint { position: absolute; top: 12px; right: 12px; font: 500 10px "JetBrains Mono", monospace; color: #e6f1ff; padding: 4px 8px; border-radius: 6px; background: rgba(5,8,15,.62); transition: opacity .3s; pointer-events: none; }

/* Cyborg lens: while the pointer is over the photo, a small circle ("lens")
   follows it and shows the cyborg picture underneath, drawn on .holo.
   script.js sets --mx / --my (lens centre) and --lr (lens radius). */
.holo, .hud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.frame.cyborg .holo { opacity: 1;
  -webkit-mask-image: radial-gradient(circle var(--lr, 58px) at var(--mx, 50%) var(--my, 35%), #000 78%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr, 58px) at var(--mx, 50%) var(--my, 35%), #000 78%, transparent 100%); }
.hud { transition: opacity .25s; }
.frame.cyborg .hud { opacity: 1; }
.frame.cyborg .hover-hint { opacity: 0; }
.lens { position: absolute; left: var(--mx, 50%); top: var(--my, 35%); width: calc(var(--lr, 58px) * 2); height: calc(var(--lr, 58px) * 2); transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,.85); box-shadow: 0 0 18px rgba(34,211,238,.55), inset 0 0 16px rgba(34,211,238,.35); }
/* short crosshair ticks on the lens edge */
.lens::before, .lens::after { content: ""; position: absolute; background: rgba(34,211,238,.9); }
.lens::before { left: 50%; top: -8px; bottom: -8px; width: 1px; transform: translateX(-50%); -webkit-mask: linear-gradient(#000 0 10px, transparent 10px calc(100% - 10px), #000 calc(100% - 10px)); mask: linear-gradient(#000 0 10px, transparent 10px calc(100% - 10px), #000 calc(100% - 10px)); }
.lens::after { top: 50%; left: -8px; right: -8px; height: 1px; transform: translateY(-50%); -webkit-mask: linear-gradient(90deg, #000 0 10px, transparent 10px calc(100% - 10px), #000 calc(100% - 10px)); mask: linear-gradient(90deg, #000 0 10px, transparent 10px calc(100% - 10px), #000 calc(100% - 10px)); }
.lens i { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font: 600 9.5px "JetBrains Mono", monospace; color: #22d3ee; white-space: nowrap; text-shadow: 0 0 6px #000; font-style: normal; letter-spacing: .08em; }
.hud-tag { position: absolute; top: 12px; left: 12px; font: 600 10.5px "JetBrains Mono", monospace; letter-spacing: .1em; color: #22d3ee; padding: 4px 8px; border: 1px solid rgba(34,211,238,.55); border-radius: 6px; background: rgba(2,6,13,.72); }
.hud-tag::before { content: "● "; color: #f43f5e; animation: blink 1s steps(1) infinite; }

/* 3D network globe that turns behind the photo (drawn by script.js) */
.globe { position: absolute; left: -32%; top: -32%; width: 164%; height: 164%; pointer-events: none; z-index: 0; }
.portrait .frame, .portrait .pins { z-index: 1; }


/* 8. About --------------------------------------------------------------- */
/* text on the left, "sysinfo" box on the right, vertically centred */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center; }
.about p { color: var(--muted); margin: 0 0 16px; font-size: 16.5px; }
.about p b { color: var(--ink); font-weight: 600; }
/* "sysinfo" box, styled like the neofetch command */
.sysinfo { overflow: hidden; min-width: 0; max-width: 100%; }
.sys-body { padding: 18px 20px 22px; font: 13.5px/1.9 "JetBrains Mono", monospace; overflow-wrap: anywhere; }
.sys-body .cmd { color: var(--muted); }
.sys-body .cmd b { color: var(--ok); font-weight: 500; }
.sys-body dl { margin: 12px 0 0; }
.sys-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.sys-row dt { color: var(--primary); }
.sys-row dd { margin: 0; color: var(--ink); }
.swatches { display: flex; gap: 6px; margin-top: 14px; }
.swatches i { width: 22px; height: 12px; border-radius: 3px; }

/* Education (timeline) and certificates, side by side */
.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
.cred-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cred-head h3 { font-size: clamp(20px, 2.6vw, 24px); }
.edu-list { position: relative; display: grid; gap: 16px; padding-left: 30px; }
.edu-list::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--primary), var(--line-strong)); }
.edu-item { position: relative; padding: 18px 20px; }
.edu-item::before { content: ""; position: absolute; left: -28px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary); }
.edu-item.now::before { background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.edu-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font: 500 12px "JetBrains Mono", monospace; color: var(--primary); }
.st { padding: 2px 8px; border-radius: 6px; border: 1px solid currentColor; font-size: 11px; color: var(--ok); }
.st.now { color: var(--warn); }
.edu-item h4, .cert h4 { margin: 8px 0 4px; font: 600 18px/1.25 "Space Grotesk", sans-serif; letter-spacing: -.01em; }
.edu-item p, .cert p { margin: 0; color: var(--muted); font-size: 14.5px; }
.cert-list { display: grid; gap: 14px; }
.cert { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; transition: transform .3s, border-color .3s, box-shadow .3s; }
.cert:hover { transform: translateX(4px); border-color: var(--primary); box-shadow: var(--glow); }
.cert h4 { margin-top: 0; font-size: 16.5px; }
.cert .when { display: block; margin-top: 6px; font: 500 12px "JetBrains Mono", monospace; color: var(--primary); }
/* certificates with a picture: preview beside the card on hover, full size in the pop-up */
.cert[data-cert] { cursor: zoom-in; }
.cert[data-cert]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.cert[data-cert] .when::after { content: "  ·  view certificate"; color: var(--faint); }
.cert-peek { position: fixed; z-index: 45; width: 300px; padding: 8px 8px 0; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--primary); box-shadow: var(--glow), var(--shadow); pointer-events: none; opacity: 0; transform: scale(.94); transform-origin: var(--from, right) center; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.cert-peek.on { opacity: 1; transform: none; }
.cert-peek img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.cert-peek span { display: block; padding: 7px 2px 8px; font: 500 11px "JetBrains Mono", monospace; color: var(--faint); text-align: center; }
.modal-box.wide { width: min(720px, 100%); }
.cert-full { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 230px); border-radius: 10px; background: #fff; }


/* 9. Skills ---------------------------------------------------------------
   Three colour-coded panels of icon "pills". Each panel sets --c (an
   "r, g, b" triple) and everything inside uses that colour. */
.g-hw { --c: 34, 211, 238; }        /* Technical   — cyan   */
.g-net { --c: 167, 139, 250; }      /* Tools       — violet */
.g-people { --c: 251, 191, 36; }    /* Soft skills — amber  */
:root[data-theme="light"] .g-hw { --c: 2, 132, 199; }
:root[data-theme="light"] .g-net { --c: 124, 58, 237; }
:root[data-theme="light"] .g-people { --c: 180, 83, 9; }
.sk-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sk-group { overflow: hidden; padding: 26px 24px 24px; transition: transform .35s, border-color .35s, box-shadow .35s;
  background-image: radial-gradient(420px 200px at 100% 0%, rgba(var(--c), .14), transparent 70%); }
.sk-group:hover { transform: translateY(-4px); border-color: rgba(var(--c), .6); box-shadow: 0 0 0 1px rgba(var(--c), .25), 0 18px 50px -18px rgba(var(--c), .45); }
.sk-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--c), 1), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: sweep 3.2s ease-in-out infinite; }
.sk-group.g-wide { grid-column: 1 / -1; }
/* big faded icon ("watermark") in the corner of each panel */
.sk-group .wm { position: absolute; right: -18px; bottom: -22px; width: 150px; height: 150px; color: rgba(var(--c), .07); pointer-events: none; transition: transform .6s, color .6s; }
.sk-group .wm svg { width: 100%; height: 100%; stroke-width: 1.2; }
.sk-group:hover .wm { transform: rotate(-8deg) scale(1.06); color: rgba(var(--c), .12); }
.sk-head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sk-head .node-ico { width: 48px; height: 48px; border-radius: 14px; color: rgb(var(--c)); background: rgba(var(--c), .12); border-color: rgba(var(--c), .35); box-shadow: 0 8px 24px -10px rgba(var(--c), .7); }
.sk-head .node-ico svg { width: 23px; height: 23px; }
.sk-head h3 { font-size: 19px; }
.sk-head .tagline { display: block; margin-top: 3px; font: 500 12px "JetBrains Mono", monospace; color: rgb(var(--c)); }
.sk-head .count { margin-left: auto; align-self: flex-start; font: 600 11px "JetBrains Mono", monospace; color: rgb(var(--c)); border: 1px solid rgba(var(--c), .4); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pills { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); font: 500 14px Inter, sans-serif; transition: border-color .2s, transform .2s, box-shadow .25s, background .2s; }
.pill svg { width: 28px; height: 28px; flex: none; padding: 6px; border-radius: 50%; color: rgb(var(--c)); background: rgba(var(--c), .14); transition: transform .3s; }
.pill:hover { border-color: rgba(var(--c), .7); background: rgba(var(--c), .08); transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(var(--c), .7); }
.pill:hover svg { transform: rotate(-12deg) scale(1.08); }
/* pills pop in one after another once their panel scrolls into view */
.sk-group .pill { opacity: 0; transform: translateY(10px) scale(.96); }
.sk-group.in .pill { animation: pillin .5s cubic-bezier(.2,.7,.2,1) forwards; }
.sk-group.in .pill:nth-child(2) { animation-delay: .07s; }
.sk-group.in .pill:nth-child(3) { animation-delay: .14s; }
.sk-group.in .pill:nth-child(4) { animation-delay: .21s; }
.sk-group.in .pill:nth-child(5) { animation-delay: .28s; }
.sk-group.in .pill:nth-child(6) { animation-delay: .35s; }
.sk-group.in .pill:nth-child(7) { animation-delay: .42s; }
.sk-group.in .pill:nth-child(8) { animation-delay: .49s; }
@keyframes pillin { to { opacity: 1; transform: none; } }
.sk-group.in .pill:hover { transform: translateY(-2px); }


/* 10. Experience ----------------------------------------------------------
   Jobs are "hops" on a vertical line, like the output of traceroute, with
   a glowing packet that travels down the line. */
.route-cmd { font: 500 14px "JetBrains Mono", monospace; color: var(--muted); margin-bottom: 26px; overflow-wrap: anywhere; }
.route-cmd b { color: var(--ok); font-weight: 500; }
.route { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 64px; }
.route::before { content: ""; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--line-strong), var(--primary)); }
.route .packet { position: absolute; left: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px var(--primary); animation: travel 5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes travel { 0% { top: 6px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 16px); opacity: 0; } }
.hop { padding: 24px 26px; min-width: 0; overflow-wrap: anywhere; }
.hop-n { position: absolute; left: -64px; top: 22px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 700 14px "JetBrains Mono", monospace; color: var(--primary); background: var(--panel-solid); border: 1px solid var(--line-strong); }
.hop-top { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.hop h3 { font-size: 22px; }
.hop .org { color: var(--primary); font-weight: 600; margin: 4px 0 0; font-size: 15px; }
.ms { font: 500 12px "JetBrains Mono", monospace; color: var(--muted); white-space: nowrap; }   /* dates and duration */
.ms b { color: var(--ok); font-weight: 500; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.facts .tag { color: var(--ink); }
.facts .tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.hop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hop li { position: relative; padding-left: 22px; color: var(--muted); }
.hop li::before { content: "▸"; position: absolute; left: 0; color: var(--primary); }


/* 11. Capstone project ----------------------------------------------------
   One card with a soft glow, a big faded antenna and four highlight boxes. */
.project { --c: 34, 211, 238; overflow: hidden; padding: 34px 36px; max-width: 980px;
  background-image: radial-gradient(520px 260px at 100% 0%, rgba(var(--c), .14), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(167, 139, 250, .10), transparent 70%); }
:root[data-theme="light"] .project { --c: 2, 132, 199; }
.project .p-bar { position: absolute; left: 0; top: 28px; bottom: 28px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--primary), var(--violet)); }
.project .sweep { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--c), 1), transparent) no-repeat; background-size: 50% 100%; animation: sweep 3.2s ease-in-out infinite; }
.project .wm { position: absolute; right: -10px; top: -6px; width: 210px; height: 210px; color: rgba(var(--c), .07); pointer-events: none; }
.project .wm svg { width: 100%; height: 100%; }
.project > *:not(.p-bar):not(.sweep):not(.wm) { position: relative; }   /* keep the text above the decorations */
.p-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.p-meta .tag:first-child { color: var(--primary); }
.project h3 { font-size: clamp(22px, 3vw, 30px); margin: 16px 0 8px; max-width: 760px; }
.project .org { color: var(--primary); font-weight: 600; margin: 0 0 14px; }
.project p { color: var(--muted); margin: 0 0 24px; font-size: 16px; max-width: 760px; }
.p-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.p-spec { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .25s, transform .25s, box-shadow .25s; }
.p-spec:hover { border-color: rgba(var(--c), .6); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(var(--c), .8); }
.p-spec svg { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 10px; color: rgb(var(--c)); background: rgba(var(--c), .12); }
.p-spec b { display: block; font: 600 15px/1.2 "Space Grotesk", sans-serif; color: var(--ink); }
.p-spec small { display: block; margin-top: 2px; font: 500 11px "JetBrains Mono", monospace; color: var(--faint); }


/* 12. Contact ------------------------------------------------------------ */
.contact { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
/* the form looks like a terminal command with flags (--name, --email, …) */
.cform { overflow: hidden; }
.cform form { padding: 20px 22px 24px; font-family: "JetBrains Mono", monospace; }
.field { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.field label { color: var(--primary); font-size: 13px; padding-top: 3px; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; color: var(--ink); font: 14px "JetBrains Mono", monospace; outline: none; resize: vertical; padding: 2px 0; }
.field textarea { min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field.bad label { color: #f87171; }
.cform .send { margin-top: 18px; }
.cform .out { margin-top: 14px; min-height: 1.4em; font-size: 13px; color: var(--muted); }
.cform .out.ok { color: var(--ok); }
.cform .out.err { color: #f87171; }
.honey { display: none; }   /* hidden field that only spam bots fill in */
/* contact cards on the right: email, mobile, location */
.links { display: grid; gap: 14px; }
.linkcard { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
button.linkcard { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
a.linkcard:hover, button.linkcard:hover { transform: translateX(4px); border-color: var(--primary); box-shadow: var(--glow); }
.linkcard b { display: block; font: 600 15px "Space Grotesk", sans-serif; }
.linkcard small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.linkcard .arr { margin-left: auto; color: var(--primary); font-family: "JetBrains Mono", monospace; }
/* social links row */
.socials { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 16px 20px; }
.soc-cmd { font: 500 13px "JetBrains Mono", monospace; color: var(--muted); white-space: nowrap; }
.soc-cmd b { color: var(--ok); font-weight: 500; }
.soc-list { display: flex; flex-wrap: wrap; gap: 10px; }
.soc { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink); cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s, transform .2s, box-shadow .25s; }
.soc svg { width: 20px; height: 20px; }
.soc:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--glow); }
/* small tooltip with the network name, from the data-tip attribute */
.soc::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; font: 500 11px "JetBrains Mono", monospace; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line-strong); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.soc:hover::after, .soc:focus-visible::after { opacity: 1; transform: translateX(-50%); }


/* 13. Pop-up window -------------------------------------------------------
   Used for the email / mobile / Discord cards and for the "message sent"
   animation of the contact form. */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(2, 5, 10, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s ease; }
.modal-box { position: relative; width: min(460px, 100%); background: var(--panel-solid); animation: pop .3s cubic-bezier(.2,.8,.2,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.m-x { margin-left: auto; background: none; border: 0; color: var(--muted); font: 20px/1 Inter, sans-serif; padding: 2px 7px; border-radius: 6px; cursor: pointer; }
.m-x:hover { color: var(--ink); background: var(--primary-soft); }
.m-body { padding: 22px 24px 24px; max-height: calc(100svh - 100px); overflow-y: auto; }
.m-head { display: flex; align-items: center; gap: 16px; }
.m-head .node-ico { width: 52px; height: 52px; border-radius: 14px; }
.m-head .node-ico svg { width: 24px; height: 24px; }
.m-label { font: 500 11.5px "JetBrains Mono", monospace; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.m-value { font: 600 clamp(17px, 4.6vw, 22px) "JetBrains Mono", monospace; color: var(--ink); overflow-wrap: anywhere; }
.m-note { color: var(--muted); font-size: 14.5px; margin: 16px 0 0; }
.m-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.m-actions .btn { padding: 11px 16px; font-size: 13px; }
/* "message sent" animation: a packet travels from "you" to "inbox" */
.tx { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; }
.tx-node { flex: none; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: var(--bg2); color: var(--primary); font: 500 11px "JetBrains Mono", monospace; }
.tx-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.tx-line i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary); animation: txgo 1s ease-in-out infinite; }
@keyframes txgo { to { left: calc(100% - 10px); } }
.tx.done .tx-line i { animation: none; left: calc(100% - 10px); background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.tx.done .tx-node:last-child { color: var(--ok); border-color: var(--ok); }
.tx.fail .tx-line i { animation: none; left: calc(50% - 5px); background: #f87171; box-shadow: 0 0 12px #f87171; }
.tx-log { font: 13px/1.8 "JetBrains Mono", monospace; color: var(--muted); overflow-wrap: anywhere; }
.tx-log .ok { color: var(--ok); }
.tx-log .err { color: #f87171; }
.tx-res { font: 700 21px "Space Grotesk", sans-serif; margin-top: 14px; }
.tx-res.ok { color: var(--ok); }
.tx-res.err { color: #f87171; }


/* 14. Back-to-top button and footer --------------------------------------- */
/* a small button that sits above the assistant button once you scroll down */
.totop { position: fixed; right: 20px; bottom: 80px; z-index: 59; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--muted); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s, color .2s, border-color .2s; }
.totop svg { width: 16px; height: 16px; }
.totop.show { opacity: .75; transform: none; pointer-events: auto; }
.totop.show:hover { opacity: 1; color: var(--primary); border-color: var(--primary); }
body.t-open .totop { opacity: 0; pointer-events: none; }   /* hidden while the chat window is open */
footer { padding: 70px 0 110px; text-align: center; color: var(--faint); font: 500 12.5px "JetBrains Mono", monospace; }
footer a { color: var(--primary); text-decoration: none; }


/* 15. AI assistant (chat window) ------------------------------------------ */
.tfab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--primary); font: 700 14px "JetBrains Mono", monospace; cursor: pointer; box-shadow: var(--glow), var(--shadow); transition: transform .2s; }
.tfab:hover { transform: translateY(-2px); }
.tfab .lbl { color: var(--ink); font-weight: 500; font-size: 13px; }
.tfab .ping { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); animation: led 2s infinite; }
.tpanel { position: fixed; right: 20px; bottom: 84px; z-index: 61; padding: 0; width: min(360px, calc(100% - 24px)); height: min(440px, calc(100svh - 140px)); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; transition: opacity .25s, transform .25s; background: var(--panel-solid); }
.tpanel.open { opacity: 1; transform: none; pointer-events: auto; }
.tlog { flex: 1; overflow-y: auto; padding: 14px; font: 12.5px/1.65 "JetBrains Mono", monospace; }
.tlog .me { color: var(--ink); }
.tlog .me::before { content: "visitor@cf:~$ "; color: var(--ok); }
.tlog .bot { color: var(--muted); margin: 4px 0 14px; white-space: pre-wrap; }
.tlog .bot b { color: var(--ink); }
.tlog .k { color: var(--primary); }
.tlog .bot a { color: var(--primary); }
.tlog .wait::after { content: "processing"; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: "processing"; } 25% { content: "processing."; } 50% { content: "processing.."; } 75% { content: "processing..."; } }
.tform { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 12px 16px; font: 13px "JetBrains Mono", monospace; }
.tform span { color: var(--ok); white-space: nowrap; }
.tform input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: inherit; }
.tnote { padding: 0 16px 10px; font: 11px "JetBrains Mono", monospace; color: var(--faint); }


/* 16. Small screens and reduced motion ------------------------------------ */
@media (max-width: 980px) {
  .status { display: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 50px; }
  .portrait { width: min(270px, 76%); order: -1; }
  .scroll-hint { display: none; }
  #home { min-height: auto; padding-bottom: 0; }   /* no full-screen hero, so About follows right after the buttons */
  section { padding-top: 84px; }
  .globe { left: -22%; top: -22%; width: 144%; height: 144%; }
  /* the two hero buttons always share one row */
  .cta { flex-wrap: nowrap; gap: 10px; }
  .cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; padding: 13px 10px; }
  .p-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .sys-row { grid-template-columns: 84px minmax(0, 1fr); }
  .creds { grid-template-columns: 1fr; gap: 40px; }
  .sk-groups { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 820px) {
  /* header: menu button and a drop-down menu */
  .bar { position: relative; gap: 10px; }
  .nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); box-shadow: var(--shadow); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; }
  .burger { display: grid; }
  #themeBtn { margin-left: auto; }
  /* 16px text in fields stops phones from zooming in when you tap them */
  .field input, .field textarea, .tform input { font-size: 16px; }
  body { background-attachment: scroll; }
}
@media (max-width: 600px) {
  .route { padding-left: 46px; }
  .route::before { left: 15px; }
  .route .packet { left: 11px; }
  .hop { padding: 20px 18px; }
  .hop-n { left: -46px; width: 32px; height: 32px; font-size: 12px; border-radius: 9px; }
  .hop h3 { font-size: 19px; }
  .project { padding: 26px 20px; }
  .project .wm { width: 140px; height: 140px; }
  .p-spec { padding: 12px; gap: 10px; }
  .tfab .lbl { display: none; }
  .tpanel { right: 12px; bottom: 80px; width: min(340px, calc(100% - 24px)); height: min(400px, 62svh); }
}
@media (max-width: 520px) {
  .sk-group { padding: 22px 18px 20px; }
  .pills { gap: 8px; }
  .pill { font-size: 13px; padding: 5px 12px 5px 5px; }
  .pill svg { width: 26px; height: 26px; }
}
@media (max-width: 420px) {
  .sys-body { padding: 16px 14px 18px; font-size: 12.5px; }
  .sys-row { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
  /* very narrow screens or big phone fonts: let long labels wrap instead of pushing past the edge */
  .ms, .socials .soc-cmd { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .cta .btn { font-size: 12.5px; gap: 6px; padding: 12px 6px; }
  .cta .btn svg { width: 14px; height: 14px; }
}
@media (max-width: 360px) {
  .logo > span:last-child { display: none; }
  .p-specs { grid-template-columns: minmax(0, 1fr); }
}
/* "Reduce motion" on the device: keep the intro and soft effects, but slow
   the bigger looping movements down. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .route .packet { animation-duration: 9s; }
  .frame::after { animation-duration: 9s; }
}