/* ═══════════════════════════════════════════════
   style.css — Carriera — JARVIS HUD Edition
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

:root {
    --hud-bg:          #020810;
    --hud-surface:     #05101a;
    --hud-surface2:    #071520;
    --hud-cyan:        #00d4ff;
    --hud-cyan-dim:    rgba(0, 212, 255, 0.07);
    --hud-cyan-border: rgba(0, 212, 255, 0.18);
    --hud-orange:      #ff7700;
    --hud-green:       #00ff88;
    --hud-yellow:      #ffcc00;
    --hud-text:        rgba(200, 230, 255, 0.75);
    --hud-text-dim:    rgba(0, 212, 255, 0.35);
    --hud-border:      rgba(0, 212, 255, 0.13);
    --accent:   var(--hud-cyan);
    --accent2:  var(--hud-orange);
    --bg:       var(--hud-bg);
    --surface:  var(--hud-surface);
    --surface2: var(--hud-surface2);
    --border:   var(--hud-border);
    --text:     var(--hud-text);
    --muted:    var(--hud-text-dim);
    --mono:     'Share Tech Mono', monospace;
    --display:  'Orbitron', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Share Tech Mono', monospace;
    background: var(--hud-bg);
    color: var(--hud-text);
    line-height: 1.65;
    min-height: 100vh;
}
body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 998;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.09) 2px, rgba(0,0,0,.09) 4px);
}

/* HUD GRID */
.hud-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(0,212,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.028) 1px, transparent 1px); background-size: 44px 44px; }

/* CORNERS */
.corner { position: fixed; width: 50px; height: 50px; z-index: 10; pointer-events: none; }
.corner-tl { top: 10px; left: 10px; border-top: 1px solid var(--hud-cyan); border-left: 1px solid var(--hud-cyan); }
.corner-tr { top: 10px; right: 10px; border-top: 1px solid var(--hud-cyan); border-right: 1px solid var(--hud-cyan); }
.corner-bl { bottom: 10px; left: 10px; border-bottom: 1px solid var(--hud-cyan); border-left: 1px solid var(--hud-cyan); }
.corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--hud-cyan); border-right: 1px solid var(--hud-cyan); }
.corner::before { content: ''; position: absolute; width: 4px; height: 4px; background: var(--hud-cyan); box-shadow: 0 0 5px var(--hud-cyan); }
.corner-tl::before { top: -1px; left: -1px; }
.corner-tr::before { top: -1px; right: -1px; }
.corner-bl::before { bottom: -1px; left: -1px; }
.corner-br::before { bottom: -1px; right: -1px; }

/* NAV */
nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px, 5vw, 60px); height: 50px;
    background: rgba(2,8,16,.94); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hud-cyan-border);
}
.nav-logo {
    font-family: 'Orbitron', sans-serif; font-size: .8rem; font-weight: 700;
    color: var(--hud-cyan); letter-spacing: .15em; text-transform: uppercase;
    text-decoration: none; text-shadow: 0 0 10px rgba(0,212,255,.4);
}
.nav-back {
    display: flex !important; align-items: center; gap: 8px;
    font-family: 'Orbitron', sans-serif; font-size: .55rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--hud-text-dim); background: var(--hud-cyan-dim);
    border: 1px solid var(--hud-cyan-border); padding: 6px 14px;
    text-decoration: none; position: relative;
    transition: border-color .2s, color .2s;
}
.nav-back::before {
    content: ''; position: absolute; top: -1px; left: -1px;
    width: 6px; height: 6px;
    border-top: 1px solid var(--hud-orange); border-left: 1px solid var(--hud-orange);
}
.nav-back:hover { border-color: var(--hud-cyan); color: var(--hud-cyan); }

/* PAGE HEADER */
header {
    padding: 64px clamp(20px,8vw,120px) 48px;
    max-width: 1100px; margin: 0 auto;
    position: relative; overflow: hidden;
}
header::after {
    content: 'CAREER';
    position: absolute; right: clamp(20px,8vw,80px); top: 44px;
    font-family: 'Orbitron', sans-serif; font-size: clamp(3rem,8vw,7rem); font-weight: 900;
    color: rgba(0,212,255,.03); line-height: 1; pointer-events: none; user-select: none;
    letter-spacing: .1em;
}
.header-tag {
    font-family: 'Orbitron', sans-serif; font-size: .55rem; font-weight: 700;
    color: var(--hud-text-dim); letter-spacing: .2em; text-transform: uppercase;
    margin-bottom: 16px;
}
header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 5vw, 3rem);
    font-weight: 900; line-height: 1.05; letter-spacing: .04em; margin-bottom: 16px;
    text-transform: uppercase; color: var(--hud-cyan);
    text-shadow: 0 0 20px rgba(0,212,255,.25);
}
header p { font-family: 'Share Tech Mono', monospace; color: var(--hud-text-dim); font-size: .82rem; max-width: 520px; letter-spacing: .06em; }

/* LAYOUT */
.content {
    max-width: 1100px; margin: 0 auto;
    padding: 0 clamp(20px,8vw,120px) 100px;
    display: grid; grid-template-columns: 1fr 320px;
    gap: 40px; align-items: start;
}

