/* ============================================================
   Antonio Bifulco — Cybersecurity Engineer
   ============================================================ */
:root {
  color-scheme: dark;
  --bg:#0b0e12; --surface:#12171d; --text:#edf1eb; --muted:#8c979a; --line:#263038;
  --accent:#c8f269; --accent-2:#ff6b4a;
  --mono:'DM Mono',monospace; --display:'Space Grotesk',sans-serif;
  --console-bg:#0c1115; --console-panel:#121b20; --console-line:#2b4140; --console-cyan:#6de7dc;
  --cat-cloud:#72d7ff; --cat-application:#ffb86b; --cat-operations:#ff7b9c; --cat-architecture:#c79cff;
  --page-grid:rgba(200,242,105,.045);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; max-width:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--display); line-height:1.5; overflow-x:clip; }
a { color:inherit; text-decoration:none; }

.noise { position:fixed; inset:0; opacity:.035; pointer-events:none; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.55; background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px); background-size:80px 80px; -webkit-mask-image:linear-gradient(to bottom,black,transparent 64%); mask-image:linear-gradient(to bottom,black,transparent 64%); }

/* Scroll progress */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:40; background:linear-gradient(90deg,var(--accent),var(--console-cyan)); transform:scaleX(0); transform-origin:0 50%; box-shadow:0 0 10px rgba(200,242,105,.5); }

.section-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.accent,.prompt { color:var(--accent); }
a:focus-visible,button:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* Header */
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1280px,calc(100% - 48px)); margin:0 auto; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:12; transition:box-shadow .3s ease,border-color .3s ease; }
.site-header::before { content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px); }
.site-header.is-scrolled { box-shadow:0 12px 30px rgba(0,0,0,.28); border-bottom-color:color-mix(in srgb,var(--accent) 28%,var(--line)); }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; font-weight:500; transition:opacity .2s ease; }
.brand:hover { opacity:.85; }
.brand__mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--accent); color:var(--accent); font-size:10px; box-shadow:0 0 0 0 rgba(200,242,105,.4); transition:box-shadow .3s ease; padding:4px; }
.brand__mark img { width:100%; height:100%; object-fit:contain; }
.brand:hover .brand__mark { box-shadow:0 0 0 4px rgba(200,242,105,.12); }
.main-nav { display:flex; align-items:center; gap:30px; color:var(--muted); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.main-nav a { position:relative; padding:4px 0; transition:color .2s ease; opacity:0; animation:nav-link-in .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i,0) * 70ms + .25s); }
.main-nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--accent); box-shadow:0 0 8px rgba(200,242,105,.6); transition:width .25s ease; }
.main-nav a:hover { color:var(--accent); } .main-nav a:hover::after { width:100%; }
.main-nav a.is-active { color:var(--accent); }
.main-nav a.is-active::after { width:100%; }
.text-link:hover { color:var(--accent); }
.header-tools { display:flex; align-items:center; gap:14px; }
.select-control { background:var(--surface); border:1px solid var(--line); color:var(--text); height:34px; font:11px var(--mono); padding:0 10px; cursor:pointer; border-radius:2px; transition:border-color .2s ease,box-shadow .2s ease; }
.select-control:hover { border-color:var(--accent); }
.select-control:focus-visible { box-shadow:0 0 0 3px rgba(200,242,105,.2); }
.select-control--language { min-width:78px; }

