/* The topic view: a colour flooded out from the label you clicked, with the
   real topic page injected on top of it. The map stays mounted underneath the
   whole time.

   No layout lives here. The fetched /topic/ and /subtopic/ pages bring their
   own -- poster.css, which this page also loads, is what draws them -- and
   this file only owns what is peculiar to the overlay: the flood, the scroll
   shell, the two tiers fading between each other, and pieces in flight. */

.topicview {
  position: fixed;
  inset: 0;
  z-index: 40;
  color: var(--ink, #12140f);
}
.topicview[hidden] { display: none; }

/* The flood. Parked over the topic's cell and clipped to its outline while it
   grows, then reset to a plain full-bleed rect once it has covered the window.
   Scaling a transform keeps it on the compositor; animating clip-path would
   not. */
.topicview-flood {
  position: absolute;
  inset: 0;
  background: var(--cell, #e5e5e5);
  transform-origin: 50% 50%;
  will-change: transform;
}

.topicview-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Mirrors .sheet in page.css, so the injected page sits exactly where it sits
   on its own URL and a refresh changes nothing. */
.topicview-sheet {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

/* ---- the two tiers ----

   The topic page, and one level down, the subtopic page. Two steps rather
   than two layers: whichever tier is leaving fades out where it stands, and
   only once it has gone does it leave the flow and the other take its place.
   A faded-out block still holds its space; without the display flip the
   subtopic would sit halfway down the page under an invisible topic. */

.topictier,
.subview {
  transition: opacity .28s ease;
}
.subview { display: none; opacity: 0; }

/* Opening from the map: the writing fades in under the flying pieces. Only on
   the way in -- a prev/next swap replaces the content while is-in stays set,
   so the swap is instant, which is deliberate: that is browsing, and a fade
   only makes the reader wait for words already in memory.

   It fades without moving, and that matters. It used to rise 14px as it
   faded, which meant every piece was aimed at a slot that was still 14px low:
   the labels flew to the right place, landed, and then the page slid up out
   from under them. A small jump at the very last moment, on every open. If
   anything here is ever animated with a transform again, the flight targets
   have to be measured after it settles. */
.topictier { opacity: 0; }
.topicview-scroll.is-in .topictier {
  opacity: 1;
  transition: opacity .42s ease;
}

/* One level down. Step one: the topic fades, still in place. */
.topicview.is-subtopic .topictier {
  opacity: 0;
  pointer-events: none;
}
/* Step two: it is gone, and the subtopic is what is left. */
.topicview.sub-ready .topictier { display: none; }
.topicview.sub-ready .subview { display: block; }
.topicview.sub-ready .subview.is-in { opacity: 1; }

/* ---- pieces in flight ----

   Anything the page marks with data-box can be flown between its spot on the
   map and its spot on the page. A clone does the flying: fixed, so the
   animation is in viewport coordinates, with every inherited transition
   killed -- clones of map labels arrive carrying the map's own `transition:
   transform`, which would animate the handover and lurch. The original holds
   its slot open, hidden, until the clone lands. */
.stflying {
  position: fixed !important;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 3;
}
.stflying,
.stflying * { transition: none !important; }
.is-flying { visibility: hidden; }

/* ---- the injected page, amended for the overlay ---- */

/* The subtopic page keeps its breadcrumbs for a reader who lands on it cold;
   in here the trail is the journey just taken, and the way back is the arrow. */
.topicview .crumbs { display: none; }

/* Typography for the injected writing. page.css owns this on the real pages;
   the map does not load page.css, so the overlay carries its own copy of just
   the text rules. */
.topicview .prose {
  font-size: 1.06rem;
  line-height: 1.72;
}
.topicview .prose p { margin: 0 0 1.15em; }
.topicview .prose a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: .18em;
}
.topicview .prose a:hover { text-decoration-color: currentColor; }
.topicview .watch a { color: inherit; }

.topicview .pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid color-mix(in srgb, currentColor 25%, transparent);
}
.topicview .pager a {
  flex: 1;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.topicview .pager-next { text-align: right; }
.topicview .pager span {
  display: block;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .62;
  font-weight: 400;
}

/* The map keeps its own scroll position underneath, so the page behind must
   not scroll as well. */
body.topic-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .topictier,
  .topicview-scroll.is-in .topictier,
  .subview {
    transition: none;
    transform: none;
  }
}