/* ========================================
   星刻保研网 · 交互动效层 interactive.css
   —— 加载于 style.css 之后, 全站引入
   设计原则:
   1. 只动 opacity / transform / background-position (合成器友好, 移动端不卡)
   2. 入场动画用 CSS animation (节点插入即自动播, 天然兼容 innerHTML 动态渲染)
   3. 滚动 reveal 需 JS (motion.js) 配合, 且只在 html.xk-js 下隐藏初始态 (JS 挂了内容照常可见)
   4. prefers-reduced-motion 一票否决 (文件末尾总闸)
======================================== */

:root {
  --xk-ease-out: cubic-bezier(.22, 1, .36, 1);
  --xk-ease-spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ========================================
   1. 入场动画系统 · 插入即播
   给动态渲染容器加 .xk-stagger, 子元素插入时瀑布进场
   (每次 innerHTML 重渲都会自动重播 → 筛选/翻页天然有"生效了"的反馈)
======================================== */

@media (prefers-reduced-motion: no-preference) {
  .xk-stagger > * { animation: xkIn .45s var(--xk-ease-out) backwards; }
  .xk-stagger > :nth-child(1)  { animation-delay: .02s; }
  .xk-stagger > :nth-child(2)  { animation-delay: .06s; }
  .xk-stagger > :nth-child(3)  { animation-delay: .10s; }
  .xk-stagger > :nth-child(4)  { animation-delay: .14s; }
  .xk-stagger > :nth-child(5)  { animation-delay: .18s; }
  .xk-stagger > :nth-child(6)  { animation-delay: .22s; }
  .xk-stagger > :nth-child(7)  { animation-delay: .26s; }
  .xk-stagger > :nth-child(8)  { animation-delay: .30s; }
  .xk-stagger > :nth-child(9)  { animation-delay: .34s; }
  .xk-stagger > :nth-child(10) { animation-delay: .38s; }
  /* 第 11 个起统一封顶, 长列表不拖沓 */
  .xk-stagger > :nth-child(n+11) { animation-delay: .42s; }
}

@keyframes xkIn {
  from { opacity: 0; transform: translateY(12px); }
}

/* ========================================
   2. 滚动 reveal · 静态区块进场 (motion.js 驱动)
   只有 JS 正常运行(html.xk-js)才隐藏初始态
======================================== */

@media (prefers-reduced-motion: no-preference) {
  html.xk-js .rv {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s var(--xk-ease-out), transform .65s var(--xk-ease-out);
  }
  html.xk-js .rv.in { opacity: 1; transform: none; }
}

/* ========================================
   3. 骨架屏 · 替代"加载中..."
======================================== */

.xk-sk {
  background: linear-gradient(100deg, #f1ebf3 30%, #faf7fb 45%, #f1ebf3 60%);
  background-size: 300% 100%;
  animation: xkShimmer 1.3s infinite;
  border-radius: 8px;
  color: transparent !important;
  user-select: none;
}
@keyframes xkShimmer { to { background-position: -100% 0; } }

.sk-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-line { height: 13px; border-radius: 4px; }
.sk-line.w25 { width: 25%; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w85 { width: 85%; }

/* ========================================
   3.5 MPA 页间淡切 (View Transitions, 不支持的浏览器自动忽略)
======================================== */

@media not (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .16s; }
  ::view-transition-new(root) { animation-duration: .22s; }
}

/* ========================================
   4. 生命感信号 · 呼吸点 / 数字 / LIVE
======================================== */

/* 报名中徽章自带呼吸绿点 (纯 CSS 伪元素, 动态插入自动生效) */
.status-badge.status-active::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2a7a3a;
  margin-right: 5px;
  vertical-align: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .status-badge.status-active::before { animation: xkBreathe 2.4s ease-in-out infinite; }
}

.xk-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin: 0 6px 2px 0;
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .xk-live-dot { animation: xkBreathe 2.2s ease-in-out infinite; }
}
/* 只动 opacity (box-shadow 动画是逐帧重绘, 违反性能红线) */
@keyframes xkBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* 数字统一等宽, count-up 时不抖动 */
.stat-num, .list-count strong, .days-n, .days-num, .count-num,
.cl-st .n, .tile-count, .cl-count b { font-variant-numeric: tabular-nums; }

