/* ===========================================================
   Truth Computing — elegance pass (shared across all pages)

   Companion to nav.css. Loaded after each page's inline <style>
   (and after nav.css) so these refinements win ties.

   Contents
     1. Motion + elevation tokens
     2. Typography detail
     3. Ambient depth
     4. Shared hover / focus / press language
     5. Entrance polish
     6. Reduced-motion guard  ← must stay last

   This file only REFINES. It sets no layout, no brand colour, and
   nothing that changes the box model, so it cannot reflow a page.
   =========================================================== */

/* ---- 1. Tokens ------------------------------------------------------ */
:root {
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast: .14s;
  --dur:      .24s;
  --dur-slow: .4s;

  --elev-2: 0 2px 4px rgba(10,10,10,.05), 0 10px 24px -8px rgba(10,10,10,.10);
  --elev-3: 0 4px 10px rgba(10,10,10,.06), 0 22px 48px -14px rgba(10,10,10,.15);

  --hairline-hover: #d4d4d4;
  --surface-hover:  #fafafa;
}

[data-theme="dark"] {
  --elev-2: 0 2px 6px rgba(0,0,0,.55), 0 12px 28px -8px rgba(0,0,0,.65);
  --elev-3: 0 4px 12px rgba(0,0,0,.6),  0 24px 52px -14px rgba(0,0,0,.7);

  --hairline-hover: #3c3c3c;
  --surface-hover:  #141414;
}

/* ---- 2. Typography detail ------------------------------------------- */
body {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}
.page-title, .page-eyebrow, .wordmark, .display,
.section-title, .prd-title, h1, h2, h3 {
  font-optical-sizing: auto;
  text-wrap: balance;
}
.page-desc, .lede, p { text-wrap: pretty; }

/* ---- 3. Ambient depth ------------------------------------------------ */
/* Two very low-opacity washes, fixed behind content. Never intercepts input. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 44% at 50% -6%,  color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    radial-gradient(48% 38% at 88% 12%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 72%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(60% 44% at 50% -6%,  color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(48% 38% at 88% 12%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%);
}

/* ---- 4. Shared interaction language ---------------------------------- */

/* Tabs: quiet underline grows from the left on hover.
   Scoped away from [aria-current] so nav.css's active indicator is untouched. */
.tab:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: .35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.tab:not([aria-current="page"]):hover::after,
.tab:not([aria-current="page"]):focus-visible::after { transform: scaleX(1); }
.tab { transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }

/* Text links: same underline-grow language. */
.footer-links a, .page-desc a, .prd-foot-link, .back {
  position: relative;
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.footer-links a::after, .page-desc a::after,
.prd-foot-link::after, .back::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.footer-links a:hover::after, .footer-links a:focus-visible::after,
.page-desc a:hover::after,    .page-desc a:focus-visible::after,
.prd-foot-link:hover::after,  .prd-foot-link:focus-visible::after,
.back:hover::after,           .back:focus-visible::after { transform: scaleX(1); }

/* Chrome: shared timing, plus a keyboard twin for every hover affordance. */
.site-brand, .menu-btn, .theme-toggle, .nav-panel-close,
.nav-panel-link, .tabs-toggle, .mob-theme-btn, .mob-overlay-close {
  transition: opacity var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.site-brand:focus-visible, .menu-btn:focus-visible,
.theme-toggle:focus-visible, .nav-panel-close:focus-visible,
.tabs-toggle:focus-visible, .mob-theme-btn:focus-visible,
.mob-overlay-close:focus-visible { opacity: 1; }
.nav-panel-link:focus-visible { color: var(--ink); }
.theme-toggle:active, .menu-btn:active, .nav-panel-close:active { transform: scale(.94); }

/* Interactive cards + rows: one lift, one timing, everywhere. */
.module-card, .milestone, .sidebar-btn, .industry-panel, .closing-cta {
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
a.module-card:hover, a.milestone:hover,
a.industry-panel:hover, a.closing-cta:hover,
button.module-card:hover, button.sidebar-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--hairline-hover);
}
a.module-card:active, a.milestone:active,
a.industry-panel:active, a.closing-cta:active,
button.module-card:active, button.sidebar-btn:active {
  transform: translateY(0) scale(.985);
  transition-timing-function: var(--ease-spring);
}

/* Pills */
.chip {
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
a.chip:hover, button.chip:hover {
  border-color: var(--hairline-hover);
  background: var(--surface-hover);
}

/* Directional glyphs follow the pointer. */
.arw, .arrow, .connect-option-arrow, .writing-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
a:hover > .arw, a:hover .arrow,
a:focus-visible > .arw, a:focus-visible .arrow { transform: translateX(4px); }

/* ---- 5. Entrance ----------------------------------------------------- */
/* Adds a slight blur to the existing fade + rise. No new hidden elements:
   every selector here is one a page already animates, so nothing extra can
   be stranded invisible if JS fails. */
.reveal, .ps-reveal {
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
}
.reveal.in, .ps-reveal.ps-in { filter: none; }

/* ---- 6. Reduced motion (keep last) ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .ps-reveal { opacity: 1; transform: none; filter: none; }
  .tab:not([aria-current="page"])::after { transform: scaleX(0); }
  .tab:not([aria-current="page"]):hover::after { transform: scaleX(1); }
}