/* ============================================================
 *  zxcloudai · 高端视觉增强层 Polish Layer  v1
 *  设计原则：只增强、不重构 —— 全部叠加在 --ui-* 设计令牌之上，
 *  任何规则失败都不会破坏业务布局（纯视觉层，无布局性改动）。
 *
 *  覆盖范围（专家审计结论）：
 *   1. 画布色统一    —— 修复 html 背景 #3C3C42 与页面主色不符，
 *                        消除橡皮筋滚动 / 闪烁时的突兀灰底
 *   2. 氛围光        —— 品牌色极光渐变缓慢漂移（深色浓郁 / 浅色克制）
 *   3. 导航毛玻璃    —— sticky 顶栏从全透明升级为 backdrop blur 玻璃
 *   4. 微交互        —— 按钮按压缩放 / 主按钮辉光 / 顶栏按钮浮起
 *   5. 细滚动条      —— 品牌色细滚动条替代系统粗滚动条
 *   6. 弹层质感      —— 弹窗 / 抽屉遮罩加 backdrop blur
 *   7. 首屏与媒体    —— 首屏柔和淡入、图片载入淡入
 *   8. 无障碍        —— 焦点环统一品牌色、尊重 prefers-reduced-motion
 * ============================================================ */

/* ---------- 1. 画布与字体渲染 ---------- */
html {
  background: #f1f4f7;                    /* 浅色画布 = --ui-page */
}
html.dark {
  background: #0d0d0e;                    /* 深色画布 = --ui-page，替换原 #3C3C42 */
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 中文大标题轻微加字距，视觉更松弛高级 */
h1, h2, h3 {
  letter-spacing: .015em;
}

/* ---------- 2. 氛围极光（polish.js 注入） ---------- */
.polish-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* contain 严格隔离，避免影响主树布局计算 */
  contain: strict;
}
.polish-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
/* 青色主光斑：左上 */
.polish-aurora .p-b1 {
  width: 58vmax; height: 58vmax;
  left: -20vmax; top: -24vmax;
  background: radial-gradient(circle at 50% 50%,
      rgba(207, 140, 58, .13), rgba(207, 140, 58, 0) 62%);
  animation: p-drift1 52s ease-in-out infinite alternate;
}
/* 紫罗兰光斑：右侧 */
.polish-aurora .p-b2 {
  width: 48vmax; height: 48vmax;
  right: -18vmax; top: 16%;
  background: radial-gradient(circle at 50% 50%,
      rgba(149, 125, 244, .10), rgba(149, 125, 244, 0) 62%);
  animation: p-drift2 64s ease-in-out infinite alternate;
}
/* 暖橙光斑：底部（原深蓝 → 与品牌橙统一，浅色下不再泛冷） */
.polish-aurora .p-b3 {
  width: 46vmax; height: 46vmax;
  left: 22%; bottom: -26vmax;
  background: radial-gradient(circle at 50% 50%,
      rgba(181, 112, 31, .10), rgba(181, 112, 31, 0) 62%);
  animation: p-drift3 76s ease-in-out infinite alternate;
}
/* 浅色模式：整体收敛到 40%，保持克制 */
html:not(.dark) .polish-aurora i { opacity: .42; }

@keyframes p-drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); }
}
@keyframes p-drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-8vmax, 10vmax, 0) scale(.94); }
}
@keyframes p-drift3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vmax, -7vmax, 0) scale(1.1); }
}

/* 内容层整体抬到极光之上（naive-ui 弹层 z-index 2000+ 不受影响） */
html.polish-ready #app {
  position: relative;
  z-index: 1;
}

/* ---------- 3. 顶栏毛玻璃 ---------- */
html.polish-ready .guide-header {
  background: rgba(13, 13, 14, .55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background .4s ease;
}
html.polish-ready:not(.dark) .guide-header {
  background: rgba(241, 244, 247, .62);
}
/* 底部品牌色发丝线：中间亮、两端渐隐 */
html.polish-ready .guide-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(207, 140, 58, 0),
      rgba(207, 140, 58, .30) 50%,
      rgba(149, 125, 244, .18) 72%,
      rgba(207, 140, 58, 0));
  pointer-events: none;
}

