/* Slide 4, the call to action, laid out like a "let's talk" page (book.js): availability on top, a
   big headline that types itself out, and at the bottom the person on the left and the call on the
   right, with the narrator between them. */
.book-stage { display: none; }
html.is-presenting .book-stage {
  position: absolute;
  top: calc(var(--header-height) + 8px);
  /* Clear of the slide counter in the bottom-right corner. */
  bottom: 62px;
  left: var(--gutter);
  right: var(--gutter);
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 18px;
}

.book-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #bdbdbd; }
.book-status i { width: 8px; height: 8px; border-radius: 50%; background: #5ee08f; box-shadow: 0 0 0 0 rgba(94, 224, 143, .5); animation: book-live 2s ease-out infinite; }
@keyframes book-live { 70%, 100% { box-shadow: 0 0 0 8px rgba(94, 224, 143, 0); } }
.book-title { max-width: 1100px; margin: 0; font-size: clamp(34px, 4.2vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; }
.book-line { display: block; }

/* The headline types itself out letter by letter (a caret rides the last one); every letter is laid
   out from the start, so the lines never reflow while it types. */
[data-type] span { color: transparent; }
[data-type] span.on { color: inherit; }
[data-type] span.at { position: relative; }
[data-type] span.at::after { content: ""; position: absolute; left: 100%; top: .12em; bottom: .08em; width: 3px; margin-left: 2px; background: currentColor; animation: book-caret .9s steps(1) infinite; }
@keyframes book-caret { 50% { opacity: 0; } }

/* The person, bottom left: photo, name and role. */
.book-bottom { align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.book-person { margin: 0; }
.book-photo { position: relative; width: clamp(140px, 15vw, 240px); aspect-ratio: 7 / 8; overflow: hidden; border-radius: 20px; background: #1a1a1a; }
.book-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-person figcaption { display: grid; gap: 2px; margin-top: 12px; }
.book-person b { font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.book-person small { font-size: 12px; color: var(--muted); }
/* The call, bottom right: a short paragraph and a big white pill; it stays clear of the narrator. */
.book-action { width: min(300px, 23.5vw); display: grid; gap: 14px; }
.book-action p { margin: 0; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; color: #bdbdbd; }
.book-cta { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; border-radius: 999px; font-size: clamp(18px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.01em; color: #000; background: var(--ink); transition: background-color .2s ease, scale .3s cubic-bezier(.3, 1.5, .5, 1); animation: book-cta 2.2s ease-in-out 1.5s infinite; }
.book-cta:hover { background: #fff; scale: 1.03; }
.book-cta span { transition: translate .3s ease; }
.book-cta:hover span { translate: 4px 0; }
@keyframes book-cta { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 244, 244, .28); } 50% { box-shadow: 0 0 0 12px rgba(244, 244, 244, 0); } }

/* Entrance: the status first, the headline types, then the person and the call. */
.book-story .book-status, .book-story .book-person, .book-story .book-action { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.book-story.is-active .book-status { opacity: 1; transform: none; transition-delay: .2s; }
.book-story.is-typed .book-person { opacity: 1; transform: none; transition-delay: .1s; }
.book-story.is-typed .book-action { opacity: 1; transform: none; transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .book-story *, .book-cta, .book-status i { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}