/* One continuous field behind the complete case index. Rows share its light. */
html[data-wl-daylight] #work[data-wl-light-zone="listing-field"] {
  --wl-light-base: transparent;
  --wl-light-opacity: .88;
  --wl-light-phase: -11s;
}
html[data-wl-daylight] #work > .wl-light-extent {
  display: contents;
}
html[data-wl-daylight] #work > .wl-light-extent > .wl-light-plane {
  background: transparent;
  opacity: .92;
  z-index: -2;
  mask-image: linear-gradient(to bottom, transparent, #000 100px, #000 calc(100% - 100px), transparent);
}
/* One uninterrupted field behind all rows in both themes. */
html[data-wl-daylight] #work[data-wl-light-zone="listing-field"] {
  --wl-light-duration: 39s;
  --wl-light-phase: -16s;
  --wl-field-shine-x: 33%;
  --wl-field-shine-y: 21%;
  --wl-field-depth-x: 68%;
  --wl-field-depth-y: 56%;
  --wl-field-reflection-duration: 51s;
}
html[data-wl-daylight] #work > .wl-light-extent > .wl-light-plane {
  mask-image: linear-gradient(to bottom, transparent,
    rgb(0 0 0 / .18) min(48px, 5%), rgb(0 0 0 / .62) min(120px, 10%),
    #000 min(220px, 17%), #000 calc(100% - min(220px, 17%)),
    rgb(0 0 0 / .62) calc(100% - min(120px, 10%)),
    rgb(0 0 0 / .18) calc(100% - min(48px, 5%)), transparent);
}

/* The context list can span many screens. Only the light near the screen
   should be rasterized. The track itself has no paint or animated effects. */
html[data-wl-daylight] #work[data-portfolio-view="context"] > .wl-light-extent {
  --wl-listing-light-width: min(var(--wl-daylight-viewport), 100vw);
  --wl-listing-light-overscan: min(220px, 22vh);
  display: block;
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc((100% - var(--wl-listing-light-width)) / 2);
  inline-size: var(--wl-listing-light-width);
  z-index: -2;
  pointer-events: none;
}
html[data-wl-daylight] #work[data-portfolio-view="context"] > .wl-light-extent > .wl-light-plane {
  position: sticky;
  inset: auto;
  inset-block-start: calc(-1 * var(--wl-listing-light-overscan));
  inline-size: 100%;
  block-size: min(100%, calc(100vh + 2 * var(--wl-listing-light-overscan)));
  block-size: min(100%, calc(100lvh + 2 * var(--wl-listing-light-overscan)));
  transform: none;
}