/* Materials: the finish of the surfaces, at rest.
 *
 * Nothing here moves or costs a frame. Surfaces are flat: no light line or
 * gradient along their tops. A card is set off by a soft fill or a hairline,
 * and only what floats over the page (menus, windows, the message box) casts
 * a shadow, one soft one (--shadow-menu and --shadow-window, css/base.css).
 * What is left here is the care in a surface at rest: a header that only
 * draws its line once something has scrolled under it, and cards that lean
 * toward the pointer.
 */

/* The header's hairline: drawn only once the page under it has scrolled
   (js/moments.js). At the top of a page the two are one surface. */
#header.flush { border-bottom-color: transparent; }

/* Cards that catch the light (js/moments.js): under the pointer, a card leans
   toward it by a couple of degrees and a soft light slides under the pointer.
   Both are transforms of layers already drawn. */
.light-card { position: relative; overflow: hidden; }
.light-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, #fff 9%, transparent), transparent);
  translate: var(--light-x, -400px) var(--light-y, -400px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
html.light .light-card::after { background: radial-gradient(closest-side, color-mix(in srgb, #fff 70%, transparent), transparent); }
html:not(.reduced-motion):not(.motion-calm):not(.no-card-light) .light-card.lit {
  transform: perspective(900px) translateY(-2px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
html:not(.reduced-motion):not(.motion-calm):not(.no-card-light) .light-card.lit::after { opacity: 1; }