/* ============================================================
   全站小幅动效（首页 + 详情页）
   ------------------------------------------------------------
   原则：只动 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; }
  }
}