@import url("../_ds/fonts.css");
@import url("../_ds/theme.css");
@import url("../_shared/chrome.css");
@import url("../_shared/components.css");
@import url("../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /agents — Agent-native distribution layer.

   Audience-cut master page for AI agent developers.  Anchors the
   open-source aurkenb/zenrows-agent-toolkit as the layer that
   ships Zenrows infrastructure into Claude Code, Cursor, VS Code,
   Windsurf, Gemini, Codex, OpenCode, and any MCP-speaking client.

   Hero composition ported 1:1 from /mcp Act 1 — same
   asymmetric editorial / convo / install rhythm, agent-toolkit
   copy.  Class prefix `ag-` instead of `mc-` so /agents/ can
   diverge from MCP styling without cross-contamination.
─────────────────────────────────────────────────────────── */


main {
  position: relative;
  z-index: 1;
}

/* Cursor suppression — every selector in agents.js's
   cursorSelector hides the native pointer so the spinning O
   portal is the only pointer on hover. */
.back-to-top,
.ag-init,
.ag-init *,
.ag-loop-frame,
.ag-loop-frame *,
.ag-verbs-row,
.ag-compose,
.ag-compose *,
.ag-end-prompt,
.ag-end-prompt * {
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   Act 1 — Hero.  Asymmetric editorial + live conversation.
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--background);
  z-index: 1;
}

.ag-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(40px, 5vw, 88px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: calc(100vh - clamp(96px, 12vh, 140px) - clamp(56px, 8vh, 96px));
}

/* Editorial column — vertical flex that fills the viewport
   height.  The .ag-hero-top stack (kicker + H1) takes auto
   margins so it sits vertically centred; the CTA at the
   bottom is the last flex child, anchored to the floor. */
.ag-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 620px;
  min-width: 0;
}

.ag-hero-top {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* H1 — 3 declarative lines, each block-level.  One editorial
   mark (the trailing "Enrich.") painted purple-7 — the single
   accent rule per DESIGN.md ("one word, one accent"). */
.ag-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h3);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.ag-hero-line { display: block; }
.ag-hero-mark {
  font-style: normal;
  color: #7C4FE8;
}

/* Sub-headline below the H1, per CEO brief spec for the
   Agent Toolkit page (sect 23.2).  Quiet editorial paragraph
   that names the surfaces and the outcome before the install
   panel takes over.  Stays inside the hero-top stack so the
   CTA still anchors at the bottom of the column via the
   margin: auto pair on .ag-hero-top. */
.ag-hero-sub {
  margin: clamp(20px, 2.4vh, 32px) 0 0;
  max-width: 56ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The CTA composition uses the shared .cta-stack--inline +
   .cta-stack-tag from components.css.  Anchored to the bottom
   of the editorial column by the .ag-hero-top above taking
   margin-bottom: auto. */

/* Demo column — conversation panel + install command stacked.
   Vertically centred in the viewport-tall column to match the
   editorial side. */
.ag-hero-demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vh, 24px);
  min-width: 0;
}

/* Install trace panel.  Frame-only border-subtle.  No fill, no
   shadow — the streaming lines carry the visual weight, not
   the container. */
.ag-init {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(320px, 44vh, 440px);
}

.ag-init-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  isolation: isolate;
  min-height: 44px;
}

/* Mesh-gradient backdrop — orange-5 → purple-5 linear base +
   four colour bubbles drifting on independent loops.  Same
   visual family as /mcp Act 1 + /cli hero
   terminal bar so all three live-channel surfaces share one
   identity. */
.ag-init-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--zen-orange-5, #C97A4E) 0%,
    var(--zen-purple-5, #6B4DCF) 100%
  );
}

.ag-init-bubble {
  position: absolute;
  width: 65%;
  height: 280%;
  border-radius: 50%;
  filter: blur(34px);
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0.92;
  will-change: transform;
}

.ag-init-bubble[data-bubble="1"] {
  background: var(--zen-purple-6, #9B6FFF);
  top: -90%;
  left: -10%;
  animation: ag-bubble-1 7s ease-in-out infinite alternate;
}
.ag-init-bubble[data-bubble="2"] {
  background: var(--zen-orange-6, #F38C5A);
  top: -80%;
  left: 35%;
  animation: ag-bubble-2 9s ease-in-out infinite alternate;
}
.ag-init-bubble[data-bubble="3"] {
  background: var(--zen-red-6, #F36A6A);
  top: -100%;
  left: 55%;
  animation: ag-bubble-3 11s ease-in-out infinite alternate;
}
.ag-init-bubble[data-bubble="4"] {
  background: #7ADAE6;
  top: -85%;
  left: 18%;
  animation: ag-bubble-4 13s ease-in-out infinite alternate;
}

@keyframes ag-bubble-1 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(55%,  20%); }
}
@keyframes ag-bubble-2 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(-40%, 30%); }
}
@keyframes ag-bubble-3 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(45%, -25%); }
}
@keyframes ag-bubble-4 {
  0%   { transform: translate(0,    0); }
  100% { transform: translate(-30%,-20%); }
}

