.bostic-brand-system {
  --bostic-brand-accent: #f2a233;
  --bostic-brand-accent-hover: #ffae3d;
  --bostic-brand-name-color: #172033;
  --bostic-brand-tagline-color: #647a73;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-family: "Inter var", Inter, system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.bostic-brand-system:focus-visible {
  outline: 2px solid var(--bostic-brand-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.bostic-brand-system .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  max-width: 100%;
  line-height: 1;
}

.bostic-brand-system .brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #4bb8a8, #ffa21d 56%, #d14f6c);
  box-shadow: none;
}

.bostic-brand-system .brand-monogram {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.bostic-brand-system .brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.bostic-brand-system .brand-name {
  min-width: 0;
  color: var(--bostic-brand-name-color);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.bostic-brand-system .brand-name span {
  color: var(--bostic-brand-accent);
}

.bostic-brand-system:hover .brand-name span {
  color: var(--bostic-brand-accent-hover);
}

.bostic-brand-system .brand-tagline {
  position: relative;
  color: var(--bostic-brand-tagline-color);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.bostic-brand-system .brand-tagline::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  color: transparent;
  background: linear-gradient(90deg, #ff5f6d, #ffb347, #f4df4e, #43d6a3, #4da8ff, #8b7cff, #ef70c9);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  pointer-events: none;
  filter: saturate(1.12) drop-shadow(0 0 0 rgba(77, 168, 255, 0));
  will-change: clip-path, opacity, filter;
  animation-name: bostic-brand-bloom;
  animation-duration: 19s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

body[data-pc-sidebar-theme="dark"] .bostic-brand-system,
html[data-theme="dark"] .bostic-brand-system,
[data-theme="dark"] .bostic-brand-system {
  --bostic-brand-accent: #f2b84b;
  --bostic-brand-accent-hover: #ffc75a;
  --bostic-brand-name-color: #f2f5fa;
  --bostic-brand-tagline-color: #aebdb8;
}

body[data-pc-sidebar-theme="light"] .bostic-brand-system,
html[data-theme="light"] .bostic-brand-system,
[data-theme="light"] .bostic-brand-system {
  --bostic-brand-accent: #e89a28;
  --bostic-brand-accent-hover: #f0a635;
  --bostic-brand-name-color: #172033;
  --bostic-brand-tagline-color: #647a73;
}

@keyframes bostic-brand-bloom {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
    filter: saturate(1.12) drop-shadow(0 0 0 rgba(77, 168, 255, 0));
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  10.526% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    filter: saturate(1.22) drop-shadow(0 0 4px rgba(77, 168, 255, 0.2));
    animation-timing-function: linear;
  }
  26.316% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    filter: saturate(1.22) drop-shadow(0 0 4px rgba(77, 168, 255, 0.2));
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  36.842% {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
    filter: saturate(1.12) drop-shadow(0 0 0 rgba(77, 168, 255, 0));
  }
  36.843%,
  100% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bostic-brand-system .brand-tagline::after {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    filter: none;
    animation: none;
  }
}

@media (max-width: 575.98px) {
  .bostic-brand-system .brand-name {
    font-size: 1rem;
  }
}