/* Talk mode on the homepage (js/talk/talk-mode.js): Cyrus, larger, at the centre of a paper stage
   (his pill stays in the hero), the questions and the question box laid over its bottom edge, his
   words, as he says them, just above the box, and the cards for what he's talking about round him. */

html.is-talking, html.is-talking body { overflow: hidden; }

/* he stands at the top of the band (from under the header to a gutter above the foot), 80% of its
   height (780px at most) but no taller than keeps his face clear of the dock (roughly --dock-est tall)
   over his shoulders, which the dock's paper fades out; narrower where the window is */
.talk {
  --top: 112px; --band: calc(100dvh - var(--top) - var(--gutter));
  --bust-max: 26vw; --dock-est: 280px;
  --bust-w: min(calc(max(var(--band) * 0.5, min(var(--band) - var(--dock-est) + 60px, var(--band) * 0.8, 780px)) * 523 / 959), var(--bust-max));
  position: fixed; z-index: 40; inset: 0; overflow: hidden; outline: none;
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: var(--top) var(--gutter) var(--gutter);
  background: rgb(255 255 255 / 0); pointer-events: none; overscroll-behavior: contain;
  transition: background-color 0.35s ease 0.25s;
}
.talk[hidden] { display: none; }
.talk.is-open { background: var(--paper); pointer-events: auto; transition-delay: 0s; transition-duration: 0.45s; }

/* the header and the dock come in once he has landed and grown to size (.is-landed, js/talk/talk-mode.js),
   one after another, and go first when he leaves */
.talk-header, .talk-dock { opacity: 0; translate: 0 24px; transition: opacity 0.25s ease, translate 0.25s ease; }
.talk-header { translate: 0 -24px; }
.talk.is-landed .talk-header, .talk.is-landed .talk-dock {
  opacity: 1; translate: none;
  transition: opacity 0.6s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0.08s;
}
.talk.is-landed .talk-header { transition-delay: 0s; }
.talk.is-landed .talk-dock { transition-delay: 0.24s; }
.talk:not(.is-landed) .talk-header, .talk:not(.is-landed) .talk-dock { pointer-events: none; } /* nothing to click before it shows */

.talk-close { background: none; border: 0; padding: 0; cursor: pointer; font: 400 18px/1.2 var(--sans); letter-spacing: -0.06em; color: var(--ink); }
.talk-close:focus-visible, .talk .logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* ---------- the figure: the bust alone, in its own shape (his pill and its glow stay in the hero) ---------- */
.talk-figure { grid-area: 1 / 1; position: relative; justify-self: center; align-self: start; width: var(--bust-w); aspect-ratio: 523 / 959; }
.talk-figure > * { transform-origin: 0 0; }
.talk-figure .cyrus { position: relative; z-index: 1; width: 100%; }

/* ---------- the cards (js/talk/idea-cards.js): small tokens from content/cards.json, one per idea that
   puts one up, laid round him. How they look, sit, come in and take focus is css/idea-cards.css's
   (.idea-layer); here, only the room they get: his size, the gap from him and their width ---------- */
.talk {
  --card-gap: clamp(40px, 5vw, 96px); --card-w: clamp(0px, (100vw - var(--bust-w)) / 2 - var(--card-gap) - var(--gutter) - 64px, 250px); /* 64px: the furthest nudge */
}
.talk-cards { grid-area: 1 / 1; position: relative; z-index: 1; pointer-events: none; } /* over him (his canvas sits at z-index 1), under the dock */

/* ---------- the questions and the question box: laid over the bottom of the stage, centred, on a fade of
   paper. A numbered
   list on hairlines, like the career table
   (the rest fade back while you're on one); asking your own is the list's last row, marked with the
   talk wave. Once a question is out the list folds away, leaving the box between two rules, and opens
   on the next questions when he's done answering (.is-answering, js/talk/talk-mode.js). The list keeps
   its height; the slide gives way when the deck is short ---------- */
.talk { --rule: rgba(51, 51, 51, 0.2); }
.talk-dock {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--gutter); margin-inline: auto;
  width: min(640px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-rows: 1fr auto;
  transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s; /* 0.35s: a beat after he's done */
}
.talk-dock::before { /* paper fading in under it, edge to edge, so whatever it lies over gives way */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; translate: -50% 0; width: 100vw; top: -56px; bottom: calc(var(--gutter) * -1);
  background: linear-gradient(to top, var(--paper) calc(100% - 56px), transparent);
}
.talk.is-answering .talk-dock { grid-template-rows: 0fr auto; transition-delay: 0.15s; }
.talk .asks { min-height: 0; overflow: hidden; counter-reset: ask; border-top: 1px solid var(--rule); }

/* a row: its number, the question in the serif, an arrow on hover; the rows come back one after
   another (--d), while the hover fade (colour) never waits */
