/*
 * Devotional art layers. Shared by the admin and the public site, which have
 * separate stylesheets otherwise - so this is its own file rather than the
 * same sixty lines maintained twice and drifting apart.
 */

/* --- Devotional art layers ----------------------------------------------
 *
 * A painting laid behind a page as a wash, never as content.
 *
 * Three rules hold everywhere this is used, and together they are what let the
 * art be added without auditing every screen again:
 *
 * 1. It never takes a click. `pointer-events: none` and no tab stop, so a
 *    figure sitting over a button's corner cannot swallow the press.
 * 2. It never carries meaning. Rendered as a background on an empty, aria-hidden
 *    span, so a screen reader passes over it and there is no alt text to write
 *    for something that says nothing.
 * 3. It never competes with text. Opacity in single digits, and a mask so the
 *    image fades out instead of ending at a rectangle - which is what stops a
 *    painting with its own dark sky from reading as a grey box on the page.
 *
 * Contrast is the one thing to watch: at these opacities the shift under body
 * text is under a percent, but do not raise --art-opacity past about 0.14 on a
 * surface that carries small type.
 */

.art-layer {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: var(--art-width, 20rem);
  aspect-ratio: var(--art-ratio, 2 / 3);
  background-image: var(--art-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--art-opacity, 0.09);
  /* Feathered at the edges so the source's own rectangle never shows. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 34%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 34%, transparent 72%);
  /* Multiply, so the paper or sky a painting was made on drops out entirely and
     only what is darker than the page survives. Without it a photograph's own
     grey ground reads as a faint box behind the content, which is the exact
     thing the mask was added to avoid. Every surface this is used on is light;
     on a dark one this would need to be `screen`. */
  mix-blend-mode: multiply;
}

/* Anchors. Each pulls the image partly off its container, so what shows is a
   fragment of a painting rather than a small complete picture. */
.art-layer--br { right: -3rem; bottom: -3rem; }
.art-layer--bl { left: -3rem; bottom: -3rem; }
.art-layer--tr { right: -4rem; top: -3rem; }
.art-layer--tl { left: -4rem; top: -3rem; }
/* Centred, for a container built around the art rather than beside it. */
.art-layer--c  { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Anything sharing a container with a layer needs to sit above it. */
.art-host { position: relative; overflow: hidden; }
.art-host > *:not(.art-layer) { position: relative; z-index: 1; }

/* Below this the layer is competing for the same pixels the content needs, and
   on a phone the content wins every time. */
@media (max-width: 767.98px) {
  .art-layer { display: none; }
}

/* Some people set this because motion and low-contrast decoration make a page
   harder to read, not only because animation does. */
@media (prefers-reduced-motion: reduce) {
  .art-layer { opacity: calc(var(--art-opacity, 0.09) * 0.6); }
}

@media print {
  .art-layer { display: none; }
}

/* A layer belonging to the whole page rather than to one card. Fixed, so it
   stays put while a long form scrolls over it. */
.art-layer--page { position: fixed; }

/* The sign-in screens are a blank field with one small card on it - the one
   place in the admin where a painting has room to be seen. Content is lifted
   over the layers explicitly, since there is no .art-host wrapper here. */
.authentication-wrapper { position: relative; z-index: 1; }