/* ============================================================================
 * 山水壮乡 3.0 质感打磨库 polish.css（M90；依赖 design-tokens.css + components.css）
 * 原则：结构零改动、质感再升级——仅视觉/微交互/动效层，不改变布局与功能
 * 性能：全部 transform/opacity 硬件加速；低配浏览器降级（no-preference 保底）
 * ============================================================================ */

/* ============ 一、组件微交互 ============ */

/* 按钮：点击缩放 96% + 涟漪 */
.sx-btn { position: relative; overflow: hidden; transition: filter 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out; }
.sx-btn:active { transform: scale(0.96); }
.sx-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0; transform: scale(0.5);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  pointer-events: none;
}
.sx-btn:active::after { opacity: 1; transform: scale(1); }
/* 危险按钮呼吸提示 */
.sx-btn.danger { background: var(--sx-zhuangjin-red); color: var(--sx-white); animation: sx-breathe 2.4s ease-in-out infinite; }
@keyframes sx-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 50, 39, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(198, 50, 39, 0); } }

/* 卡片：点击下压反馈 + 壮锦角标细化为 1px/25% */
.sx-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.sx-card:active { transform: translateY(0) scale(0.99); }
.sx-card::before { opacity: 0.25; }
.sx-card:hover::before { opacity: 0.4; }

/* 标签：选中底部 2px 高亮条跟随 */
.sx-tag { position: relative; transition: background 200ms ease-out, color 200ms ease-out; }
.sx-tag::after {
  content: '';
  position: absolute; left: 20%; right: 20%; bottom: 0;
  height: 2px; border-radius: 1px;
  background: var(--sx-primary);
  transform: scaleX(0); transform-origin: center;
  transition: transform 200ms ease-out;
}
.sx-tag.green::after { transform: scaleX(1); }

