/* ============================================================
   enhance.css — modern UI layer (theme, scroll progress,
   card microinteractions, view transitions). All same-origin,
   CSP-safe, and reduced-motion gated. Loaded after style.css.
   ============================================================ */

/* ---------------- LIGHT THEME ---------------- */
/* Dark is the default (:root in style.css). Light remaps surfaces/text. */
html[data-theme="light"] {
  --ink-950: #f5f8fb;   /* page background */
  --ink-900: #ffffff;   /* raised card */
  --ink-800: #eef3f8;   /* card */
  --ink-700: #e2eaf2;   /* hover surface */
  --ink-600: #cdd9e6;   /* borders/dividers */

  --mist-100: #0a1929;  /* strongest text */
  --mist-200: #1f3349;  /* secondary text — ~10:1 on #f5f8fb */
  --mist-300: #2f4a63;  /* nav links + stat labels — ~8.6:1, readable over particles */
  --mist-400: #3e5870;  /* meta text — ~6.9:1 on #f5f8fb */
  --mist-500: #50697f;

  /* deepen accents for contrast on light surfaces (>=4.5:1 on #f5f8fb) */
  --teal-300: #0a6675;
  --teal-400: #0a6675;
  --teal-500: #0a5566;
  --teal-600: #084f5b;
  --amber-400: #8a5800;

  /* RGB triplets must flip too, so rgba(var(--x-rgb), a) surfaces/borders
     composite against the light palette instead of the dark one. */
  --ink-950-rgb: 245, 248, 251;
  --ink-900-rgb: 255, 255, 255;
  --ink-800-rgb: 238, 243, 248;
  --ink-700-rgb: 226, 234, 242;
  --ink-600-rgb: 205, 217, 230;
  --mist-100-rgb: 10, 25, 41;
  --mist-200-rgb: 31, 51, 73;
  --mist-300-rgb: 47, 74, 99;
  --mist-400-rgb: 62, 88, 112;
  --mist-500-rgb: 80, 105, 127;
}

html[data-theme="light"] body { background: var(--ink-950); color: var(--mist-100); }

/* Light hero: fully light surface. The 3D canvas is transparent and JS recolors
   the particles to dark-teal (normal blending) so they read on white. The teal
   glow + grid get a touch more presence on the light surface. */
html[data-theme="light"] .hero::after {
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(13, 124, 140, 0.10), transparent 60%);
}
html[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(13, 124, 140, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 124, 140, 0.06) 1px, transparent 1px);
}
html[data-theme="light"] ::selection { background: var(--teal-400); color: #fff; }

/* Smoothly cross-fade colors when toggling (not on first paint) */
html.theme-ready body,
html.theme-ready .nav,
html.theme-ready .hero { transition: background-color .4s var(--ease-out-quart), color .4s var(--ease-out-quart); }

/* ---------------- THEME TOGGLE BUTTON ---------------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mist-400) 28%, transparent);
  background: color-mix(in srgb, var(--ink-800) 60%, transparent);
  color: var(--mist-200);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.theme-toggle:hover { color: var(--teal-300); border-color: color-mix(in srgb, var(--teal-400) 45%, transparent); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--teal-400); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------------- SCROLL PROGRESS BAR ---------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal-400), var(--amber-400));
  z-index: 60;
  pointer-events: none;
}
/* Native scroll-driven animation where supported — zero JS, runs off main thread */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------------- CARD MICROINTERACTIONS ---------------- */
/* Hover-lift + cursor spotlight on the actual CARD families only. --mx/--my set
   by JS. NOTE: .system is a full-width section block (not a card) — applying the
   hover treatment to it lit up a huge area bleeding into the next system, so it
   is deliberately excluded here and in enhance.js. */
.expertise-card,
.venture,
.post,
.channel {
  position: relative;
  transition: transform .25s var(--ease-out-quart), box-shadow .25s var(--ease-out-quart),
              border-color .25s var(--ease-out-quart);
}
.expertise-card::after,
.venture::after,
.post::after,
.channel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out-quart);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--teal-400) 16%, transparent),
    transparent 60%
  );
}
@media (hover: hover) {
  .expertise-card:hover,
  .venture:hover,
  .post:hover,
  .channel:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--teal-400) 38%, transparent);
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--teal-400) 12%, transparent);
  }
  .expertise-card:hover::after,
  .venture:hover::after,
  .post:hover::after,
  .channel:hover::after { opacity: 1; }
}

/* Magnetic primary CTA — JS sets --tx/--ty within a small range */
.cta.primary { transition: transform .18s var(--ease-out-quart), box-shadow .25s; will-change: transform; }
@media (hover: hover) {
  .cta.primary { transform: translate(var(--tx, 0), var(--ty, 0)); }
  .cta.primary:hover { box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--teal-400) 60%, transparent); }
}

