/* Captain's Log — The Commit Heatmap
   Palette from the app icon: a GitHub contribution grid — five shades of
   green on GitHub-dark. Dark-first, mono-forward (it's a dev tool). The
   signature motion is the Work Map filling in: cells light up like commits
   landing, then the daily note writes itself. */

:root {
    /* Light mode — GitHub light */
    --cl-bg: #FFFFFF;
    --cl-surface: #F6F8FA;
    --cl-surface-2: #EAEEF2;
    --cl-text: #1F2328;
    --cl-muted: #59636E;
    --cl-border: #D0D7DE;
    --cl-accent: #1A7F37;
    --cl-accent-hover: #116329;
    --cl-accent-soft: rgba(26, 127, 55, 0.1);
    --cl-glow: rgba(45, 164, 78, 0.22);
    /* contribution scale (light) */
    --cl-l0: #EBEDF0; --cl-l1: #9BE9A8; --cl-l2: #40C463; --cl-l3: #30A14E; --cl-l4: #216E39;

    --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;

    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-pop: cubic-bezier(.34, 1.4, .5, 1);

    --bs-primary: var(--cl-accent);
    --bs-body-bg: var(--cl-bg);
    --bs-body-color: var(--cl-text);
    --bs-link-color: var(--cl-accent);
}

[data-theme="dark"] {
    /* Dark mode (default) — straight from the icon */
    --cl-bg: #0D1117;
    --cl-surface: #161B22;
    --cl-surface-2: #1C2128;
    --cl-text: #E6EDF3;
    --cl-muted: #7D8590;
    --cl-border: #30363D;
    --cl-accent: #3FB950;
    --cl-accent-hover: #56D364;
    --cl-accent-soft: rgba(63, 185, 80, 0.13);
    --cl-glow: rgba(57, 211, 83, 0.28);
    /* contribution scale (dark) */
    --cl-l0: #161B22; --cl-l1: #0E4429; --cl-l2: #006D32; --cl-l3: #26A641; --cl-l4: #39D353;

    --bs-body-bg: var(--cl-bg);
    --bs-body-color: var(--cl-text);
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-primary);
    background: var(--cl-bg); color: var(--cl-text);
    transition: background-color .2s ease, color .2s ease;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--cl-accent); text-decoration: none; }
a:hover { color: var(--cl-accent-hover); }
::selection { background: var(--cl-accent); color: var(--cl-bg); }
.mono { font-family: var(--font-mono); }
.skip-link {
    position: absolute; top: 8px; left: 8px; z-index: 2000;
    background: var(--cl-accent); color: #fff; padding: .5rem .75rem;
    border-radius: 8px; font-weight: 600;
}

/* ---------- Resilient scroll reveal: hidden ONLY when JS is present ---------- */

.js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: var(--d, 0s); will-change: opacity, transform;
}
.js [data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Scroll progress: the contribution bar ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--cl-l1), var(--cl-l3), var(--cl-l4));
    z-index: 3000; pointer-events: none;
}

/* ---------- Navbar ---------- */
.navbar {
    background: color-mix(in srgb, var(--cl-bg) 85%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--cl-border);
}
.navbar-brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 800; letter-spacing: -0.01em; color: var(--cl-text) !important;
}
.brand-img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.brand-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    width: 26px; height: 26px;
}
.brand-grid i { border-radius: 2px; background: var(--cl-l1); }
.brand-grid i:nth-child(1), .brand-grid i:nth-child(3),
.brand-grid i:nth-child(4), .brand-grid i:nth-child(8),
.brand-grid i:nth-child(9) { background: var(--cl-l4); }
.brand-grid i:nth-child(5), .brand-grid i:nth-child(6) { background: var(--cl-l0); }
.navbar .nav-link { color: var(--cl-muted); font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--cl-text); }
.navbar-toggler { border-color: var(--cl-border); }
.theme-toggle {
    background: transparent; border: 1px solid var(--cl-border); border-radius: 10px;
    color: var(--cl-muted); width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--cl-text); border-color: var(--cl-muted); }
[data-theme="dark"] .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: inline; }
.theme-icon-light { display: none; }

