/* 全站共用的轻量交互/动效层——三个页面（index/app/economy）都引用这一份，不重复写。
   零依赖：不需要任何外部动画库，纯 CSS + 一份 effects.js，跟现有"每页自带内联<style>"的
   写法并存，不冲突（这里只加新东西，不覆盖各页面已有的卡片/按钮 hover 效果）。 */

/* 1. 滚动淡入——配合 effects.js 的 IntersectionObserver，元素进入视口前先隐藏一点位移，
   进来之后加 .is-visible 才显示。JS 没跑起来（极端情况，比如被禁用）时元素还是完全可见的
   （见 effects.js 里"没有 IntersectionObserver 支持就直接显示"的兜底），不会永远藏着。 */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
}

/* 2. 按钮悬浮扫光——叠加在各页面已有的 .btn:hover（位移+阴影）之上，纯视觉加分，
   不影响原有的 transform/box-shadow 逻辑。 */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-shine:hover::after { left: 130%; }

/* 3. 卡片鼠标跟随高光——鼠标移到卡片上时，一小片柔光跟着鼠标位置走（--mx/--my 由
   effects.js 在 mousemove 时写入）。用 color-mix 取当前页面的 --accent 变量做一层淡淡的
   染色，浅色卡片（白底）和深色卡片（ai-card 那种半透明深底）上都看得出效果，不会因为
   纯白光斑在白底卡片上"隐形"。 */
.glow-card {
    position: relative;
    isolation: isolate;
}
.glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, #7C3AED) 22%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}
.glow-card:hover::before { opacity: 1; }
/* 卡片内部真实内容要盖在光斑上面，不然文字会被半透明光斑压暗 */
.glow-card > * { position: relative; z-index: 1; }

/* 4. 粒子背景容器——挂了这个 class 的区块，effects.js 会往里插一块铺满的 <canvas>，
   画一群缓慢往上漂的柔光小点（模拟萤火虫/氛围光尘），不依赖 Three.js/WebGL，Canvas 2D
   够用，移动端也不吃力。 */
.particle-hero { position: relative; overflow: hidden; }
.particle-hero canvas.particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
}
/* 粒子画布是插进去的第一个子元素（zIndex 靠 DOM 顺序压在最底下），原有内容需要显式垫到
   它上面，不然会被画布盖住——大部分浏览器 canvas 默认不透明背景是透明的，理论上不挡内容，
   这行是防御性写法，避免个别层叠上下文意外情况。 */
.particle-hero > *:not(canvas) { position: relative; z-index: 1; }