/* Geometry and movement match the creator welcome mark; the page can paint it before JS. */
.zw-brand-loading {
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  isolation:isolate; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 45% 24%, #2a3041 0%, transparent 58%),
    linear-gradient(135deg,#1c202c 0%,#191b21 63%,#252332 100%);
}
.zw-brand-loading::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle,#aab4d038 .7px,transparent 1px) center/24px 24px;
  mask-image:radial-gradient(ellipse 40% 52% at 50% 48%,#000,transparent);
}
.zw-brand-loading-mark {
  position:relative; display:inline-block; width:var(--zw-load-size,144px); height:var(--zw-load-size,144px);
  max-width:100%; flex:none; pointer-events:none;
  filter:drop-shadow(0 0 1px #ffffff60) drop-shadow(0 0 7px #ffffff19);
  animation:zw-loading-float 6.8s ease-in-out infinite,zw-loading-light 5.8s ease-in-out infinite;
}
.zw-brand-loading-mark::before {
  content:""; position:absolute; inset:0;
  background:url("/workbench/brand/zaowu-mark.svg") center/contain no-repeat;
  opacity:var(--zw-loading-opacity,1);
}
@keyframes zw-loading-float {0%,100% { transform:translateY(2.8%) rotate(-1.5deg) scale(.98) }50% { transform:translateY(-3.5%) rotate(1.5deg) scale(1.025) }}
@keyframes zw-loading-light {0%,100% { opacity:.88 }50% { opacity:1 }}
.zw-loading-sr {
  position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important;
  padding:0!important; border:0!important; clip-path:inset(50%); overflow:hidden!important; white-space:nowrap;
}
.zw-brand-loading-inline {
  --zw-load-size:50px;
  font-size:0!important; line-height:0!important; text-align:center;
}
.zw-brand-loading-inline > :not(zw-loading-logo) { display:none!important }
.zw-brand-loading-inline > zw-loading-logo { vertical-align:middle }
.ch-feed-loading.zw-brand-loading-inline { --zw-load-size:80px; animation:none; opacity:1 }
.rd-loading[aria-label] {
  width:24px;height:24px;margin:-12px 0 0 -12px;border:none;border-radius:0;
  background:url("/workbench/brand/zaowu-mark.svg") center/contain no-repeat;
  animation:zw-loading-float 6.8s ease-in-out infinite,zw-loading-light 5.8s ease-in-out infinite;
}
#boot-fallback.zw-brand-loading {gap:0}
#boot-fallback.show-error .zw-brand-loading-mark {display:none}
#boot-fallback.show-error .zw-loading-sr {position:static!important;clip-path:none;overflow:visible!important;width:auto!important;height:auto!important;margin:0!important;white-space:normal}
#workbench>.zw-brand-loading {min-height:calc(100dvh - 76px)}
@media(max-width:600px) { .zw-brand-loading {--zw-load-size:112px} }
@media(prefers-reduced-motion:reduce) {
  .zw-brand-loading-mark,.rd-loading[aria-label] {animation:none!important; transform:none; opacity:1}
  .zw-brand-loading-mark::before {opacity:1}
}