/* "今日" 徽标 (列表卡片) */
.tag-new {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 3px;
  background: #e8f7ee;
  color: #16803c;
  border: 1px solid #bbe7cc;
}
.tag-new .xk-live-dot { width: 5px; height: 5px; margin: 0 4px 1px 0; }

/* ========================================
   5. 列表卡片状态分层 · 打破卡片海
======================================== */

/* 今日新鲜卡: 左侧金边 + 「新」字金印 (星刻的"刻"即钤印) */
.card.card-fresh { border-left: 3px solid var(--gold); }
.seal-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px; height: 21px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(8deg);
  opacity: .85;
  pointer-events: none;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .seal-new { animation: xkSeal .5s var(--xk-ease-out) backwards; }
}
@keyframes xkSeal {
  from { transform: rotate(8deg) scale(1.7); opacity: 0; }
}

/* 紧迫卡: 3 天内截止 */
.card.card-urgent {
  border-color: rgba(200, 60, 60, .35);
  background: linear-gradient(90deg, #fff7f6, #fff 30%);
}
.card.card-urgent::before { opacity: 1; background: var(--red); }

/* 已结束卡: 整体退后 */
.card.card-ended { opacity: .62; }
.card.card-ended:hover { opacity: .95; }

/* hover 意图三件套 (伪元素方案, JS 渲染的卡片零模板改动):
   标题染紫 + 右下角圆形箭头滑出 + 微抬升(见第7节) */
.card-title { transition: color .2s; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-title { color: var(--purple); }
  .card-right { position: relative; }
  .card-right .card-days {
    transition: transform .22s var(--xk-ease-out);
  }
  .card-right::after {
    content: '→';
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(107, 46, 180, .16);
    border-radius: 50%;
    background: rgba(107, 46, 180, .08);
    font-size: 12px;
    line-height: 1;
    color: var(--purple);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-5px) scale(.88);
    transition: opacity .2s, transform .22s var(--xk-ease-out), background-color .2s;
  }
  .card:hover .card-right .card-days {
    transform: translateX(-26px);
  }
  .card:hover .card-right::after {
    opacity: 1;
    background: rgba(107, 46, 180, .12);
    transform: translateX(0) scale(1);
  }
}

/* 紧迫脉冲 (预渲染内描边只动 opacity; 宿主 overflow:hidden 会裁掉外扩阴影, 必须用 inset) */
.card.card-urgent, .urgent-card.urgent-red { position: relative; }
.card.card-urgent::after, .urgent-card.urgent-red::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(200, 60, 60, .13);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .card.card-urgent::after, .urgent-card.urgent-red::after {
    animation: xkGlow 2.6s ease-in-out infinite;
  }
}
@keyframes xkGlow { 50% { opacity: 1; } }

/* ========================================
   6. 搜索命中高亮 (烫金下划式)
======================================== */

mark.xk-hl {
  background: linear-gradient(transparent 62%, rgba(184, 134, 11, .32) 62%);
  color: inherit;
  padding: 0 1px;
}

/* 搜索框清空按钮 */
.xk-clear {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  display: none;
  transition: all .15s;
}
.xk-clear:hover { background: var(--purple-soft); color: var(--purple); }
.list-search.has-value .xk-clear { display: block; }
.list-search.has-value .search-icon { display: none; }
.list-search.has-value input { padding-right: 44px; }

/* 搜索框 focus 光环 */
.list-search:focus-within, .cl-search input:focus, .hero-search:focus-within {
  box-shadow: 0 0 0 3px rgba(102, 8, 116, .08);
}

/* ========================================
   7. 微交互 · hover 有意图 (仅桌面精确指针)
======================================== */

