/* ==========================================================================
   TKCH v2 — brand layer: section themes, typography, buttons, product windows,
   callouts, delivery-state chips. Owner: Claude 1. Layout primitives live in base.css.
   ========================================================================== */

/* ---------- Themed surfaces ---------- */
[data-theme] {
  background-color: var(--bg);
  color: var(--fg);
}

/* Film grain on dark fields so large dark areas are not flat plastic */
/* .projects: the wrapper shows between RelayDen and the first project, so it needs the same grain or
   the texture stops in a visible line. */
[data-grain], .projects { position: relative; isolation: isolate; }
:is([data-grain], .projects)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--accent-fg); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--sans);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.h-hero {
  font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5.25rem);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h-section {
  font-size: var(--fs-2xl);
  font-weight: 750;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h-sub {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-head);
  text-wrap: balance;
}
.h-item {
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lede {
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}
.muted { color: var(--fg-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.mono { font-family: var(--mono); font-size: 0.92em; }
code { font-family: var(--mono); font-size: 0.9em; }

/* Big numbers as image */
.stat { display: grid; gap: 0.35rem; }
.stat b {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--fs-sm); color: var(--fg-muted); max-width: 22ch; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--accent);
  --b-fg: var(--accent-fg);
  --b-bd: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 50px;
  padding: 0.8em 1.35em;
  border: 1.5px solid var(--b-bd);
  border-radius: 999px;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out), background-color var(--dur-s), color var(--dur-s), border-color var(--dur-s), box-shadow var(--dur-s);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.3s var(--ease-out); }
.btn:hover { box-shadow: 0 10px 30px -10px var(--glow); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--signal { --b-bg: var(--c-signal); --b-fg: #160700; --b-bd: var(--c-signal); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--line); }
.btn--ghost:hover { --b-bd: var(--fg); }
.btn--invert { --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg); }
.btn--sm { min-height: 40px; padding: 0.5em 1em; font-size: var(--fs-sm); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.6; cursor: not-allowed; }

.link, .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--fg);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset var(--dur-s) var(--ease-out);
}
.link:hover, .link-arrow:hover { text-underline-offset: 0.45em; }

.link svg, .link-arrow svg { width: 0.95em; height: 0.95em; }

/* ---------- Product window: real screenshots as physical objects ---------- */
.window {
  position: relative;
  margin: 0;
  border-radius: var(--radius-window);
  background: var(--surface);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  outline: 1px solid rgb(255 255 255 / 0.07);
  outline-offset: -1px;
}
[data-theme="paper"] .window, [data-theme="archive"] .window { outline-color: rgb(0 0 0 / 0.08); }
.window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 34px;
  padding: 0 0.9rem;
  background: rgb(255 255 255 / 0.04);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--fg-muted);
}
.window__bar .dots { display: flex; gap: 6px; }
.window__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.window img, .window picture { display: block; width: 100%; height: auto; }

/* Coloured light behind a product */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
}

/* Thin RelayDen signature line */

/* ---------- Callouts on real UI ---------- */
.marker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 0 0 4px rgb(0 0 0 / 0.25), 0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
}
.marker::after {
  /* slow pulse ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: marker-ping 2.8s var(--ease-out) infinite;
}
@keyframes marker-ping {
  0% { opacity: 0.7; transform: scale(0.8); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

.callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: callout;
}
.callouts li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}
.callouts li::before {
  counter-increment: callout;
  content: counter(callout);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.callouts strong { display: block; color: var(--fg); font-weight: 650; font-size: var(--fs-base); margin-bottom: 0.15rem; }

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.tags li {
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--fg);
}

/* ---------- Delivery-state chips (RelayDen vocabulary) ---------- */
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: rgb(10 14 28 / 0.86);
  border: 1px solid rgb(126 162 255 / 0.22);
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.3;
  color: #dfe6ff;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.state b { font-weight: 650; color: #fff; }
.state::before {
  /* the status dot is drawn by CSS, so markup only carries data-state */
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--st-c, var(--st-queued));
  transition: background-color 0.35s;
}
.state[data-state="queued"]   { --st-c: var(--st-queued); }
.state[data-state="sending"]  { --st-c: var(--st-sending); }
.state[data-state="accepted"] { --st-c: var(--st-accepted); }
.state[data-state="received"] { --st-c: var(--st-received); }
.state[data-state="failed"]   { --st-c: var(--st-failed); }
.state[data-state="sending"]::before { animation: st-pulse 1s var(--ease-in-out) infinite; }
@keyframes st-pulse { 50% { opacity: 0.35; } }

/* ---------- Motion: visuals rise into place (never text) ---------- */
.js:not(.motion-on) [data-lift] {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity var(--dur-l) var(--ease-out), transform var(--dur-l) var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js:not(.motion-on) [data-lift][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js:not(.motion-on) [data-lift] { opacity: 1; transform: none; transition: none; }
  .marker::after, .state[data-state="sending"]::before { animation: none; }
}

@media (forced-colors: active) {
  .state::before, .marker { forced-color-adjust: none; }
  .btn { border: 1px solid ButtonText; }
}