.talk .asks button {
  --d: 0.45s;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: baseline; width: 100%;
  margin: 0; padding: 13px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none;
  cursor: pointer; text-align: left; color: var(--ink);
  font: 400 clamp(20px, 1.6vw, 24px)/1.15 var(--serif); letter-spacing: -0.03em;
  transition: color 0.3s ease, opacity 0.35s ease var(--d), translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d), visibility 0s var(--d);
}
.talk .asks button:nth-child(2) { --d: 0.52s; }
.talk .asks button:nth-child(3) { --d: 0.59s; }
.talk .asks button:nth-child(4) { --d: 0.66s; }
.talk.is-answering .asks button {
  opacity: 0; translate: 0 10px; visibility: hidden;
  transition: color 0.3s ease, opacity 0.2s ease, translate 0.2s ease, visibility 0s 0.2s;
}
.talk .asks button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.talk .asks button::before {
  counter-increment: ask; content: counter(ask, decimal-leading-zero);
  font: 300 13px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; opacity: 0.5;
}
.talk .asks button::after {
  content: '→'; justify-self: end; font: 300 17px/1 var(--sans);
  opacity: 0; translate: -6px 0; transition: opacity 0.25s ease, translate 0.25s ease;
}
.talk .asks button:hover::after, .talk .asks button:focus-visible::after { opacity: 1; translate: none; }
@media (hover: hover) { .talk .asks:hover button:not(:hover) { color: rgba(51, 51, 51, 0.28); } }
.talk .asks kbd { display: none; } /* the numbers are the keys */

/* the box: the list's last row */
.talk-say {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--ink); transition: border-color 0.2s ease;
}
.talk-say:focus-within { border-bottom-color: var(--ink); }
.speech-transcript { padding-top: 12px; font: 400 15px/1.5 var(--sans); }
.speech-transcript[hidden] { display: none; }
.speech-transcript summary { cursor: pointer; }
.speech-transcript p { max-height: 18vh; overflow: auto; margin: 8px 0 0; }
.talk-say input {
  min-width: 0; margin: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; outline: none;
  -webkit-appearance: none; appearance: none; color: inherit;
  font: 400 clamp(20px, 1.6vw, 24px)/1.15 var(--serif); letter-spacing: -0.03em;
}
.talk-say input::placeholder { color: inherit; font-style: italic; opacity: 0.4; }
.say-send {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; font: 400 18px/1.2 var(--sans); letter-spacing: -0.06em;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.say-send:disabled { opacity: 0.35; cursor: progress; }
.say-send:not(:disabled):active { transform: scale(0.94); }
.say-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.say-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.say-send:not(:disabled):hover .say-arrow { transform: translateX(3px); }

/* test mode (?test): the answer JSON, bottom left, clear of his face */
.testpanel {
  position: fixed; z-index: 45; bottom: 16px; left: var(--gutter); width: min(420px, calc(100vw - 2 * var(--gutter)));
  display: flex; flex-direction: column; max-height: 30vh;
  background: var(--paper); border: 1px solid rgba(51, 51, 51, 0.2); font: 11px/1.45 ui-monospace, Menlo, monospace; color: var(--ink);
}
html:not(.is-talking) .testpanel { display: none; }
.testbar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid rgba(51, 51, 51, 0.2); }
.testmeta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.7; }
.testbar button { border: 1px solid rgba(51, 51, 51, 0.2); background: none; padding: 2px 8px; cursor: pointer; font: inherit; }
.testout { margin: 0; padding: 10px 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.testpanel.folded .testout { display: none; }

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .talk { --top: 104px; }
}

/* ---------- short screens (a phone on its side) ---------- */
@media (max-height: 560px) {
  .talk { --top: 76px; }
  .talk .asks button:nth-child(n + 4) { display: none; }
}

/* ---------- stacked: on phones and on tall screens (a portrait tablet), where he stands a little larger,
   centred in the room above the dock ---------- */
@media (max-width: 767.98px), (max-aspect-ratio: 4 / 5) {
  .talk { padding: 88px 0 0; }
  .talk {
    --bust-w: calc(min(44dvh, 76vw) * 523 / 959);
    /* little room beside him: the cards narrow and tuck a little over his edges */
    --card-gap: -16px; --card-w: clamp(96px, (100vw - var(--bust-w)) / 2 - var(--card-gap) - 8px, 160px);
  }
  .talk-figure { align-self: center; }
}

/* ---------- phone: smaller type, and less of everything ---------- */
@media (max-width: 767.98px) {
  .talk { padding-top: 72px; }
  .talk-cards { --card-scale: 0.58; --nudge-scale: 0.2; } /* no room to push them out */
  /* index: three rows, so he keeps some room */
  .talk .asks button { padding: 10px 0; font-size: 18px; grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .talk .asks button:nth-child(n + 4) { display: none; }
  .talk-say { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 6px 0; }
  .talk-say input { font-size: 18px; }
}