/* ---------- Buttons ---------- */
.btn-cl {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--cl-accent); border: none; color: #fff;
    font-weight: 700; padding: .8rem 1.6rem; border-radius: 10px;
    box-shadow: 0 6px 20px var(--cl-glow);
    transition: transform .12s var(--ease-out), box-shadow .25s ease, background .15s ease;
}
.btn-cl:hover { background: var(--cl-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px var(--cl-glow); }
.btn-cl:active { transform: translateY(1px); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 1px solid var(--cl-border); color: var(--cl-text);
    font-weight: 600; padding: .8rem 1.5rem; border-radius: 10px;
    transition: border-color .15s ease, background .15s ease, transform .12s var(--ease-out);
}
.btn-ghost:hover { border-color: var(--cl-accent); background: var(--cl-accent-soft); color: var(--cl-text); }

/* ---------- Hero ---------- */
.hero {
    padding: 5rem 0 4rem; position: relative; overflow: hidden;
    min-height: 80vh; display: flex; align-items: center;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(2.6rem, 5.6vw, 4.4rem);
    font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; text-wrap: balance;
}
.hero h1 .accent { color: var(--cl-accent); }
.hero h1 .line { display: block; opacity: 0; transform: translateY(28px); animation: rise .75s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero .lead-copy { color: var(--cl-muted); font-size: 1.16rem; max-width: 33rem; opacity: 0; animation: rise .75s var(--ease-out) .35s forwards; }
.hero-actions { opacity: 0; animation: rise .75s var(--ease-out) .5s forwards; }
.hero-meta { opacity: 0; animation: rise .75s var(--ease-out) .62s forwards; }
.platform-row { display: flex; flex-wrap: wrap; gap: 1.4rem; color: var(--cl-muted); font-size: .85rem; font-weight: 600; align-items: flex-end; opacity: 0; animation: rise .75s var(--ease-out) .76s forwards; }
.platform-row svg { display: block; margin: 0 auto .35rem; }
.platform-row .platform { text-align: center; transition: color .15s ease, transform .2s var(--ease-pop); }
.platform-row .platform:hover { color: var(--cl-text); transform: translateY(-3px); }
.platform-row .platform:hover svg { color: var(--cl-accent); }
@media (prefers-reduced-motion: reduce) {
    .hero h1 .line, .hero .lead-copy, .hero-actions, .hero-meta, .platform-row { opacity: 1; animation: none; transform: none; }
}

/* ---------- The Work Map: the set piece ---------- */
.workmap {
    background: var(--cl-surface); border: 1px solid var(--cl-border);
    border-radius: 14px; padding: 1.3rem 1.4rem; max-width: 480px; width: 100%;
    box-shadow: 0 24px 64px rgba(1, 4, 9, .5); position: relative; z-index: 1;
}
:root:not([data-theme="dark"]) .workmap { box-shadow: 0 20px 50px rgba(31, 35, 40, .12); }
.workmap__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.workmap__title { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.workmap__title svg { color: var(--cl-muted); }
.workmap__repo { font-family: var(--font-mono); font-size: .76rem; color: var(--cl-muted); background: var(--cl-surface-2); padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--cl-border); }

.grid {
    display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column;
    gap: 3px; margin-bottom: .35rem;
}
.cell {
    width: 100%; aspect-ratio: 1; border-radius: 2.5px;
    animation: cell-fill .42s var(--ease-pop) both; animation-delay: calc(var(--i) * 16ms);
}
.cell--0 { --to: var(--cl-l0); } .cell--1 { --to: var(--cl-l1); }
.cell--2 { --to: var(--cl-l2); } .cell--3 { --to: var(--cl-l3); } .cell--4 { --to: var(--cl-l4); }
.cell { background: var(--to, var(--cl-l0)); }
@keyframes cell-fill {
    0% { transform: scale(.2); opacity: .2; background: var(--cl-l0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; background: var(--to, var(--cl-l0)); }
}
.grid-legend { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; font-size: .72rem; color: var(--cl-muted); }
.grid-legend i { width: 11px; height: 11px; border-radius: 2.5px; display: inline-block; }

.workmap__stats { display: flex; gap: 1.1rem; margin: .9rem 0; font-family: var(--font-mono); font-size: .82rem; }
.stat-add { color: var(--cl-accent); } .stat-del { color: #F85149; }
.stat-label { color: var(--cl-muted); }

/* Daily note card */
.note {
    background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 10px;
    padding: .95rem 1.05rem; font-size: .88rem;
}
.note__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; }
.note__title { font-weight: 700; }
.note__date { font-family: var(--font-mono); font-size: .74rem; color: var(--cl-muted); }
.note__point { display: flex; gap: .5rem; margin-bottom: .35rem; color: var(--cl-text); line-height: 1.4; }
.note__num { font-family: var(--font-mono); color: var(--cl-accent); font-weight: 700; }
.note__tags { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.tag { font-family: var(--font-mono); font-size: .72rem; color: var(--cl-accent); background: var(--cl-accent-soft); padding: .15rem .5rem; border-radius: 999px; }
.note__evidence { margin-top: .55rem; font-size: .74rem; color: var(--cl-muted); display: flex; align-items: center; gap: .4rem; }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section--alt { background: var(--cl-surface); border-block: 1px solid var(--cl-border); }
section[id] { scroll-margin-top: 84px; }
.section-kicker { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--cl-accent); }
.section h2 { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2rem, 4.4vw, 2.9rem); }
.section .section-sub { color: var(--cl-muted); max-width: 38rem; font-size: 1.04rem; }

/* ---------- Feature grid ---------- */
.feature-card {
    background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 12px;
    padding: 1.6rem; height: 100%;
    transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .25s ease;
}
.section--alt .feature-card { background: var(--cl-bg); }
.feature-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cl-accent) 50%, var(--cl-border)); box-shadow: 0 14px 38px rgba(1,4,9,.35); }
:root:not([data-theme="dark"]) .feature-card:hover { box-shadow: 0 14px 32px rgba(31,35,40,.1); }
.feature-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--cl-accent-soft); color: var(--cl-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.feature-card p { color: var(--cl-muted); font-size: .95rem; margin-bottom: 0; }

/* ---------- Scrollytelling: connect -> map -> note ---------- */
.scrolly { position: relative; }
.scrolly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.scrolly-stage { position: sticky; top: 14vh; height: 64vh; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.stage-layer { position: absolute; width: min(420px, 92%); opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; }
[data-step="1"] .stage-s1, [data-step="2"] .stage-s2, [data-step="3"] .stage-s3 { opacity: 1; transform: none; }
.scrolly-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; }
.scrolly-step .step-num { font-family: var(--font-mono); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--cl-accent); margin-bottom: .4rem; }
.scrolly-step h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.scrolly-step p { color: var(--cl-muted); font-size: 1.05rem; max-width: 26rem; }