/* TIMELINE */
.timeline-section h2 {
    font-family: 'Orbitron', sans-serif; font-size: .55rem; color: var(--hud-text-dim);
    letter-spacing: .2em; text-transform: uppercase; margin-bottom: 32px;
    display: flex; align-items: center; gap: 10px;
}
.timeline-section h2::before { content: '//'; color: rgba(0,212,255,.2); font-family: 'Share Tech Mono', monospace; }

.timeline { position: relative; padding-left: 28px; }
.timeline::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 1px; background: var(--hud-cyan-border);
}

.tl-item { position: relative; padding-bottom: 40px; }
.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
    position: absolute; left: -35px; top: 5px;
    width: 12px; height: 12px;
    background: var(--hud-bg); border: 1px solid var(--hud-cyan-border);
    transition: border-color .3s;
}
.tl-item:hover .tl-dot { border-color: var(--hud-cyan); }
.tl-item.active .tl-dot {
    border-color: var(--hud-cyan);
    box-shadow: 0 0 0 4px rgba(0,212,255,.08);
}
.tl-item.active .tl-dot::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 4px; height: 4px; background: var(--hud-cyan);
    box-shadow: 0 0 5px var(--hud-cyan);
}

.tl-date {
    font-family: 'Share Tech Mono', monospace; font-size: .7rem; color: var(--hud-cyan);
    letter-spacing: .06em; margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.tl-badge {
    font-family: 'Orbitron', sans-serif; font-size: .48rem; letter-spacing: .1em;
    padding: 2px 10px; text-transform: uppercase;
}
.badge-work { background: rgba(255,119,0,.08); color: var(--hud-orange); border: 1px solid rgba(255,119,0,.25); }
.badge-edu  { background: rgba(0,212,255,.07); color: var(--hud-cyan);   border: 1px solid rgba(0,212,255,.2); }

.tl-card {
    background: var(--hud-cyan-dim); border: 1px solid var(--hud-cyan-border);
    padding: 20px 22px; margin-top: 8px;
    position: relative; transition: border-color .3s;
}
.tl-card::before {
    content: ''; position: absolute; top: -1px; left: -1px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--hud-orange); border-left: 1px solid var(--hud-orange);
}
.tl-item:hover .tl-card { border-color: rgba(0,212,255,.28); }
.tl-title {
    font-family: 'Orbitron', sans-serif; font-size: .82rem; font-weight: 700;
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; color: var(--hud-cyan);
}
.tl-org {
    font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--hud-text-dim);
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.tl-desc { font-family: 'Share Tech Mono', monospace; color: var(--hud-text); font-size: .78rem; line-height: 1.75; }

/* SIDEBAR */
.sidebar { display: flex; flex-direction: column; gap: 16px; }

.side-card {
    background: var(--hud-cyan-dim); border: 1px solid var(--hud-cyan-border);
    padding: 22px; position: relative;
}
.side-card::before {
    content: ''; position: absolute; top: -1px; left: -1px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--hud-orange); border-left: 1px solid var(--hud-orange);
}
.side-card::after {
    content: ''; position: absolute; bottom: -1px; right: -1px;
    width: 7px; height: 7px;
    border-bottom: 1px solid var(--hud-orange); border-right: 1px solid var(--hud-orange);
}
.side-card h3 {
    font-family: 'Orbitron', sans-serif; font-size: .5rem; color: var(--hud-text-dim);
    letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.side-card h3::before { content: '//'; color: rgba(0,212,255,.18); font-family: 'Share Tech Mono', monospace; }

.skill-chip {
    display: inline-block;
    background: var(--hud-cyan-dim); border: 1px solid var(--hud-cyan-border);
    color: var(--hud-text); padding: 4px 12px;
    font-family: 'Share Tech Mono', monospace; font-size: .7rem; letter-spacing: .04em;
    margin: 0 6px 8px 0; transition: border-color .2s, color .2s;
    cursor: default;
}
.skill-chip:hover { border-color: var(--hud-cyan); color: var(--hud-cyan); }
.skill-chip.highlight { border-color: rgba(0,212,255,.3); color: var(--hud-cyan); background: rgba(0,212,255,.06); }

.lang-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid rgba(0,212,255,.08);
}
.lang-row:last-child { border-bottom: none; }
.lang-name  { font-family: 'Share Tech Mono', monospace; font-size: .8rem; color: var(--hud-text); }
.lang-level { font-family: 'Orbitron', sans-serif; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hud-cyan); }

.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Share Tech Mono', monospace;
    color: var(--hud-text-dim); text-decoration: none; font-size: .78rem;
    padding: 8px 0; border-bottom: 1px solid rgba(0,212,255,.07);
    transition: color .2s;
}
.sidebar-link:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-link:hover { color: var(--hud-cyan); }
.sidebar-link i { color: var(--hud-cyan); width: 16px; }

/* FOOTER */
footer {
    border-top: 1px solid var(--hud-cyan-border);
    padding: 22px clamp(20px,8vw,120px);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    background: rgba(2,8,16,.9);
}
footer p { font-family: 'Share Tech Mono', monospace; font-size: .62rem; color: var(--hud-text-dim); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--hud-bg); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,.2); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,.4); }

/* RESPONSIVE */
@media (max-width: 860px) { .content { grid-template-columns: 1fr; } }