/* ==========================================================================
   动效与装饰层
   规则（硬性）：
   1. 强制开启，不检测系统的减少动态效果偏好。
   2. 只动 transform / opacity；大面积动画禁用 filter: blur（麒麟/统信集显扛不住）。
   3. 长列表（>20 项）不逐项入场，只做容器淡入。
   ========================================================================== */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-swift: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   1. 入场
   ========================================================================== */

@keyframes riseIn {
  from { opacity: 1; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes riseInSm {
  from { opacity: 1; transform: translate3d(0, 5px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(20px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rise      { animation: riseIn 300ms var(--ease-glide) both; }
.rise-sm   { animation: riseInSm 220ms var(--ease-glide) both; }
.slide-l   { animation: slideInLeft 280ms var(--ease-glide) both; }
.slide-r   { animation: slideInRight 300ms var(--ease-glide) both; }
.scale-in  { animation: scaleIn 240ms var(--ease-glide) both; }
.fade-only { animation: fadeOnly 200ms var(--ease-swift) both; }

/* 卡片逐个入场：最多排到第 12 个，之后统一延迟，避免长列表拖慢首屏 */
.stagger-in > * { animation: riseIn 320ms var(--ease-glide) both; }
.stagger-in > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-in > *:nth-child(2)  { animation-delay: 36ms; }
.stagger-in > *:nth-child(3)  { animation-delay: 72ms; }
.stagger-in > *:nth-child(4)  { animation-delay: 108ms; }
.stagger-in > *:nth-child(5)  { animation-delay: 144ms; }
.stagger-in > *:nth-child(6)  { animation-delay: 180ms; }
.stagger-in > *:nth-child(7)  { animation-delay: 216ms; }
.stagger-in > *:nth-child(8)  { animation-delay: 252ms; }
.stagger-in > *:nth-child(9)  { animation-delay: 288ms; }
.stagger-in > *:nth-child(10) { animation-delay: 324ms; }
.stagger-in > *:nth-child(n + 11) { animation-delay: 360ms; }

/* 滚动区域始终保持可读，进入视口时只补轻微位移。 */
.reveal {
  opacity: 1;
  transform: translate3d(0, 8px, 0);
  transition: transform 320ms var(--ease-glide);
}
.reveal.shown {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 页面切换：主区域整块淡入，不重播子元素 */
.page-enter {
  animation: riseInSm 260ms var(--ease-glide) both;
}

/* ==========================================================================
   2. 氛围层：极光 / 星点 / 网格
   用固定定位的伪层，transform 缓慢漂移，不触发重排
   ========================================================================== */

.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -18vmax;
  opacity: var(--decorative-opacity);
  will-change: transform;
}

.aurora::before {
  background:
    radial-gradient(ellipse 34% 24% at 24% 30%, var(--aurora-1), transparent 72%),
    radial-gradient(ellipse 26% 32% at 70% 68%, var(--aurora-3), transparent 74%);
  animation: auroraDriftA 38s ease-in-out infinite alternate;
}

.aurora::after {
  background:
    radial-gradient(ellipse 30% 22% at 72% 28%, var(--aurora-2), transparent 72%),
    radial-gradient(ellipse 24% 28% at 34% 74%, var(--aurora-1), transparent 76%);
  animation: auroraDriftB 46s ease-in-out infinite alternate;
}

/* Motion Prompt #095 的椭圆缓移机制，以纯 CSS 冷色光场实现。 */
@keyframes auroraDriftA {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(0.98); opacity: 0.55; }
  50%  { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.05); opacity: 0.8; }
  100% { transform: translate3d(7%, -1%, 0) rotate(5deg) scale(1); opacity: 0.62; }
}

@keyframes auroraDriftB {
  0%   { transform: translate3d(3%, 4%, 0) rotate(4deg) scale(1.06); opacity: 0.5; }
  50%  { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(0.98); opacity: 0.74; }
  100% { transform: translate3d(-7%, 3%, 0) rotate(-5deg) scale(1.03); opacity: 0.58; }
}

/* 细网格：静态，无动画，做质感不打性能 */
.grid-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--veil-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--veil-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
}

/* ==========================================================================
   3. 呼吸与脉冲
   ========================================================================== */

@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

@keyframes pulseRing {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes blinkCaret {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes softBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.breathe   { animation: breathe 3.4s ease-in-out infinite; }
.blinking  { animation: softBlink 1.6s ease-in-out infinite; }

/* 逾期/危险：脉冲只动透明度，底色不变，打印与色盲都能读 */
@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.42; }
}
.danger-pulse { animation: dangerPulse 1.9s ease-in-out infinite; }

/* ==========================================================================
   4. 载入骨架
   ========================================================================== */

@keyframes sheen {
  from { transform: translate3d(-120%, 0, 0); }
  to   { transform: translate3d(220%, 0, 0); }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-panel-2);
  border-radius: 6px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--sheen-1) 45%,
    var(--sheen-2) 55%,
    transparent 100%
  );
  animation: sheen 1.5s linear infinite;
  will-change: transform;
}

/* 三点跳动：AI 思考中 */
@keyframes dotJump {
  0%, 60%, 100% { transform: translate3d(0, 0, 0); opacity: 0.45; }
  30%           { transform: translate3d(0, -4px, 0); opacity: 1; }
}

.thinking-dots { display: inline-flex; gap: 4px; align-items: center; }
.thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  display: block;
  animation: dotJump 1.2s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: 140ms; }
.thinking-dots i:nth-child(3) { animation-delay: 280ms; }

