/* Shared artwork watermarks. Values are opacity, not transparency. */
:root {
  --wm-blend-mode: overlay;
  --wm-pattern-opacity: .10;
  --wm-logo-opacity: .24;
  --wm-word-opacity: .18;
}

.watermark-host {
  isolation: isolate;
}

.img-watermark {
  position: absolute;
  display: block;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: var(--wm-blend-mode);
}

.img-watermark[hidden] {
  display: none;
}

.img-watermark > span {
  position: absolute;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.img-watermark > .img-watermark-pattern {
  inset: 0;
  background-image: url('images/99-watermark.png');
  background-size: cover;
  opacity: var(--wm-pattern-opacity);
}

.img-watermark-logo {
  top: calc(var(--wm-short-side) * .035);
  left: calc(var(--wm-short-side) * .035);
  width: calc(var(--wm-short-side) * .22);
  aspect-ratio: 1;
  background-image: url('images/99-logo.png');
  opacity: var(--wm-logo-opacity);
}

.img-watermark-word {
  right: calc(var(--wm-short-side) * .035);
  bottom: calc(var(--wm-short-side) * .035);
  width: min(32%, calc(var(--wm-short-side) * .9));
  aspect-ratio: 4 / 1;
  background-image: url('images/99-logo-word.png');
  opacity: var(--wm-word-opacity);
}