/* ==========================================================================
   AI explained: the start page. A hero with the two ways in as tiles beside a demo of an agent at work, a random term from the glossary and a shelf of
   the guides. Uses the tokens and the shared pieces of style.css (.bar, .btn, .chip, .eyebrow, data-zone); the prefixes here are start,
   demo, way, ls, pull and snote. Tokens only, as in DESIGN.md.
   ========================================================================== */

.start { max-width: 1120px; margin: 0 auto; padding-block: clamp(20px, 5vh, 52px) 64px; }

/* A section arrives with a small rise. Without the script nothing is hidden. */
@keyframes start-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.start-copy > *, .demo { animation: start-rise var(--dur-reveal) var(--ease) both; }
.start-copy > :nth-child(2) { animation-delay: 0.06s; }
.start-copy > :nth-child(3) { animation-delay: 0.12s; }
.start-copy > :nth-child(4) { animation-delay: 0.18s; }
.start-copy > :nth-child(5) { animation-delay: 0.24s; }
.demo { animation-delay: 0.15s; }
.rv { opacity: 0; transform: translateY(18px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }

/* ---------- The hero ---------------------------------------------------------------------------------- */
.start-hero { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.start-copy .eyebrow { color: var(--clay-ink); }
.start-title { margin-top: 12px; font: 600 clamp(var(--fs-5xl), 5.4vw, calc(var(--fs-5xl) * 1.6))/1.04 var(--serif); letter-spacing: -0.025em; }
.start-word { position: relative; display: inline-block; }
.start-scribble { position: absolute; left: 0; right: 0; bottom: -0.16em; width: 100%; height: 0.2em; overflow: visible; pointer-events: none; }
.start-line { margin-top: 22px; font: 400 clamp(var(--fs-lg), 1.6vw, var(--fs-2xl))/1.5 var(--serif); color: var(--ink-2); }

/* ---------- The demo ---------------------------------------------------------------------------------- */
.demo {
  position: relative; padding: clamp(16px, 2vw, 24px); min-width: 0;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.demo-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.demo-head .eyebrow { color: var(--clay-ink); }
.demo-title { font: 600 var(--fs-2xl)/1.2 var(--serif); letter-spacing: -0.01em; }
.demo-goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.demo-goal { cursor: pointer; }
.demo-goal[aria-pressed="true"] { border-color: var(--zc); background: color-mix(in srgb, var(--zm) 45%, var(--zt)); color: var(--ink); }
.demo-goal:focus-visible, .pull-chips .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The log: one line for every step, the newest at the bottom. The box is as high as the longest run from the start (the runs sit unseen in the same
   cell, see start.js), so it never grows while a run plays. */
.demo-logbox {
  display: grid; margin: 14px 0 0; padding: 10px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.demo-logbox > ol { grid-area: 1 / 1; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 6px; min-width: 0; }
.demo-logbox > .ls-ghost { visibility: hidden; pointer-events: none; }
.ls { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--r-md); }
.ls-new { animation: start-rise var(--dur-base) var(--ease) both; }
.ls-kind { font: 600 var(--fs-2xs)/1.4 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--zc); }
.ls-text { font: 400 var(--fs-md)/1.45 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
code.ls-text { font: 500 var(--fs-sm)/1.45 var(--mono); color: var(--ink-2); }
.ls-answer { background: var(--zt); }
.ls-answer .ls-text { font-weight: 600; }
.ls-ask { background: color-mix(in srgb, var(--zm) 30%, var(--zt)); }
.demo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin-top: 12px; }
.demo-more { margin-left: auto; font: 500 var(--fs-sm)/1.3 var(--sans); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.demo-more:hover { color: var(--ink); text-decoration-color: currentColor; }
.demo-noscript { margin-top: 12px; font: 400 var(--fs-md)/1.5 var(--sans); color: var(--ink-3); }

/* ---------- Sections below the hero --------------------------------------------------------------------- */
.pull, .shelf { margin-top: clamp(44px, 8vh, 84px); }
.sec-head { max-width: 46rem; }
.sec-title { font: 600 var(--fs-4xl)/1.15 var(--serif); letter-spacing: -0.015em; }
.sec-sub { margin-top: 8px; font: 400 var(--fs-lg)/1.5 var(--serif); color: var(--ink-2); }

/* ---------- The two ways in: compact tiles in the hero, drawn like the notes of the shelf ------------------ */
.ways { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.ways li { margin: 0; }
.way {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 18px 14px 12px; isolation: isolate;
  color: inherit; text-decoration: none; background: var(--zt); border: 1.5px solid var(--zc); border-radius: var(--r-md);
  transform: rotate(var(--tilt, 0deg)); transition: transform var(--dur-base) var(--ease);
}
.ways li:nth-child(1) .way { --tilt: -0.5deg; }
.ways li:nth-child(2) .way { --tilt: 0.4deg; }
.way.is-sketched { background: none; border-color: transparent; }
.way > .sk-bg { position: absolute; inset: -3px; z-index: -1; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.way:hover, .way:focus-visible { transform: rotate(0deg) translateY(-3px); }
.way:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.way-pic { display: block; width: 100%; }
.way-pic svg { display: block; width: 100%; height: auto; overflow: visible; transition: transform var(--dur-base) var(--ease); }
.way:hover .way-pic > svg { transform: rotate(-3deg) scale(1.06); }
.way-text { display: grid; gap: 2px; min-width: 0; }
.way-eyebrow { font: 500 var(--fs-2xs)/1.3 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--zc); }
.way-title { font: 600 var(--fs-2xl)/1.2 var(--serif); letter-spacing: -0.01em; }
.way-line { margin-top: 2px; font: 400 var(--fs-md)/1.45 var(--serif); color: var(--ink-2); }
.way-go { width: 22px; height: 22px; color: var(--zc); transition: transform var(--dur-fast) var(--ease); }
.way:hover .way-go { transform: translateX(4px); }
/* The deep dive's picture has no kitchen: the four parts of an agent as plain icons in a row. */
.way-pic-tech { display: grid; grid-template-columns: repeat(2, 38px); justify-content: center; gap: 4px 10px; }
.way-pic-tech .pic-icon { width: 38px; height: 38px; }
.way-pic-tech .pic-op { display: none; }

/* ---------- Pull a term ------------------------------------------------------------------------------------ */
.pull-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 22px; }
.pull-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px);
  background: var(--zt); border: 1.5px solid var(--zc); border-radius: var(--r-xl); transform: rotate(-0.5deg);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--zm) 70%, transparent);
}
.pull-card::before { /* the tape */
  content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%) rotate(2deg);
  background: color-mix(in srgb, var(--zm) 80%, transparent); border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); border-radius: 2px;
}
.pull-swap { animation: pull-swap 0.45s var(--ease) both; }
@keyframes pull-swap { from { opacity: 0; transform: rotate(2.4deg) translateY(10px); } to { opacity: 1; transform: rotate(-0.5deg); } }
.pull-group { font: 500 var(--fs-xs)/1.3 var(--mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--zc); }
.pull-name { font: 600 var(--fs-4xl)/1.15 var(--serif); letter-spacing: -0.015em; }
.pull-name a { color: inherit; text-decoration: none; }
.pull-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pull-text { font: 400 var(--fs-xl)/1.5 var(--serif); color: var(--ink-2); min-height: 4.5em; }
.pull-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.pull-side { align-self: center; }
.pull-ask { font: 600 var(--fs-md)/1.3 var(--sans); color: var(--ink-2); }
.pull-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pull-chips .chip { text-decoration: none; }
.pull-all { margin-top: 18px; font: 500 var(--fs-md)/1.3 var(--sans); }
.pull-all a, .snote-all .snote-min { color: var(--ink); }
.pull-all a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
.pull-all a:hover { text-decoration-color: currentColor; }