.tile-icon { transition: transform .3s var(--xk-ease-spring); }
.school-logo-lg { transition: transform .25s var(--xk-ease-spring); }
.section-more .arr {
  display: inline-block;
  margin-left: 4px;
  transition: transform .25s var(--xk-ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-icon { transform: rotate(-6deg) scale(1.08); }
  .school-card:hover .school-logo-lg { transform: scale(1.1) rotate(-4deg); }
  .section-more:hover .arr { transform: translateX(5px); }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); }
  .experience-card { overflow: hidden; }
  .exp-card-cover { transition: transform .5s ease; }
  .experience-card:hover .exp-card-cover { transform: scale(1.04); }
}

/* 触摸设备按压回缩 */
.card:active, .tile:active, .school-card:active,
.cl-card:active, .experience-card:active, .urgent-card:active {
  transform: scale(.985);
  transition: transform .1s;
}

/* 筛选 pill 按压 + 选中弹跳 */
.pill:active, .cl-pill:active { transform: scale(.93); }
@media (prefers-reduced-motion: no-preference) {
  .pill-active, .cl-pill.on { animation: xkPillPop .25s var(--xk-ease-out); }
}
@keyframes xkPillPop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ========================================
   8. Hero 升级 (首页)
======================================== */

/* 学术几何纹饰 (替代 AI 光斑) */
.hero-tex {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 560px;
  height: 560px;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-tex { animation: xkDrift 26s ease-in-out infinite alternate; }
}
@keyframes xkDrift {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-14px) rotate(2deg); }
}
@media (max-width: 640px) {
  .hero-tex { width: 320px; height: 320px; right: -90px; bottom: -60px; }
}

/* 即将截止 · 秒级倒计时字号 */
.days-num.days-cd {
  font-size: 21px;
  letter-spacing: .02em;
}
.count-num.count-cd {
  font-size: 30px;
  letter-spacing: .03em;
}

/* 标题金线 draw-in (接在 riseIn 之后) */
@media (prefers-reduced-motion: no-preference) {
  html.xk-js .hero-title-accent::after {
    transform: scaleX(0);
    transform-origin: left;
    animation: xkDrawIn .6s var(--xk-ease-out) .75s forwards;
  }
}
@keyframes xkDrawIn { to { transform: scaleX(1); } }
.hero-title-accent::after {
  background: linear-gradient(90deg, var(--purple-light), var(--gold)) !important;
}

/* 热门搜索 chips 行 */
.hero-hot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto 44px;
  max-width: 640px;
  min-height: 30px;
  font-size: 12px;
  color: var(--ink-4);
}
.hero-hot-chip {
  padding: 4px 13px;
  font-size: 12px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all .2s;
  cursor: pointer;
}
.hero-hot-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}

/* 今日新增 stat 活信号 */
.stat-today .stat-num { color: #16803c; }

/* ========================================
   8.5 校徽渲染修正: 覆盖 style.css 的 crisp-edges
   (crisp-edges 对缩放位图产生锯齿, 高清源图用默认平滑采样更清晰)
======================================== */

.school-logo-img img, .school-logo-lg-img img, .cl-card .school-logo-img img {
  image-rendering: auto !important;
}

/* ========================================
   9. 热门高校 · 数据层次化
======================================== */

.school-heat {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  width: var(--w, 40%);
  margin-top: 8px;
  transform-origin: left;
}
@media (prefers-reduced-motion: no-preference) {
  .school-heat { animation: xkHeatGrow .8s var(--xk-ease-out) .3s backwards; }
}
@keyframes xkHeatGrow { from { transform: scaleX(0); } }

.school-card { position: relative; overflow: hidden; }
.school-rank {
  position: absolute;
  right: 10px; top: 6px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 900;
  color: var(--gold);
  opacity: .8;
  font-style: italic;
}

/* ========================================
   10. 分类 tile · 季节水印 + 时令徽标
======================================== */

.tile::after {
  font-family: var(--font-serif);
  font-size: 110px;
  font-weight: 900;
  position: absolute;
  right: -14px; bottom: -38px;
  opacity: .05;
  color: var(--ink);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  line-height: 1;
  z-index: 0;
}
.tile-summer::after { content: '夏'; }
.tile-pre::after    { content: '预'; }
.tile-talk::after   { content: '讲'; }
.tile-list::after   { content: '榜'; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover::after { opacity: .1; transform: translateY(-5px); }
}

.tile-season {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid rgba(184, 134, 11, .4);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  letter-spacing: .1em;
  vertical-align: 2px;
}

/* ========================================
   11. 倒计时 · 环 + 数字 (detail 页)
======================================== */

.xk-ring { display: inline-block; vertical-align: middle; margin-right: 14px; }
.xk-ring circle.bg { fill: none; stroke: var(--purple-border); stroke-width: 4; }
.xk-ring circle.fg {
  fill: none;
  stroke: var(--purple);
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset .9s var(--xk-ease-out);
}
.days-red  .xk-ring circle.fg { stroke: var(--red); }
.days-yellow .xk-ring circle.fg { stroke: var(--yellow); }

/* 详情页时间轴进度 */
.timeline { position: relative; }
.timeline-progress {
  position: absolute;
  left: 17px; top: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--purple), var(--gold));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .timeline-progress { animation: xkTlGrow .9s var(--xk-ease-out) .2s backwards; }
}
@keyframes xkTlGrow { from { transform: scaleY(0); } }