/* ---------------- VIEW TRANSITIONS ---------------- */
/* Cross-document transitions (progressive enhancement; ignored where unsupported) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }

/* ---------------- REDUCED MOTION: disable all the above ---------------- */
@media (prefers-reduced-motion: reduce) {
  html.theme-ready body,
  html.theme-ready .nav,
  html.theme-ready .hero { transition: none; }
  .scroll-progress { display: none; }
  .expertise-card, .venture, .post, .channel,
  .expertise-card::after, .venture::after, .post::after, .channel::after,
  .cta.primary { transition: none; }
  .expertise-card:hover, .venture:hover, .post:hover, .channel:hover { transform: none; }
  .cta.primary { transform: none; }
  @view-transition { navigation: none; }
}

/* ---------------- COMMAND PALETTE (⌘K) ---------------- */
.cmdk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 14, 0.55); backdrop-filter: blur(4px); }
.cmdk-panel {
  position: relative;
  margin-top: 12vh;
  width: min(560px, 92vw);
  background: rgba(var(--ink-900-rgb), 0.96);
  border: 1px solid rgba(var(--mist-400-rgb), 0.2);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  overflow: hidden;
  animation: cmdk-in .16s var(--ease-out-quart);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cmdk-input {
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--mist-400-rgb), 0.16);
  color: var(--mist-100);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
}
.cmdk-input::placeholder { color: var(--mist-400); }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--mist-200);
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
}
.cmdk-item.active { background: rgba(var(--teal-400-rgb, 93,214,229), 0.14); color: var(--mist-100); }
.cmdk-hint {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 16px;
  border-top: 1px solid rgba(var(--mist-400-rgb), 0.12);
  font-family: var(--font-mono); font-size: 11px; color: var(--mist-400);
}
.cmdk-hint kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(var(--mist-400-rgb), 0.16);
  border: 1px solid rgba(var(--mist-400-rgb), 0.22);
  color: var(--mist-300);
}

/* on-page ⌘K trigger chip (optional) */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid rgba(var(--mist-400-rgb), 0.24);
  background: rgba(var(--ink-800-rgb), 0.5);
  color: var(--mist-400); font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.cmdk-trigger:hover { color: var(--teal-300); border-color: rgba(var(--teal-400-rgb, 93,214,229), 0.4); }

/* ---------------- SCROLL-SPY active nav ---------------- */
.nav-links a.spy-active { color: var(--teal-300); }

/* ---------------- STAGGERED SECTION REVEALS ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .section .section-head,
  .section .container > .timeline,
  .section .expertise-grid,
  .section .venture-grid,
  .section .writing-grid {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out-quart), transform .6s var(--ease-out-quart);
  }
  .section.in-view .section-head,
  .section.in-view .container > .timeline,
  .section.in-view .expertise-grid,
  .section.in-view .venture-grid,
  .section.in-view .writing-grid { opacity: 1; transform: none; }
  .section.in-view .container > * { transition-delay: .05s; }
}

@media (prefers-reduced-motion: reduce) {
  .cmdk-panel { animation: none; }
}

/* ---------------- LOGO MARK (theme-aware) ---------------- */
/* The inline SVG uses thin 1.5px strokes + a hardcoded light-teal crossbar that
   vanishes on the light surface. CSS overrides the presentation attributes so the
   mark reads clearly in both themes: a touch more weight, and an accent bar that
   flips with the theme (bright teal on dark, deep teal on light). */
.logo svg circle,
.logo svg path { stroke-width: 2; }
.logo svg [stroke="#5DD6E5"] { stroke: var(--teal-400); }

/* ---------------- GLOBAL FOCUS-VISIBLE (keyboard a11y) ---------------- */
/* style.css shipped no focus styles, so keyboard users relied on weak browser
   defaults. A single theme-aware ring covers every interactive element; the
   more specific rings (theme-toggle, skip-link, article links) still win. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.post:focus-visible,
.cta:focus-visible,
.nav-links a:focus-visible,
.nav-cta:focus-visible,
.cmdk-item:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 6px;
}
/* never leave an element with its outline removed and no replacement */
:focus:not(:focus-visible) { outline: none; }

/* ---------------- DIAGRAM EDGES/PULSES (light-mode legibility) ---------------- */
/* The architecture-diagram SVGs hardcode bright cyan (#5DD6E5) for edges, pulse
   dots, and gradient stops — fine on the dark canvas, but faint on the light
   card. CSS properties override SVG presentation attributes, so retarget the
   cyan to the deep-teal accent in light mode only (text already flips via CSS).
   Amber pulses (#FBBF24) are left as-is — they read on both. */
html[data-theme="light"] .diagram [stroke="#5DD6E5"] { stroke: #0d7c8c; }
html[data-theme="light"] .diagram [fill="#5DD6E5"] { fill: #0d7c8c; }
html[data-theme="light"] .diagram [stop-color="#5DD6E5"] { stop-color: #0d7c8c; }

/* The hero "gateway/orb" node renders as a deliberately dark glowing pill in
   BOTH themes (radial-gradient fill). In light mode its label otherwise inherits
   the dark text palette → invisible on the dark orb. Keep its text bright. */
html[data-theme="light"] .diagram .node.gateway.hero .gateway-name { fill: #bdeef5; }
html[data-theme="light"] .diagram .node.gateway.hero .sub,
html[data-theme="light"] .diagram .node.gateway.hero text { fill: #dbe9f2; }