/* Mobile nav toggle */
.nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:34px; border:1px solid var(--line); background:var(--surface); cursor:pointer; padding:0; transition:border-color .2s ease; }
.nav-toggle:hover { border-color:var(--accent); }
.nav-toggle span { display:block; width:16px; height:1px; background:var(--text); transition:transform .3s ease,opacity .3s ease,background .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-scrim { position:fixed; inset:0; z-index:11; background:rgba(5,8,10,.72); opacity:0; pointer-events:none; transition:opacity .35s ease; }
body.nav-open .nav-scrim { opacity:1; pointer-events:auto; }

/* Headings */
.eyebrow { color:var(--muted); font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); animation:blink 2.4s ease-in-out infinite; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:500; line-height:.96; letter-spacing:-.045em; }
h1 { font-size:clamp(40px,11vw,108px); margin:25px 0 28px; }
h2 { font-size:clamp(34px,4.6vw,58px); margin:18px 0 24px; white-space:normal; }
h1 em,h2 em { color:var(--accent); font-style:normal; }
.heading-cursor { display:inline-block; width:.5em; height:.85em; margin-left:.06em; background:var(--accent); vertical-align:-.08em; animation:blink .9s steps(2,end) infinite; }
.section--accent .heading-cursor { background:#10150c; }
[data-typewriter],[data-subtitle] { visibility:hidden; }

/* Buttons */
.button { display:inline-flex; align-items:center; gap:20px; padding:13px 17px; border:1px solid currentColor; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.button--primary { background:var(--accent); border-color:var(--accent); color:#10150c; }
.button--dark { background:var(--bg); color:var(--text); border-color:var(--bg); }
.button:hover { transform:translateY(-3px); box-shadow:6px 6px 0 var(--accent-2); }
.text-link { color:var(--text); font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--accent); padding-bottom:5px; }
.section-heading .text-link { display:inline-block; margin-top:20px; }

/* Hero */
.hero { min-height:620px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:72px; padding:92px 0 124px; }
.hero__whoami { margin:18px 0 0; height:30px; }
.hero__whoami .terminal-line--whoami { display:inline-block; opacity:1; overflow:hidden; white-space:nowrap; width:0; color:var(--text); font:600 23px/1.3 var(--mono); animation:whoami-type .6s steps(9,end) 4.6s forwards; }
.hero__whoami .prompt { color:var(--accent); }
.hero__whoami .terminal-cursor { width:.5em; height:1.25em; margin-left:5px; }
.hero__intro { max-width:470px; color:var(--muted); font-size:17px; }
.hero__intro strong { color:var(--text); font-weight:600; }
.hero__actions { display:flex; align-items:center; gap:26px; margin-top:35px; }

/* Section scaffolding */
.section { padding:140px 0; }
.section-heading { max-width:920px; margin-bottom:70px; }
.section-heading h2 { max-width:none; white-space:nowrap; }
.section-heading p:not(.eyebrow) { color:var(--muted); max-width:none; white-space:nowrap; }
.term-output { color:var(--console-cyan); font:12px/1.6 var(--mono); letter-spacing:.02em; min-height:1.3em; margin:22px 0 26px; }
.term-output:empty { min-height:0; margin:0; }
.section--accent .term-output { color:rgba(16,21,12,.68); }
.hero__rest { margin-top:0; }
.section-heading--row { display:flex; align-items:end; justify-content:space-between; max-width:none; }
.section-heading--row h2 { white-space:normal; }
.section--dark { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--accent { background:var(--accent); color:#10150c; }
.section--accent em { color:inherit; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px; text-decoration-color:currentColor; }

/* Timeline */
.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:210px 1fr; gap:40px; padding:34px 20px; border-bottom:1px solid var(--line); border-left:2px solid transparent; transition:background .3s ease,transform .3s ease,border-color .3s ease; }
.timeline-item:hover { background:rgba(200,242,105,.035); transform:translateX(6px); border-left-color:var(--accent); }
.timeline-item__meta { color:var(--accent); font:11px/1.8 var(--mono); }
.timeline-item__meta span { color:var(--muted); }
.timeline-item__badge { display:inline-flex; align-items:center; margin-bottom:8px; padding:4px 8px; border:1px solid rgba(200,242,105,.4); color:var(--accent); font:9px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.timeline-item__badge .status-dot { width:6px; height:6px; margin-right:6px; }
.timeline-item__badge--muted { border-color:var(--line); color:var(--muted); }
.timeline-item--current { background:linear-gradient(120deg,rgba(200,242,105,.05),transparent 60%); border-left-color:rgba(200,242,105,.5); }
.timeline-item--current:hover { border-left-color:var(--accent); }
.timeline-item__body h3 { font-size:24px; font-weight:500; margin-bottom:6px; }
.timeline-item__body h3 a,.timeline-item__body h3 span { color:var(--accent); float:right; font-family:var(--mono); font-size:16px; transition:transform .25s ease; }
.timeline-item__body h3 a:hover { transform:translate(2px,-2px); }
.timeline-item__top { display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.timeline-item__top h3 { margin-bottom:0; }
.timeline-item__logo { flex:0 0 52px; width:52px; height:52px; object-fit:contain; background:#f4f7fb; border:1px solid var(--line); border-radius:4px; padding:7px; }
.timeline-item__logo--dark { background:var(--bg); }
.timeline-item__logo--flags { display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1; letter-spacing:-.2em; }

.cert-group-title { display:flex; align-items:center; gap:14px; margin:56px 0 34px; color:var(--accent); font:11px var(--mono); text-transform:uppercase; letter-spacing:.14em; }
.cert-group-title::after { content:""; flex:1; height:1px; background:var(--line); }
.cert-group-title:first-child { margin-top:0; }

/* Switchable tabs (education, projects, ...) */
.tabs { display:flex; gap:10px; margin:0 0 40px; }
.tab-btn { padding:10px 18px; border:1px solid var(--line); background:transparent; color:var(--muted); font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease; }
.tab-btn:hover { color:var(--text); border-color:var(--accent); }
.tab-btn.is-active { color:#10150c; background:var(--accent); border-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }
.timeline-item__company { color:var(--text); font:12px var(--mono); letter-spacing:.03em; margin-bottom:12px; opacity:.85; }
.timeline-item__body p { color:var(--muted); max-width:580px; }
.timeline-item__highlights { margin:14px 0 18px; padding:0; list-style:none; max-width:600px; display:flex; flex-direction:column; gap:9px; }
.timeline-item__highlights li { position:relative; padding-left:18px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.timeline-item__highlights li::before { content:"▸"; position:absolute; left:0; color:var(--accent); }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tags span { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--line); color:var(--muted); font:10px var(--mono); transition:color .2s ease,border-color .2s ease,transform .2s ease; }
.tag-icon { width:12px; height:12px; flex:0 0 auto; object-fit:contain; }
.timeline-item:hover .tags span { color:var(--accent); border-color:rgba(200,242,105,.45); }
.tags span:hover { transform:translateY(-2px); }
.tags .tag--aws { color:#ff9900; border-color:rgba(255,153,0,.4); }
.tags .tag--azure { color:#50e6ff; border-color:rgba(80,230,255,.4); }
.tags .tag--gcp { color:#8ab4f8; border-color:rgba(138,180,248,.4); }

/* Projects */
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:24px; }
.project-card { padding:32px; border:1px solid var(--line); border-top:2px solid var(--accent); background:var(--surface); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.project-card:hover { transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.project-card__header { display:flex; align-items:flex-start; gap:18px; margin-bottom:16px; }
.project-card__logo { flex:0 0 104px; width:104px; height:104px; display:grid; place-items:center; border:1px solid var(--line); border-radius:4px; background:#f4f7fb; padding:8px; overflow:hidden; }
.project-card__logo img { width:100%; height:100%; object-fit:contain; }
.project-card__eyebrow { color:var(--accent); font:10px var(--mono); letter-spacing:.1em; margin-bottom:6px; }
.project-card__heading h3 { font-size:30px; font-weight:600; letter-spacing:-.02em; margin-bottom:4px; }
.project-card__partner { color:var(--muted); font:12px var(--mono); }
.project-card__desc { color:var(--muted); max-width:680px; }
.project-card__desc + .button { margin-top:22px; align-self:flex-start; }
.project-card__highlights { margin:14px 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.project-card__highlights li { position:relative; padding-left:18px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.project-card__highlights li::before { content:"▸"; position:absolute; left:0; color:var(--accent); }
.project-card--soon { display:flex; flex-direction:column; border-top-color:var(--line); }
.project-card--soon:hover { border-color:var(--line); transform:none; box-shadow:none; }
.project-card--soon .project-card__logo { background:#05070a; }
.project-card__stay-tuned { flex:1; display:flex; align-items:center; justify-content:center; margin:18px 0 0; padding:30px 0; border:1px dashed var(--line); color:var(--accent); font:14px/1.4 var(--mono); letter-spacing:.3em; text-align:center; }

/* Journal */
.journal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.journal-card { transition:transform .3s ease; }
.journal-card:hover { transform:translateY(-6px); }
.journal-card__image { position:relative; height:220px; display:grid; place-items:center; margin-bottom:22px; border:1px solid var(--line); font:28px/1.1 var(--mono); color:var(--accent); overflow:hidden; transition:border-color .3s ease; }
.journal-card:hover .journal-card__image { border-color:var(--accent); }
.journal-card__image--signal { background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(200,242,105,.08) 13px 14px),#172019; }
.journal-card__image--terminal { background:linear-gradient(120deg,#19161a,#371c19); color:var(--accent-2); }
.journal-card__image--aiweek { background:radial-gradient(120% 120% at 50% 20%,#1a0f1a,#0b0e12 70%); padding:24px; }
.journal-card__image--aiweek img { width:auto; max-width:72%; max-height:56%; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(255,0,170,.25)); transition:transform .3s ease; }
.journal-card:hover .journal-card__image--aiweek img { transform:scale(1.04); }
.journal-card__image--cyberchallenge { background:radial-gradient(120% 120% at 50% 20%,#141b1a,#0b0e12 70%); padding:24px; }
.journal-card__image--cyberchallenge img { width:auto; max-width:68%; max-height:50%; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(200,242,105,.2)); transition:transform .3s ease; }
.journal-card:hover .journal-card__image--cyberchallenge img { transform:scale(1.04); }
.journal-card__badge { position:absolute; left:12px; top:12px; padding:4px 8px; border:1px solid rgba(255,0,170,.45); color:#ff5fc1; font:9px var(--mono); letter-spacing:.1em; }
.journal-card__image::after { content:"OPEN_ENTRY //"; position:absolute; right:12px; bottom:10px; color:var(--accent); font:9px var(--mono); opacity:0; transform:translateY(5px); transition:opacity .25s ease,transform .25s ease; }
.journal-card:hover .journal-card__image::after { opacity:.8; transform:none; }
.journal-card__date { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.journal-card h3 { max-width:420px; font-size:25px; font-weight:500; }
.journal-card__desc { color:var(--muted); font-size:14px; line-height:1.55; max-width:420px; margin:10px 0 16px; }
.journal-card>a { color:var(--accent); font:11px var(--mono); }

/* Contact + footer */
.contact { padding:110px 0; }
.contact__inner { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; }
.contact h2 { margin-bottom:0; }
.contact p { max-width:330px; margin:14px 0 0; font-size:17px; }
.contact__links { display:flex; flex-direction:column; align-items:flex-end; gap:14px; justify-self:end; }
.button--outline { background:transparent; border-color:#10150c; color:#10150c; }
.button--outline:hover { background:rgba(16,21,12,.08); box-shadow:6px 6px 0 rgba(16,21,12,.18); }
.site-footer { display:flex; justify-content:space-between; padding:28px 0; color:var(--muted); font:10px var(--mono); border-top:1px solid var(--line); }
.site-footer a:hover { color:var(--accent); }

/* Terminal loader */
.terminal-loader { position:fixed; inset:0; display:grid; place-items:center; z-index:50; background:var(--bg); pointer-events:none; transition:opacity .45s ease,visibility .45s ease; animation:terminal-intro 5.2s ease forwards; }
.terminal-loader.is-hidden { opacity:0; visibility:hidden; }
.terminal-loader__output { width:min(560px,calc(100% - 40px)); min-height:120px; color:var(--accent); font:clamp(13px,2vw,18px)/1.8 var(--mono); text-shadow:0 0 12px rgba(200,242,105,.5); }
.terminal-line { opacity:0; white-space:nowrap; }
.terminal-line--command { opacity:1; overflow:hidden; width:0; animation:command-type .9s steps(12,end) forwards; }
.terminal-line--boot { animation:terminal-line-in .2s ease 1.35s forwards; }
.terminal-line--load { animation:terminal-line-in .2s ease 2.15s forwards; }
.terminal-line--done { color:var(--accent); animation:terminal-line-in .2s ease 3.05s forwards; }
.terminal-cursor { display:inline-block; width:.65em; height:1.1em; margin-left:4px; vertical-align:-.16em; background:var(--accent); animation:blink .75s steps(2,end) infinite; }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px) scale(.985); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); position:relative; will-change:opacity,transform; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal::before { content:attr(data-terminal-label); position:absolute; left:0; top:-22px; color:var(--accent); font:9px var(--mono); letter-spacing:.1em; opacity:0; transform:translateX(-8px); transition:opacity .35s ease .12s,transform .35s ease .12s; }
.reveal.is-visible::before { opacity:.8; transform:none; }
.reveal::after { content:""; position:absolute; left:0; top:-8px; width:0; height:1px; background:var(--accent); box-shadow:0 0 8px var(--accent); transition:width .65s ease .15s; }
.reveal.is-visible::after { width:42px; }
.reveal--delay { transition-delay:.12s; }

/* Staggered entrance for repeated items inside a revealed container */
.timeline-item__highlights li,.tags span { opacity:0; transform:translateY(8px); transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible .timeline-item__highlights li,.reveal.is-visible .tags span { opacity:1; transform:none; }
.timeline-item__highlights li:nth-child(1) { transition-delay:.15s; } .timeline-item__highlights li:nth-child(2) { transition-delay:.21s; }
.timeline-item__highlights li:nth-child(3) { transition-delay:.27s; } .timeline-item__highlights li:nth-child(4) { transition-delay:.33s; }
.timeline-item__highlights li:nth-child(5) { transition-delay:.39s; }
.tags span:nth-child(1) { transition-delay:.3s; } .tags span:nth-child(2) { transition-delay:.34s; } .tags span:nth-child(3) { transition-delay:.38s; }
.tags span:nth-child(4) { transition-delay:.42s; } .tags span:nth-child(5) { transition-delay:.46s; } .tags span:nth-child(6) { transition-delay:.5s; }
.tags span:nth-child(7) { transition-delay:.54s; } .tags span:nth-child(8) { transition-delay:.58s; } .tags span:nth-child(9) { transition-delay:.62s; }
.tags span:nth-child(10) { transition-delay:.66s; }

/* ============================================================
   HERO TERMINAL WINDOW  (authentic Kali/Parrot-style shell)
   ============================================================ */
.hero__terminal-window { height:410px; position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:8px; background:#0a0f13; color:#d6e4dd; font:12px/1.7 var(--mono); box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(109,231,220,.08); }

/* Title bar */
.tw-bar { flex:0 0 auto; display:flex; align-items:center; height:36px; padding:0 14px; background:linear-gradient(#20262b,#191e22); border-bottom:1px solid #000; }
.tw-dots { display:flex; gap:8px; }
.tw-dots i { width:12px; height:12px; border-radius:50%; }
.tw-dots i:nth-child(1) { background:#ff5f56; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.tw-dots i:nth-child(2) { background:#febc2e; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.tw-dots i:nth-child(3) { background:#28c840; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.tw-title { flex:1; text-align:center; margin-right:52px; color:#a9b6b0; font-size:11px; letter-spacing:.02em; }

/* Body */
.tw-body { flex:1; min-height:0; overflow:hidden; padding:14px 16px 16px; background:#0a0f13; }
.tw-body::-webkit-scrollbar { width:0; }
.tw-line { white-space:pre-wrap; word-break:break-word; }
.tw-out { color:#c2d4cc; }
.tw-out--ok { color:#7ee787; }
.tw-out--warn { color:#ffa657; }
.tw-out--crit { color:#ff7b72; }
.tw-out--info { color:#79c0ff; }
.tw-out--dim { color:#6a7d77; }

/* Kali/Parrot two-line prompt */
.tw-prompt { display:block; margin-top:6px; }
.tw-prompt__top { color:#2ee6c8; }
.tw-prompt__paren { color:#8b98a5; }
.tw-prompt__user { color:#2ee6c8; font-weight:500; }
.tw-prompt__path { color:#5db2ff; }
.tw-cmd-line { display:block; }
.tw-arrow { color:#2ee6c8; }
.tw-dollar { color:#e8f0ec; }
.tw-cmd { color:#f4f8f5; }
.tw-caret { display:inline-block; width:8px; height:15px; margin-left:2px; background:#2ee6c8; vertical-align:-3px; box-shadow:0 0 6px rgba(46,230,200,.7); animation:blink .9s steps(2,end) infinite; }

/* ============================================================
   SKILLS — NEURAL GRAPH  (rewritten, no moving background circle)
   ============================================================ */
.skills-section { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.neural-graph { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.72fr); align-items:center; gap:44px; padding:20px 0 8px; }
.neural-canvas { position:relative; width:100%; aspect-ratio:1000 / 780; min-width:0; overflow:visible; }
.neural-stage { position:absolute; top:0; left:0; width:1000px; height:780px; transform-origin:top left; }
.neural-stage .skills-map__network,
.neural-stage .skills-map__nodes { position:absolute; top:0; left:0; width:1000px; height:780px; }
.neural-stage .skills-map__nodes { z-index:3; }
.neural-stage .skills-map__network { z-index:1; pointer-events:none; }

.neural-svg { width:100%; height:100%; overflow:visible; display:block; }

/* Links */
.neural-link { stroke:url(#neural-gradient); stroke-width:1; stroke-opacity:.28; stroke-dasharray:5 8; animation:neural-link-pulse 3.6s ease-in-out infinite; transition:stroke-opacity .25s ease,stroke-width .25s ease; }
.neural-link--cloud { stroke:var(--cat-cloud); }
.neural-link--application { stroke:var(--cat-application); }
.neural-link--operations { stroke:var(--cat-operations); }
.neural-link--architecture { stroke:var(--cat-architecture); }
.neural-link.is-active { stroke-opacity:.85; stroke-width:1.8; }
.neural-link.is-dim { stroke-opacity:.08; }

/* Particles travelling along links */
.neural-particle { fill:#f5ff9b; filter:url(#neural-glow); offset-rotate:0deg; animation:neural-travel var(--travel) linear infinite; animation-delay:var(--delay); }
.neural-particle--cloud { fill:var(--cat-cloud); }
.neural-particle--application { fill:var(--cat-application); }
.neural-particle--operations { fill:var(--cat-operations); }
.neural-particle--architecture { fill:var(--cat-architecture); }

/* Core */
.neural-core__ring { fill:none; stroke:var(--accent); stroke-width:1; stroke-opacity:.18; stroke-dasharray:2 9; transform-box:fill-box; transform-origin:center; }
.neural-core__ring--mid { animation:core-ring-spin 26s linear infinite; }
.neural-core__ring--outer { stroke:var(--console-cyan); stroke-opacity:.14; stroke-width:.75; stroke-dasharray:1 16; animation:core-ring-spin-rev 40s linear infinite; }
.neural-core__glow { fill:var(--accent); opacity:.1; filter:url(#core-glow); animation:core-glow-breathe 3.6s ease-in-out infinite; }
.neural-core__body { fill:url(#core-gradient); stroke:var(--accent); stroke-width:1.5; filter:url(#core-glow); }
.neural-core__sheen { fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:40 220; transform-box:fill-box; transform-origin:center; animation:core-ring-spin 9s linear infinite; }
.neural-core__pulse { fill:none; stroke:var(--accent); stroke-width:1; stroke-opacity:.4; animation:core-pulse 2.8s ease-in-out infinite; }
.neural-core__pulse--delay { animation-delay:1.4s; }
.neural-core text { text-anchor:middle; }
.neural-core__eyebrow { fill:var(--console-cyan); font:7px var(--mono); letter-spacing:.15em; }
.neural-core__title { fill:#f0ffd0; font:500 13px var(--display); letter-spacing:.08em; }
.neural-core__subtitle { fill:var(--accent); font:10px var(--mono); letter-spacing:.24em; }
.neural-core__status { fill:#9dc8a1; font:7px var(--mono); letter-spacing:.08em; }
.neural-core__dot { fill:var(--accent); animation:blink 1.8s ease-in-out infinite; }
.neural-core { transition:filter .25s ease; }
.neural-core:hover { filter:drop-shadow(0 0 10px rgba(200,242,105,.35)); }

/* Nodes */
.skill-node { position:absolute; transform:translate(-50%,-50%); width:150px; min-height:46px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:3px; background:rgba(11,14,18,.92); color:var(--muted); text-align:left; font:10px var(--mono); cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.22); opacity:0; filter:blur(4px); transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease,box-shadow .22s ease,opacity .5s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 28ms),filter .5s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 28ms); }
.skill-node.is-revealed { opacity:1; filter:blur(0); }
.skill-node__icon { flex:0 0 18px; color:var(--accent); font-size:15px; line-height:1; text-align:center; }
.skill-node b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:400; letter-spacing:.01em; }
.skill-node:hover,.skill-node.is-selected { color:var(--text); border-color:var(--accent); background:rgba(200,242,105,.12); transform:translate(-50%,-50%) scale(1.07); box-shadow:0 10px 26px rgba(0,0,0,.32); z-index:5; }
.skill-node--cloud { border-left-color:var(--cat-cloud); } .skill-node--cloud .skill-node__icon { color:var(--cat-cloud); }
.skill-node--cloud:hover,.skill-node--cloud.is-selected { box-shadow:0 10px 26px rgba(114,215,255,.22); }
.skill-node--application { border-left-color:var(--cat-application); } .skill-node--application .skill-node__icon { color:var(--cat-application); }
.skill-node--application:hover,.skill-node--application.is-selected { box-shadow:0 10px 26px rgba(255,184,107,.22); }
.skill-node--operations { border-left-color:var(--cat-operations); } .skill-node--operations .skill-node__icon { color:var(--cat-operations); }
.skill-node--operations:hover,.skill-node--operations.is-selected { box-shadow:0 10px 26px rgba(255,123,156,.22); }
.skill-node--architecture { border-left-color:var(--cat-architecture); } .skill-node--architecture .skill-node__icon { color:var(--cat-architecture); }
.skill-node--architecture:hover,.skill-node--architecture.is-selected { box-shadow:0 10px 26px rgba(199,156,255,.22); }
.skill-node--core { border-color:var(--accent); border-left-color:var(--accent); background:rgba(200,242,105,.12); color:var(--text); }
.neural-stage .skill-node--core { display:none; } /* represented by the SVG core on desktop */

/* Detail panel */
.skill-detail { position:relative; align-self:center; min-height:340px; padding:26px; border:1px solid var(--accent); background:var(--bg); box-shadow:12px 12px 0 rgba(200,242,105,.1); }
.skill-detail::before { content:"skillctl --inspect"; display:block; margin-bottom:34px; color:var(--muted); font:10px var(--mono); }
.skill-detail__eyebrow { color:var(--accent); font:9px var(--mono); letter-spacing:.12em; }
.skill-detail h3 { font-size:26px; line-height:1.06; font-weight:500; margin:14px 0 18px; }
.skill-detail>p:not(.skill-detail__eyebrow) { color:var(--muted); font-size:14px; }
.skill-detail__tools { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); color:var(--accent)!important; font:10px/1.85 var(--mono)!important; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes blink { 50% { opacity:0; } }
@keyframes nav-link-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes drawer-link-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes fade-scale-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@keyframes command-type { from { width:0; } to { width:16ch; } }
@keyframes whoami-type { from { width:0; } to { width:9.5ch; } }
@keyframes terminal-line-in { to { opacity:1; } }
@keyframes terminal-intro { 0%,88% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
@keyframes console-blink { 50% { opacity:.35; } }
@keyframes neural-travel { 0% { offset-distance:0%; opacity:0; } 12% { opacity:1; } 82% { opacity:1; } 100% { offset-distance:100%; opacity:0; } }
@keyframes neural-link-pulse { 50% { stroke-dashoffset:-26; } }
@keyframes core-pulse { 0%,100% { r:66px; stroke-opacity:.4; } 50% { r:72px; stroke-opacity:.08; } }
@keyframes core-ring-spin { to { transform:rotate(360deg); } }
@keyframes core-ring-spin-rev { to { transform:rotate(-360deg); } }
@keyframes core-glow-breathe { 0%,100% { opacity:.08; r:78px; } 50% { opacity:.2; r:88px; } }
@keyframes node-enter { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:blur(0); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px) {
  .site-header { height:70px; }
  .nav-toggle { display:flex; }
  .main-nav { position:fixed; top:70px; right:0; bottom:0; width:min(78vw,320px); flex-direction:column; gap:0; align-items:flex-start; padding:28px 28px; background:var(--surface); border-left:1px solid var(--line); box-shadow:-18px 0 40px rgba(0,0,0,.35); transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); z-index:13; overflow-y:auto; }
  body.nav-open .main-nav { transform:translateX(0); }
  .main-nav a { width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; opacity:0; animation:none; }
  body.nav-open .main-nav a { animation:drawer-link-in .45s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i,0) * 60ms + .12s); }
  .hero { display:block; padding:70px 0 80px; }
  .hero__terminal-window { margin-top:56px; height:380px; }
}
@media (max-width:980px) {
  .section-heading h2, .section-heading p:not(.eyebrow) { white-space:normal; }
}
@media (max-width:900px) {
  .neural-graph { grid-template-columns:1fr; gap:28px; }
  /* On tablet/phone the absolute graph would overlap: fall back to a clean grid. */
  .neural-canvas { aspect-ratio:auto; }
  .neural-stage { position:static; width:100%; height:auto; transform:none!important; }
  .neural-stage .skills-map__network { display:none; }
  .neural-stage .skills-map__nodes { position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; height:auto; }
  .skill-node { position:static; transform:none; width:100%; min-height:52px; }
  .neural-stage .skill-node--core { display:flex; grid-column:1 / -1; }
  .skill-node:hover,.skill-node.is-selected { transform:none; }
  .skill-detail { min-height:240px; order:-1; }
}
@media (max-width:760px) {
  .section-shell,.site-header { width:min(100% - 32px,1120px); }
  .section { padding:90px 0; }
  .timeline-item,.contact__inner { grid-template-columns:1fr; gap:18px; }
  .timeline-item { padding-left:12px; padding-right:12px; }
  .timeline-item:hover { transform:none; }
  .journal-grid { grid-template-columns:1fr; }
  .section-heading h2, .section-heading p:not(.eyebrow) { white-space:normal; }
  .section-heading--row { display:block; }
  .section-heading--row .text-link { display:inline-block; margin-top:10px; }
  .contact__links { align-items:flex-start; justify-self:start; }
  .site-footer { flex-wrap:wrap; gap:14px; }
  .timeline-item__top { flex-wrap:wrap; row-gap:10px; }
  .project-card { padding:24px; }
  .project-card__header { flex-wrap:wrap; row-gap:12px; }
  .project-card__logo { flex-basis:72px; width:72px; height:72px; }
  .tabs { flex-wrap:wrap; }
  .journal-card h3,.journal-card__desc { max-width:none; }
}
@media (max-width:560px) {
  .neural-canvas .skills-map__nodes { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
  .neural-particle { display:none; }
}
