/* ============================================================
   effects.css — 增量增强层
   ------------------------------------------------------------
   规则：
     1) 纯增量，不覆盖 bundle.css / theme.css 的任何现有规则
     2) 只用 transform / opacity / filter（合成器友好）
     3) 复用站点已有的降级类：html.eng-weak / .no-backdrop /
        .eng-third / .no-anim
     4) 默认克制；低端设备与移动端自动减配
   ============================================================ */

/* ---------- 1. 首屏入场（一次性，只跑一次） ---------- */
@keyframes ezRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ezFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 顶栏：从上方落入 */
html:not(.no-anim):not(.eng-weak) .topbar {
  animation: ezRise .5s cubic-bezier(.22, 1, .36, 1) both;
}
/* 主体：轻微延迟淡入，避免与 .reveal 抢同一属性 */
html:not(.no-anim):not(.eng-weak) .wrap#main {
  animation: ezFade .45s cubic-bezier(.22, 1, .36, 1) .06s both;
}

/* ---------- 2. 导航栏毛玻璃增强 ---------- */
/* 注意：不覆盖 bundle.css 里已有的 .topbar 背景，只叠加滤镜 */
html:not(.no-backdrop):not(.eng-weak) .topbar.is-scrolled {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
/* 顶栏底部渐变分隔线（用伪元素，不动 layout） */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent, #7aa2ff) 55%, transparent),
    transparent);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.topbar.is-scrolled::after { opacity: 1; }
/* 不支持 color-mix 的浏览器：退回纯色，避免整条线消失 */
html:not(.colormix) .topbar::after {
  background: linear-gradient(90deg, transparent,
    var(--accent, #7aa2ff), transparent);
  opacity: 0;
}
html:not(.colormix) .topbar.is-scrolled::after { opacity: .5; }

/* ---------- 3. 卡片光晕 ----------
   注意：卡片光晕【已由 bundle.css 第 1937 行实现】
   （.acard::after / .li::after / .litem::after / .gitem::after，
   同样读取 core.js 写入的 --mx/--my）。
   因此这里不再重复实现，只补它在低端设备上的关闭规则，
   避免叠加出双层光晕和无谓的合成层。 */
html.eng-weak .acard::after,
html.eng-weak .li::after,
html.eng-weak .litem::after,
html.eng-weak .gitem::after { display: none; }

/* ---------- 4. 3D tilt ---------- */
.ez-tilt {
  transform-style: preserve-3d;
  /* 只在真正悬停时开 will-change，避免常驻 */
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              box-shadow .34s cubic-bezier(.22, 1, .36, 1);
}
.ez-tilt:hover { will-change: transform; }
.ez-tilt.is-tilting { will-change: transform; }

/* ---------- 5. 按钮磁吸 + 微交互 ---------- */
.ez-magnet {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.ez-magnet.is-magnet { will-change: transform; }

/* 通用按压反馈 */
.ez-press { transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
.ez-press:active { transform: scale(.97); }

/* ---------- 6. 渐变流光（文字/描边） ---------- */
@keyframes ezSheen {
  from { background-position: 200% 50%; }
  to   { background-position: -60% 50%; }
}
.ez-sheen {
  background-image: linear-gradient(100deg,
    currentColor 0%,
    currentColor 38%,
    color-mix(in srgb, var(--accent, #7aa2ff) 92%, white) 50%,
    currentColor 62%,
    currentColor 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ezSheen 5.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
html:not(.colormix) .ez-sheen {
  background-image: linear-gradient(100deg,
    currentColor 0%, currentColor 40%,
    #a9c3ff 50%,
    currentColor 60%, currentColor 100%);
}

/* ---------- 7. 视差层 ---------- */
.ez-parallax {
  will-change: transform;
  /* 提升为独立层，避免与父级重排互相影响 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* ---------- 8. 鼠标跟随光晕 ---------- */
#ezCursorGlow {
  position: fixed;
  top: 0; left: 0;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent, #7aa2ff) 12%, transparent),
    transparent 66%);
  will-change: transform, opacity;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
  contain: strict;
}
html:not(.colormix) #ezCursorGlow {
  background: radial-gradient(circle, rgba(122, 162, 255, .12), transparent 66%);
}
#ezCursorGlow.on { opacity: 1; }

/* ---------- 9. 图片/卡片 hover 微抬升 ---------- */
.ez-lift {
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              box-shadow .34s cubic-bezier(.22, 1, .36, 1);
}
.ez-lift:hover {
  transform: translate3d(0, -4px, 0);
}

/* ============================================================
   降级：低端设备 / 减少动态 / 移动端
   ============================================================ */

/* 低端设备：关掉滤镜与光晕，保留最轻的位移 */
html.eng-weak #ezCursorGlow { display: none !important; }
html.eng-weak .ez-sheen { animation: none; }
html.eng-weak .topbar.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.eng-weak .ez-tilt { transform: none !important; }

/* 移动端：关闭指针类特效（无 hover 语义） */
@media (hover: none), (pointer: coarse) {
  #ezCursorGlow { display: none !important; }
  .ez-tilt, .ez-magnet { transform: none !important; }
}

/* 系统级减少动态：全部关闭 */
@media (prefers-reduced-motion: reduce) {
  html .topbar,
  html .wrap#main,
  html .ez-sheen { animation: none !important; }
  #ezCursorGlow { display: none !important; }
  .ez-tilt, .ez-magnet, .ez-lift, .ez-press { transform: none !important; }
  .ez-parallax { transform: none !important; will-change: auto; }
  .topbar::after { transition: none; }
}

/* 全局动画关闭（core.js 会加 .no-anim） */
html.no-anim .ez-sheen { animation: none !important; }
html.no-anim #ezCursorGlow { display: none !important; }
html.no-anim .ez-tilt,
html.no-anim .ez-magnet { transform: none !important; }