/* ---------- 4. 微交互 ---------- */
/* naive-ui 按钮：按压缩放 + 主按钮辉光 */
html.polish-ready .n-button {
  transition: transform .16s ease, box-shadow .3s ease !important;
}
html.polish-ready .n-button:not(.n-button--disabled):active {
  transform: scale(.965);
}
html.polish-ready .n-button--primary-type:not(.n-button--disabled):hover {
  box-shadow: 0 8px 24px -6px rgba(207, 140, 58, .5);
}
html.polish-ready:not(.dark) .n-button--primary-type:not(.n-button--disabled):hover {
  box-shadow: 0 8px 22px -8px rgba(181, 112, 31, .45);
}

/* 顶栏控制按钮：hover 轻浮起 */
html.polish-ready .guide-header-btn,
html.polish-ready .guide-icon-btn,
html.polish-ready .guide-login-btn {
  transition: background-color .2s ease-out, color .2s ease-out,
              transform .25s cubic-bezier(.22, 1, .36, 1),
              box-shadow .25s ease;
}
html.polish-ready .guide-header-btn:hover,
html.polish-ready .guide-icon-btn:hover,
html.polish-ready .guide-login-btn:hover {
  transform: translateY(-2px);
}

/* naive-ui 卡片：hover 浮起 + 阴影加深 */
html.polish-ready .n-card {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease, border-color .35s ease;
}
html.polish-ready .n-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
html.polish-ready:not(.dark) .n-card:hover {
  box-shadow: 0 16px 36px rgba(30, 48, 63, .16);
}

/* ---------- 4.1 首页轮播（guide-hero） ---------- */
/* 两侧预览图：降低饱和 + 压暗，hover 时恢复，形成明确的视觉焦点层次 */
html.polish-ready .guide-side-slide {
  transition: opacity .4s ease, filter .4s ease,
              transform .45s cubic-bezier(.22, 1, .36, 1);
  filter: saturate(.75) brightness(.72);
}
html.polish-ready .guide-side-slide:hover {
  opacity: .9;
  filter: saturate(1) brightness(1);
  transform: translateY(-50%) scale(1.03);
}
/* 主图：hover 极轻微放大，营造呼吸感 */
html.polish-ready .guide-swiper-image {
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
html.polish-ready .guide-swiper:hover .guide-swiper-image {
  transform: scale(1.015);
}

/* ---------- 4.2 首页工具卡片（guide-tools） ---------- */
/* 原有 hover 已带上浮 + 描边，补齐阴影层次与高光描边 */
html.polish-ready .guide-tool-card {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease, box-shadow .3s ease;
}
html.polish-ready .guide-tool-card:hover {
  box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .45),
              0 0 0 1px rgba(18, 212, 210, .18) inset;
}
html.polish-ready:not(.dark) .guide-tool-card:hover {
  box-shadow: 0 16px 32px -12px rgba(30, 48, 63, .22),
              0 0 0 1px rgba(207, 140, 58, .12) inset;
}

