/* ============================================================
   H5 动效样式层 —— 登记页 / 后台共用
   纯 CSS 动画，无需 JS，兼容微信内置浏览器
   ============================================================ */

/* ---------- 背景：缓慢流动的渐变光晕 ---------- */
@keyframes bgFloat {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body {
  background-size: 200% 200%;
  animation: bgFloat 18s ease-in-out infinite;
}

/* ---------- 入场：卡片/分组/字段依次上浮 ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.group, .card, .panel, .section, .login-card {
  animation: fadeUp .5s cubic-bezier(.22,.68,.36,1) both;
}
.group:nth-of-type(1), .card:nth-of-type(1) { animation-delay: .04s; }
.group:nth-of-type(2), .card:nth-of-type(2) { animation-delay: .10s; }
.group:nth-of-type(3), .card:nth-of-type(3) { animation-delay: .16s; }
.group:nth-of-type(4), .card:nth-of-type(4) { animation-delay: .22s; }
.group:nth-of-type(5), .card:nth-of-type(5) { animation-delay: .28s; }
.group:nth-of-type(6), .card:nth-of-type(6) { animation-delay: .34s; }

/* ---------- 字段逐条淡入 ---------- */
.field, .form-item, .row {
  animation: fadeUp .42s cubic-bezier(.22,.68,.36,1) both;
}
.field:nth-of-type(1)  { animation-delay: .05s; }
.field:nth-of-type(2)  { animation-delay: .09s; }
.field:nth-of-type(3)  { animation-delay: .13s; }
.field:nth-of-type(4)  { animation-delay: .17s; }
.field:nth-of-type(5)  { animation-delay: .21s; }
.field:nth-of-type(6)  { animation-delay: .25s; }
.field:nth-of-type(7)  { animation-delay: .29s; }
.field:nth-of-type(8)  { animation-delay: .33s; }

/* ---------- 按钮：按压反馈 + 光晕呼吸 ---------- */
@keyframes btnPulse {
  0%,100% { box-shadow: 0 4px 14px rgba(40,120,255,.22); }
  50%     { box-shadow: 0 6px 20px rgba(40,120,255,.38); }
}
.btn, .submit-btn, button.primary, button {
  transition: transform .16s cubic-bezier(.3,.9,.4,1), box-shadow .25s ease, filter .2s ease;
}
.btn:active, .submit-btn:active, button:active {
  transform: scale(.965);
  filter: brightness(.94);
}
.submit-btn, button.primary {
  animation: btnPulse 3.2s ease-in-out infinite;
}

/* ---------- 顶部标题：轻微浮动 ---------- */
@keyframes titleIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
h1, .page-title, .topbar h1 { animation: titleIn .55s cubic-bezier(.22,.68,.36,1) both; }

/* ---------- 步骤条：进度流光 ---------- */
@keyframes stepShine {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.steps .line .fill, .step-bar .fill, .progress .fill {
  background-image: linear-gradient(90deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.35) 100%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: stepShine 2.4s linear infinite;
}

/* ---------- 错误提示：抖动 + 淡入 ---------- */
@keyframes shakeIn {
  0%   { opacity: 0; transform: translateX(-8px); }
  40%  { opacity: 1; transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
.msg.err, .err-msg, .field-error, .tips.err { animation: shakeIn .42s ease both; }

/* ---------- 成功页：打勾缩放弹入 + 光环扩散 ---------- */
@keyframes tickPop {
  0%   { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes ringOut {
  0%   { transform: scale(.6); opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}
.tick { animation: tickPop .6s cubic-bezier(.2,1.4,.4,1) both; position: relative; }
.tick::after {
  content: '';
  position: absolute; inset: -14px;
  border: 2px solid rgba(31,170,90,.5);
  border-radius: 50%;
  animation: ringOut 1.5s ease-out .25s infinite;
  pointer-events: none;
}

/* ---------- 图片缩略图：弹入 ---------- */
@keyframes popIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
.up-thumb, .thumb, .preview-img { animation: popIn .34s cubic-bezier(.2,1.3,.4,1) both; }

/* ---------- 上传按钮：悬浮呼吸 ---------- */
@keyframes breathe {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
.up-add { animation: breathe 2.8s ease-in-out infinite; }

/* ---------- 表格行：逐行淡入（后台） ---------- */
tbody tr { animation: fadeUp .34s ease both; }
tbody tr:nth-child(1) { animation-delay: .02s; }
tbody tr:nth-child(2) { animation-delay: .05s; }
tbody tr:nth-child(3) { animation-delay: .08s; }
tbody tr:nth-child(4) { animation-delay: .11s; }
tbody tr:nth-child(5) { animation-delay: .14s; }
tbody tr:nth-child(n+6) { animation-delay: .17s; }
tbody tr:hover { background: rgba(40,120,255,.06); transition: background .2s ease; }

/* ---------- 弹窗：缩放淡入 ---------- */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal, .modal-box, .sheet { animation: modalIn .32s cubic-bezier(.22,.68,.36,1) both; }

/* ---------- 加载骨架：流光 ---------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton, .loading-bar {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9fd 37%, #eef1f7 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ---------- 尊重系统「减少动效」设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}