/* ==========================================================================
   5. 进度条与环
   ========================================================================== */

.bar-track {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-raised);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), #6f9bff);
  transform-origin: left center;
  animation: barGrowX 620ms var(--ease-glide) both;
}
@keyframes barGrowX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.ring-progress { transform: rotate(-90deg); }
.ring-progress circle {
  fill: none;
  stroke-linecap: round;
  animation: ringDraw 760ms var(--ease-glide) both;
}
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-len); }
}

/* ==========================================================================
   6. 交互反馈
   ========================================================================== */

/* 按压缩放：所有按钮统一 */
.press { transition: transform 90ms var(--ease-swift); }
.press:active { transform: scale(0.97); }

/* 主按钮扫光 */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.btn.primary:hover:not(:disabled)::after {
  opacity: 1;
  animation: sheen 760ms var(--ease-swift);
}

/* 点击涟漪：由 JS 插入 <span class="ripple"> */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--ripple);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0);
  animation: rippleOut 560ms var(--ease-glide) forwards;
}
@keyframes rippleOut {
  to { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0; }
}

/* 卡片抬起：只动 transform，不阴影抖动 */
.lift {
  transition: transform 180ms var(--ease-glide), border-color 180ms var(--ease-swift),
    background 180ms var(--ease-swift);
}
.lift:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--line-strong);
}

/* 列表行滑入右侧指示 */
.row-shift {
  position: relative;
  transition: background 140ms var(--ease-swift), padding-left 160ms var(--ease-glide);
}
.row-shift::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--brand);
  border-radius: 1px;
  transform: translateY(-50%);
  transition: height 180ms var(--ease-glide);
}
.row-shift:hover::before { height: 62%; }

/* 输入框聚焦：光环扩散一次 */
.field-glow { transition: box-shadow 200ms var(--ease-swift), border-color 200ms var(--ease-swift); }
.field-glow:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 22px -8px var(--brand);
}

/* ==========================================================================
   7. 数字与文本
   ========================================================================== */

@keyframes digitIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.digit-in { animation: digitIn 380ms var(--ease-glide) both; }

/* 流式文字：每个增量块淡入，读起来像在写 */
@keyframes chunkIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stream-chunk { animation: chunkIn 180ms var(--ease-swift) both; }

.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--brand-hover);
  margin-left: 2px;
  animation: blinkCaret 1.1s steps(1) infinite;
}

/* ==========================================================================
   8. 浮层动效
   ========================================================================== */

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes dialogIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.975); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes drawerIn {
  from { transform: translate3d(100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.overlay.leaving { animation: overlayOut 160ms var(--ease-swift) both; }
.modal { animation: dialogIn 240ms var(--ease-glide) both; }

.drawer-panel { animation: drawerIn 300ms var(--ease-glide) both; }
.drawer-panel.leaving { animation: drawerIn 220ms var(--ease-swift) reverse both; }

/* 下拉选择 */
@keyframes popDown {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.pop-down { animation: popDown 170ms var(--ease-glide) both; transform-origin: top center; }

/* 命令面板 */
@keyframes paletteIn {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.command-palette { animation: paletteIn 200ms var(--ease-glide) both; }

/* ==========================================================================
   9. 装饰件
   ========================================================================== */

/* 顶部细光带，随页面滚动保持静态 */
.edge-glow {
  position: relative;
}
.edge-glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(59, 110, 245, 0.55) 22%,
    rgba(122, 162, 255, 0.75) 50%,
    rgba(59, 110, 245, 0.55) 78%,
    transparent
  );
  opacity: 0.85;
}

/* 状态圆点带光晕。业务文字不使用低透明循环，仅装饰与标记变化。 */
.risk-item .risk-bar,
.focus-signal {
  animation: signalPulse 3.2s var(--ease-swift) infinite;
}

@keyframes signalPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.72; transform: scaleY(0.86); }
}

.pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.pip::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: pulseRing 2.4s var(--ease-swift) infinite;
}
.pip.live::after { animation-duration: 2.4s; }
.pip.danger::after { animation-duration: 1.6s; }

/* 头像叠层 */
.avatar-stack { display: inline-flex; }
.avatar-stack > * {
  margin-left: -7px;
  border: 2px solid var(--bg-panel);
  transition: transform 160ms var(--ease-glide);
}
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-stack:hover > * { transform: translateX(0); }

/* ==========================================================================
   10. 页面切换遮罩（切页时短暂淡出，避免白闪）
   ========================================================================== */

@keyframes pageFadeOut {
  to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 999;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), #82b4ff);
  pointer-events: none;
}
.nav-progress.run { animation: navProgress 900ms var(--ease-glide) forwards; }
@keyframes navProgress {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(0.72); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* 控件保留原生点击区域，装饰扫光不接管输入或指针。 */
.btn,
.nav-item,
.search-trigger,
.icon-btn,
.ask-chip,
.demo-acc {
  -webkit-tap-highlight-color: transparent;
}

.input,
.select,
.textarea,
.search-box input {
  transition: border-color 180ms var(--ease-swift), box-shadow 220ms var(--ease-swift),
    background-color 180ms var(--ease-swift);
}

.aurora,
.grid-veil,
.page::before,
.nav-brand::after,
.card::before,
.focus-card::before,
.focus-card::after,
.wb-panel::after,
.stat::before,
.stat::after {
  pointer-events: none;
}

/* 所有系统偏好下均保持现有动画；不添加 reduced-motion 媒体查询。 */