/* ============================================================
   呓语云创 · Premium 质感层 v4
   纯叠加：不修改任何现有 DOM / 不占用任何伪元素（除 .prog-fill）
   ============================================================ */

/* ---------- 1. 导航胶囊：丝滑变形 + 玻璃质感 ---------- */
#mainNav{
  transition:
    top .65s cubic-bezier(.22,1,.36,1),
    width .65s cubic-bezier(.22,1,.36,1),
    max-width .65s cubic-bezier(.22,1,.36,1),
    margin .65s cubic-bezier(.22,1,.36,1),
    border-radius .65s cubic-bezier(.22,1,.36,1),
    background-color .5s ease,
    border-color .5s ease,
    box-shadow .6s cubic-bezier(.22,1,.36,1);
  will-change: top, width, max-width, border-radius;
}
nav:not(.scrolled){
  background-color:rgba(255,255,255,.52);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
#mainNav.scrolled{
  background-image:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.40));
  backdrop-filter:blur(26px) saturate(210%);
  -webkit-backdrop-filter:blur(26px) saturate(210%);
  border-color:rgba(255,255,255,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(15,23,42,.04),
    0 10px 40px rgba(15,23,42,.13),
    0 2px 10px rgba(8,145,178,.06);
  transition:
    top .65s cubic-bezier(.22,1,.36,1),
    width .65s cubic-bezier(.22,1,.36,1),
    max-width .65s cubic-bezier(.22,1,.36,1),
    margin .65s cubic-bezier(.22,1,.36,1),
    border-radius .65s cubic-bezier(.34,1.3,.4,1),
    background-color .5s ease,
    border-color .5s ease,
    box-shadow .6s cubic-bezier(.22,1,.36,1);
}
#mainNav.scrolled:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(15,23,42,.04),
    0 16px 52px rgba(15,23,42,.17),
    0 0 0 1px rgba(34,211,238,.12),
    0 0 26px rgba(8,145,178,.09);
}

/* 胶囊态：右端按钮跟随容器收圆 */
#mainNav.scrolled .nav-r-btn:last-child{
  border-radius:0 999px 999px 0;
}
#mainNav.scrolled .nav-logo{
  border-radius:999px 0 0 999px;
}

/* CTA 按钮微光呼吸 */
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 0 rgba(8,145,178,0)}
  50%{box-shadow:0 0 20px rgba(8,145,178,.38)}
}
.nav-r-btn.cta{animation:ctaGlow 4.5s ease-in-out infinite}

/* 胶囊顶部内高光 + 底部折射暗线 */
#mainNav.scrolled::after{
  content:'';
  position:absolute;left:24px;right:24px;top:0;height:42%;
  border-radius:999px 999px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
  pointer-events:none;
}

/* ---------- 2. 回到顶部：玻璃圆钮 + 弹性入场 ---------- */
.scroll-top-btn{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(20px) saturate(195%);
  -webkit-backdrop-filter:blur(20px) saturate(195%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 26px rgba(15,23,42,.12);
  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease,
    border-color .3s ease,
    color .3s ease,
    background-color .3s ease;
}
.scroll-top-btn.visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.scroll-top-btn:not(.visible){transform:translateY(16px) scale(.8)}
.scroll-top-btn:hover{
  transform:translateY(-4px) scale(1.07);
  border-color:rgba(34,211,238,.5);
  color:#0891b2;
  background-color:rgba(255,255,255,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 34px rgba(8,145,178,.2),
    0 0 18px rgba(34,211,238,.15);
}

/* ---------- 3. 阅读进度条：发光胶囊 + 末端光点 ----------
   顺带修复原站 bug：styles.css 中 .prog 容器被写成 width:0，
   导致内部按百分比变宽的 progFill 永远不可见 */
.prog{height:3px;border-radius:999px;background:rgba(15,23,42,.05);left:0;right:0;width:auto}
.prog-fill{border-radius:inherit;position:relative}
.prog-fill::after{
  content:'';
  position:absolute;right:0;top:50%;
  width:7px;height:7px;border-radius:50%;
  transform:translate(50%,-50%);
  background:#fff;
  box-shadow:
    0 0 10px 2px rgba(124,58,237,.6),
    0 0 3px rgba(8,145,178,.9);
}

/* ---------- 4. 卡片悬浮质感（仅 transform/shadow，不动布局） ---------- */
.prod-card,.feat-card,.agent-card,.btn-card{
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}
.prod-card:hover,.feat-card:hover,.agent-card:hover,.btn-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 18px 46px rgba(15,23,42,.12),
    0 0 0 1px rgba(34,211,238,.13),
    0 0 30px rgba(8,145,178,.07);
}

/* ---------- 5. 全局细节 ---------- */
html{scroll-behavior:smooth}
::selection{background:rgba(34,211,238,.26);color:#0f172a}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.16);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(8,145,178,.45);
  background-clip:content-box;
}

@media (prefers-reduced-motion:reduce){
  .nav-r-btn.cta{animation:none}
  html{scroll-behavior:auto}
  #mainNav,.scroll-top-btn,.prod-card,.feat-card,.agent-card,.btn-card{transition:none}
}


/* ============================================================
   玻璃化 2.0 —— 让玻璃真正"透"起来
   原理：页面底衬注入青/紫极光色带，卡片全部改为半透明磨砂，
   光与颜色从玻璃后面透出来，质感立现。
   ============================================================ */

/* ---------- A. 极光底衬（body 伪元素未被占用，已核实）---------- */
body::before{
  content:'';
  position:fixed;inset:-20%;z-index:1;pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(34,211,238,.16) 0%, transparent 62%),
    radial-gradient(38% 30% at 82% 16%, rgba(167,139,250,.13) 0%, transparent 60%),
    radial-gradient(46% 36% at 74% 78%, rgba(8,145,178,.12) 0%, transparent 64%),
    radial-gradient(30% 26% at 30% 86%, rgba(124,58,237,.09) 0%, transparent 60%);
  filter:blur(48px);
}
@media (prefers-reduced-motion:no-preference){
  body::before{
    animation:auroraDrift 26s ease-in-out infinite alternate;
  }
  @keyframes auroraDrift{
    from{transform:translate3d(-2.5%, -2%, 0) scale(1)}
    to  {transform:translate3d( 2.5%,  2%, 0) scale(1.07)}
    }
}

/* ---------- B. 卡片玻璃化（覆盖原站压平规则）---------- */
/* 产品服务 / 核心优势：按需求保持白色实底卡片，仅保留悬浮光影 */
.prod-card,.feat-card{
  background:#ffffff!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.prod-card:hover,.feat-card:hover{
  background:#ffffff!important;
  box-shadow:0 18px 44px rgba(8,145,178,.12),0 2px 10px rgba(15,23,42,.05);
}

.agent-card,.history-card{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
}
.agent-card:hover{
  background:rgba(255,255,255,.72);
  box-shadow:0 18px 44px rgba(8,145,178,.14);
}

.stats-bar{
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.32));
  backdrop-filter:blur(16px) saturate(175%);
  -webkit-backdrop-filter:blur(16px) saturate(175%);
}

.tw-card{
  background:rgba(255,255,255,.45)!important;
  backdrop-filter:blur(20px) saturate(185%);
  -webkit-backdrop-filter:blur(20px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 36px rgba(8,145,178,.10),0 2px 8px rgba(15,23,42,.04);
}

.btn-card.glass{
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(12px) saturate(165%);
  -webkit-backdrop-filter:blur(12px) saturate(165%);
}