/* ========================================
   11.3 导航"更多▾"基线对齐
   nav-more 是 div 包 inline <a>, 行盒从顶排 → 比直接的 flex 子项浮高。
   统一居中对齐 + 内层链接转 inline-block 让 padding 参与高度。
======================================== */

.nav { align-items: center; }
.nav-more { display: flex !important; align-items: center; }
.nav-more > .nav-item { display: inline-block; }

/* ========================================
   11.4 移动端导航修复: 胶囊 active 态紫底白字
   (style.css 末尾的桌面 nav 升级把 color 覆盖成了紫色)
======================================== */

@media (max-width: 640px) {
  .nav .nav-item.active { color: #fff !important; }
  .nav .nav-item:hover { transform: none; }
}

/* ========================================
   11.5 导航滚动压缩态 (全站, motion.js 切 .is-scrolled)
======================================== */

/* 注意: 绝不能动 sticky header 的流内高度 —— 滚动锚定会回拉 scrollY 形成
   is-scrolled 无限抖动环(实测复现)。只做阴影浮现 + 副标淡出, 布局零变化。 */
.site-header { transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(102, 8, 116, .08); }
@media (min-width: 641px) {
  .brand-en { transition: opacity .25s; }
  .site-header.is-scrolled .brand-en { opacity: 0; }
}

/* ========================================
   11.6 最新入库 live ticker (首页 hero)
======================================== */

.xk-ticker {
  max-width: 640px;
  margin: -34px auto 18px;
  height: 34px;
  overflow: hidden;
  position: relative;
  font-size: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .75);
  border-radius: 100px;
  box-shadow: var(--shadow-s);
}
.xk-ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--xk-ease-out), transform .4s var(--xk-ease-out);
  pointer-events: none;
}
.xk-ticker-item.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.xk-ticker-item.off {
  opacity: 0;
  transform: translateY(-12px);
}
.xk-ticker-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid rgba(184, 134, 11, .45);
  border-radius: 3px;
  padding: 0 5px;
  letter-spacing: .1em;
}
.xk-ticker-item .t {
  overflow: hidden;
  text-overflow: ellipsis;
}
.xk-ticker-item:hover .t { color: var(--purple); }

/* 数据新鲜度行 (list 页结果数旁) */
.data-fresh {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.data-fresh b { color: #16803c; font-weight: 600; }

/* ========================================
   12. 阅读进度条 + 返回顶部
======================================== */

#xkReadBar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 300;
  pointer-events: none;
}

#xkTop {
  position: fixed;
  right: 22px; bottom: 86px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--purple-border);
  box-shadow: var(--shadow-m);
  color: var(--purple);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .2s;
  z-index: 95;
  cursor: pointer;
}
#xkTop.show { opacity: 1; pointer-events: auto; transform: none; }
#xkTop:hover { background: var(--purple-soft); }

