/* A single light field stays behind the page; only its reflection travels. */
body { isolation: isolate; }
.paper-ambient {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  /* Soften the light across reading columns, keeping its strength at the edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.04) 30%, rgba(0,0,0,.13) 56%, rgba(0,0,0,.23) 80%, rgba(0,0,0,.42) 92%, rgba(0,0,0,.72) 97%, #000);
  mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.04) 30%, rgba(0,0,0,.13) 56%, rgba(0,0,0,.23) 80%, rgba(0,0,0,.42) 92%, rgba(0,0,0,.72) 97%, #000);
}
.paper-refraction {
  position: absolute;
  top: 0;
  right: -2%;
  width: 88%;
  height: 200%;
  /* Uneven, overlapping light fields dissolve into the paper.
     Every field fades outwards: no ring, rim or repeated silhouette.
     All three fade before the tile edges for a seamless continuous loop. */
  background-image:
    radial-gradient(ellipse 70% 21% at 63% 51%,
      rgba(255, 250, 239, .35) 0%,
      rgba(255, 250, 239, .1) 34%,
      rgba(255, 250, 239, 0) 100%),
    radial-gradient(ellipse 105% 27% at 70% 34%,
      rgba(1, 105, 156, .30) 0%,
      rgba(1, 105, 156, .18) 38%,
      rgba(1, 105, 156, 0) 100%),
    radial-gradient(ellipse 120% 28% at 88% 69%,
      rgba(1, 105, 156, .25) 0%,
      rgba(1, 105, 156, .14) 42%,
      rgba(1, 105, 156, 0) 100%);
  background-size: 100% 50%;
  background-repeat: repeat-y;
  animation: paper-refraction-flow 16s linear -6s infinite;
  will-change: transform;
}
@keyframes paper-refraction-flow {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (max-width: 760px) {
  .paper-ambient {
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.025) 35%, rgba(0,0,0,.07) 65%, rgba(0,0,0,.15) 85%, rgba(0,0,0,.32) 94%, rgba(0,0,0,.68) 98%, #000);
    mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.025) 35%, rgba(0,0,0,.07) 65%, rgba(0,0,0,.15) 85%, rgba(0,0,0,.32) 94%, rgba(0,0,0,.68) 98%, #000);
  }
  .paper-refraction { right: -8%; width: 108%; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-refraction { animation: none; transform: translate3d(0, -24%, 0); will-change: auto; }
}