/* ============================================================
   agoniegirl — 平板 / 手机 版式补丁
   只作用于窄屏（≤1199px），≥1200px 桌面保持原站原样。
   单独成文件、最后加载，用于压过 custom.css 与抓取样式里的
   !important 规则；每条都写明原因，避免后续改版误删。
   ============================================================ */

/* ── 1. 关于页：解除外壳锁高，给浮层导航让位 ──────────────
   当前版 custom.css 有 `.ag-about-scope #body > .container
   { padding: 0 !important }`，且 VitePress 外壳把 .Layout /
   .VPContent 限成一屏。结果是 B 面标题被导航压住、留言区
   被裁、整页不能滚动。about-responsive.css 只管唱机内部，
   这里补外层。 */
@media (max-width: 1023px) {
  html:has(.ag-about-scope),
  body:has(.ag-about-scope) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:has(.ag-about-scope) .frostedGlassBackground.page-background,
  body:has(.ag-about-scope) .Layout,
  body:has(.ag-about-scope) .VPContent,
  body:has(.ag-about-scope) .ag-about-page,
  body:has(.ag-about-scope) .ag-about-page > div,
  body:has(.ag-about-scope) .ag-about-page > div > div {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:has(.ag-about-scope) .ag-about-scope {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* B 面没有唱片区撑开，必须自己让出浮层导航的高度 */
  .ag-about-scope .about-turntable.is-b-side {
    min-height: 0 !important;
  }

  .ag-about-scope .about-turntable.is-b-side .about-bside {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 76px !important;
    overflow: visible !important;
  }

  /* 深色模式下当前胶囊反成浅底，序号仍用亮橙色会糊成一片 */
  html.dark .ag-about-scope .about-chapter--current > span {
    color: rgba(41, 35, 30, .72) !important;
  }
}

/* 平板横屏 1024–1199：备份方案把唱片收小了，但仍沿用桌面
   的绝对 left，唱片左缘会被裁掉。这里改成在唱机列内居中。 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .ag-about-scope .about-record,
  .ag-about-scope .about-record-shadow {
    left: calc(50% - var(--about-record-size) * .5) !important;
  }

  /* 这一档导航仍跨在唱片边缘：深色字会陷进黑胶，白字又会消失在
     右侧浅色面板上。给整块加深色玻璃底，文字恒为浅色，两边都清楚。 */
  .ag-about-scope .about-chapters {
    right: -50px;
    box-sizing: border-box;
    padding: 14px 15px;
    border-radius: 14px;
    background: rgba(26, 23, 20, .78);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }

  .ag-about-scope .about-chapter,
  .ag-about-scope .about-chapter:hover,
  .ag-about-scope .about-chapter:focus-visible,
  .ag-about-scope .about-chapter--current,
  .ag-about-scope .about-chapter--current:hover {
    color: #F6F3EC !important;
  }

  .ag-about-scope .about-chapter--previous { opacity: .6; }
  .ag-about-scope .about-chapter--next { opacity: .76; }

  .ag-about-scope .about-chapter > span {
    color: #E7C79A !important;
  }

  .ag-about-scope .about-chapter--current strong {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  }
}

/* ── 2. 首页主视觉：平板收拢居中 ────────────────────────────
   原 padding 为 max(22px, 50vw - 590px)，在 768~1199 恒等于
   22px，标题和歌词各贴一侧，中间空一大片。这里给 hero 一个
   居中容器并把字号收一档。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .ag-echo-hero {
    width: min(100% - 2.5rem, 1040px);
    max-width: none;
    margin-inline: auto;
    padding-left: clamp(28px, 5vw, 56px) !important;
    padding-right: clamp(28px, 5vw, 56px) !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(170px, .6fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .custom-hero-view .ag-echo-hero-title {
    font-size: clamp(2.9rem, 5.4vw, 4.2rem) !important;
    line-height: 1.12;
  }

  .custom-hero-view .ag-echo-hero-title__accent {
    margin-left: clamp(18px, 3vw, 44px);
  }

  .ag-home-lyrics {
    --lyrics-view-h: 13em;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  /* 这一档歌词列太窄，「分开太远」会被折成两行，重新分列并收字号 */
  .ag-echo-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(210px, .85fr);
    column-gap: clamp(1rem, 3vw, 2rem);
  }

  .ag-home-lyrics__line {
    font-size: .84rem;
    white-space: nowrap;
  }
}

/* ── 3. 分类胶囊条：可滚动的视觉提示 ────────────────────────
   .nav-scroll 本就可横向滚动，但末尾项被 .nav-shell 硬裁，
   看上去像坏了。右侧渐隐 + 吸附，明确传达「还能往右滑」。 */
@media (max-width: 1199px) {
  .nav-scroll[data-v-d07d5d8c] {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }

  .nav-button[data-v-d07d5d8c] {
    scroll-snap-align: start;
    min-height: 40px;
  }
}

