/* The hundred-dollar bill, resolved by scroll. Pairs with components/bill-reveal.html and
   bill-reveal.js. Only var() values from the tokens, plus the image's own proportions.

   The section is full width and so is the hairline on top of it. The title is inset to the
   content width. The picture is the rail box: exactly as wide as the distance between the two
   rails at every width, which is web-max-w on a wide screen and the viewport minus two gutters on
   a narrow one. */

.web-bill {
  position: relative;
  padding-top: var(--web-section-gap);
  padding-bottom: 0;
  /* clip, not hidden: hidden would make this the scroll container for the pin and sticky would
     never engage. */
  overflow: clip;
}
/* The pin locks when the bottom of the picture reaches the bottom of the viewport. That is a
   sticky top of one viewport minus the pin's own height; the script measures it and writes
   --pin-top. Until it runs, top: 0 is harmless. Sticky opens a stacking context, so the lift above
   the rails belongs here. */
.web-bill-pin {
  position: sticky;
  top: var(--pin-top, 0px);
  z-index: 2;
}
.web-bill-track {
  --reveal: 0px;
}
.web-bill-spacer {
  height: var(--reveal);
}
.web-bill-head {
  max-width: var(--web-max-w);
  margin: 0 auto;
  padding: 0 var(--web-gutter);
}
.web-bill-title {
  margin: 0 auto;
  text-align: center;
}
/* The rail box: the picture's edges are the rails' positions. */
.web-bill-scene {
  position: relative;
  width: min(var(--web-max-w), calc(100% - 2 * var(--web-gutter)));
  margin: var(--web-section-gap-sm) auto 0;
}
/* The source image carries 14 blank rows of page background above the bill. The box is sized to
   the remaining 697 rows and the image pulled up by those 14, so the picture's top edge is the
   bill's. 14 / 711 is 1.96906%. */
.web-bill-picture {
  position: relative;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
  aspect-ratio: 1669 / 697;
  overflow: hidden;
}
.web-bill-picture img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: translateY(-1.96906%);
}
/* The pixel canvas is created by the script and covers the image exactly. */
.web-bill-picture .web-bill-pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease);
}
.web-bill-picture .web-bill-pixels.is-done {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .web-bill-picture .web-bill-pixels {
    display: none;
  }
  .web-bill-pin {
    position: static;
  }
}
@media (max-width: 720px) {
  .web-bill {
    padding-top: var(--web-section-gap-sm);
  }
}