/* =========================================================
   ABOUT PAGE  –  floating nodes, glitch header, connections
   ========================================================= */

/* ── Per-node colour tokens ───────────────────────────────────────────────── */
#n-identity  { --c: #00d4ff; --cd: rgba(0,   212, 255, 0.18); }
#n-role      { --c: #9966ff; --cd: rgba(153,  102, 255, 0.18); }
#n-location  { --c: #00ffaa; --cd: rgba(0,   255, 170, 0.18); }
#n-stack     { --c: #4499ff; --cd: rgba(68,  153, 255, 0.18); }
#n-focus     { --c: #ff6644; --cd: rgba(255, 102,  68, 0.18); }
#n-interests { --c: #ff44aa; --cd: rgba(255,  68, 170, 0.18); }
#n-since     { --c: #ffcc00; --cd: rgba(255, 204,   0, 0.18); }
#n-contact   { --c: #00ffcc; --cd: rgba(0,   255, 204, 0.18); }

/* ── Canvas layers ────────────────────────────────────────────────────────── */
#connections-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;       /* above starfield(0), below nodes(2) */
    pointer-events: none;
}

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
#about-page {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;   /* re-enabled per-element below */
}

/* ── Header ───────────────────────────────────────────────────────────────── */
#about-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    z-index: 10;
    pointer-events: none;
}

.back-link {
    position: fixed;
    top: 22px;
    left: 26px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    pointer-events: all;
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.back-link:hover { color: rgba(255, 255, 255, 0.8); }

.back-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.back-link:hover .back-arrow { transform: translateX(-5px); }

/* ── Glitch title ─────────────────────────────────────────────────────────── */
.glitch-text {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2.2rem, 7vw, 5.5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    position: relative;
    user-select: none;
    pointer-events: none;
    animation: glitch-shake 7s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
}

.glitch-text::before {
    color: #00ffff;
    animation: glitch-slice-a 7s infinite;
}

.glitch-text::after {
    color: #ff00ff;
    animation: glitch-slice-b 7s infinite;
}

@keyframes glitch-shake {
    0%, 88%, 100% { transform: none; }
    90%  { transform: skewX(-2.5deg) translateX(2px); }
    92%  { transform: skewX( 1.5deg) translateX(-2px); }
    94%  { transform: skewX(-0.8deg); }
    96%  { transform: none; }
}

@keyframes glitch-slice-a {
    0%, 88%, 100% { opacity: 0; clip-path: none; transform: none; }
    90% {
        opacity: 0.85;
        clip-path: polygon(0 18%, 100% 18%, 100% 40%, 0 40%);
        transform: translate(-5px, 0);
    }
    93% {
        opacity: 0.85;
        clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
        transform: translate(4px, 0);
    }
    96% { opacity: 0; }
}

@keyframes glitch-slice-b {
    0%, 88%, 100% { opacity: 0; clip-path: none; transform: none; }
    91% {
        opacity: 0.8;
        clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
        transform: translate(5px, 0);
    }
    94% {
        opacity: 0.8;
        clip-path: polygon(0 5%, 100% 5%, 100% 22%, 0 22%);
        transform: translate(-4px, 0);
    }
    96% { opacity: 0; }
}

/* ── Node cards ───────────────────────────────────────────────────────────── */
.node-card {
    position: absolute;
    width: 175px;
    padding: 13px 16px 13px 20px;
    background: rgba(4, 6, 24, 0.78);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid var(--cd, rgba(255, 255, 255, 0.12));
    box-shadow:
        0 0 30px var(--cd, rgba(255, 255, 255, 0.06)),
        inset 0 0 20px rgba(0, 0, 0, 0.45);
    opacity: 0;                 /* JS fades in after page reveal */
    will-change: transform;
    pointer-events: all;
    cursor: default;
    transition:
        border-color 0.35s ease,
        box-shadow   0.35s ease;
}

/* Left accent bar */
.node-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c, #fff);
    box-shadow: 0 0 10px var(--c, #fff), 0 0 4px var(--c, #fff);
}

/* Corner glow dot */
.node-card::after {
    content: '';
    position: absolute;
    top: 9px; right: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c, #fff);
    box-shadow: 0 0 8px var(--c, #fff);
    opacity: 0.65;
}

.node-card:hover {
    border-color: var(--c, #fff);
    box-shadow:
        0 0 44px var(--cd, rgba(255, 255, 255, 0.1)),
        inset 0 0 14px rgba(0, 0, 0, 0.4);
}

/* ── Node typography ──────────────────────────────────────────────────────── */
.node-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.57rem;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--c, #aaa);
    margin-bottom: 7px;
}

.node-value {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.node-sub {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    letter-spacing: 0.06em;
}

.node-links a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--c, #aaa);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    pointer-events: all;
}

.node-links a:hover {
    color: #fff;
    text-shadow: 0 0 8px var(--c, #fff);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .glitch-text { font-size: 2rem; }
    .node-card   { width: 148px; font-size: 0.85em; }
}