/* Scrolling cost for the listing pages.
 *
 * Nothing here changes how the page looks. It changes how much of it the
 * browser is asked to think about at once.
 *
 * The reading page is 217 cards and about 163,000 pixels tall. 142 of those
 * cards are locked, and a locked card is expensive: measured on the rendered
 * page there are 284 backdrop-filter blurs (two per locked card) and 803
 * elements carrying a filter. A backdrop-filter has to re-read and re-blur
 * whatever sits behind it, and during a scroll every one of them is invalid
 * again on the next frame — so the browser was doing that work for two hundred
 * cards nobody was looking at.
 *
 * content-visibility: auto lets it skip layout, paint and compositing for
 * anything outside the viewport. With three or four cards on screen at a time
 * that removes almost all of the work, and the blurs that remain are the ones
 * actually being looked at.
 *
 * A separate file rather than an edit to reading.css / listening.css /
 * writing.css: those three are produced by scripts/extract_page_assets.py from
 * the shipped pages, and anything written into them is lost the next time it
 * runs.
 */

.tests-stack .section-links {
  /* `auto` first, so the browser uses the height it last measured for this
   * card and falls back to the guess only for one it has never displayed.
   *
   * The guess is per state because the two are not close. Measured on the
   * reading page before this file existed: an open card is 250–490px, and a
   * locked one is 709 or 979 — the premium block sits below the card content
   * rather than over it, which nearly triples the height. One number for both
   * left the scrollbar drifting by half the page as the real sizes arrived. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.tests-stack .section-links.is-premium-locked {
  contain-intrinsic-size: auto 900px;
}

/* Find-in-page and anchor jumps still need to reach a skipped card. Chrome
 * reveals content-visibility: auto content for both, but a card the script has
 * filtered out is `hidden` and should stay unreachable either way. */
.tests-stack .section-links[hidden] {
  content-visibility: hidden;
}

/* The strips are decorative, fixed-position and blurred. They repaint with
 * every frame of a scroll for no benefit to anyone reading. */
@media (prefers-reduced-motion: reduce) {
  .ambient-strip {
    display: none;
  }
}