/* ============================================================
   Sourmo UI v2 — 动效与细节增强层（不覆盖原设计配色）
   原则：只加不加粗——排版节奏、微交互、入场动画、异常兜底。
   与原站 v2.1 墨绿+金 主题共存，删掉 <link> 即完全回滚。
   ============================================================ */
:root{
  --ui-ease:cubic-bezier(.22,.72,.2,1);
  --ui-line:#EFEAE0;
}

html{scroll-behavior:smooth}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
:focus-visible{outline:2px solid #17A67B;outline-offset:2px;border-radius:6px}

/* 细滚动条（不抢视线） */
*{scrollbar-width:thin;scrollbar-color:#C9D6CF transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#D5DFD9;border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#BCCBC3;background-clip:content-box}

/* 金额与编号：等宽数字，列表对齐更利落 */
.price,.card .price,.est,.rc-price,.hot-item .h-p,.fx-strip{font-variant-numeric:tabular-nums}

/* ---------- 顶部阅读进度 ---------- */
#uiProg{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:999;
  background:linear-gradient(90deg,#17A67B,#5FD3A6 58%,#D3AE68);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .08s linear;pointer-events:none;opacity:.9;
}


/* ---------- 深色 hero 内的说明文字与链接（原设计漏改，默认灰/蓝看不清） ---------- */
.hero-seo{
  color:rgba(226,238,231,.82);
  line-height:1.75;
  letter-spacing:.004em;
}
.hero-seo b{color:#F3DFB4;font-weight:700}
.hero-seo a{
  color:#C6EEDD;
  border-bottom:1px solid rgba(198,238,221,.32);
  padding-bottom:1px;
  transition:color .2s var(--ui-ease),border-color .2s var(--ui-ease);
}
.hero-seo a:hover{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.75)}

/* ---------- 顶栏滚动状态：只加阴影与高度收紧，不改底色 ---------- */
header{transition:box-shadow .3s var(--ui-ease)}
header .nav{transition:height .3s var(--ui-ease)}
body.ui-scrolled header{
  box-shadow:0 1px 2px rgba(18,24,21,.04),0 14px 34px -26px rgba(11,62,48,.5);
}
body.ui-scrolled header .nav{height:62px}
@media (max-width:820px){ body.ui-scrolled header .nav{height:58px} }

/* ---------- 图片加载失败：灰底兜底，别露出破图标和长串英文 ---------- */
img.ui-imgfail{
  opacity:0;
  background:linear-gradient(135deg,#F6F4EE,#EFECE4);
}
.gal a:has(> img.ui-imgfail),.card-img:has(> img.ui-imgfail){
  background:linear-gradient(135deg,#F6F4EE,#EFECE4);
}

/* ---------- 入场动效（仅 JS 可用时生效，无脚本不会白屏） ---------- */
@keyframes uiRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
@keyframes uiZoom{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

html.ui-anim .hero h1{animation:uiRise .66s var(--ui-ease) both}
html.ui-anim .hero-center>p{animation:uiRise .66s var(--ui-ease) .06s both}
html.ui-anim .search-box{animation:uiRise .66s var(--ui-ease) .12s both}
html.ui-anim .hero-side .panel{animation:uiZoom .72s var(--ui-ease) .16s both}
html.ui-anim .card.ui-in{animation:uiRise .6s var(--ui-ease) backwards;animation-delay:var(--d,0ms)}
html.ui-anim .ui-fade{animation:uiFade .45s var(--ui-ease) both}
html.ui-anim .gallery .main-img{animation:uiFade .5s var(--ui-ease) both}
html.ui-anim .info h1{animation:uiRise .58s var(--ui-ease) both}

/* 卡片浮现改由 IntersectionObserver 加 .ui-in 驱动。
   不要再使用 animation-timeline:view()：该特性在部分内核/容器里进度恒为负，
   配合 fill:both 会让卡片永久 opacity:0（2026-10-25 首页「商品不显示」就是它）。 */

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  #uiProg{display:none}
}