@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* =========================================================
   CJP — SHARED FOUNDATION
   Dark terminal / neon-green collective system
   Used by: index, services, projects, about
   ========================================================= */

/* ===== DESIGN TOKENS ===== */
:root {
    --color-brand-primary: #FFFFFF;
    --color-brand-secondary: #00FF88;
    --color-brand-tertiary: #00D4FF;
    --color-surface-base: #000000;
    --color-surface-subtle: #0A0A0A;
    --color-surface-card: #111111;
    --color-surface-elevated: #1A1A1A;
    --color-surface-overlay: rgba(0, 0, 0, 0.85);
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A0A0A0;
    --color-text-tertiary: #666666;
    --color-text-link: #00FF88;
    --color-border-default: #222222;
    --color-border-subtle: #1A1A1A;
    --color-border-emphasis: #333333;
    --color-border-accent: #FFFFFF;
    --color-status-success: #00FF88;
    --color-status-warning: #FFAA00;
    --color-status-error: #FF5F57;

    --font-primary: 'JetBrains Mono', 'Fira Code', monospace;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    --spacing-1: 0.25rem;  --spacing-2: 0.5rem;  --spacing-3: 0.75rem;
    --spacing-4: 1rem;     --spacing-5: 1.25rem; --spacing-6: 1.5rem;
    --spacing-8: 2rem;     --spacing-10: 2.5rem; --spacing-12: 3rem;
    --spacing-16: 4rem;    --spacing-20: 5rem;   --spacing-24: 6rem;

    --radius-sm: 0.25rem; --radius-base: 0.5rem; --radius-md: 0.75rem;
    --radius-lg: 1rem;    --radius-xl: 1.5rem;   --radius-full: 9999px;

    --shadow-glow-sm: 0 0 10px rgba(255,255,255,0.3), 0 0 20px rgba(255,255,255,0.15);
    --shadow-glow-md: 0 0 15px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.2);
    --shadow-glow-cyan: 0 0 15px rgba(0,255,136,0.4), 0 0 30px rgba(0,255,136,0.2);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.7);
    --shadow-lg: 0 20px 40px -8px rgba(0,0,0,0.8);

    --duration-base: 200ms; --duration-moderate: 300ms; --duration-slow: 500ms;
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
    --color-brand-primary: #16150F;
    --color-brand-secondary: #0B7A45;
    --color-brand-tertiary: #0B6E7A;
    --color-surface-base: #F4F2EA;
    --color-surface-subtle: #ECE9DF;
    --color-surface-card: #FBFAF5;
    --color-surface-elevated: #F1EEE4;
    --color-surface-overlay: rgba(244, 242, 234, 0.9);
    --color-text-primary: #16150F;
    --color-text-secondary: #4C493F;
    --color-text-tertiary: #6F6B5F;
    --color-text-link: #0B7A45;
    --color-status-success: #0B7A45;
    --color-status-warning: #B26A00;
    --color-status-error: #C2362F;
    --color-border-default: #CFC7B3;
    --color-border-subtle: #E0D9C9;
    --color-border-emphasis: #ADA68D;
    --color-border-accent: #16150F;
    --shadow-glow-sm: 0 1px 3px rgba(20, 19, 15, 0.08), 0 4px 16px rgba(20, 19, 15, 0.05);
    --shadow-glow-md: 0 2px 8px rgba(20, 19, 15, 0.12);
    --shadow-glow-cyan: 0 0 0 1px rgba(11, 122, 69, 0.25);
    --shadow-md: 0 8px 20px -6px rgba(20, 19, 15, 0.14);
    --shadow-lg: 0 20px 40px -10px rgba(20, 19, 15, 0.18);
}

