/* ============================================================
 *  zxcloudai · 进阶特效层 FX Layer  v1
 *  灵感来源：umaxapi / q8s8 参考站的「流动玻璃卡 + 漂浮粒子 + 旋转光环」。
 *  设计原则同 polish 层：纯视觉叠加、不改动布局、失败不影响业务。
 *
 *  新增效果：
 *   1. 卡片持续浮动（glass-drift 风格）—— 用独立 translate 属性，
 *      与 polish 的 transform 入场/ hover 动画互不冲突。
 *   2. 漂浮粒子背景（body::before，固定层，置于内容之下）。
 *   3. 旋转光环（body::after，固定层，极淡、缓慢，做环境氛围）。
 * ============================================================ */

/* ---------- 1. 持续浮动卡片 ---------- */
/* 复用 polish 的 p-rise 入场，并追加 fx-float（作用于 translate 属性）。
   两动画列表的 delay 成对给出：前者管入场错峰，后者管浮动错峰。 */
html.polish-ready .guide-tool-card,
html.polish-ready .guide-gallery-card {
  animation: p-rise .55s cubic-bezier(.22, 1, .36, 1) backwards,
             fx-float 8.5s ease-in-out infinite;
  will-change: transform, translate;
}
html.polish-ready .guide-tool-card:nth-child(1),
html.polish-ready .guide-gallery-card:nth-child(1) { animation-delay: .05s, 0s; }
html.polish-ready .guide-tool-card:nth-child(2),
html.polish-ready .guide-gallery-card:nth-child(2) { animation-delay: .12s, -2.1s; }
html.polish-ready .guide-tool-card:nth-child(3),
html.polish-ready .guide-gallery-card:nth-child(3) { animation-delay: .19s, -4.2s; }
html.polish-ready .guide-tool-card:nth-child(4),
html.polish-ready .guide-gallery-card:nth-child(4) { animation-delay: .26s, -6.3s; }
html.polish-ready .guide-tool-card:nth-child(5),
html.polish-ready .guide-gallery-card:nth-child(5) { animation-delay: .33s, -1.4s; }
html.polish-ready .guide-tool-card:nth-child(6),
html.polish-ready .guide-gallery-card:nth-child(6) { animation-delay: .40s, -3.5s; }
html.polish-ready .guide-tool-card:nth-child(7),
html.polish-ready .guide-gallery-card:nth-child(7) { animation-delay: .47s, -5.6s; }
html.polish-ready .guide-tool-card:nth-child(8),
html.polish-ready .guide-gallery-card:nth-child(8) { animation-delay: .54s, -2.8s; }
/* 交互时停下浮动，让 hover 态稳定 */
html.polish-ready .guide-tool-card:hover,
html.polish-ready .guide-gallery-card:hover { animation-play-state: paused; }

@keyframes fx-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ---------- 2. 漂浮粒子背景 ---------- */
html.polish-ready body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 18% 28%, rgba(255, 180, 90, .50), transparent 60%),
    radial-gradient(1.6px 1.6px at 72% 18%, rgba(139, 92, 246, .45), transparent 60%),
    radial-gradient(2.2px 2.2px at 86% 66%, rgba(255, 180, 90, .40), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 82%, rgba(255, 255, 255, .30), transparent 60%),
    radial-gradient(1.6px 1.6px at 56% 52%, rgba(139, 92, 246, .38), transparent 60%),
    radial-gradient(2px 2px at 8% 62%, rgba(255, 180, 90, .42), transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 88%, rgba(255, 180, 90, .30), transparent 60%);
  background-repeat: no-repeat;
  opacity: .85;
  animation: fx-particles 30s linear infinite alternate;
}
/* 浅色模式：粒子收敛，避免过亮 */
html.polish-ready:not(.dark) body::before { opacity: .5; }

@keyframes fx-particles {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(18px, -28px, 0); }
}

/* ---------- 3. 旋转光环（极淡、缓慢，做环境氛围） ---------- */
html.polish-ready body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 42%;
  width: 80vmax;
  height: 80vmax;
  margin-left: -40vmax;
  margin-top: -40vmax;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(207, 140, 58, 0),
      rgba(207, 140, 58, .10),
      rgba(139, 92, 246, .10),
      rgba(207, 140, 58, 0) 55%,
      rgba(139, 92, 246, .08),
      rgba(207, 140, 58, 0));
  filter: blur(8px);
  opacity: .6;
  animation: fx-spin 40s linear infinite;
}
html.polish-ready:not(.dark) body::after { opacity: .35; }

@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---------- 4. 无障碍：减少动态效果时关闭新增动画（保留可见性） ---------- */
@media (prefers-reduced-motion: reduce) {
  html.polish-ready .guide-tool-card,
  html.polish-ready .guide-gallery-card,
  html.polish-ready body::before,
  html.polish-ready body::after {
    animation: none !important;
  }
}