/* ============================================================
   全站小幅动效（首页 + 详情页）
   ------------------------------------------------------------
   原则：只动 transform / opacity / translate，全部走合成器；
   不碰 background / filter / box-shadow 的逐帧动画，避免重蹈上次
   卡片流光边框导致的滚动卡顿。
   所有动画都包在 prefers-reduced-motion: no-preference 里。
   ============================================================ */

/* ============================================================
   1. 热门游戏：横向自动流动，鼠标移上去暂停
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 裁剪容器：只在 .container 宽度内流动 */
  .zg-hero-carousel .container { overflow: hidden; }

  /* 轨道改成内容宽度，卡片定宽（原来是 flex:1 均分，撑满一行没法流动） */
  .zg-hero-track {
    gap: 0 !important;
    width: max-content;
    animation: lyw-hero-flow 52s linear infinite;
  }
  .zg-hero-track:hover { animation-play-state: paused; }

  /* 用 margin 代替 gap：这样 10 张卡的宽度正好是 5 张的 2 倍，
     translateX(-50%) 才能严丝合缝地循环，不会每圈抖一下 */
  .zg-hero-card {
    flex: 0 0 clamp(170px, 19vw, 230px) !important;
    margin-right: 14px;
  }

  @keyframes lyw-hero-flow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* ============================================================
   2. 卡片入场：首屏逐张淡入上浮，滚动加载的新卡也一样
   ------------------------------------------------------------
   用 animation + 独立的 translate 属性：
   - 不用 transition，避免覆盖 theme 里卡片自身的 hover 过渡
     （box-shadow / transform 那几条）
   - 用 translate 而不是 transform，和 hover 的 translateY(-3px) 互不干扰
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready .zhuige-list-container .zhuige-base-list:not(.is-in) {
    opacity: 0;
  }
  .anim-ready .zhuige-list-container .zhuige-base-list.is-in {
    animation: lyw-card-in .55s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: var(--lyw-d, 0ms);
  }
  @keyframes lyw-card-in {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ============================================================
   3. 封面图加载完再淡入（避免图片"啪"地弹出来）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready .zhuige-list-container .zhuige-list-cover img {
    opacity: 0;
    transition: opacity .45s ease;
  }
  .anim-ready .zhuige-list-container .zhuige-list-cover img.is-loaded {
    opacity: 1;
  }
}

/* ============================================================
   4. 详情页：顶部阅读进度条
   ============================================================ */
.lyw-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
}
.lyw-progress > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #81d742, #66c0f4);
  box-shadow: 0 0 8px rgba(102, 192, 244, .55);
  will-change: transform;
}

/* ============================================================
   5. 详情页：「立即下载」扫光 + 轻微呼吸光晕（仅悬停时）
   ============================================================ */
.erphpdown-cart .down {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.erphpdown-cart .down::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .erphpdown-cart .down:hover::after {
    animation: lyw-btn-shine .75s ease-out;
  }
}
@keyframes lyw-btn-shine {
  0%   { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(320%) skewX(-20deg); }
}

/* 呼吸光晕：用透明度脉动的伪元素，避免 box-shadow 逐帧重绘 */
.erphpdown-cart .down::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 50%, rgba(129, 215, 66, .45), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .erphpdown-cart .down:hover::before {
    animation: lyw-btn-glow 1.8s ease-in-out infinite;
  }
  @keyframes lyw-btn-glow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }
}

/* ============================================================
   6. Hero 区：Synthwave 透视网格地面 + 扫描光带
   ------------------------------------------------------------
   - 网格：rotateX 把平面压成地面透视，内层 translateY 循环
     一个网格间距（40px），只动 transform，不触发 paint
   - 光带：一条高亮光带从上到下扫过，6s 一圈
   - 颜色与 HUD 同色 #7fe6ff；z-index 1/3，低于搜索框(9)和
     轮播(20)，不挡交互
   ============================================================ */
.lyw-grid-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%, #000);
          mask-image: linear-gradient(to bottom, transparent, #000 38%, #000);
}
.lyw-grid-floor__inner {
  position: absolute;
  left: -50%; right: -50%; top: -50%;
  height: 200%;
  background-image:
    linear-gradient(rgba(127, 230, 255, .32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 230, 255, .32) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(320px) rotateX(64deg);
  transform-origin: center top;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .lyw-grid-floor__inner {
    animation: lyw-grid-move 1.8s linear infinite;
  }
}
@keyframes lyw-grid-move {
  from { transform: perspective(320px) rotateX(64deg) translateY(0); }
  to   { transform: perspective(320px) rotateX(64deg) translateY(44px); }
}

.lyw-scan-beam {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 110px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(127, 230, 255, .07) 35%,
    rgba(127, 230, 255, .20) 50%,
    rgba(127, 230, 255, .07) 65%,
    transparent 100%);
  mix-blend-mode: screen;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .lyw-scan-beam {
    animation: lyw-scan 6.5s linear infinite;
  }
}
@keyframes lyw-scan {
  from { transform: translateY(-140px); }
  to   { transform: translateY(640px); }
}

/* 窄屏：网格矮一点，光带关掉（省电 + 避免视觉噪音） */
@media (max-width: 820px) {
  .lyw-grid-floor { height: 90px; opacity: .55; }
  .lyw-scan-beam  { display: none; }
}

/* ============================================================
   7. Hero 热门卡片：3D Tilt（hover 时按鼠标位置倾斜）
   ------------------------------------------------------------
   - JS 写 --rx / --ry 两个 CSS 变量（-5deg ~ 5deg）
   - 只在鼠标 hover 设备 + 用户没关动画时生效
   - 卡片轨道已经在 translateX 流动，卡片自身 transform 互不干扰
   ============================================================ */
.zg-hero-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .zg-hero-card:hover {
    transform: perspective(700px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg))
               translateY(-4px);
  }
}