/* =========================================================
   ny2026_anim.css — 滚动入场 / 交互动效 / 性能与无障碍
   仅动 transform / opacity，尊重 prefers-reduced-motion
   ========================================================= */

:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.25s;
    --dur: 0.45s;
    --dur-slow: 0.7s;
    --reveal-y: 28px;
}

/* ---------- 滚动入场（仅在 JS 启用后生效，避免无脚本白屏） ---------- */
.js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.js-reveal .reveal.is-inview {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.js-reveal .reveal-fade {
    transform: none;
}

.js-reveal .reveal-left {
    transform: translate3d(-36px, 0, 0);
}

.js-reveal .reveal-right {
    transform: translate3d(36px, 0, 0);
}

.js-reveal .reveal-scale {
    transform: scale(0.94) translate3d(0, 18px, 0);
}

.js-reveal .reveal-scale.is-inview,
.js-reveal .reveal-left.is-inview,
.js-reveal .reveal-right.is-inview {
    transform: none;
}

/* 标题下划线：入场时从中心展开 */
.js-reveal .section02_title p:after,
.js-reveal .section03_title p:after,
.js-reveal .section04_title p:after,
.js-reveal .section05_title p:after {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.65s var(--ease-out) 0.15s;
}

.js-reveal .section02_title.is-inview p:after,
.js-reveal .section03_title.is-inview p:after,
.js-reveal .section04_title.is-inview p:after,
.js-reveal .section05_title.is-inview p:after {
    transform: scaleX(1);
}

/* 首屏：加载即入场 */
.js-reveal .hero-in {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: hero-rise 0.85s var(--ease-out) forwards;
    animation-delay: var(--reveal-delay, 0s);
}

.js-reveal .hero-in-left {
    transform: translate3d(-24px, 12px, 0);
}

@keyframes hero-rise {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 公共按钮 ---------- */
.section01Btn,
.section02_intro_btn,
.newsList_arrow,
.common_btn {
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        background-color var(--dur-fast) ease,
        color var(--dur-fast) ease;
    will-change: transform;
}

.section01Btn:hover,
.section02_intro_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(239, 128, 40, 0.32);
    background-color: #e5721c;
}

.section01Btn:active,
.section02_intro_btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 6px 14px rgba(239, 128, 40, 0.22);
}

/* ---------- 桌面下拉：透明度 + 位移，避免 display 闪切 ---------- */
.sub-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity var(--dur-fast) var(--ease-soft),
        transform var(--dur-fast) var(--ease-soft),
        visibility 0s linear var(--dur-fast);
}

ul.menu>li:hover .sub-menu,
ul.menu>li:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s, 0s, 0s;
}

ul.menu>li>a {
    transition: color var(--dur-fast) ease;
}

ul.menu>li:hover>a,
ul.menu>li.active>a {
    color: #6dba44;
}

.sub-menu>li a {
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

/* ---------- 语言下拉（配合 jQuery slide 时更跟手） ---------- */
.lang-dropdown {
    transform-origin: top right;
}

/* ---------- 展区卡片：图片缩放 + 遮罩，替代纯 height 动画 ---------- */
.section03_booth_list .section03_booth_list_cover {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.section03_booth_list_cover img {
    transition: transform 0.6s var(--ease-out);
    will-change: transform;
}

.section03_booth_list:hover .section03_booth_list_cover img {
    transform: scale(1.07);
}

.section03_booth_list:hover .section03_booth_list_cover {
    box-shadow: 0 16px 36px rgba(46, 86, 31, 0.18);
    transform: translateY(-4px);
}

.section03_booth_list_title p {
    transition: transform 0.42s var(--ease-out);
}

.section03_booth_list_title:after {
    transition:
        height 0.42s var(--ease-out),
        background-color 0.42s ease;
}

/* ---------- 新闻列表 ---------- */
.section04_news_list {
    transition: background-color var(--dur) ease, transform var(--dur) var(--ease-out);
}

.section04_news_list i {
    transition: transform var(--dur) var(--ease-out);
}

.section04_news_list:hover {
    background-color: rgba(109, 186, 68, 0.05);
    transform: translate3d(6px, 0, 0);
}

.section04_news_list:hover i {
    transform: scale(1.25);
}

.section04_news_list_title {
    transition: color var(--dur-fast) ease;
}

.section04_news_list:hover .section04_news_list_title {
    color: #6dba44;
}

.section04_news_first_arrow img {
    transition: transform var(--dur) var(--ease-out);
}

.section04_news_first:hover .section04_news_first_arrow img {
    transform: translate3d(6px, -4px, 0);
}

.section04_news_first {
    display: block;
    transition: transform var(--dur) var(--ease-out);
}

.section04_news_first:hover {
    transform: translateY(-2px);
}

/* ---------- 新闻列表页卡片 ---------- */
.newsList {
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.newsList:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.newsList_img img {
    transition: transform 0.55s var(--ease-out);
}

.newsList:hover .newsList_img img {
    transform: scale(1.06);
}

/* ---------- 轨道动画：离屏暂停，节省合成层 ---------- */
.section02_orbit,
.section02_graphic_list img {
    animation-play-state: running;
}

.section02_orbit.is-paused,
.section02_orbit.is-paused .section02_graphic_list img {
    animation-play-state: paused;
}

.section02_graphicBox {
    will-change: auto;
}

/* ---------- Swiper 容器更顺滑 ---------- */
.section02_photo .swiper-container {
    transition: opacity 0.55s var(--ease-out);
}

.section02_photo .swiper-slide {
    transition: transform var(--dur) var(--ease-out);
}

/* ---------- 页头滚动状态 ---------- */
.header {
    transition: box-shadow var(--dur) var(--ease-soft), background-color var(--dur) ease;
}

.header.is-scrolled .header_bg {
    background-color: rgba(255, 255, 255, 0.72);
}

.header.is-scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.header_bg {
    transition: background-color var(--dur) ease;
}

/* ---------- 移动菜单微调 ---------- */
.mobile-menu {
    transition: transform 0.45s var(--ease-out);
    will-change: transform;
}

.mobile-menu-item>a .arrow {
    transition: transform 0.3s var(--ease-out), border-color 0.2s ease;
}

/* ---------- 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal,
    .js-reveal .reveal-fade,
    .js-reveal .reveal-left,
    .js-reveal .reveal-right,
    .js-reveal .reveal-scale,
    .js-reveal .hero-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .js-reveal .section02_title p:after,
    .js-reveal .section03_title p:after,
    .js-reveal .section04_title p:after,
    .js-reveal .section05_title p:after {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .section02_orbit,
    .section02_graphic_list img {
        animation: none !important;
    }

    .section01Btn,
    .section02_intro_btn,
    .section03_booth_list_cover img,
    .section03_booth_list_title p,
    .section03_booth_list_title:after,
    .section04_news_list,
    .mobile-menu {
        transition: none !important;
    }

    .section03_booth_list_title p {
        transform: none !important;
    }

    .section03_booth_list:hover .section03_booth_list_cover img,
    .section04_news_list:hover,
    .section01Btn:hover,
    .section02_intro_btn:hover {
        transform: none !important;
    }
}