/* The page after the scroll story: four acts (Why trust it, Where it fits, See it work, Build with it), each with its
   own label colour and background, their live parts, and the closing band. Uses the tokens in css/site.css, so both
   themes follow. */

/* ---------- the acts ---------- */
.act { position: relative; }
.act-label {
  margin: 0 0 14px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.act-result .act-label { color: var(--word-result); }
.act-worker .act-label { color: var(--word-worker); }
.act-source .act-label { color: var(--word-source); }
.act-plain .act-label { color: var(--muted); }
.act h2 { max-width: 18ch; }
.act-worker { background: radial-gradient(1100px 600px at 80% 0%, color-mix(in srgb, var(--worker) 14%, transparent), transparent 70%); }
.act-source { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.act-sub { margin: 88px 0 10px; font-size: 26px; letter-spacing: -0.02em; }
.sub-lede { max-width: 68ch; margin: 0 0 28px; color: var(--ink-2); }

/* four to a row, so the AI points line up under the eight examples; three points, one above the other */
@media (min-width: 981px) { .cases.four { grid-template-columns: repeat(4, 1fr); } }
.cases.stacked { grid-template-columns: 1fr; }

/* the page's parts that only hold their markup */
theme-toggle, chapter-dots { display: contents; }

/* ---------- act 1: one number and everything behind it, beside the three points ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 980px) { .trust-grid { grid-template-columns: 1fr; } }

provenance-diagram {
  display: block;
  padding: 18px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.6);
  backdrop-filter: blur(10px);
}
.prov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.prov-step {
  flex: 1;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s;
}
.prov-play {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: -1px;
  cursor: pointer;
}
.prov-play:hover { color: var(--ink); border-color: var(--ink-2); }
.prov-stage { position: relative; height: 360px; }
.prov-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.pnode {
  position: absolute;
  min-width: 128px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--panel-solid);
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.5s, transform 0.5s;
}
.pnode.on { opacity: 1; }
.pnode.feed { left: 0; }
.pnode.input { left: 34%; width: 30%; }
.pnode.result {
  right: 0;
  width: 31%;
  min-width: 0;
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--result) 50%, transparent);
}
.pnode .k {
  display: block;
  margin-bottom: 3px;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--word-source);
}
.pnode.result .k { color: var(--word-result); }
.pnode b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.pnode.result b { font-size: 18px; }
.pnode .age { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); }

.plink {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 0.9s ease-out, stroke 0.3s;
}
.plink.on { stroke-dashoffset: 0; }
.plink.lit { stroke: color-mix(in srgb, var(--result) 80%, transparent); }
.pdot { fill: var(--accent); }

/* ---------- act 2: product windows over a soft glow ---------- */
.windows { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; margin-top: 44px; }
@media (max-width: 1100px) { .windows { grid-template-columns: 1fr; } }
.windows::before {
  content: "";
  position: absolute;
  inset: -60px -40px;
  z-index: -1;
  border-radius: 40px;
  background:
    radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--worker) 40%, transparent), transparent 70%),
    radial-gradient(35% 45% at 85% 70%, color-mix(in srgb, var(--result) 32%, transparent), transparent 70%),
    radial-gradient(30% 40% at 55% 95%, color-mix(in srgb, var(--source) 30%, transparent), transparent 70%);
  filter: blur(30px);
  opacity: 0.55;
}
.windows .side { align-self: center; }
.windows .side h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.015em; }
.windows .side p { margin: 0 0 18px; color: var(--ink-2); }

.window {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-solid);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.02);
}
.window.wide { grid-column: 1 / -1; }
.window-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
/* the window's light: beats as its content updates */
.window-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); }
.window-dot.beat { animation: beat 0.9s ease-out; }
@keyframes beat {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); }
  to { box-shadow: 0 0 0 7px transparent; }
}
.window-title { flex: 1; font-weight: 500; color: var(--ink-2); }
.window-open { color: var(--muted); text-decoration: none; }
.window-open:hover { color: var(--ink); }
.window-body { padding: 16px 18px 18px; }

/* the data flow window */
data-flow-map { display: block; }
.mflow { position: relative; height: 300px; }
.mflow-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mflow-edges path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; transition: opacity 0.2s, stroke 0.2s; }
.mflow-edges path.lit { stroke: color-mix(in srgb, var(--accent) 85%, transparent); stroke-width: 1.8; }
.mflow.focus .mflow-edges path:not(.lit) { opacity: 0.12; }
.mnode {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel-solid);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
  transition: opacity 0.2s, box-shadow 0.3s;
}
.mnode i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.mnode.k-source i { background: var(--source); }
.mnode.k-worker i { background: var(--worker); }
.mnode.k-result i { background: var(--result); }
.mnode.ping { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.mflow.focus .mnode:not(.lit) { opacity: 0.25; }
.mflow-explain { min-height: 2.8em; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.mflow-explain b { color: var(--ink); }

/* the options window */
vol-smile { display: block; }
.msent { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.msent .fig { padding: 0 3px; border-radius: 4px; font-family: var(--mono); font-size: 0.95em; font-weight: 600; color: var(--ink); }
.msmile svg { display: block; width: 100%; height: 230px; overflow: visible; font-family: var(--mono); }

/* a figure that moved: a brief tint, up or down */
.fig.up { animation: tint-up 1.4s ease-out; }
.fig.down { animation: tint-down 1.4s ease-out; }
@keyframes tint-up { from { background: color-mix(in srgb, var(--ok) 35%, transparent); } to { background: transparent; } }
@keyframes tint-down { from { background: color-mix(in srgb, #e8635a 35%, transparent); } to { background: transparent; } }

.demo-links { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.demo-links a { padding-bottom: 2px; border-bottom: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; }
.demo-links a:hover { color: var(--ink); border-color: var(--ink-2); }
.demo-links a::after { content: " ↗"; color: var(--muted); }

/* ---------- act 3: one code panel, Java or Python ---------- */
code-languages { display: block; }
.lang { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 40px 0 18px; }
.lang-note { max-width: 70ch; margin: 0; font-size: 15px; color: var(--ink-2); }
.lang-pane { animation: pane 0.35s ease-out; }
@keyframes pane { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.segmented {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.segmented button {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: 500 13.5px/1.3 var(--sans);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}
.segmented button[aria-pressed="true"] { color: var(--ink); }
.segmented .thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 7px;
  background: var(--panel-solid);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 1px var(--line-strong);
  transition: left 0.28s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.28s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* ---------- the close ---------- */
.closing {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 100%, color-mix(in srgb, var(--worker) 26%, transparent), transparent 70%),
    radial-gradient(500px 300px at 30% 0%, color-mix(in srgb, var(--result) 12%, transparent), transparent 70%);
}
.closing h2 { max-width: 22ch; margin: 0 auto 14px; font-size: clamp(36px, 5vw, 60px); }
.closing .section-lede { margin: 0 auto 30px; }
.closing .actions { display: flex; justify-content: center; width: 100%; }

/* ---------- sections rise as they come into view ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .pnode, .plink, .lang-pane, .segmented .thumb { transition: none; animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* the comparison with today's tools: its column names on narrow screens */
@media (max-width: 760px) {
  .replaces td:nth-of-type(1)::before { content: "Today"; }
  .replaces td:nth-of-type(2)::before { content: "With Calseda"; }
}
.cases.small .case p { font-size: 15px; }
.isnt { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.readers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; margin-top: 28px; }
.readers p { margin: 0; }
@media (max-width: 980px) { .isnt, .readers { grid-template-columns: 1fr; } }