/* A feathered, organic window contains the flowing backdrop behind the logo. */
.site-header .brand {
  --brand-motion-mask: url('assets/brand-flow-mask.svg');
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
}
.site-header .brand::before {
  content: '';
  position: absolute;
  inset: 3px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 15% 25%, #599e7d2b, transparent 52%),
    radial-gradient(ellipse at 65% 15%, #b3665e18, transparent 55%),
    radial-gradient(ellipse at 30% 90%, #c7ab6b28, transparent 48%),
    radial-gradient(ellipse at 85% 75%, #575c6120, transparent 50%);
  -webkit-mask: var(--brand-motion-mask) center / 100% 100% no-repeat;
  mask: var(--brand-motion-mask) center / 100% 100% no-repeat;
}
.brand-backdrop {
  position: absolute;
  inset: -4px -8px;
  z-index: 0;
  overflow: hidden;
  border-radius: 9px;
  pointer-events: none;
  opacity: .76;
}
.brand-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}
.brand-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(var(--dgu-color-050511,5 5 17) / 0.0941), rgb(var(--dgu-color-050511,5 5 17) / 0.1412) 45%, rgb(var(--dgu-color-050511,5 5 17) / 0.4)),
    linear-gradient(0deg, rgb(var(--dgu-color-050511,5 5 17) / 0.6), transparent 24%, transparent 76%, rgb(var(--dgu-color-050511,5 5 17) / 0.6));
}
/* Keep every animated pixel inside the brand, clear of the header divider.
   The asymmetric mask has soft edges; the approved foreground is unmasked. */
.site-header .brand-backdrop {
  inset: 0 -6px;
  opacity: .98;
  border-radius: 38% 62% 49% 51% / 48% 39% 61% 52%;
  -webkit-mask: var(--brand-motion-mask) center / 100% 100% no-repeat;
  mask: var(--brand-motion-mask) center / 100% 100% no-repeat;
}
.site-header .brand-backdrop::after {
  background: linear-gradient(90deg, rgb(var(--dgu-color-050511,5 5 17) / 0.0314), rgb(var(--dgu-color-050511,5 5 17) / 0.0627) 45%, rgb(var(--dgu-color-050511,5 5 17) / 0.1333)),
    linear-gradient(0deg, rgb(var(--dgu-color-050511,5 5 17) / 0.2588), transparent 20%, transparent 80%, rgb(var(--dgu-color-050511,5 5 17) / 0.2588));
}
.site-header .brand-logo {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgb(var(--dgu-color-050511,5 5 17) / 0.9333));
}
/* The DGU company tile uses the same effect; partner artwork stays unchanged. */
.project-logo--dgu {
  position: relative;
  isolation: isolate;
  background: rgb(var(--dgu-color-080d18,8 13 24));
  border-color: #416156;
  box-shadow: 0 0 14px #4ade8014, inset 0 0 16px #facc1508;
}
.project-logo--dgu .brand-backdrop { inset: 0; border-radius: inherit; }
.project-logo--dgu .brand-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  filter: none;
}
.project-logo--dgu > .project-logo-art {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgb(var(--dgu-color-050511,5 5 17) / 0.9333));
  transition: filter var(--interaction-time) ease;
}
#project-dgu .project-company:is(:hover, :focus-visible) .project-logo-art {
  filter: drop-shadow(0 0 3px #facc1570) drop-shadow(0 0 9px #facc1538);
}
.site-motion-toggle {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  margin-right: auto;
  color: var(--muted);
  background: rgb(var(--dgu-color-0b1320,11 19 32));
  border: 1px solid rgb(var(--dgu-color-263645,38 54 69));
  border-radius: 50%;
}
.site-motion-toggle:hover,
.site-motion-toggle:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgb(var(--dgu-color-22d3ee,34 211 238) / 0.2);
}
.site-motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.site-motion-toggle[hidden],
.site-motion-toggle .motion-play-icon,
.site-motion-toggle[data-paused="true"] .motion-pause-icon { display: none; }
.site-motion-toggle[data-paused="true"] .motion-play-icon { display: block; }
@media (prefers-reduced-motion: reduce) { .project-logo--dgu > .project-logo-art { transition: none; } }
@media print { .brand-backdrop, .site-motion-toggle, .site-header .brand::before { display: none; } }