/* The UPP mark (src/templates/_brandmark.html), its hover glow and nothing
   else: loaded by base.html and by pages with their own <head> (the PBN
   guide). The mark is a PNG (static/brand/, drawn by scripts/make_favicon.py
   like the favicon), shown at a whole 20 px so each screen scale's image lands
   pixel for pixel; there's one per palette, picked here as tokens.css picks
   the theme: the system's by default, the account's data-theme when set. */
.brandmark {
  position: relative; display: inline-block; flex: none;
  width: 20px; height: 20px; vertical-align: middle;
  /* The ring's centre and mid radius in the 20 px mark, for the glow's
     lighter inside. scripts/make_favicon.py writes the next line. */
  --brandmark-centre: 7.40px; --brandmark-hole: 5.48px;
}
.brandmark__img {
  position: absolute; inset: 0; display: block;
  width: 20px; height: 20px; max-width: none;
  user-select: none; -webkit-user-drag: none;
}
.brandmark__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandmark__img--light { display: none; }
  :root:not([data-theme="light"]) .brandmark__img--dark  { display: block; }
}
:root[data-theme="dark"] .brandmark__img--light { display: none; }
:root[data-theme="dark"] .brandmark__img--dark  { display: block; }

/* Hover: a blurred copy of the same image swells and breathes behind the
   mark, so the glow is exactly its colours. Inside the ring it's lighter
   (75 %): a disc out to the ring's mid radius, whose edge stays behind the
   ring at every size the glow breathes through (0.85–1.3, from its centre).
   The box is padded so the mask doesn't cut the blur off at the mark's edge. */
.brandmark__glow {
  --brandmark-pad: 16px;
  --brandmark-at: calc(var(--brandmark-pad) + var(--brandmark-centre));
  position: absolute; inset: calc(-1 * var(--brandmark-pad)); pointer-events: none;
  filter: blur(5px) saturate(1.35);
  -webkit-mask-image: radial-gradient(circle at var(--brandmark-at) var(--brandmark-at),
    rgba(0, 0, 0, .75) var(--brandmark-hole), #000 var(--brandmark-hole));
          mask-image: radial-gradient(circle at var(--brandmark-at) var(--brandmark-at),
    rgba(0, 0, 0, .75) var(--brandmark-hole), #000 var(--brandmark-hole));
  transform-origin: var(--brandmark-at) var(--brandmark-at);
  opacity: 0; transform: scale(0.85);
  transition: opacity .3s ease, transform .3s ease;
}
.brandmark__glow > .brandmark__img { left: var(--brandmark-pad); top: var(--brandmark-pad); }
a.wordmark:hover .brandmark__glow,
a.wordmark:focus-visible .brandmark__glow,
.hub__base:hover .brandmark__glow,
a.logo:hover .brandmark__glow {
  opacity: .95; transform: scale(1.3);
  animation: brandmark-glow 2.4s ease-in-out .3s infinite alternate;
}
@keyframes brandmark-glow {
  from { opacity: .95; transform: scale(1.3); }
  to   { opacity: .6;  transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .brandmark__glow { transition: none; }
  a.wordmark:hover .brandmark__glow, a.wordmark:focus-visible .brandmark__glow,
  .hub__base:hover .brandmark__glow, a.logo:hover .brandmark__glow { animation: none; }
}