/**
 * deck-logo - one brand mark pinned to a top corner of every slide.
 *
 * Contract: a single element in index.html, INSIDE .slides but not a section:
 *   <div class="deck-logo" data-logo="tint" data-corner="right" aria-hidden="true"></div>
 * Inside .slides because Reveal scales .slides (zoom or transform) onto the
 * window, so the mark keeps its size against the slide at every window size
 * and stage shape. A sibling of .slides would stay a fixed pixel size and
 * drift away from the slide's corner as the window grows. Reveal only
 * addresses `.slides > section`, so it leaves this div alone and slide
 * transitions move the sections under it.
 *
 * z-index is above the sections, which vendor reveal.css stacks at 10 (11 for
 * the present slide): below that, the title slide's plate painted over the
 * badge's lower edge in wide mode.
 *
 * Swapping the logo means the first three properties of the rule below:
 * --logo-src is the ONLY place the path is written, declared in the same file
 * that uses it because a relative url() inside a custom property resolves
 * against different base URLs in different browsers when the declaration and
 * the var() live in different files; --logo-aspect is the file's
 * width / height; --logo-color is what tint and mono paint with. The box sits
 * flush in the corner - the breathing room is the badge PNG's own transparent
 * margin (about 13% each side), so a file cropped tight to its artwork wants
 * an inset added back.
 *
 * data-logo picks the treatment, the same idea as data-img
 * (css/image-treatments.css), composed from tier-3 roles so a brand switch (T)
 * re-colours the mark:
 *   original  the file as-is
 *   tint      greyscale with --logo-color's hue laid over; keeps the logo's
 *             shading, so its dark parts stay dark on the dark theme
 *   duotone   greyscale, recoloured with the --duotone-wash gradient
 *   mono      a flat --logo-color silhouette of the logo's opaque shape
 * The mark is two layers clipped to the logo's own alpha: ::before draws the
 * (filtered) image, ::after lays the wash over it. Two layers because a filter
 * on the element itself would also grey out the wash.
 *
 * data-corner="left" moves it top-left, where it runs into the category
 * slides' left-aligned headings.
 */
.reveal .slides > .deck-logo {
  --logo-src: url("../assets/img/logo.png");
  --logo-aspect: 1;
  --logo-color: var(--text-muted);
  --logo-h: calc(var(--slide-h) * 0.105);
  --logo-align: right top;

  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: calc(var(--logo-h) * var(--logo-aspect));
  height: var(--logo-h);
  pointer-events: none;
  isolation: isolate;
}
.reveal .slides > .deck-logo[data-corner="left"] {
  --logo-align: left top;
  left: 0;
  right: auto;
}

.reveal .slides > .deck-logo::before,
.reveal .slides > .deck-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: var(--logo-src);
  mask-mode: alpha;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: var(--logo-align);
}
.reveal .slides > .deck-logo::before {
  background: var(--logo-src) var(--logo-align) / contain no-repeat;
  filter: var(--logo-filter, none);
}
.reveal .slides > .deck-logo::after {
  background: var(--logo-wash, none);
  mix-blend-mode: var(--logo-blend, normal);
}

[data-logo="original"] {
  --logo-filter: none;
  --logo-wash: none;
  --logo-blend: normal;
}
[data-logo="tint"] {
  --logo-filter: grayscale(1) contrast(1.05);
  --logo-wash: var(--logo-color);
  --logo-blend: color;
}
[data-logo="duotone"] {
  --logo-filter: grayscale(1) contrast(1.15);
  --logo-wash: var(--duotone-wash);
  --logo-blend: color;
}
[data-logo="mono"] {
  --logo-filter: none;
  --logo-wash: var(--logo-color);
  --logo-blend: normal;
}

/* data-hide-logo on a slide <section> hides the mark while that slide is
   current. */
.reveal .slides > .deck-logo {
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
.reveal .slides:has(> section.present[data-hide-logo]) > .deck-logo {
  opacity: 0;
  visibility: hidden;
}

/* The overview zooms .slides out to a grid, which would shrink the mark onto
   the first thumbnail. */
.reveal.overview .slides > .deck-logo { display: none; }