/* The wordmark stays still and legible while a slow light travels through it. */
.header-main .brand-cufe {
  --brand-ink:#163c69;
  --brand-accent:#326cad;
  --brand-soft:#a9c8ee;
  --brand-glint:#5d91c7;
  gap:11px;
}
:root[data-theme="dark"] .header-main .brand-cufe {
  --brand-ink:#edf4fd;
  --brand-accent:#accdf7;
  --brand-soft:#5379a7;
  --brand-glint:#fff;
}
.header-main .brand-cufe>img {
  width:62px;
  height:62px;
  flex:0 0 auto;
  object-fit:contain;
  transition:transform .35s ease;
}
.header-main .brand-cufe .brand-lockup {
  display:block;
  position:relative;
  flex:0 0 auto;
  padding:3px 0 4px;
  direction:ltr;
  unicode-bidi:isolate;
}
.header-main .brand-cufe .brand-wordmark {
  display:block;
  width:max-content;
  color:var(--brand-ink);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:28px;
  font-weight:750;
  font-style:normal;
  line-height:1.4;
  letter-spacing:.055em;
  white-space:nowrap;
}
.header-main .brand-cufe .brand-caption {
  display:block;
  margin-top:2px;
  color:var(--brand-accent);
  font-size:10px;
  font-weight:550;
  letter-spacing:.115em;
  line-height:1.7;
  white-space:nowrap;
  direction:ltr;
  unicode-bidi:isolate;
}
.header-main .brand-cufe .brand-energy {
  display:block;
  width:38px;
  height:2px;
  margin-top:5px;
  border-radius:2px;
  background:var(--brand-soft);
  transform-origin:left center;
  transition:transform .35s ease,background .35s ease;
}
@supports (background-clip:text) or (-webkit-background-clip:text) {
  :root[data-motion="on"] .header-main .brand-cufe .brand-wordmark {
    background-image:linear-gradient(110deg,var(--brand-ink) 30%,var(--brand-accent) 43%,var(--brand-glint) 49%,var(--brand-accent) 55%,var(--brand-ink) 68%);
    background-size:280% 100%;
    background-position:150% 0;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    animation:cufe-wordmark-light 6.8s linear infinite;
  }
}
:root[data-motion="on"] .header-main .brand-cufe .brand-energy {
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--brand-soft);
  opacity:.8;
}
:root[data-motion="on"] .header-main .brand-cufe:hover .brand-energy,
:root[data-motion="on"] .header-main .brand-cufe:focus-visible .brand-energy { transform:none; }
:root[data-motion="on"] .header-main .brand-cufe .brand-energy::after {
  content:"";
  position:absolute;
  inset-block:0;
  left:0;
  width:40%;
  background:linear-gradient(90deg,transparent,var(--brand-accent),transparent);
  animation:cufe-wordmark-line 6.8s linear infinite;
}
@keyframes cufe-wordmark-light {
  from { background-position:150% 0; }
  to { background-position:-100% 0; }
}
@keyframes cufe-wordmark-line {
  0% { transform:translateX(-110%);opacity:0; }
  15%,80% { opacity:1; }
  100% { transform:translateX(300%);opacity:0; }
}
@media (hover:hover) {
  .header-main .brand-cufe:hover>img { transform:translateY(-1px); }
  .header-main .brand-cufe:hover .brand-energy { transform:scaleX(1.35);background:var(--brand-accent); }
}
.header-main .brand-cufe:focus-visible .brand-energy { transform:scaleX(1.35);background:var(--brand-accent); }
@media (max-width:1100px) {
  .header-main .brand-cufe .brand-wordmark { font-size:26px; }
}
@media (max-width:760px) {
  .header-main .brand-cufe { gap:9px; }
  .header-main .brand-cufe>img { width:45px;height:45px; }
  .header-main .brand-cufe .brand-lockup { padding:2px 0; }
  .header-main .brand-cufe .brand-wordmark { font-size:23px;letter-spacing:.035em; }
  .header-main .brand-cufe .brand-caption { font-size:9px;letter-spacing:.08em;margin-top:0; }
  .header-main .brand-cufe .brand-energy { width:30px;margin-top:3px; }
}
@media (max-width:360px) {
  .header-main .brand-cufe { gap:7px; }
  .header-main .brand-cufe>img { width:40px;height:40px; }
  .header-main .brand-cufe .brand-wordmark { font-size:21px; }
  .header-main .brand-cufe .brand-caption { font-size:8px;letter-spacing:.06em; }
}
@media (prefers-reduced-motion:reduce) {
  :root:not([data-motion="on"]) .header-main .brand-cufe>img,
  :root:not([data-motion="on"]) .header-main .brand-cufe .brand-energy { transition:none; }
  :root:not([data-motion="on"]) .header-main .brand-cufe:hover>img,
  :root:not([data-motion="on"]) .header-main .brand-cufe:hover .brand-energy,
  :root:not([data-motion="on"]) .header-main .brand-cufe:focus-visible .brand-energy { transform:none; }
}
@media (forced-colors:active) {
  .header-main .brand-cufe .brand-wordmark,
  .header-main .brand-cufe .brand-caption,
  :root[data-motion="on"] .header-main .brand-cufe .brand-wordmark { color:LinkText;background:none;animation:none; }
  .header-main .brand-cufe .brand-energy { display:none; }
}