/* ============================================================
   rb-anim.css — React Bits 风格动效层（zongguan-platform）
   配色严格沿用品牌橙 #E8530A / #F4731E，框架不变（原生 JS SPA）
   组件映射：Animated Gradient Text / Soft Aurora / SpotlightCard
            / Shiny Button / CountUp / Blur-Fade（Skeleton 预留）
   ============================================================ */

/* 1) Animated Gradient Text —— 品牌标题流光渐变 */
.rb-gradient-text{
  background:linear-gradient(110deg,#E8530A 0%,#F4731E 22%,#ffc299 48%,#F4731E 72%,#E8530A 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:rb-grad 4.5s linear infinite;
}
@keyframes rb-grad{to{background-position:220% center}}

/* 2) Soft Aurora —— 登录页背景光晕缓慢漂移（橙系） */
.zg-glow{
  animation:rb-aurora 16s ease-in-out infinite alternate;
  will-change:transform;
}
.zg-glow-1{top:-120px;left:-80px;width:460px;height:460px;background:radial-gradient(circle,rgba(232,83,10,.14) 0%,transparent 70%)!important;animation-delay:0s}
.zg-glow-2{bottom:-140px;right:-60px;width:380px;height:380px;background:radial-gradient(circle,rgba(244,115,30,.11) 0%,transparent 70%)!important;animation-delay:-4s}
.zg-glow-3{top:38%;left:28%;width:300px;height:300px;background:radial-gradient(circle,rgba(232,83,10,.09) 0%,transparent 70%)!important;animation-delay:-8s;display:block!important}
.zg-glow-4{bottom:18%;left:8%;width:340px;height:340px;background:radial-gradient(circle,rgba(244,115,30,.08) 0%,transparent 70%)!important;animation-delay:-12s;display:block!important}
@keyframes rb-aurora{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(46px,-34px) scale(1.12)}
  100%{transform:translate(-30px,26px) scale(1.05)}
}

/* 3) SpotlightCard —— 光标跟随聚光（复用 --mx/--my 变量） */
.rb-spotlight{position:relative}
.rb-spotlight::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(232,83,10,.16),transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.rb-spotlight:hover::after{opacity:1}
/* KPI 卡变体（动态生成，需裁切） */
.kpi-card.rb-spotlight{overflow:hidden}
.kpi-card.rb-spotlight::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(232,83,10,.13),transparent 65%)}

/* 4) Shiny Button —— 悬停斜光扫过 */
.rb-shiny{position:relative;overflow:hidden}
.rb-shiny::before{
  content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.rb-shiny:hover::before{left:130%}

/* 5) CountUp —— 数字滚动（JS 驱动，tabular-nums 防抖动） */
.rb-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* 6) Blur-Fade —— 进入视口模糊→清晰淡入（缓动用统一令牌，避免弱 ease） */
.rb-blur{
  opacity:0;filter:blur(12px);transform:translateY(10px);
  transition:opacity .7s var(--zg-ease-out),filter .7s var(--zg-ease-out),transform .7s var(--zg-ease-out);
}
.rb-blur.rb-in{opacity:1;filter:blur(0);transform:none}

/* 7) Skeleton —— 微光占位（仅 data-rb-skeleton 显式启用；默认不挂，避免伪造加载态） */
.rb-skeleton{position:relative;overflow:hidden;background:#eef0f3;border-radius:6px}
.rb-skeleton::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:rb-shimmer 1.2s infinite;
}
@keyframes rb-shimmer{100%{transform:translateX(100%)}}

/* 减少动效偏好：停止所有无限循环装饰（流光/光晕/骨架微光），模糊淡入瞬显。
   仅保留有意义的、极短的淡入，避免晕动症用户在信息密集型后台被持续动效干扰。 */
@media (prefers-reduced-motion: reduce) {
  .rb-gradient-text { animation: none; }
  .zg-glow, .zg-glow-1, .zg-glow-2, .zg-glow-3, .zg-glow-4 { animation: none !important; }
  .rb-skeleton::after { animation: none; }
  .rb-blur { transition: none; opacity: 1 !important; filter: none !important; transform: none !important; }
  .rb-spotlight::after { transition: none; }
}