/*
 * 鸿蒙（HarmonyOS NEXT / OpenHarmony，ArkWeb 内核）性能模式。
 *
 * 作用域：只匹配 <html class="harmony-os">，类名由 src/lib/client/harmony-perf.ts
 * 的首屏内联脚本按 UA 注入（也可用 ?harmony=1 / ?harmony=0 在本地强制开关）。
 * 因此 Android / iOS / 桌面端**完全不会**命中本文件的任何规则。
 *
 * 目标：不改整体设计、不改业务逻辑，只削减 ArkWeb 上最贵的渲染项——
 *   1) 常驻合成层：每张卡片一个 blur(20px) + 无限旋转的生成按钮光晕；
 *   2) 无限动画：骨架扫光、内置动态封面插画、会员入口色相循环等；
 *   3) 实时背景模糊：backdrop-filter 每次滚动 / 视频出帧都要重新做高斯模糊；
 *   4) 长列表绘制量：离屏卡片用 content-visibility 跳过渲染。
 * 视觉上只做「静止帧 / 纯色底」级别的降级，布局、层级、配色与交互都保持不变。
 * 修改本文件后请同步递增 src/app/layout.tsx 里的 HARMONY_CSS_VERSION。
 */

/* ── 1. 生成按钮光晕层 ─────────────────────────────────────────────────────
 * Uiverse gentle-cheetah-21 的光晕是一层 blur(20px) + 3~4s 无限旋转的合成层。
 * 光晕在「按钮可见」的场合（灯箱 / 侧栏底部的主按钮）本身就是按钮的渐变外观，
 * 不能直接删掉；但在模板墙卡片上，生成按钮常驻 opacity: 0（只有 hover 才出现，
 * 触屏设备上根本不会出现），一屏 30~48 张卡片就等于 30~48 个常驻模糊层，
 * 是鸿蒙 GPU 的首要开销。
 *
 * 因此：
 * - 所有光晕统一停掉旋转动画：模糊渐变静止后外观与原来一致，但不再每帧重算；
 * - 模板卡片 / 电商模板卡片上的光晕层直接不渲染（静止态不可见，无视觉影响）。
 */
html.harmony-os .uiverse-generate-hover > span {
  animation: none !important;
}

html.harmony-os .vp-mosaic-generate .uiverse-generate-hover,
html.harmony-os .ms-card .uiverse-generate-hover {
  display: none !important;
}

/* ── 2. 会员入口的色相循环 ─────────────────────────────────────────────────
 * 顶栏「会员」按钮的 ::after 每 500ms 做一次 hue-rotate 滤镜动画，常驻可见。
 * 鸿蒙上停掉动画并固定当前渐变（只影响动效，不影响按钮外观与点击）。
 */
html.harmony-os .studio-credit-upgrade::after {
  animation: none !important;
  -webkit-filter: none !important;
  filter: none !important;
}

/* 账户菜单里的云存储进度条扫光：菜单打开时才出现，
 * 同样属于无限动画，顺手停掉（静态显示，不影响信息与点击）。 */
html.harmony-os .studio-user-menu-storage-track--loading {
  animation: none !important;
}

/* ── 3. 封面加载骨架扫光 ───────────────────────────────────────────────────
 * 每张还没出画的卡片各有一条 translateX 无限扫光动画；首屏几十张同时加载时
 * 动画数量与层数都很可观。鸿蒙上退化为静态骨架色块，仍然能看出「正在加载」。
 */
html.harmony-os .lazy-cover-media-skeleton::after {
  display: none !important;
}

/* ── 4. 内置动态封面插画 ───────────────────────────────────────────────────
 * 没有真实封面时的兜底插画（race / superstar / 地球缩放等）里有一批无限动画
 * （跑马灯、闪烁、轨道、扫描、像素碎片……）。鸿蒙上统一停在第一帧，
 * 静态画面仍然可辨认，只是不再持续刷新合成层。
 */
html.harmony-os .vp-scene,
html.harmony-os .vp-scene *,
html.harmony-os .ms-scene,
html.harmony-os .ms-scene * {
  animation-play-state: paused !important;
}

/* 首访引导的高亮环脉冲（仅在引导层打开时出现） */
html.harmony-os .vp-guide-ring {
  animation: none !important;
}

/* ── 5. 实时背景模糊 ───────────────────────────────────────────────────────
 * ArkWeb 上 backdrop-filter 需要在滚动 / 视频出帧时反复重算模糊，弹窗与视频
 * 叠加时尤其明显。鸿蒙上统一去掉模糊，保留原有半透明底色与层级（设计不变，
 * 只是从「毛玻璃」变成「半透明纯色」）；Tailwind 的 backdrop-blur 工具类
 * 也一并覆盖。
 */
html.harmony-os *,
html.harmony-os *::before,
html.harmony-os *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 灯箱右上角「关闭 / 声音」按钮原本靠 blur 保证叠加在视频上的可读性：
 * 去掉模糊后把底色略微加深，保证白色图标对比度与原来接近（尺寸、位置、颜色不变）。 */
html.harmony-os .preset-lightbox-close,
html.harmony-os .preset-lightbox-sound {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* ── 6. 长列表离屏卡片跳过渲染 ─────────────────────────────────────────────
 * 模板墙卡片自身通过 aspect-ratio 占位（见 .vp-mosaic-card-* 与 JS 内联比例），
 * content-visibility: auto 只是跳过离屏卡片的绘制/布局计算，尺寸与滚动高度不变，
 * 不会引入布局跳动；IntersectionObserver 的懒加载判定也不受影响（观察的是
 * 卡片本身，而非被跳过的子树）。
 */
html.harmony-os .vp-mosaic-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}