/* ==========================================================================
   gpt.153.ink 绑卡页（card-flow）前端动效增强层
   - 独立文件，只被 card-flow.html 引用，删除引用即可整体下线
   - 入场动画：CDK 栏下落、Hero/监控/主卡错峰上浮、步骤条依次弹出
   - 按钮效果：悬停光泽扫过、悬停浮起、按下回弹、焦点环、点击涟漪(motion.js)
   - 状态反馈：支付状态灯脉冲、进度条流光、CDK 弹窗入场
   说明：所有动画规则包在 prefers-reduced-motion:no-preference 内，
   用户系统开启“减少动态效果”时自动停用；悬停/按下等过渡交互保留。
   ========================================================================== */

/* ---------- 关键帧 ---------- */
@keyframes motion-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
@keyframes motion-pop{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-pulse-accent{0%{box-shadow:0 0 0 0 rgba(88,217,178,.45)}70%{box-shadow:0 0 0 9px rgba(88,217,178,0)}100%{box-shadow:0 0 0 0 rgba(88,217,178,0)}}
@keyframes motion-shimmer{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
@keyframes motion-ripple{from{transform:scale(0);opacity:.4}to{transform:scale(1);opacity:0}}

/* ---------- 涟漪宿主与波纹（motion.js 注入） ---------- */
.motion-ripple-host{position:relative;overflow:hidden}
.motion-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.32;transform:scale(0);animation:motion-ripple .55s ease-out forwards;z-index:0}

/* ---------- 按钮统一过渡与按下回弹 ---------- */
#startButton,#stopButton,.secondary,.load-card-button,.add-at-button,.remove-at-button,
.copy-one-button,.pay-one-button,.retry-one-button,.batch-pay-button,.resume-button,
.mini-actions button,.row-actions button,.cdk-entry-form button,.cdk-switch-button,
.cdk-merge-actions button,.cdk-merge-title button,.cdk-tools-actions button,.cdk-tools-input button,
.multi-element-head button,.card-cache-actions button,.select-pay-label{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease,filter .18s ease;
}
#startButton:not(:disabled):active,#stopButton:not(:disabled):active,.secondary:not(:disabled):active,
.load-card-button:not(:disabled):active,.add-at-button:not(:disabled):active,.remove-at-button:not(:disabled):active,
.copy-one-button:not(:disabled):active,.pay-one-button:not(:disabled):active,.retry-one-button:not(:disabled):active,
.batch-pay-button:not(:disabled):active,.resume-button:not(:disabled):active,
.mini-actions button:not(:disabled):active,.row-actions button:not(:disabled):active,
.cdk-entry-form button:not(:disabled):active,.cdk-switch-button:not(:disabled):active,
.cdk-merge-actions button:not(:disabled):active,.cdk-merge-title button:not(:disabled):active,
.cdk-tools-actions button:not(:disabled):active,.cdk-tools-input button:not(:disabled):active,
.multi-element-head button:not(:disabled):active,.card-cache-actions button:not(:disabled):active{
  transform:translateY(0) scale(.96);
  filter:brightness(.94);
}
button:focus-visible,a:focus-visible,select:focus-visible{
  outline:2px solid var(--accent,#58d9b2);
  outline-offset:2px;
}
button:disabled{cursor:not-allowed}

/* 主操作按钮悬停光泽扫过 */
#startButton,.batch-pay-button,.cdk-entry-form button,.cdk-gate-form button{position:relative;overflow:hidden;isolation:isolate}
#startButton:before,.batch-pay-button:before,.cdk-entry-form button:before,.cdk-gate-form button:before{
  content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-22deg);transition:left .55s ease;
}
#startButton:not(:disabled):hover:before,.batch-pay-button:not(:disabled):hover:before,
.cdk-entry-form button:not(:disabled):hover:before,.cdk-gate-form button:not(:disabled):hover:before{left:135%}

/* 悬停浮起 */
#startButton:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.08)}
#stopButton:not(:disabled):hover,.secondary:not(:disabled):hover,.load-card-button:not(:disabled):hover,
.copy-one-button:not(:disabled):hover,.pay-one-button:not(:disabled):hover,.retry-one-button:not(:disabled):hover,
.add-at-button:not(:disabled):hover,.mini-actions button:not(:disabled):hover,.row-actions button:not(:disabled):hover,
.cdk-switch-button:not(:disabled):hover,.cdk-merge-actions button:not(:disabled):hover,
.cdk-tools-actions button:not(:disabled):hover,.cdk-tools-input button:not(:disabled):hover,
.multi-element-head button:not(:disabled):hover,.card-cache-actions button:not(:disabled):hover{
  transform:translateY(-1px);filter:brightness(1.12);
}
.batch-pay-button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)}
.select-pay-label:hover{border-color:var(--accent);filter:brightness(1.1)}

/* 步骤条过渡（JS 切换 .active 时平滑过渡） */
.steps span{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .18s ease}
.steps span:hover{transform:translateY(-1px)}

/* 行/卡片悬停反馈 */
.task-row{transition:border-color .18s ease,background .18s ease,transform .18s ease}
.task-row:hover{border-color:#3d6484}
.task-row.failed:hover{border-color:rgba(255,115,136,.55)}
.at-entry{transition:border-color .18s ease,box-shadow .18s ease}
.at-entry:hover{border-color:#3d6484}
.multi-element-card:hover{border-color:#3d6484}
.proxy-pool-card{transition:border-color .18s ease,box-shadow .18s ease}
.proxy-pool-card:focus-within{border-color:rgba(88,217,178,.4)}

/* 进度条流光图层（动画在下方媒体查询内开启） */
.progress-track i{position:relative;overflow:hidden}

/* ==========================================================================
   以下动画仅在用户未开启“减少动态效果”时启用
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* CDK 访问栏下落入场 */
  .cdk-access-panel{animation:motion-drop .7s cubic-bezier(.22,1,.36,1) both}

  /* Hero 上浮，内部文字错峰淡入 */
  .hero{animation:motion-rise .8s cubic-bezier(.22,1,.36,1) .08s both}
  .hero .eyebrow{animation:motion-rise .7s ease .28s both}
  .hero h1{animation:motion-rise .75s ease .42s both}
  .hero p{animation:motion-rise .75s ease .56s both}

  /* 支付监控与主卡片错峰上浮 */
  .payment-success-monitor{animation:motion-rise .85s cubic-bezier(.22,1,.36,1) .24s both}
  .batch-card{animation:motion-rise .9s cubic-bezier(.22,1,.36,1) .38s both}

  /* 步骤条依次弹出 */
  .steps span{animation:motion-pop .55s cubic-bezier(.22,1,.36,1) both}
  .steps span:nth-child(1){animation-delay:.58s}
  .steps span:nth-child(2){animation-delay:.68s}
  .steps span:nth-child(3){animation-delay:.78s}
  .steps span:nth-child(4){animation-delay:.88s}

  /* 支付状态灯脉冲 */
  .payment-success-eyebrow span{animation:motion-pulse-accent 2.2s ease-out infinite}
  .cdk-access-panel .cdk-mark{animation:motion-pulse-accent 2.4s ease-out infinite}

  /* 进度条流光 */
  .progress-track i:after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:26%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    animation:motion-shimmer 1.6s ease-in-out infinite;
  }

  /* CDK 弹窗：遮罩淡入 + 卡片弹出 */
  .cdk-merge-dialog,.at-import-dialog{animation:motion-fade .22s ease both}
  .cdk-merge-card,.at-import-card{animation:motion-pop .3s cubic-bezier(.22,1,.36,1) both}
}