/* =============================================================================
 * Creativehub · 处理中的星球 (planet)  BUILD 1
 * -----------------------------------------------------------------------------
 * 在想事情 / 在跑任务的时候, 转圈换成一颗云层流动的蓝色星球。
 *
 * 贴图是怎么来的:
 *   拿你给的那张圆盘图, 做反正投影展开(把球面摊平成经纬图), 再左右镜像拼接
 *   成 360°。镜像的好处是接缝两侧是同一列像素, 天然无缝, 循环点也无缝 ——
 *   不用手工修接缝。
 *   展开后还做了一次平场: 除掉大尺度明暗, 把原图里烘进去的球体阴影去掉,
 *   只留云的花纹。否则贴图自带一层暗边, 再叠 CSS 的球体阴影会黑两次。
 *   最终 256x128 WebP, 3.1 KB。
 *
 * 为什么内联成 base64 而不是单独一个文件:
 *   这是【加载指示器】—— 它自己不该还要等一次网络往返。
 *   单独放文件的话, 第一次显示会先空一下再出现, 恰好在最不该闪的时候闪。
 *
 * 动的是背景位置不是元素本身:
 *   background-repeat:repeat-x + 每轮平移正好一个贴图宽度, 所以是云横向漂移,
 *   看起来像星球自转。整个圆盘 rotate 反而像唱片, 不像星球。
 *   位移用 calc(var(--s)*-2) 写死像素, 不能用百分比 ——
 *   background-position 的百分比是"对齐比例"不是"元素宽度的百分比",
 *   写 -200% 会错位。
 *
 * 谁来决定"正在处理":
 *   不去改那 15 处调用点。planet.js 直接看页面上有没有可见的 .spin,
 *   有就给 body 加 dsx-busy。应用自己的忙碌指示器就是唯一事实来源。
 *
 * 回滚: 删掉 app.html 里那一行 <link href="/planet.css"> 即可。
 * ========================================================================== */

:root{
  --dsx-orb: url(data:image/webp;base64,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);
}

/* ---- 星球本体 ------------------------------------------------------------ */
/* --s 是直径, 所有阴影/位移都按它比例算, 换尺寸不用改别的 */
.dsx-orb,
.spin{
  --s: 14px;
  box-sizing: border-box;
  width: var(--s);
  height: var(--s);
  border: 0;
  border-radius: 50%;
  background-image: var(--dsx-orb);
  background-repeat: repeat-x;
  background-size: calc(var(--s) * 2) var(--s);
  background-position: 0 0;
  background-color: #0b2a4a;
  animation: dsx-orb-spin 9s linear infinite;
  box-shadow:
    inset calc(var(--s) * -0.20) calc(var(--s) * -0.13) calc(var(--s) * 0.34) rgba(3, 18, 54, .62),
    inset calc(var(--s) *  0.12) calc(var(--s) *  0.08) calc(var(--s) * 0.20) rgba(255, 255, 255, .32),
    0 0 calc(var(--s) * 0.40) rgba(86, 176, 255, .50);
}

/* .spin 原本是金色描边转圈, 上面已经整套盖掉了。
   它散落在 15 处, 有些带更高优先级的选择器(如 .ai-note .bubble .spin),
   所以这里把关键几条再顶一次, 免得漏网。 */
.spin{
  border: 0 !important;
  border-radius: 50% !important;
  background-image: var(--dsx-orb) !important;
  background-repeat: repeat-x !important;
  background-size: calc(var(--s) * 2) var(--s) !important;
  animation: dsx-orb-spin 9s linear infinite !important;
  display: inline-block;
  vertical-align: middle;
}

/* 位移一整个贴图宽度 = 转完一圈, 首尾像素相同所以看不出跳帧 */
@keyframes dsx-orb-spin{
  to{ background-position: calc(var(--s) * -2) 0; }
}

.dsx-orb{ display: inline-block; vertical-align: middle; }

/* ---- 顶栏 logo: 平时是品牌色, 有任务在跑就化成流动星球 ---------------------- */
/* 不动 SVG 标识本身, 只在它底下换一层。任务结束自动淡回去。 */
.brand .logo{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow .45s ease;
}
.brand .logo > svg{
  position: relative;
  z-index: 2;
  transition: filter .45s ease;
}
.brand .logo::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background-image: var(--dsx-orb);
  background-repeat: repeat-x;
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
body.dsx-busy .brand .logo::after{
  opacity: 1;
  animation: dsx-logo-flow 11s linear infinite;
}
body.dsx-busy .brand .logo{
  box-shadow: 0 0 0 1px rgba(96, 178, 255, .45), 0 0 14px rgba(70, 160, 255, .40);
}
/* 云层底下标识会糊, 给它加一圈暗描边保持可读 */
body.dsx-busy .brand .logo > svg{
  filter: drop-shadow(0 0 2px rgba(0, 24, 60, .85)) drop-shadow(0 0 5px rgba(0, 20, 50, .55));
}
@keyframes dsx-logo-flow{
  to{ background-position: -80px 0; }   /* logo 固定 40px, 一圈 = 2x40 */
}

/* ---- 无障碍: 系统开了"减少动态效果"就不要一直动 --------------------------- */
@media (prefers-reduced-motion: reduce){
  .dsx-orb, .spin, .brand .logo::after{
    animation: none !important;
  }
}