/* ── 4. 标签页装饰层：淡出成纯背景纹理 ──────────────────────
   12×10 网格里的 label 在窄格中被 truncate 成「AI …」「Pr…」，
   又叠在浮层导航后面，像内容错乱。窄屏去掉 1.05 放大、把
   文字压到背景级透明度，并让顶部渐隐。 */
@media (max-width: 1199px) {
  .ag-tags-page .building-container {
    transform: none !important;
    opacity: .58;
  }

  .ag-tags-page > div:first-child {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
  }

  /* 窄格里的标签名会被 truncate 成「AI …」「Pr…」，叠在浮层导航后面
     像内容错乱；窄屏只留网格纹理，标签名交给下方正经的标签云展示。 */
  .ag-tags-page .window span {
    display: none !important;
  }
}

/* ── 5. 触控目标：小于 40px 的点按区一律放大 ─────────────── */
@media (max-width: 1199px) {
  .home-section-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 6px;
  }

  .about-chapter {
    min-height: 44px;
  }

  .VPNavBar .title,
  .VPNavBarTitle .title {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .site-footer a[class*="hover:text-"],
  .footer-section a[class*="hover:text-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }
}

/* ── 6. 横屏矮视口：别让 hero 把正文挤到第二屏之后 ───────── */
@media (min-width: 568px) and (max-width: 1199px) and (max-height: 620px) {
  .ag-echo-hero {
    min-height: 0;
    padding-top: calc(var(--ag-header-offset, 64px) + 2rem) !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ── 6. 首页常用软件条：手机端关掉跑马灯，改原生横滑 ──────────
   源站 .wrapper 是 6048px 宽的 will-change 合成层，跑无限 transform
   动画；容器还叠了 mask-image 渐变。24 张卡 / 48 张 lazy 图在动画里
   被反复判定「接近视口」而持续请求 + 解码，真机上就是滑动掉帧，
   而且卡片总被裁成半截。手机改为原生 overflow-x + scroll-snap，
   只留一份卡片；桌面 ≥768 保持原站跑马灯不动。 */
@media (max-width: 767px) {
  .family-strip[data-home-software] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding-inline: 12px !important;
    scrollbar-width: none;
  }

  .family-strip[data-home-software]::-webkit-scrollbar {
    display: none;
  }

  .family-strip[data-home-software] .wrapper {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* 副本仅为无缝滚动存在，原生横滑用不到，直接不渲染 */
  .family-strip .friends-card[data-ag-duplicate] {
    display: none !important;
  }

  .family-strip .friends-card {
    width: min(72vw, 240px) !important;
    height: 150px !important;
    flex: 0 0 auto;
    scroll-snap-align: center;
    transition: none !important;
  }

  .family-strip .friends-card .hide {
    padding: 12px !important;
  }

  .family-strip .friends-card .hide .w-24 {
    width: 76px !important;
    height: 76px !important;
  }

  .family-strip .friends-card .hide .text-lg {
    font-size: 15px !important;
    line-height: 1.35;
  }

  /* 触屏 :hover 会残留，别让它在滑动途中切换截图层 */
  .family-strip .friends-card .show,
  .family-strip .friends-card:hover .show {
    display: none !important;
  }

  .family-strip .friends-card:hover .hide {
    display: block !important;
  }

  .family-strip .friends-card .show.transform {
    transform: none !important;
  }
}

/* ==================================================================
 * 全端性能加固：首页「常用软件」横滑条
 * ------------------------------------------------------------------
 * 旧实现 = 12 卡 × 2 副本 = 6048px 宽的无限 transform 层
 *          + 24 张 lazy 截图（动画中反复判定「接近视口」反复解码）
 *          + 773k px² 渐变 mask（每帧重新光栅化）
 * 桌面 / 平板大屏上和页面滚动抢 GPU，真机掉帧。
 * 现在全端统一原生 overflow-x：零持续动画、零 mask、零副本。
 * 渐隐改由 wrap 的静态伪元素承担，不进入滚动层。
 * ================================================================== */
.ag-software-strip-wrap {
  position: relative;
  isolation: isolate;
}
.ag-software-strip-wrap::before,
.ag-software-strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(16px, 4vw, 52px);
  z-index: 3;
  pointer-events: none;
  opacity: .92;
  transition: opacity .25s ease;
}
.ag-software-strip-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--ambient-page-bg, #f7f5ef), transparent);
}
.ag-software-strip-wrap::after {
  right: 0;
  background: linear-gradient(270deg, var(--ambient-page-bg, #f7f5ef), transparent);
}
html.dark .ag-software-strip-wrap::before { background: linear-gradient(90deg, #1c1b1a, transparent); }
html.dark .ag-software-strip-wrap::after { background: linear-gradient(270deg, #1c1b1a, transparent); }
.ag-software-strip-wrap.is-at-start::before { opacity: 0; }

.family-strip[data-home-software] {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  overscroll-behavior-x: contain;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-inline: 12px !important;
  scrollbar-width: none;
  contain: layout paint;
}
.family-strip[data-home-software]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.family-strip[data-home-software] .wrapper {
  width: max-content !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  transition: none !important;
}
.family-strip[data-home-software] .wrapper:hover { animation: none !important; }
.family-strip[data-home-software] .friends-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
/* hover 截图层：去掉 scale / transform 过渡，滚动时不再触发重绘 */
.family-strip[data-home-software] .friends-card .show,
.family-strip[data-home-software] .friends-card .show.transform,
.family-strip[data-home-software] .friends-card:hover .show {
  transform: none !important;
  transition: none !important;
}
.family-strip[data-home-software] .friends-card img { display: block; }
.family-strip[data-home-software].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.family-strip[data-home-software].is-dragging .friends-card { pointer-events: none; }

/* 桌面左右按钮：悬停才出现，触屏设备完全交给手指 */
.ag-strip-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(28, 27, 26, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #35403e;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .2s ease, background .2s ease;
}
.ag-strip-nav--prev { left: 8px; }
.ag-strip-nav--next { right: 8px; }
.ag-strip-nav:hover { background: #fff; }
.ag-strip-nav:focus-visible { opacity: 1; outline: 2px solid var(--brand-primary, #5c7a7a); outline-offset: 2px; }
.ag-strip-nav:disabled { opacity: 0 !important; pointer-events: none; }
.ag-software-strip-wrap:hover .ag-strip-nav { opacity: 1; }
html.dark .ag-strip-nav {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(40, 42, 41, .9);
  color: #e8ebe6;
}
html.dark .ag-strip-nav:hover { background: #353938; }
@media (hover: none) {
  .ag-strip-nav { display: none !important; }
}

/* 常驻 will-change 会一直占着合成层内存：只给真正在动的元素提升。
   原站 scoped 选择器带 [data-v-*] 属性，特异性更高，这里需显式对齐。 */
.ag-home-lyrics__line { will-change: auto; }
.ag-home-lyrics__line.is-visible { will-change: transform, opacity; }
.memory-thumb-track[data-v-c29aa009],
.memory-thumb-track[data-v-c29aa009] .thumb-frame {
  will-change: auto !important;
}
.memory-thumb-track[data-v-c29aa009]:hover .thumb-frame,
.thumb-frame:hover {
  will-change: transform !important;
}

/* 首页模块用 content-visibility:auto 跳过离屏渲染本身是好事，但原站把
   占位尺寸写死成 520px，与实际高度差很多；滚到附近时布局突然撑开，
   表现为滚动条跳动 / 一顿一顿。auto <length> 让浏览器记住实际尺寸。 */
.homePage[data-v-1d4f03ab] > :not(.home-section-head) {
  contain-intrinsic-size: auto 520px !important;
}

/* 系统要求减少动效时，停掉所有持续动画（不影响布局与滚动） */
@media (prefers-reduced-motion: reduce) {
  .wrapper[data-v-cae51f7d],
  .shake-slow,
  .attn-banner,
  .animates,
  .animate-ink-breathe,
  .blink-effect,
  .ag-page-loader__bar-fill {
    animation: none !important;
  }
}

/* ==================================================================
 * 全站合成层治理：列表卡片只在动画 / 交互当下临时提升
 * ------------------------------------------------------------------
 * 源站给每张卡片写了 will-change: transform, opacity，且入场动画用
 * animation-fill-mode: both 让它永久常驻。软件页 82 张卡 + 82 张图
 * = 164 个常驻合成层，活动页 27 个、文章页 14 个；长列表滚动时显存
 * 与光栅化压力全压在 GPU 上，桌面 / 平板大屏尤其明显。
 * CSS 的 transform / opacity 动画与过渡会自动提升合成层，不需要手动
 * 常驻 will-change，去掉后入场效果与 hover 缩放都照常。
 * ================================================================== */
.animate-fadeInUp,
.scroll-animate,
.software-card,
.software-card img,
.activity-card,
.nav-button,
.btn.nav-button,
.ag-sm-track,
.ag-am-image {
  will-change: auto !important;
}

/* 加载遮罩退场后，进度条的无限动画应一并停止 */
.ag-page-loader.is-done .ag-page-loader__bar-fill,
html:not(.ag-loading) .ag-page-loader__bar-fill {
  animation: none !important;
}

/* 首页身份标语：对应参考站 identity「是个好工具 / 生活明朗，万物可爱。」 */
.ag-echo-hero-bio {
  margin: 0 0 clamp(.7rem, 1.4vw, 1.1rem);
  font-family: var(--ag-font-serif, Georgia, "Songti SC", serif);
  font-size: clamp(.78rem, 1.1vw, .92rem);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--brand-ink, #1f2e2e);
  opacity: .78;
}
.ag-echo-hero-bio__text {
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--brand-primary, #5c7a7a);
}
html.dark .ag-echo-hero-bio { color: #e8ebe6; }
html.dark .ag-echo-hero-bio__text { color: #a9c4be; }
@media (max-width: 767px) {
  .ag-echo-hero-bio { font-size: .76rem; letter-spacing: .1em; }
}