/* repo-pick panel (stage 1) */
.repo-panel { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 12px; padding: 1.3rem; box-shadow: 0 18px 44px rgba(1,4,9,.4); }
.repo-panel h4 { font-size: .92rem; font-weight: 800; margin-bottom: .9rem; }
.repo-row { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .85rem; padding: .5rem .65rem; border-radius: 8px; border: 1px solid var(--cl-border); margin-bottom: .5rem; color: var(--cl-muted); }
.repo-row .check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--cl-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.repo-row--on { color: var(--cl-text); border-color: var(--cl-accent); }
.repo-row--on .check { background: var(--cl-accent); border-color: var(--cl-accent); color: #fff; }

/* ---------- Terminal (the CLI / save points) ---------- */
.terminal { background: #010409; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; font-family: var(--font-mono); font-size: .88rem; box-shadow: 0 20px 60px rgba(1,4,9,.5); }
:root:not([data-theme="dark"]) .terminal { box-shadow: 0 18px 44px rgba(31,35,40,.18); }
.terminal__bar { display: flex; gap: .4rem; padding: .65rem .9rem; background: #0D1117; border-bottom: 1px solid var(--cl-border); }
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: #30363D; }
.terminal__body { padding: 1.1rem 1.2rem 1.3rem; color: #C9D1D9; line-height: 1.8; min-height: 210px; }
.terminal__body .prompt { color: var(--cl-accent); font-weight: 700; }
.terminal__body .cmd { color: #E6EDF3; }
.terminal__body .out { color: #7D8590; }
.terminal__body .ok { color: var(--cl-accent); }
.type-line { white-space: pre-wrap; }
.type-line.typing::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; background: var(--cl-accent); vertical-align: text-bottom; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Honesty strip ---------- */
.locked-strip { border-left: 3px solid var(--cl-accent); background: var(--cl-accent-soft); border-radius: 0 12px 12px 0; padding: 1.1rem 1.4rem; font-size: 1.02rem; }
.locked-strip strong { font-weight: 700; }

/* ---------- Footer ---------- */
.footer { background: var(--cl-surface); border-top: 1px solid var(--cl-border); padding: 3.5rem 0 2rem; color: var(--cl-muted); font-size: .95rem; }
.footer h6 { color: var(--cl-text); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.footer a { color: var(--cl-muted); }
.footer a:hover { color: var(--cl-accent); }
.footer hr { border-color: var(--cl-border); opacity: 1; }
.footer__copy { color: color-mix(in srgb, var(--cl-text) 80%, var(--cl-surface)); }

/* ---------- Prose ---------- */
.prose { max-width: 46rem; }
.prose h1 { font-weight: 800; letter-spacing: -0.02em; }
.prose h2 { font-weight: 700; font-size: 1.35rem; margin-top: 2.2rem; }
.prose p, .prose li { color: var(--cl-muted); line-height: 1.7; }
.prose strong { color: var(--cl-text); }

.text-muted-cl { color: var(--cl-muted) !important; }
img { max-width: 100%; height: auto; }

@media (max-width: 991px) {
    .hero { padding: 4rem 0 3rem; min-height: 0; }
    .workmap { margin-top: 2.5rem; }
    .scrolly-grid { grid-template-columns: 1fr; gap: 0; }
    .scrolly-stage { display: none; }
    .scrolly-step { min-height: 0; padding: 2rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cell { animation: none; }
    .stage-layer { transition: none; }
}

/* ============================================================
   Dark-mode contrast (a11y)
   The accent green flips LIGHTER in dark (--cl-accent #1A7F37→
   #3FB950, hover→#56D364), so the pinned white button/checkmark
   text fell to ~2.5:1 (1.9:1 on hover). Pin foreground to the
   near-black bg ink → 7.45:1 (5.69:1 hover). Lift the repo pill
   muted grey (was 4.34:1) just where it sits on surface-2.
   ============================================================ */
[data-theme="dark"] .btn-cl,
[data-theme="dark"] .btn-cl:hover { color: var(--cl-bg); }
[data-theme="dark"] .repo-row--on .check { color: var(--cl-bg); }
[data-theme="dark"] .workmap__repo { color: #8B949E; }