/* 输入框：聚焦过渡 + 错误晃动 */
.sx-searchbox input, .sx-hero-search input { transition: border-color 200ms ease-out; }
.form-input:focus, input:focus { transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.input-error { animation: sx-shake 300ms ease-out; border-color: var(--sx-zhuangjin-red) !important; }
@keyframes sx-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* 图标：悬停上浮 1px + 加深 */
.sx-si-voice, .sx-si-search, .sx-zone-card .zone-title { transition: transform 200ms ease-out, filter 200ms ease-out; }
.sx-si-voice:hover, .sx-si-search:hover { transform: translateY(-1px); filter: brightness(0.9); }

/* ============ 二、页面级动效 ============ */

/* 骨架屏占位（加载时先出，内容渐入） */
.sx-skeleton {
  background: linear-gradient(90deg, #EFF4F2 25%, #F6FAF8 50%, #EFF4F2 75%);
  background-size: 200% 100%;
  animation: sx-skeleton 1.2s ease-in-out infinite;
  border-radius: var(--sx-radius-card);
}
@keyframes sx-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 内容逐段淡入上移（模块间延迟 50ms） */
.sx-rise { animation: sx-fade-up 200ms ease-out both; will-change: transform, opacity; }
.sx-rise.d1 { animation-delay: 50ms; } .sx-rise.d2 { animation-delay: 100ms; }
.sx-rise.d3 { animation-delay: 150ms; } .sx-rise.d4 { animation-delay: 200ms; }

/* 筛选切换过渡（0.3 透明度再刷新由 JS 配合） */
.sx-content-fading { opacity: 0.3; transition: opacity 200ms ease-out; }

/* 弹窗：居中缩放淡入 + 遮罩渐变 */
.sx-modal { animation: sx-modal-in 200ms ease-out both; transform-origin: center; }
@keyframes sx-modal-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.sx-modal-mask { animation: sx-mask-in 200ms ease-out both; }
@keyframes sx-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* 空状态：0.9 倍缩放淡入 */
.sx-empty { animation: sx-empty-in 260ms ease-out both; }
@keyframes sx-empty-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* 侧滑面板：右侧滑入 + 阴影渐变 */
.sx-drawer { animation: sx-drawer-in 200ms ease-out both; }
@keyframes sx-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ============ 三、AI 专属动效 ============ */

/* AI 摘要卡：竖条增长 + 背景渐显 */
.sx-ai-bubble::before { animation: sx-bar-grow 300ms ease-out both; transform-origin: top; }
@keyframes sx-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sx-ai-bubble { animation: sx-bg-reveal 300ms ease-out both; }
@keyframes sx-bg-reveal { from { background-color: transparent; } to { background-color: var(--sx-ai-glow); } }
/* 竖条呼吸 */
.sx-ai-bubble::before { animation: sx-bar-breathe 2.6s ease-in-out infinite; }
@keyframes sx-bar-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* 流式输出光标闪烁 */
.sx-cursor-blink::after {
  content: '▌';
  color: var(--sx-primary);
  animation: sx-blink 0.8s step-start infinite;
}
@keyframes sx-blink { 50% { opacity: 0; } }

/* 搜索关键词高亮淡入 */
.sx-kw-hl { color: var(--sx-primary); font-weight: 600; animation: sx-kw-in 200ms ease-out both; }
@keyframes sx-kw-in { from { color: var(--sx-text-1); } to { color: var(--sx-primary); } }

/* 搜索框彩蛋：主题色高亮（关键词触发 class） */
.sx-searchbox.egg, .sx-hero-search.egg {
  border-color: var(--sx-zhuangjin-red);
  box-shadow: 0 0 0 4px rgba(198, 50, 39, 0.15), 0 6px 24px rgba(198, 50, 39, 0.18);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.sx-searchbox.egg.mango, .sx-hero-search.egg.mango {
  border-color: var(--sx-baise-mango);
  box-shadow: 0 0 0 4px rgba(240, 183, 60, 0.18), 0 6px 24px rgba(240, 183, 60, 0.2);
}

/* ============ 四、百色专属细节 ============ */

/* 试运营标签呼吸动效 */
.sx-baise-tag { animation: sx-breathe-soft 3s ease-in-out infinite; }
@keyframes sx-breathe-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }

/* 五角星徽章质感（内阴影） */
.sx-star-badge {
  display: inline-block; width: 12px; height: 12px;
  background: url('/static/images/patterns/sx-baise-star.svg') center/12px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

/* 铜鼓金渐变质感（星级/荣誉/装饰线 +5%） */
.sx-gold-metal {
  background: linear-gradient(135deg, #E4BC60 0%, #D4A03D 45%, #B8862F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 区县主题色标（乐业绿/靖西蓝/右江青/田东橙） */
.sx-region-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.sx-region-dot.youjiang { background: #1F8A6B; }
.sx-region-dot.leye { background: #4FA37E; }
.sx-region-dot.jingxi { background: #4A90D9; }
.sx-region-dot.tiandong { background: #E08A3C; }

/* 区县标签主题色 */
.sx-tag.leye { background: #EDF6F1; color: #3E8A66; }
.sx-tag.jingxi { background: #EBF2FA; color: #3A78B5; }
.sx-tag.tiandong { background: #FBF1E5; color: #B9742E; }

/* 红色文化卡庄重质感 */
.sx-card.red-site { background: #FDF8F7; border: 1px solid #EFD8D5; }
.sx-card.red-site .sx-baise-tag { background: var(--sx-zhuangjin-red); }

/* 文旅卡山水迷你标识 */
.sx-card.travel-site::after {
  content: '';
  position: absolute; right: 10px; bottom: 8px;
  width: 40px; height: 20px;
  background: url('/static/images/patterns/sx-karst-silhouette.svg') center/contain no-repeat;
  opacity: 0.2; pointer-events: none;
}

/* ============ 五、降级与适配 ============ */

/* 低配浏览器/减少动效偏好：关闭复杂动效 */
@media (prefers-reduced-motion: reduce) {
  .sx-btn, .sx-card, .sx-tag, .sx-ai-bubble, .sx-modal, .sx-empty, .sx-drawer,
  .sx-loading::before, .sx-skeleton, .sx-baise-tag, .sx-fade-up, .sx-rise {
    animation: none !important;
    transition: none !important;
  }
}

/* 1280~1920 分辨率自适应（栅格不变形） */
@media (min-width: 1600px) {
  .sx-baise { max-width: 1360px !important; margin-left: auto; margin-right: auto; }
}

/* ============ 六、移动端触摸反馈（M92：点击高亮+缩放 98%、触摸无 hover 降级） ============ */
@media (hover: none) {
  .sx-btn:active, .sx-card:active, .sx-tag:active, .sx-list-item:active,
  .sx-zone-card:active, .sx-quick-ask .sx-tag:active {
    transform: scale(0.98);
    background-color: rgba(31, 138, 107, 0.06);
  }
  /* 触摸设备跳过悬停类动效（保持基础反馈） */
  .sx-card:hover { transform: none; box-shadow: var(--sx-shadow-card); }
}