.ag-init-bar > *:not(.ag-init-mesh) {
  position: relative;
  z-index: 1;
}

.ag-init-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.ag-init-name {
  margin-left: 8px;
  color: #FFFFFF;
  font-weight: 600;
}

.ag-init-arrow {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 4px;
}

.ag-init-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}

.ag-init-status[data-status="busy"] {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

.ag-init-status[data-status="done"] {
  background: rgba(122, 218, 230, 0.32);
  border-color: rgba(122, 218, 230, 0.65);
  color: #FFFFFF;
}

/* Body — wraps the command line, the streaming feed, and the
   final ready line.  Padded inside the panel. */
.ag-init-body {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  padding: clamp(18px, 2vh, 26px) clamp(18px, 2vw, 26px) clamp(16px, 2vh, 22px);
  font-family: var(--font-code, monospace);
  font-size: clamp(12.5px, 1vw, 14.5px);
  line-height: 1.55;
  flex: 1 1 auto;
}

/* Command line — the `$ npx ... init --all` that the trace
   below is executing.  Sits as a header for the feed. */
.ag-init-cmd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.ag-init-cmd .ag-init-prompt {
  color: var(--text-quaternary);
  font-weight: 600;
}

.ag-init-cmd code {
  color: var(--text-primary);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

/* Feed — 8 install lines reveal in sequence.  Each line is a
   4-column grid: bullet · category label · value · check. */
.ag-init-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
}

.ag-init-line {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: clamp(10px, 1vw, 16px);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-init-line.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.ag-init-bullet {
  color: #7C4FE8;
  font-weight: 700;
  width: clamp(10px, 1vw, 14px);
  text-align: center;
}

.ag-init-label {
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  min-width: clamp(72px, 9vw, 100px);
}

.ag-init-value {
  color: var(--text-primary);
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Check pops in with overshoot once the line has been shown
   for ~120ms — gives each line a tiny rhythm break. */
.ag-init-check {
  color: #7ADAE6;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms,
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms;
}

.ag-init-line.is-shown .ag-init-check {
  opacity: 1;
  transform: scale(1);
}

/* Ready footer — appears after the last line lands.  Lower-key
   typographic moment closing the trace; mono hint inside. */
.ag-init-ready {
  margin: clamp(8px, 1vh, 14px) 0 0;
  color: var(--text-secondary);
  font-family: var(--font-code, monospace);
  font-size: inherit;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-init-ready.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.ag-init-ready[hidden] {
  display: none;
}

.ag-init-hint {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: inherit;
  padding: 2px 8px;
  border-radius: var(--radius-default, 6px);
  margin-left: 6px;
}

/* Open-source proof — quiet inline link under the trace.  No
   frame, no decoration; just the mark + repo path + license.
   Lifts to text-primary on hover. */
.ag-repo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-repo:hover { color: var(--text-primary); }

.ag-repo-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-quaternary);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-repo:hover .ag-repo-icon { color: var(--text-primary); }

.ag-repo-path {
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-repo:hover .ag-repo-path { color: var(--text-primary); }

.ag-repo-meta {
  color: var(--text-quaternary);
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Act 2 — The agent loop.

   Single editorial scene, one viewport tall.  Diagonal grid:
   head anchored top-left, loop frame dropped bottom-right.
   Five "retry" rows stack up (the agent's reasoning trace
   running aground), then a hairline break, then one purple
   resolution row: `zenrows.browse(url) → done.`.

   No sticky stage, no scenario picker, no dual terminal.  One
   agent, one task, two endings.  Rows reveal on IO entry
   (one-shot via JS adding `.is-revealed` to the section).
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  z-index: 2;
  background: var(--background);
  color: var(--text-primary);
  min-height: 100svh;
  min-height: 100vh;
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(64px, 9vh, 100px);
  display: flex;
  align-items: stretch;
}

/* Diagonal grid — head top-left, frame bottom-right.  Two
   empty cells provide the deliberate whitespace that pulls the
   eye through the scene. */
.ag-loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "head    ."
    ".       frame";
  gap: clamp(48px, 8vh, 96px) clamp(40px, 5vw, 88px);
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

/* Editorial head — top-left of the diagonal. */
.ag-loop-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 540px;
}

.ag-loop-h2 {
  margin: 14px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.028em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.ag-loop-mark {
  font-style: normal;
  color: var(--zen-red-6, #F36A6A);
}

.ag-loop-sub {
  margin: clamp(16px, 2vh, 22px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: balance;
  max-width: 480px;
}

/* Loop frame — bottom-right of the diagonal.  Frameless, no
   border, no background.  The stack + break + resolution carry
   the visual weight. */
.ag-loop-frame {
  grid-area: frame;
  margin: 0;
  padding: 0;
  align-self: end;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 28px);
}

/* Stack — the 5 retry rows.  Each row is a 2-col grid: tag
   (left, mono uppercase) + thought (right, primary). */
.ag-loop-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

.ag-loop-thought {
  display: grid;
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 22px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-sm);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
}

[data-act="2"].is-revealed .ag-loop-thought {
  opacity: 1;
  transform: translateY(0);
  /* Stagger — each retry lands ~340ms after the previous. */
  transition-delay: calc(200ms + var(--i, 0) * 340ms);
}

.ag-loop-tag {
  color: var(--text-quaternary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85em;
  white-space: nowrap;
}

/* Tags after `thinking` (retry 2..5) progressively shift toward
   red as the loop intensifies — the visual "burning".  Uses
   :nth-child so inline-style normalisation by the browser
   (when JS rAF writes opacity / transform) doesn't break the
   selector. */
.ag-loop-thought:nth-child(2) .ag-loop-tag { color: color-mix(in srgb, var(--zen-red-6, #F36A6A) 30%, var(--text-quaternary)); }
.ag-loop-thought:nth-child(3) .ag-loop-tag { color: color-mix(in srgb, var(--zen-red-6, #F36A6A) 50%, var(--text-quaternary)); }
.ag-loop-thought:nth-child(4) .ag-loop-tag { color: color-mix(in srgb, var(--zen-red-6, #F36A6A) 70%, var(--text-quaternary)); }
.ag-loop-thought:nth-child(5) .ag-loop-tag { color: var(--zen-red-6, #F36A6A); }

.ag-loop-text {
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  font-style: italic;
}

.ag-loop-thought:nth-child(5) .ag-loop-text {
  color: var(--text-primary);
}

/* The break — a single hairline that draws left-to-right after
   the last retry lands.  Marks the moment the loop ends. */
.ag-loop-break {
  position: relative;
  height: 1px;
  margin: clamp(8px, 1vh, 14px) 0;
  overflow: hidden;
}

.ag-loop-break-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--zen-purple-7, #7C4FE8) 70%, transparent) 50%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Draws 200ms after the 5th retry lands (5 * 340 + 200 + 200). */
  transition-delay: 2100ms;
}

[data-act="2"].is-revealed .ag-loop-break-line {
  transform: scaleX(1);
}

/* The resolution — one line.  Bullet + call + arrow + done.
   Pops in with overshoot ~400ms after the break finishes. */
.ag-loop-resolution {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 2900ms;
}

[data-act="2"].is-revealed .ag-loop-resolution {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ag-loop-bullet {
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 700;
}

.ag-loop-call {
  color: var(--text-primary);
  font-weight: 500;
  font-family: inherit;
}

.ag-loop-arrow {
  color: var(--text-quaternary);
}

.ag-loop-done {
  color: var(--zen-cyan-6, #7ADAE6);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   Act 3 — The verbs.

   Teal-5 saturated band.  Bloom curtain reveals the band from
   the top-right as the section enters viewport.  Inside, a
   centred editorial spread: H2 + sub + an 8-row routing table
   (agent intent → toolkit primitive + honest status) + the
   active row's canonical call line.

   Layout topology breaks vs Acts 1-2 (asymmetric / diagonal):
   Act 3 is centred single-column editorial — magazine spread
   feel against the teal background.

   Interactivity: hover/focus a row activates it; click pins.
   The .ag-verbs-call line below updates as the active row
   changes.  No AI ornaments — typography + table + bloom.
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  position: relative;
  /* Taller than 100vh so the scroll-linked reveal has room to
     play (total budget = vh + section height = ~2.4vh of scroll)
     without leaving the reader at Act 4's doorstep the moment
     the table finishes.  Content stays centred. */
  min-height: 140vh;
  background: var(--background);
  color: #1D1612;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 4vw, 48px) clamp(72px, 10vh, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Bloom curtain — scroll-linked.  agents.js's rAF updates
   --bloom (0..1) as the section moves through the viewport;
   the circle radius interpolates smoothly, so the band
   expands on scroll-down AND contracts on scroll-up. */
.ag-verbs-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #7ADAE6;
  clip-path: circle(calc(var(--bloom, 0) * 140%) at 90% 0%);
  pointer-events: none;
}

.ag-verbs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 780px;
  gap: clamp(28px, 4vh, 44px);
}

.ag-verbs-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 660px;
}

/* Eyebrow on teal — needs a darker tone than the dark-mode
   default to read on the cyan background. */

.ag-verbs-h2 {
  margin: 14px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: #1D1612;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.ag-verbs-mark {
  font-style: normal;
  color: inherit;
}

.ag-verbs-sub {
  margin: clamp(14px, 1.8vh, 22px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: color-mix(in srgb, #1D1612 75%, transparent);
  max-width: 500px;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms,
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
}

[data-act="3"].is-revealed .eyebrow,
[data-act="3"].is-revealed .ag-verbs-h2,
[data-act="3"].is-revealed .ag-verbs-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Routing table — 8 rows.  Each row is a 5-col grid: number,
   intent (left, plain English), arrow, primitive (right, mono),
   status badge.  The number column is mono small; the intent
   column is the editorial body; the primitive column is heavier
   weight mono.

   The top edge of the table is drawn with a pseudo-element
   instead of a static border-top so it can scale-in with the
   first row's reveal (controlled by `--top-border`, 0..1, set
   by agents.js).  Without this, the lone hairline above an
   invisible row reads as a UI leftover. */
.ag-verbs-table {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ag-verbs-table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, #1D1612 18%, transparent);
  transform: scaleX(var(--top-border, 0));
  transform-origin: left center;
  pointer-events: none;
}

.ag-verbs-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, auto);
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.8vw, 22px);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, #1D1612 18%, transparent);
  background: transparent;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-sm);
  color: #1D1612;
  letter-spacing: -0.005em;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  /* Reveal-only transitions (opacity, transform).  Background +
     primitive colour are deliberately instant so click / hover
     feel immediate. */
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

[data-act="3"].is-revealed .ag-verbs-row {
  opacity: 1;
  transform: translateY(0);
  /* Stagger — each row lands ~80ms after the previous. */
  transition-delay: calc(900ms + var(--row-delay, 0) * 80ms);
}

.ag-verbs-row:nth-child(1) { --row-delay: 0; }
.ag-verbs-row:nth-child(2) { --row-delay: 1; }
.ag-verbs-row:nth-child(3) { --row-delay: 2; }
.ag-verbs-row:nth-child(4) { --row-delay: 3; }
.ag-verbs-row:nth-child(5) { --row-delay: 4; }
.ag-verbs-row:nth-child(6) { --row-delay: 5; }
.ag-verbs-row:nth-child(7) { --row-delay: 6; }
.ag-verbs-row:nth-child(8) { --row-delay: 7; }

.ag-verbs-row:hover,
.ag-verbs-row:focus-visible,
.ag-verbs-row.is-active {
  background: color-mix(in srgb, #1D1612 8%, transparent);
}

.ag-verbs-n {
  color: color-mix(in srgb, #1D1612 55%, transparent);
  font-weight: 600;
  font-size: 0.85em;
}

.ag-verbs-intent {
  color: #1D1612;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: var(--font-base);
}

.ag-verbs-arrow {
  color: color-mix(in srgb, #1D1612 50%, transparent);
}

.ag-verbs-primitive {
  color: #1D1612;
  font-weight: 700;
  font-family: var(--font-code, monospace);
}

.ag-verbs-row.is-active .ag-verbs-primitive,
.ag-verbs-row:hover .ag-verbs-primitive,
.ag-verbs-row:focus-visible .ag-verbs-primitive {
  color: #7C4FE8;
}

/* Active row's call — fades in/out as the active row changes.
   Mono.  Bullet in purple-7. */
.ag-verbs-call {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body);
  color: #1D1612;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-act="3"].is-revealed .ag-verbs-call {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1700ms;
}

.ag-verbs-bullet {
  color: #7C4FE8;
  font-weight: 700;
}

.ag-verbs-call code {
  font-family: inherit;
  color: #1D1612;
  font-weight: 500;
}

/* Topbar adapts to teal — same idea as /cli Act 4.
   Brand logo flips to dark, nav links + burger + social pills
   recolour, marketing CTA inverts to purple-7. */

/* Cursor portal — default teal-5 hex disappears on the teal
   band.  Repaint to purple-7 while body.is-on-teal so the
   spinning O stays visible against the saturated background. */

/* ──────────────────────────────────────────────────────────
   Act 4 — Compose them.

   Second saturated band — purple-7 (#7C4FE8) hardcoded with a
   bloom curtain entering from the BOTTOM-LEFT (canonical mirror
   of Act 3's top-right teal per DESIGN.md).

   Layout topology: sticky 100vh stage inside a 160vh section,
   right-anchored editorial column.  Bloom + whitespace fill the
   left side; content (head + workflow + run line) sits on the
   right.  Sticky keeps the content pinned while curtain expands
   and the four steps reveal on scroll.

   Storytelling: agent's eight verbs (Act 3) chain here into one
   real workflow.  No interactivity — composition is the message.
─────────────────────────────────────────────────────────── */

[data-act="4"] {
  position: relative;
  z-index: 2;
  background: var(--background);
  color: #FFFFFF;
  isolation: isolate;
  /* `overflow: clip` instead of `hidden` — clip does NOT create
     a scroll container, so the sticky stage inside pins to the
     real document scroll (viewport) instead of the section's
     own box.  With `hidden`, sticky was pinning to the section
     itself, which scrolls with the page — so the stage drifted
     up the viewport during what was supposed to be the pinned
     reading window, and the animation appeared to "end as the
     content was leaving the viewport".  This fixes it. */
  overflow: clip;
  /* 200vh gives the sticky stage 100vh of pinned reading time
     after the staggered reveal completes — generous buffer
     before Act 5 takes over on small laptop viewports. */
  min-height: 200vh;
}

/* Bloom curtain — clip-path circle anchored at the bottom-left
   corner.  Radius interpolates via --bloom (0..1) set by
   agents.js's rAF, so the band expands on scroll-down AND
   contracts on scroll-up. */
.ag-compose-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #7C4FE8;
  clip-path: circle(calc(var(--bloom, 0) * 140%) at 10% 100%);
  pointer-events: none;
}

/* Sticky stage — pins to viewport top while user scrolls
   through the 160vh section.  Stage is `position: relative`-y
   via `position: sticky`, so absolute children (the output
   card) anchor to it.  Content column flush against the right
   edge via `justify-content: flex-end`. */
.ag-compose-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 120px);
  box-sizing: border-box;
}

/* Editorial column — head + workflow stacked vertically,
   pushed flush against the section's right edge by the stage's
   justify-end above. */
.ag-compose {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
}

.ag-compose-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ag-compose-workflow {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vh, 32px);
}


.ag-compose-h2 {
  margin: 14px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(12px);
}

.ag-compose-mark {
  font-style: normal;
  color: #7ADAE6;
}

.ag-compose-sub {
  margin: clamp(14px, 1.8vh, 22px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: color-mix(in srgb, #FFFFFF 85%, transparent);
  max-width: 420px;
  opacity: 0;
  transform: translateY(8px);
}

/* Goal line — small editorial label + the user's intent. */
.ag-compose-goal {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1vw, 16px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  color: color-mix(in srgb, #FFFFFF 80%, transparent);
  opacity: 0;
  transform: translateY(8px);
}

.ag-compose-goal-label {
  color: color-mix(in srgb, #FFFFFF 55%, transparent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85em;
}

.ag-compose-goal-text {
  color: #FFFFFF;
  font-weight: 500;
  font-family: var(--font-base);
  letter-spacing: -0.005em;
}

/* Step list — 4 verbs in sequence.  Each row: small number, the
   verb (heavier weight mono), description (body type).  No
   borders — clean typography on the purple band. */
.ag-compose-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

.ag-compose-step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(8px, 1vh, 12px) clamp(8px, 1vw, 12px);
  margin: 0 calc(-1 * clamp(8px, 1vw, 12px));
  border-radius: var(--radius-default, 6px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body);
  line-height: 1.4;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(14px);
  outline: none;
}

/* Hovered / focused step — subtle inset highlight so the
   reader sees which step is driving the live output card on
   the right. */
.ag-compose-step:hover,
.ag-compose-step:focus-visible,
.ag-compose-step.is-active {
  background: color-mix(in srgb, #FFFFFF 8%, transparent);
}

.ag-compose-step:hover .ag-compose-verb,
.ag-compose-step:focus-visible .ag-compose-verb,
.ag-compose-step.is-active .ag-compose-verb {
  color: #7ADAE6;
}

.ag-compose-n {
  color: color-mix(in srgb, #FFFFFF 50%, transparent);
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.08em;
}

.ag-compose-verb {
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.ag-compose-desc {
  color: color-mix(in srgb, #FFFFFF 80%, transparent);
  font-family: var(--font-base);
  letter-spacing: -0.005em;
}

/* Run line — final beat.  Teal-5 bullet + mono code.  Sits below
   the steps with extra breathing room. */
.ag-compose-run {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-sm);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(10px);
}

.ag-compose-bullet {
  color: #7ADAE6;
  font-weight: 700;
}

.ag-compose-call {
  color: #FFFFFF;
  font-weight: 500;
  font-family: inherit;
}

/* Live output card — sits in the right column of the deck.
   Frame on rgba dark (deliberate exception to DS-strict: the
   card needs to read as "data surface" inside the saturated
   purple band; an opaque DS surface would clash with the band
   chromatically). */
/* Live output card — absolutely anchored to the bottom-left
   of the sticky stage, below the editorial column's vertical
   centre.  Reads as a separate visual moment (the workflow's
   output) rather than part of the editorial stack. */
.ag-compose-output {
  position: absolute;
  bottom: clamp(40px, 8vh, 100px);
  left: clamp(20px, 5vw, 80px);
  margin: 0;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid color-mix(in srgb, #FFFFFF 22%, transparent);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: clamp(300px, 30vw, 420px);
  z-index: 2;
  opacity: 0;
  transform: translateY(16px);
}

.ag-compose-output-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, #FFFFFF 14%, transparent);
  background: color-mix(in srgb, #FFFFFF 4%, transparent);
  font-family: var(--font-code, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  flex-shrink: 0;
}

.ag-compose-output-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ADAE6;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, #7ADAE6 24%, transparent);
}

.ag-compose-output-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ag-compose-output-body {
  margin: 0;
  padding: clamp(20px, 2.6vh, 32px) clamp(20px, 2.2vw, 28px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.6;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  white-space: pre;
  overflow: hidden;
  min-height: clamp(200px, 28vh, 280px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Topbar adapt — purple band.  The default white-on-dark topbar
   reads fine against purple-7, so only the cursor portal needs
   recolouring (teal-5 stays visible on purple).  No nav / CTA
   overrides needed. */

/* ──────────────────────────────────────────────────────────
   Act 5 — Closer.

   Dark BG, no saturated band, no bloom curtain.  Off-centred
   editorial column anchored to the LEFT edge of the page;
   wide negative whitespace on the right.  Layout topology
   distinct from every previous act: 1 = 2-col split, 2 =
   diagonal, 3 = centered, 4 = right-anchored, 5 =
   left-anchored.

   Bold display H2 with scroll-linked per-word pop reveal.
   Last word painted purple-7 (mark accent).

   The paste prompt is the act's interactive moment — a
   <button> that copies its code to the clipboard.  Hint flips
   to "✓ copied · paste into your agent" and the border turns
   purple-7 for 2.4s.  This is the page's deliverable; one
   line you give your agent.
─────────────────────────────────────────────────────────── */

[data-act="5"] {
  position: relative;
  z-index: 3;
  background: var(--background);
  color: var(--text-primary);
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 4vw, 80px);
  display: flex;
  align-items: center;
}

.ag-end-frame {
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(32px, 5vh, 56px);
}


.ag-end-head { width: 100%; }

.ag-end-h2 {
  margin: 14px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(56px, 9vw, 152px);
  line-height: 0.94;
  letter-spacing: var(--tracking-denser, -0.046em);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vh, 8px);
}

.ag-end-line {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 28px);
}

.ag-end-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

.ag-end-word--mark {
  color: var(--zen-purple-7, #7C4FE8);
}

/* Paste prompt button — the act's interactive moment.  Frame-
   only DS-strict surface; on hover/focus the border turns
   purple-7 to invite the click.  On `.is-copied`, the hint
   flips to teal-5 and reads "✓ copied · paste into your
   agent" for ~2.4s. */
.ag-end-prompt {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 18px);
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: clamp(20px, 2.4vh, 28px) clamp(20px, 2.4vw, 32px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    background 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ag-end-prompt:hover,
.ag-end-prompt:focus-visible {
  background: var(--sunken-hover);
  border-color: var(--zen-purple-7, #7C4FE8);
}

.ag-end-prompt.is-copied {
  border-color: var(--zen-cyan-6, #7ADAE6);
}

.ag-end-prompt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-tertiary);
}

.ag-end-prompt-quote {
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 700;
  font-size: 14px;
}

.ag-end-prompt-code {
  color: var(--text-primary);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-lead);
  line-height: 1.4;
  letter-spacing: -0.005em;
  word-break: break-word;
}

.ag-end-prompt-hint {
  color: var(--text-tertiary);
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color 220ms ease;
}

.ag-end-prompt.is-copied .ag-end-prompt-hint {
  color: var(--zen-cyan-6, #7ADAE6);
}

/* Layout + tag styles come from .cta-stack + .cta-stack-tag
   in components.css.  Only the reveal hook is page-specific. */
.ag-end-cta {
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  [data-act="1"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(48px, 8vh, 80px);
  }
  /* Stack vertically; editorial above, demo below.  Drop the
     bottom-pin behaviour — CTA sits inline under the H1 like a
     normal block. */
  .ag-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: clamp(36px, 5vh, 56px);
    max-width: 600px;
    min-height: 0;
  }
  .ag-hero-text {
    max-width: none;
  }
  .ag-hero-top {
    margin-top: 0;
    margin-bottom: 0;
  }
  .ag-hero-cta {
    margin-top: clamp(20px, 3vh, 32px);
  }
  .ag-init { min-height: 320px; }
  .ag-init-body { font-size: 12px; }
  .ag-repo { font-size: 11px; }

  /* Act 2 — collapse diagonal grid to single column.  Head
     above, loop frame below, both left-aligned. */
  [data-act="2"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(48px, 8vh, 80px);
    align-items: flex-start;
  }
  .ag-loop {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "frame";
    gap: clamp(40px, 6vh, 64px);
    max-width: 640px;
  }
  .ag-loop-frame {
    justify-self: start;
    max-width: 100%;
  }

  /* Act 3 — paint the teal flat (no clip-path bloom) on mobile;
     centered editorial stack stays the same. */
  [data-act="3"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(56px, 8vh, 88px);
  }
  .ag-verbs-curtain { clip-path: none; }
  [data-act="3"].is-revealed .ag-verbs-curtain { clip-path: none; }
  .ag-verbs { max-width: 100%; }
  .ag-verbs-table { max-width: 580px; align-self: center; }

  /* Act 4 — drop the sticky stage on mobile.  Section becomes
     a normal flow block; paint the purple flat.  Editorial
     column un-anchors from the right; output card un-absolutes
     and falls into normal flow below the workflow. */
  [data-act="4"] {
    min-height: 0;
  }
  .ag-compose-curtain { clip-path: none; }
  .ag-compose-stage {
    position: static;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(32px, 5vh, 48px);
    padding: clamp(96px, 12vh, 140px) clamp(20px, 5vw, 32px) clamp(72px, 10vh, 120px);
  }
  .ag-compose {
    max-width: 580px;
    align-self: center;
  }
  .ag-compose-output {
    position: static;
    width: 100%;
    max-width: 580px;
    align-self: center;
  }

  /* Act 5 — keep left-anchored but tighten max-width + paddings. */
  [data-act="5"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(64px, 9vh, 96px);
  }
  .ag-end-frame { max-width: 100%; }
  .ag-end-prompt { max-width: 100%; }
}

@media (max-width: 600px) {
  .ag-hero-h1 {
    font-size: var(--mkt-h3);
    line-height: 1.04;
  }
  .ag-init-cmd code { white-space: normal; word-break: break-all; }
  .ag-init-label { min-width: 64px; }
  .ag-repo { font-size: 10.5px; }
  .ag-repo-path { white-space: normal; word-break: break-all; }
  .ag-loop-h2 { font-size: var(--mkt-h3); }
  .ag-loop-thought { grid-template-columns: 1fr; gap: 4px; }
  .ag-loop-tag { font-size: 10px; }

  /* Act 3 — collapse table to a 2-row stack per item; status
     drops to a smaller inline mark next to the primitive. */
  .ag-verbs-h2 { font-size: var(--mkt-h2); }
  .ag-verbs-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "n intent"
      ". prim";
    gap: 4px 10px;
    text-align: left;
  }
  .ag-verbs-n { grid-area: n; align-self: center; }
  .ag-verbs-intent { grid-area: intent; }
  .ag-verbs-arrow { display: none; }
  .ag-verbs-primitive { grid-area: prim; }

  .ag-compose-h2 { font-size: var(--mkt-h2); }
  .ag-compose-step {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "n verb verb"
      ". desc desc";
    gap: 2px 10px;
  }
  .ag-compose-n { grid-area: n; align-self: center; }
  .ag-compose-verb { grid-area: verb; }
  .ag-compose-desc { grid-area: desc; }
  .ag-compose-call { word-break: break-all; }

  .ag-end-h2 { font-size: var(--mkt-hero); line-height: 0.96; }
  .ag-end-prompt-code { font-size: var(--mkt-body); }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .ag-hero { max-width: 1400px; }
  .ag-hero-text { max-width: 720px; }
  
  .ag-hero-tag { font-size: 13px; }
  .ag-init { min-height: 480px; }
  .ag-init-body { font-size: 16px; }
  .ag-repo { font-size: 14px; }
  .ag-loop { max-width: 1400px; }
  .ag-loop-h2 { font-size: 64px; }
  .ag-loop-sub { font-size: 19px; max-width: 540px; }
  .ag-loop-frame { max-width: 600px; }
  .ag-loop-thought { font-size: 16px; }
  .ag-loop-resolution { font-size: 19px; }
  .ag-verbs { max-width: 880px; }
  .ag-verbs-h2 { font-size: 76px; }
  .ag-verbs-sub { font-size: 19px; max-width: 580px; }
  .ag-verbs-row { font-size: 16px; }
  .ag-verbs-call { font-size: 19px; }
  .ag-compose { max-width: 620px; }
  .ag-compose-h2 { font-size: 76px; }
  .ag-compose-sub { font-size: 19px; max-width: 460px; }
  .ag-compose-step { font-size: 18px; }
  .ag-compose-run { font-size: 17px; }
  .ag-end-frame { max-width: 1100px; }
  
  .ag-end-prompt { max-width: 820px; }
  .ag-end-prompt-code { font-size: 22px; }
}

@media (min-width: 1920px) {
  .ag-hero { max-width: 1520px; }
  .ag-hero-text { max-width: 800px; }
  
  .ag-hero-tag { font-size: 13.5px; }
  .ag-init { min-height: 540px; }
  .ag-init-body { font-size: 17px; }
  .ag-repo { font-size: 15px; }
  .ag-loop { max-width: 1520px; }
  .ag-loop-h2 { font-size: 76px; }
  .ag-loop-sub { font-size: 20px; max-width: 600px; }
  .ag-loop-frame { max-width: 680px; }
  .ag-loop-thought { font-size: 17px; }
  .ag-loop-resolution { font-size: 21px; }
  .ag-verbs { max-width: 960px; }
  .ag-verbs-h2 { font-size: 88px; }
  .ag-verbs-sub { font-size: 20px; max-width: 640px; }
  .ag-verbs-row { font-size: 17px; }
  .ag-verbs-call { font-size: 21px; }
  .ag-compose { max-width: 680px; }
  .ag-compose-h2 { font-size: 88px; }
  .ag-compose-sub { font-size: 20px; max-width: 500px; }
  .ag-compose-step { font-size: 19px; }
  .ag-compose-run { font-size: 18.5px; }
  .ag-end-frame { max-width: 1240px; }
  
  .ag-end-prompt { max-width: 900px; }
  .ag-end-prompt-code { font-size: 24px; }
}

@media (min-width: 2400px) {
  .ag-hero { max-width: 1700px; }
  .ag-hero-text { max-width: 900px; }
  
  .ag-hero-tag { font-size: 14px; }
  .ag-init { min-height: 620px; }
  .ag-init-body { font-size: 18.5px; }
  .ag-repo { font-size: 16px; }
  .ag-loop { max-width: 1740px; }
  .ag-loop-h2 { font-size: 92px; }
  .ag-loop-sub { font-size: 22px; max-width: 680px; }
  .ag-loop-frame { max-width: 780px; }
  .ag-loop-thought { font-size: 18.5px; }
  .ag-loop-resolution { font-size: 24px; }
  .ag-verbs { max-width: 1100px; }
  .ag-verbs-h2 { font-size: 108px; }
  .ag-verbs-sub { font-size: 22px; max-width: 720px; }
  .ag-verbs-row { font-size: 19px; }
  .ag-verbs-call { font-size: 24px; }
  .ag-compose { max-width: 780px; }
  .ag-compose-h2 { font-size: 108px; }
  .ag-compose-sub { font-size: 22px; max-width: 560px; }
  .ag-compose-step { font-size: 22px; }
  .ag-compose-run { font-size: 21px; }
  .ag-end-frame { max-width: 1480px; }
  
  .ag-end-prompt { max-width: 1040px; }
  .ag-end-prompt-code { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-init-line,
  .ag-init-check,
  .ag-init-ready { transition: none; }
  .ag-init-bubble { animation: none; }
  .ag-loop-thought,
  .ag-loop-break-line,
  .ag-loop-resolution { transition: none; }
  /* When motion is reduced, render the loop fully revealed —
     opacity 1, no scale, no translate, no stagger. */
  [data-act="2"] .ag-loop-thought,
  [data-act="2"] .ag-loop-resolution {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
  }
  [data-act="2"] .ag-loop-break-line { transform: scaleX(1); transition-delay: 0ms; }

  /* Act 3 — bloom curtain stays fully painted; eyebrow / h2 /
     sub / rows / call sit at their final states without
     staggered transitions. */
  .ag-verbs-curtain { transition: none; }
  [data-act="3"] .eyebrow,
  [data-act="3"] .ag-verbs-h2,
  [data-act="3"] .ag-verbs-sub,
  [data-act="3"] .ag-verbs-row,
  [data-act="3"] .ag-verbs-call {
    opacity: 1;
    transform: none;
    transition: background 220ms ease;
    transition-delay: 0ms;
  }

  /* Act 4 — same approach.  Bloom stays full, content fully
     revealed without scroll-linked staggers. */
  [data-act="4"] .eyebrow,
  [data-act="4"] .ag-compose-h2,
  [data-act="4"] .ag-compose-sub,
  [data-act="4"] .ag-compose-goal,
  [data-act="4"] .ag-compose-step,
  [data-act="4"] .ag-compose-run,
  [data-act="4"] .ag-compose-output {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Act 5 — closer revealed statically. */
  [data-act="5"] .eyebrow,
  [data-act="5"] .ag-end-word,
  [data-act="5"] .ag-end-prompt,
  [data-act="5"] .ag-end-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  --font-display auto-flips to Mq12 via
   DS-level override.  Acts 3 (teal) + 4 (purple) stay on
   their saturated bands; their inline #1D1612 / #FFFFFF stays
   correct against the band fill.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}
html:not(.dark) [data-act="1"],
html:not(.dark) [data-act="2"],
html:not(.dark) [data-act="5"] {
  background: var(--zen-gray-3);
}


/* Teal text on light bg — flip #7ADAE6 → #1C9E97 outside
   body.is-on-purple saturated chrome. */
html:not(.dark) .ag-init-check,
html:not(.dark) .ag-compose-mark,
html:not(.dark) .ag-compose-step.is-active .ag-compose-verb,
html:not(.dark) .ag-compose-bullet {
  color: #1C9E97;
}