/* ---------- 4.3 首页标语：渐变流光大标题 ---------- */
html.polish-ready .guide-copy.polish-shine-title {
  background: linear-gradient(100deg,
      var(--ui-text-1) 0%, var(--ui-text-1) 35%,
      #5eead4 46%, #a78bfa 52%,
      var(--ui-text-1) 62%, var(--ui-text-1) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: p-shine 7s ease-in-out infinite;
}
@keyframes p-shine {
  0%   { background-position: 120% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* ---------- 4.4 主 CTA：周期性扫光（已停用） ----------
   与锥形流光边框同一原因：持续动画会持续改变按钮表面的明暗，
   在深底上表现为"按钮在闪"，与稳定的描边语言冲突，也让主 CTA 不够沉稳。
   恢复方式：把下面 ::after 规则的 content 改回 "" 并解开注释。 */
html.polish-ready .guide-primary-action {
  position: relative;
  overflow: hidden;
}
/* html.polish-ready .guide-primary-action::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -80%;
  width: 46%;
  background: linear-gradient(105deg,
      transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-22deg);
  animation: p-sweep 4.6s ease-in-out infinite;
  pointer-events: none;
} */
@keyframes p-sweep {
  0%, 62% { left: -80%; }
  86%, 100% { left: 150%; }
}

/* ---------- 4.5 能力跑马灯（hero 与工具区之间） ---------- */
html.polish-ready .polish-marquee {
  overflow: hidden;
  padding: 14px 0 6px;
  margin: 4px 0 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html.polish-ready .polish-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  white-space: nowrap;
  animation: p-marquee 36s linear infinite;
  will-change: transform;
}
html.polish-ready .polish-marquee:hover .polish-marquee-track {
  animation-play-state: paused;
}
html.polish-ready .polish-mq-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  letter-spacing: .06em;
  color: var(--ui-text-3);
  font-weight: 500;
}
html.polish-ready .polish-mq-item i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cf8c3a, #8b5cf6);
  box-shadow: 0 0 8px rgba(207, 140, 58, .55);
}
@keyframes p-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 4.6 工具卡入场错峰 + 箭头微交互 ---------- */
html.polish-ready .guide-tool-card {
  animation: p-rise .55s cubic-bezier(.22, 1, .36, 1) backwards;
}
html.polish-ready .guide-tool-card:nth-child(1) { animation-delay: .05s; }
html.polish-ready .guide-tool-card:nth-child(2) { animation-delay: .12s; }
html.polish-ready .guide-tool-card:nth-child(3) { animation-delay: .19s; }
html.polish-ready .guide-tool-card:nth-child(4) { animation-delay: .26s; }
html.polish-ready .guide-tool-card:nth-child(5) { animation-delay: .33s; }
html.polish-ready .guide-tool-card:nth-child(6) { animation-delay: .40s; }
html.polish-ready .guide-tool-card:nth-child(7) { animation-delay: .47s; }
html.polish-ready .guide-tool-card:nth-child(8) { animation-delay: .54s; }
@keyframes p-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.polish-ready .guide-tool-arrow {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
html.polish-ready .guide-tool-card:hover .guide-tool-arrow {
  transform: translateX(4px);
}

/* ---------- 4.7 灵感画廊卡片 ---------- */
html.polish-ready .guide-gallery-media {
  overflow: hidden;
}
html.polish-ready .guide-gallery-cover,
html.polish-ready .guide-gallery-video {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
html.polish-ready .guide-gallery-card:hover .guide-gallery-cover,
html.polish-ready .guide-gallery-card:hover .guide-gallery-video {
  transform: scale(1.055);
}
html.polish-ready .guide-gallery-card {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
html.polish-ready .guide-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}
html.polish-ready:not(.dark) .guide-gallery-card:hover {
  box-shadow: 0 16px 36px rgba(30, 48, 63, .18);
}

/* ---------- 4.8 热门标签 & 搜索框 ---------- */
html.polish-ready .guide-hot-tag {
  transition: color .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}
html.polish-ready .guide-hot-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(207, 140, 58, .35);
}
html.polish-ready .guide-search:focus-within {
  box-shadow: 0 0 0 2px rgba(207, 140, 58, .28),
              0 8px 26px -8px rgba(207, 140, 58, .3);
}

/* ---------- 5. 细滚动条 ---------- */
html.polish-ready {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar) transparent;
}
html.polish-ready ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.polish-ready ::-webkit-scrollbar-track {
  background: transparent;
}
html.polish-ready ::-webkit-scrollbar-thumb {
  background: var(--ui-scrollbar);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
html.polish-ready ::-webkit-scrollbar-thumb:hover {
  background: var(--ui-scrollbar-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.polish-ready ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- 6. 弹层质感：遮罩毛玻璃 ---------- */
html.polish-ready .n-modal-mask,
html.polish-ready .n-drawer-mask {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- 7. 首屏与媒体动效 ---------- */
/* 首屏柔和淡入（仅 opacity，绝不动 transform，避免影响 fixed/sticky） */
html.polish-ready #app {
  animation: p-page-in .55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes p-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 图片载入淡入 */
html.polish-ready img {
  animation: p-img-in .4s ease both;
}
@keyframes p-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 8. 选区 / 焦点 ---------- */
::selection {
  background: rgba(207, 140, 58, .32);
}
html.polish-ready a:focus-visible,
html.polish-ready button:focus-visible,
html.polish-ready [role="button"]:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 9. 无障碍：尊重减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .polish-aurora i,
  html.polish-ready #app,
  html.polish-ready img,
  html.polish-ready .polish-marquee-track,
  html.polish-ready .guide-primary-action::after,
  html.polish-ready .guide-tool-card {
    animation: none !important;
  }
  html.polish-ready .guide-copy.polish-shine-title {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html.polish-ready #app,
  html.polish-ready img {
    opacity: 1 !important;
  }
  html.polish-ready .n-button,
  html.polish-ready .n-card,
  html.polish-ready .guide-header-btn,
  html.polish-ready .guide-icon-btn,
  html.polish-ready .guide-login-btn,
  html.polish-ready .guide-side-slide,
  html.polish-ready .guide-swiper-image,
  html.polish-ready .guide-tool-card {
    transition: none !important;
  }
  html.polish-ready .guide-side-slide {
    filter: none !important;
  }
}