/* ---------- The shelf of guides: a pinboard of notes, as on the guides page ----------------------------- */
.shelf-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 32px 24px; margin: 34px 0 0; padding: 0; list-style: none; }
.shelf-notes li { margin: 0; }
.snote {
  position: relative; display: grid; align-content: start; gap: 6px; height: 100%; min-height: 150px; padding: 26px 20px 16px; isolation: isolate;
  color: inherit; text-decoration: none; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 20%;
  background: var(--zt); border: 1.5px solid var(--zc); border-radius: var(--r-md);
  transition: transform var(--dur-base) var(--ease);
}
.snote.is-sketched { background: none; border-color: transparent; }
.snote > .sk-bg { position: absolute; inset: -3px; z-index: -1; width: calc(100% + 6px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.snote:hover, .snote:focus-visible { transform: rotate(0deg) translateY(-5px); }
.snote:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.snote-tape {
  position: absolute; top: -11px; left: 50%; width: 76px; height: 20px; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--zm) 75%, transparent); border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); border-radius: 2px;
}
.snote-icon { width: 44px; height: 44px; overflow: visible; }
.snote b { font: 600 var(--fs-xl)/1.2 var(--serif); letter-spacing: -0.01em; }
.snote-min { margin-top: auto; padding-top: 6px; font: 500 var(--fs-2xs)/1.3 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--zc); }
.snote-all { border-style: dashed; background: transparent; align-content: center; justify-items: start; }
.snote-all .snote-min { margin-top: 0; }

@media (max-width: 1040px) {
  .start-hero { grid-template-columns: minmax(0, 1fr); }
  .pull-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .way { grid-template-columns: 76px minmax(0, 1fr); }
  .way-go { display: none; }
  .way-pic-tech { grid-template-columns: repeat(2, 30px); gap: 2px 6px; }
  .way-pic-tech .pic-icon { width: 30px; height: 30px; }
}
@media (max-width: 760px) {
  .sec-title { font-size: var(--fs-3xl); }
  .pull-name { font-size: var(--fs-3xl); }
  .pull-text { font-size: var(--fs-lg); min-height: 0; }
}
@media (max-width: 520px) {
  .ls { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .demo-more { margin-left: 0; flex-basis: 100%; }
  .shelf-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .snote { padding-inline: 14px; }
  .snote b { font-size: var(--fs-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .start-copy > *, .demo, .ls-new, .pull-swap { animation: none; }
  .rv { opacity: 1; transform: none; }
  .snote:hover, .snote:focus-visible { transform: rotate(var(--tilt, 0deg)); }
}
@media (forced-colors: active) {
}
@media print { .bar, .skip-link { display: none; } }