/* ---- Light-mode contrast fixes (parity with the dark terminal) ---- */
/* The terminal / whoami panels stay dark in BOTH themes — a terminal is dark. */
[data-theme="light"] .who-card,
[data-theme="light"] .terminal-wrap { background: #111111; border-color: #222222; box-shadow: var(--shadow-md); }
[data-theme="light"] .terminal-head { background: #1A1A1A; border-bottom-color: #222222; }
[data-theme="light"] .terminal-path { color: #666666; }
[data-theme="light"] .who-card .wl,
[data-theme="light"] .terminal-body,
[data-theme="light"] .terminal-body .t-o { color: #A0A0A0; }
[data-theme="light"] .who-card .k,
[data-theme="light"] .terminal-body .t-d { color: #666666; }
[data-theme="light"] .who-card .v,
[data-theme="light"] .terminal-body .t-c { color: #FFFFFF; }
[data-theme="light"] .who-card .g,
[data-theme="light"] .terminal-body .t-p,
[data-theme="light"] .terminal-body .t-g { color: #00FF88; }
[data-theme="light"] .who-card .b,
[data-theme="light"] .terminal-body .t-b { color: #00D4FF; }

[data-theme="light"] .fbtn.active { color: #FFFFFF; }
[data-theme="light"] .btn-ghost:hover { color: #FFFFFF; }
[data-theme="light"] .btn-primary { color: #FBFAF5; }
[data-theme="light"] ::selection { color: #FFFFFF; }
[data-theme="light"] .navbar.scrolled { box-shadow: var(--shadow-md); }
[data-theme="light"] .tinit,
[data-theme="light"] .mc-init { box-shadow: none; }

/* Eyebrow pill — crisper border + soft lift in light */
[data-theme="light"] .eyebrow { background: var(--color-surface-card); border-color: var(--color-border-emphasis); box-shadow: 0 6px 16px -10px rgba(20,19,15,0.30); color: var(--color-text-secondary); }

/* Secondary buttons — give them real weight in light */
[data-theme="light"] .btn-secondary { background: var(--color-surface-card); border-color: var(--color-text-primary); color: var(--color-text-primary); box-shadow: 0 6px 16px -10px rgba(20,19,15,0.28); }
@media (hover: hover) { [data-theme="light"] .btn-secondary:hover { background: var(--color-text-primary); color: var(--color-surface-card); border-color: var(--color-text-primary); box-shadow: var(--shadow-lg); } }

/* Remove the jarring hover background swap on grid cells / value blocks; use a clean top accent instead */
[data-theme="light"] .svc-cell:hover,
[data-theme="light"] .vblock:hover,
[data-theme="light"] .val-block:hover { background: var(--color-surface-card); box-shadow: inset 0 3px 0 -1px var(--color-brand-secondary); }

/* Bottom value boxes get the same soft drop shadow as the terminal window in light */
[data-theme="light"] .vblock,
[data-theme="light"] .val-block { box-shadow: 0 16px 26px -18px rgba(20,19,15,0.32); }

/* Slashed-zero stat numbers (so 0 doesn't read as 8) */
.hero-stats .hstat-num,
.about-hero-stats .h-stat-num,
.phero-stats .pstat-n { font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-variant-numeric: slashed-zero; font-feature-settings: 'zero' 1; }

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; font-size: 16px; background: var(--color-surface-base); }
body {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Animated grid backdrop */
body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--color-border-subtle) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--color-border-subtle) 1.5px, transparent 1.5px);
    background-size: 54px 54px;
    opacity: 0.5;
    z-index: -1;
    animation: gridMove 24s linear infinite;
}
@keyframes gridMove { 0% { transform: translate(0,0); } 100% { transform: translate(54px, 54px); } }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.025em;
}
p { margin-bottom: var(--spacing-4); color: var(--color-text-secondary); line-height: 1.7; }
a { color: var(--color-text-link); text-decoration: none; transition: color var(--duration-base) var(--easing-smooth); }

.mono { font-family: var(--font-primary); letter-spacing: 0.05em; }

/* ===== BOOT LOADER ===== */
.boot {
    position: fixed; inset: 0; z-index: 9000;
    background: #000;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-primary);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot::after { /* scanline curtain that wipes up */
    content: ''; position: absolute; inset: 0;
    background: #000; transform-origin: top;
    transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.7,0,0.3,1);
}
.boot.wipe::after { transform: scaleY(1); transform-origin: bottom; }
.boot-inner {
    width: min(560px, 86vw);
    padding: var(--spacing-6);
}
.boot-bar-top {
    display: flex; align-items: center; gap: var(--spacing-3);
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: #444; margin-bottom: var(--spacing-6);
}
.boot-bar-top .bdot { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.boot-bar-top .bdot.y { background: #FFAA00; }
.boot-bar-top .bdot.g { background: #00FF88; }
.boot-bar-top span:last-child { margin-left: auto; color: #555; }
.boot-log { font-size: 0.8rem; line-height: 2; min-height: 11rem; }
.boot-line { display: block; opacity: 0; transform: translateX(-8px); transition: all 0.25s ease; color: #A0A0A0; }
.boot-line.in { opacity: 1; transform: none; }
.boot-line .p { color: #00FF88; }
.boot-line .ok { color: #00FF88; }
.boot-line .dim { color: #555; }
.boot-line .hl { color: #fff; }
.boot-cursor { display: inline-block; width: 9px; height: 1.1em; background: #00FF88; vertical-align: -2px; animation: bootBlink 0.9s steps(1) infinite; }
@keyframes bootBlink { 50% { opacity: 0; } }
.boot-progress {
    margin-top: var(--spacing-8);
    display: flex; align-items: center; gap: var(--spacing-4);
}
.boot-track { flex: 1; height: 4px; background: #1a1a1a; border-radius: 9999px; overflow: hidden; }
.boot-fill { height: 100%; width: 0; background: #00FF88; box-shadow: 0 0 12px rgba(0,255,136,0.6); transition: width 0.2s linear; }
.boot-pct { font-size: 0.75rem; color: #fff; min-width: 3.5ch; text-align: right; }
@media (prefers-reduced-motion: reduce) {
    .boot { display: none !important; }
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: var(--spacing-6) var(--spacing-8);
    background: var(--color-surface-overlay);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: all var(--duration-moderate) var(--easing-smooth);
}
.navbar.scrolled {
    padding: var(--spacing-4) var(--spacing-8);
    background: var(--color-surface-base);
    border-bottom: 1px solid var(--color-border-accent);
    box-shadow: var(--shadow-glow-sm);
}
.navbar-container { max-width: 1536px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.navbar-logo {
    display: flex; align-items: center; gap: var(--spacing-3);
    font-family: var(--font-primary); font-size: 1.25rem; font-weight: 700;
    color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.1em;
}
.navbar-logo svg { height: 34px; width: 34px; }
.navbar-logo > span { display: inline-flex; align-items: center; white-space: nowrap; }
.navbar-logo .brand-cursor { display: inline-block; width: 8px; height: 0.95em; margin-left: 3px; background: var(--color-brand-secondary); border-radius: 1px; box-shadow: var(--shadow-glow-cyan); animation: blink 1.1s steps(1) infinite; }
.navbar-menu { display: flex; gap: var(--spacing-8); list-style: none; }
.navbar-menu a {
    font-family: var(--font-primary); font-size: 0.8rem; font-weight: 500;
    color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em;
    position: relative; padding: var(--spacing-2) 0;
    transition: color var(--duration-base) var(--easing-smooth);
}
.navbar-menu a.active { color: var(--color-brand-secondary); }
.navbar-menu a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--color-brand-secondary); box-shadow: var(--shadow-glow-cyan);
    transition: width var(--duration-moderate) var(--easing-smooth);
}
.navbar-menu a.active::after { width: 100%; }
@media (hover: hover) {
    .navbar-menu a:hover { color: var(--color-brand-secondary); }
    .navbar-menu a:hover::after { width: 100%; }
}
.navbar-actions { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.25rem); }
.theme-toggle { background: none; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--spacing-2); }
.menu-toggle span { width: 24px; height: 2px; background: var(--color-brand-primary); transition: all var(--duration-base) var(--easing-smooth); }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-8);
    font-family: var(--font-primary); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-radius: var(--radius-base); cursor: pointer;
    transition: all var(--duration-moderate) var(--easing-smooth);
    border: none; text-decoration: none; position: relative; overflow: hidden;
}
.btn-primary { background: var(--color-brand-primary); color: var(--color-surface-base); box-shadow: var(--shadow-glow-md); }
@media (hover: hover) { .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(255,255,255,0.6); } }
.btn-secondary { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-emphasis); }
@media (hover: hover) { .btn-secondary:hover { border-color: var(--color-brand-secondary); color: var(--color-brand-secondary); box-shadow: var(--shadow-glow-cyan); } }
.btn-ghost { background: transparent; color: var(--color-brand-secondary); border: 1px solid var(--color-brand-secondary); }
@media (hover: hover) { .btn-ghost:hover { background: var(--color-brand-secondary); color: #000; box-shadow: var(--shadow-glow-cyan); } }

/* ===== SECTIONS ===== */
.section { padding: var(--spacing-24) var(--spacing-8); position: relative; }
.section-container { max-width: 1280px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: var(--spacing-16); }
.section-label {
    font-family: var(--font-primary); font-size: 0.78rem; font-weight: 600;
    color: var(--color-brand-secondary); text-transform: uppercase; letter-spacing: 0.14em;
    margin-bottom: var(--spacing-3);
}
.section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-4); }
.section-description { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 680px; margin: 0 auto; }

/* Editorial eyebrow strip (the "Vol. 1, Edition 1" framing) */
.eyebrow {
    display: inline-flex; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-full);
    font-family: var(--font-primary); font-size: 0.68rem; font-weight: 600;
    color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.12em;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-secondary); animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* Ticker / marquee strip */
.ticker { overflow: hidden; border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-subtle); }
.ticker-track { display: flex; gap: var(--spacing-8); white-space: nowrap; padding: var(--spacing-4) 0; width: max-content; animation: tick 28s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { font-family: var(--font-primary); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: var(--spacing-8); }
.ticker-item .star { color: var(--color-brand-secondary); }
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== FOOTER ===== */
.footer { background: var(--color-surface-base); border-top: 1px solid var(--color-border-default); padding: var(--spacing-16) var(--spacing-8) var(--spacing-8); }
.footer-container { max-width: 1280px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-12); margin-bottom: var(--spacing-12); }
.footer-section h4 { font-family: var(--font-primary); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand-secondary); margin-bottom: var(--spacing-4); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-3); }
.footer-links a { color: var(--color-text-secondary); font-size: 0.9375rem; }
@media (hover: hover) { .footer-links a:hover { color: var(--color-brand-secondary); } }
.footer-desc { color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.7; max-width: 38ch; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-8); border-top: 1px solid var(--color-border-subtle); flex-wrap: wrap; gap: var(--spacing-4); }
.footer-copy { font-family: var(--font-primary); font-size: 0.8rem; color: var(--color-text-tertiary); }
.footer-legal { display: flex; gap: var(--spacing-6); list-style: none; }
.footer-legal a { font-family: var(--font-primary); font-size: 0.8rem; color: var(--color-text-tertiary); }

/* ===== SCROLL REVEAL ===== */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--easing-smooth), transform 0.7s var(--easing-smooth); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].in { opacity: 1; transform: none; }

/* ===== ROTATING HEADLINES ===== */
[data-rotate] { display: grid; }
[data-rotate] > .rot { grid-area: 1 / 1; opacity: 0; transition: opacity 0.6s var(--easing-smooth); pointer-events: none; }
[data-rotate] > .rot.active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    [data-rotate] > .rot { transition: none; }
    [data-rotate] > .rot:not(.active) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    body::before { animation: none; }
}

/* ===== PAGE ENTRY — kills light-mode FOUC, smooths nav ===== */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    body { animation: pageIn 0.22s ease-out both; }
}

/* ===== SCROLLBAR + SELECTION ===== */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--color-surface-base); }
::-webkit-scrollbar-thumb { background: var(--color-border-emphasis); border-radius: var(--radius-full); }
@media (hover: hover) { ::-webkit-scrollbar-thumb:hover { background: var(--color-brand-secondary); } }
::selection { background: var(--color-brand-secondary); color: #000; }

/* ===== SHARED RESPONSIVE NAV ===== */
@media (max-width: 1024px) {
    .navbar-menu {
        display: flex; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--color-surface-base); border-top: 1px solid var(--color-border-default);
        flex-direction: column; padding: var(--spacing-6); gap: var(--spacing-4);
        z-index: 100; opacity: 0; visibility: hidden; transform: translateY(-10px);
        pointer-events: none; transition: all 0.3s var(--easing-smooth);
    }
    .navbar-menu.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .navbar-menu li { opacity: 0; transform: translateX(-10px); transition: all 0.3s var(--easing-smooth); }
    .navbar-menu.active li { opacity: 1; transform: translateX(0); }
    .navbar-menu.active li:nth-child(1) { transition-delay: 0.06s; }
    .navbar-menu.active li:nth-child(2) { transition-delay: 0.11s; }
    .navbar-menu.active li:nth-child(3) { transition-delay: 0.16s; }
    .navbar-menu.active li:nth-child(4) { transition-delay: 0.21s; }
    .navbar-menu.active li:nth-child(5) { transition-delay: 0.26s; }
    .menu-toggle { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-8); }
}
@media (max-width: 640px) {
    .section { padding: var(--spacing-16) var(--spacing-4); }
    .navbar { padding: var(--spacing-4) var(--spacing-5); }
    .footer { padding: var(--spacing-12) var(--spacing-5) var(--spacing-6); }
    .footer-grid { grid-template-columns: 1fr; gap: var(--spacing-8); }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }
    .boot-log { font-size: 0.72rem; min-height: 12rem; }
}