/* The trigger is a dot, and the dot is the whole point: press it and the page
   falls into a point, press the point and the page comes back. A centred mark
   between two blocks is the oldest section break a book has, so it needs no
   label and no rule — the words are on the button's accessible name and its
   tooltip, where a reader who wants them can find them. */
.book-compress-wrap { margin: 14px auto 0; text-align: center; }
.book-compress {
  appearance: none;
  display: inline-grid;
  place-items: center;
  /* The mark is 7px; the target around it is 48. A dot nobody can hit is not
     quiet, it is broken. */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* A real element rather than ::before: the scene clones the page to fly it
   inward, and a pseudo-element does not clone. The dot has to travel in with
   everything else — it is what everything else is travelling towards. */
.book-compress-seed {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: book-compress-breath 4s ease-in-out infinite;
  transition: width .22s ease, height .22s ease;
}
/* Nothing else on this page moves, so the dot does not blink — it breathes,
   and never all the way out. Half a page with nothing in it is not a hint,
   and a mark that is absent when a thumb arrives cannot be pressed. On touch
   this is the only affordance there is: hover never happens there. */
@keyframes book-compress-breath {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
/* A hint is only owed to someone who has not taken it. Once the dot has been
   pressed it holds still — a page that keeps waving at a reader who already
   knows what the mark is has stopped saying anything with it. */
.book-compress.is-found .book-compress-seed { animation: none; opacity: 1; }
.book-compress:hover .book-compress-seed,
.book-compress:focus-visible .book-compress-seed {
  width: 11px;
  height: 11px;
  animation-play-state: paused;
  opacity: 1;
}
.book-compress:focus { outline: none; }
/* The ring belongs around the mark, not around the 48px target it sits in. */
.book-compress:focus-visible .book-compress-seed {
  outline: 2px solid var(--petrol);
  outline-offset: 5px;
}
/* The dot is the break between the hero and the online-reading section, so the
   animated rule underneath it stays off. */
.book-compress-on #read-online::before { content: none; }

/* The scene stands on the page's own paper rather than a fixed white, so the
   fragments keep the contrast they were written with. Washing to white turned
   the dark themes' cream type invisible long before it reached the middle. */
.book-compress-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--paper, #fff);
  color: var(--ink, #111);
}
.book-compress-scene::backdrop { background: var(--paper, #fff); }
/* The pieces carry the page's own stacking with them (a sticky header sits over
   the text it scrolls past), so the layer is a stacking context of its own:
   inside it a header may climb over a paragraph, and none of it climbs over the
   dark, the flash or the point. */
.book-compress-pieces { isolation: isolate; }
.book-compress-pieces,
.book-compress-dark,
.book-compress-flash { position: absolute; inset: 0; pointer-events: none; }
/* The dark closes over the pile only once it is collapsing, and the flash is
   what the point releases. Both are the same in every theme: by the time they
   are painted there is no page left underneath to stay legible against. */
.book-compress-dark { background: #0B0A09; opacity: 0; }
.book-compress-flash { background: #FFF; opacity: 0; }
.book-compress-piece { position: absolute; transform-origin: center; will-change: transform, opacity; }
.book-compress-point {
  appearance: none;
  position: absolute;
  left: var(--book-compress-x, 50%);
  top: var(--book-compress-y, 50%);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #F3EFE7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.book-compress-point::before {
  content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%;
  transition: width .18s ease, height .18s ease;
}
.book-compress-point:focus { outline: none; }
/* No ring. A browser draws one around a control its own script focused, and on
   a phone that put a second, wider circle around a scene that holds one thing.
   The point is the only thing here to press and it is focused for as long as
   there is anything to press, so keyboard focus opens the point itself. */
.book-compress-point:focus-visible { outline: none; }
.book-compress-point:focus-visible::before { width: 11px; height: 11px; }
@media (prefers-reduced-motion: reduce) {
  .book-compress-seed,
  .book-compress-point::before { transition: none; }
  /* Held at full strength rather than stopped mid-breath: the global reduce
     rule collapses every duration to 0.01ms, which on an alternating loop
     leaves the dot wherever the first frame lands. */
  .book-compress-seed { animation: none; opacity: 1; }
}