/* ============================================================
 * jxzn 全站动效辅助样式
 * - Section 进场动画的初始状态由 GSAP 接管（animations.js）
 * - 本文件负责：hover 微交互 / 链接下划线 / 减弱运动偏好
 * ========================================================== */

/* ---------- 卡片 hover lift（统一节奏） ---------- */
.jxzn-news__card,
.jxzn-case-card,
.jxzn-honor__list > li,
.jxzn-invest__list > li {
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s ease,
                border-color .35s ease;
    will-change: transform;
}

.jxzn-news__card:hover,
.jxzn-case-card:hover {
    transform: translateY(-0.42vw);
    box-shadow: 0 1.04vw 2.6vw rgba(0, 0, 0, 0.10);
}

.jxzn-honor__list > li:hover,
.jxzn-invest__list > li:hover {
    transform: translateY(-0.32vw);
    box-shadow: 0 0.83vw 2.08vw rgba(0, 0, 0, 0.08);
}

/* 卡片内图片轻微放大（容器需要 overflow:hidden 才生效） */
.jxzn-news__card img,
.jxzn-case-card img {
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.jxzn-news__card:hover img,
.jxzn-case-card:hover img {
    transform: scale(1.04);
}

/* ---------- 通用链接下划线 draw ---------- */
.jxzn-link {
    position: relative;
    display: inline-block;
}
.jxzn-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15em;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.jxzn-link:hover::after {
    transform: scaleX(1);
}

/* ---------- 按钮通用微交互 ---------- */
.jxzn-btn,
.jxzn-cta__more,
.jxzn-news__more {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.jxzn-btn:hover,
.jxzn-cta__more:hover,
.jxzn-news__more:hover {
    transform: translateY(-2px);
}

/* ---------- 进场动画初始状态（JS 失败时的兜底） ----------
 * 注意：默认不隐藏，让 GSAP 接管时由 from() 自动设初始状态。
 * 如果担心首帧闪烁，给 [data-anim] 加初始 opacity:0；
 * 全局选择器（标题/副标题等）不在此 hide，避免 JS 故障时整页空白。
 */
[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
}
.no-js [data-anim] {
    opacity: 1;
}

/* ---------- Hero 逐字浮现支持 ----------
 * splitChars 会把每个字符包成 .jxzn-char，inline-block 才能 transform
 */
.jxzn-char {
    display: inline-block;
    will-change: opacity, transform;
}

/* Hero content 视差容器（GSAP 接管 transform） */
.jxzn-hero__content {
    will-change: transform;
}

/* ---------- 减弱运动偏好（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
 * Ken Burns — 缓慢 pan/zoom 效果
 *
 * 用于：
 *  1. Screen 2 视频海报（视频静止时仍有微动；播放期间被视频本体覆盖，无视觉冲突）
 *  2. Screen 7 CTA 卡片背面（翻面后背景图缓慢平移 + 微缩放）
 *
 * 设计：scale 上下浮 4-5% + translate 上下浮 1-2%
 *      8s/7s 周期，ease-in-out + alternate，类似呼吸节奏
 * ========================================================== */

/* ---------- Screen 2：视频整体缓慢 zoom-in（已停用）----------
 * 原意是给海报/静态帧加缓慢呼吸感，实际副作用：
 *   1. 视频暂停后 scale 1.0↔1.05 循环造成滚动抖动
 *   2. Lenis 平滑滚动期间，合成层频繁重绘
 * 所以彻底关掉。keyframes 保留以备未来回滚。
 */
@keyframes jxzn-ken-burns-video {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}

/* ---------- Screen 7：CTA 卡片翻面后背景图 Ken Burns ----------
 * .jxzn-cta__face--back::after 是带 background-image 的内层
 * hover 时父卡翻转，背面可见 → 启动 Ken Burns
 * 用 transform 比 background-position 更平滑（合成层）
 */
.jxzn-cta__card:hover .jxzn-cta__face--back::after {
    animation: jxzn-ken-burns-cta 8s ease-in-out infinite alternate;
}

@keyframes jxzn-ken-burns-cta {
    from { transform: scale(1.05) translate(-1%, -1%); }
    to   { transform: scale(1.05) translate(1%, 1%); }
}

/* 减弱运动偏好：停掉 CTA 卡片翻面后的 Ken Burns
 * （screen 2 的视频 Ken Burns 已默认停用，这里不再需要 override） */
@media (prefers-reduced-motion: reduce) {
    .jxzn-cta__card:hover .jxzn-cta__face--back::after {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
 * 全站 Hero 背景光环呼吸
 * - 4 个软光圆 (radial-gradient + mix-blend-mode:screen)
 * - 各自缓慢 translate + scale + opacity 脉动，错开 delay
 * - 不动 hero 背景图（orb 在背景图之上、文字之下，混合模式发光叠加）
 * - 由 animations.js 注入 DOM 到每个 hero 容器
 * ========================================================== */

.jxzn-hero-orb {
    position: absolute;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: jxzn-orb-breath 12s ease-in-out infinite;
    will-change: transform, opacity;
}

/* 4 颗光环：颜色 + 起始位置 + 动画延迟错开 */
.jxzn-hero-orb:nth-child(1) {
    background: radial-gradient(circle, rgba(77, 143, 255, 0.6), transparent 60%);
    top: -15%; left: -15%;
    animation-delay: 0s;
    animation-duration: 12s;
}
.jxzn-hero-orb:nth-child(2) {
    background: radial-gradient(circle, rgba(180, 146, 255, 0.55), transparent 60%);
    top: 10%; right: -20%;
    animation-delay: -3s;
    animation-duration: 14s;
}
.jxzn-hero-orb:nth-child(3) {
    background: radial-gradient(circle, rgba(91, 189, 255, 0.55), transparent 60%);
    bottom: -20%; left: 25%;
    animation-delay: -6s;
    animation-duration: 10s;
}
.jxzn-hero-orb:nth-child(4) {
    background: radial-gradient(circle, rgba(122, 111, 255, 0.5), transparent 60%);
    bottom: 5%; right: 15%;
    animation-delay: -9s;
    animation-duration: 16s;
}

@keyframes jxzn-orb-breath {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.45;
    }
    33% {
        transform: translate(6%, -8%) scale(1.15);
        opacity: 0.7;
    }
    66% {
        transform: translate(-8%, 6%) scale(0.9);
        opacity: 0.35;
    }
}

/* 确保 hero 文字内容在 orb 之上（如有需要） */
.jxzn-case-hero h1,
.jxzn-case-hero .jxzn-case-hero__content {
    position: relative;
    z-index: 3;
}

/* 减弱运动偏好：orb 静止，仍显示但不动 */
@media (prefers-reduced-motion: reduce) {
    .jxzn-hero-orb {
        animation: none;
    }
}