/* ========================================
   14. 空状态升级
======================================== */

.list-empty .empty-ico, .xk-empty-ico {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .list-empty .empty-ico { animation: xkFloat 3s ease-in-out infinite; }
}
@keyframes xkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ========================================
   15. 评论 marquee 补丁 (list 页)
======================================== */

@media (prefers-reduced-motion: reduce) {
  .xk-tk { animation: none !important; }
  .xk-mq { overflow-x: auto; }
}

/* ========================================
   28. 首页 Hero 校徽泡泡墙 + 动态标题 + 按钮流光 (2026-07-11)
   —— 对标竞品"进场动态感"; 全部 opacity/transform/background-position
   泡泡由 motion.js XK.logoBubbles() 动态生成, JS 挂掉 = 无泡泡, 零风险
======================================== */

.hero-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hb {
  position: absolute;
  width: var(--s, 48px);
  height: var(--s, 48px);
  margin: calc(var(--s, 48px) / -2) 0 0 calc(var(--s, 48px) / -2);
  opacity: var(--o, .38);
}
.hb-f {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(102, 8, 116, .10);
  box-shadow: 0 2px 12px rgba(91, 58, 138, .10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb .hb-logo {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hb .hb-logo img { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  html.xk-js .hb {
    animation: xkBubIn .7s var(--xk-ease-out) backwards;
    animation-delay: var(--d, 0s);
  }
  html.xk-js .hb-f {
    animation: xkBubFloat var(--fd, 9s) ease-in-out var(--fdel, 0s) infinite alternate;
  }
  html.xk-js .hb:nth-child(even) .hb-f { animation-name: xkBubFloatX; }
}
@keyframes xkBubIn {
  0%   { opacity: 0; transform: scale(.2); }
  55%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes xkBubFloat {
  from { transform: translateY(7px); }
  to   { transform: translateY(-9px); }
}
@keyframes xkBubFloatX {
  from { transform: translate(5px, 8px); }
  to   { transform: translate(-6px, -7px); }
}

/* 标题重点词: 品牌紫→亮紫→金 渐变缓流 (background-position, paint-only 不触发布局) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.xk-js .hero-title-accent {
      background: linear-gradient(105deg,
        var(--purple) 0%, #8a2ba0 20%, var(--purple) 42%,
        #a4761b 60%, var(--purple) 78%, var(--purple) 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: xkGradFlow 9s ease-in-out infinite;
    }
  }
}
@keyframes xkGradFlow {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* 搜索按钮: 周期性斜向流光扫过 (纯 transform, button 自身 overflow:hidden 剪裁) */
.hero-search button { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.xk-js .hero-search button::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 46%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(-180%) skewX(-18deg);
    animation: xkSheen 5.5s ease-in-out infinite;
    pointer-events: none;
  }
}
@keyframes xkSheen {
  0%, 62%   { transform: translateX(-180%) skewX(-18deg); }
  84%, 100% { transform: translateX(340%) skewX(-18deg); }
}

/* 响应式: 窄屏减泡泡数量 (JS 也按视口减, 这里兜底) */
@media (max-width: 1024px) { .hb:nth-child(n+15) { display: none; } }
@media (max-width: 720px)  { .hb:nth-child(n+9)  { display: none; } }

/* ========================================
   99. reduced-motion 总闸
======================================== */

@media (prefers-reduced-motion: reduce) {
  .xk-stagger > *,
  .xk-sk,
  .xk-live-dot,
  .school-heat,
  .timeline-progress,
  .pill-active, .cl-pill.on,
  .card.card-urgent::after,
  .urgent-card.urgent-red::after,
  .list-empty .empty-ico,
  .step-current .step-dot,
  .hb, .hb-f,
  html.xk-js .hero-title-accent,
  html.xk-js .hero-search button::after {
    animation: none !important;
  }
  html.xk-js .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-eyebrow, .hero-title, .hero-sub, .hero-search, .stats {
    animation: none !important;
  }
  html.xk-js .hero-title-accent::after {
    animation: none !important;
    transform: scaleX(1) !important;
  }
}