/* MANDLA 官网共享动效：克制、低位移、一次性进入，并尊重系统减弱动效设置。 */

:root {
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* 首页首屏：只让信息分层显现，主视觉本身不缩放、不漂移。 */
html.motion-enabled body.home-page .home-hero-copy > :is(.eyebrow, .home-hero-lede, .home-hero-actions),
html.motion-enabled body.home-page .home-hero-proof > * {
    animation: home-hero-enter 720ms var(--motion-ease-out) both;
}

html.motion-enabled body.home-page .home-hero-copy > .eyebrow { animation-delay: 40ms; }
html.motion-enabled body.home-page .home-hero-copy > .home-hero-lede { animation-delay: 190ms; }
html.motion-enabled body.home-page .home-hero-copy > .home-hero-actions { animation-delay: 270ms; }
html.motion-enabled body.home-page .home-hero-proof > *:nth-child(1) { animation-delay: 340ms; }
html.motion-enabled body.home-page .home-hero-proof > *:nth-child(2) { animation-delay: 390ms; }
html.motion-enabled body.home-page .home-hero-proof > *:nth-child(3) { animation-delay: 440ms; }

@keyframes home-hero-enter {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 三个中心到四个交付节点是首页唯一的业务叙事动效。内容始终可读，只让关系线依次接通。 */
html.motion-enabled .home-network .home-center-map::after {
    transform: scaleX(0);
    transform-origin: left center;
}

html.motion-enabled .home-network .home-center::before {
    opacity: .42;
}

html.motion-enabled .home-network .home-delivery-flow li::before {
    opacity: .42;
    transform: scale(.72);
}

html.motion-enabled .home-network .home-delivery-flow li:not(:last-child)::after {
    transform: scaleX(0);
    transform-origin: left center;
}

html.motion-enabled .home-network.is-process-active .home-center-map::after {
    animation: network-line-connect 760ms var(--motion-ease-out) 80ms both;
}

html.motion-enabled .home-network.is-process-active .home-center::before {
    animation: network-center-confirm 280ms ease-out both;
}

html.motion-enabled .home-network.is-process-active .home-center:nth-child(1)::before { animation-delay: 110ms; }
html.motion-enabled .home-network.is-process-active .home-center:nth-child(2)::before { animation-delay: 360ms; }
html.motion-enabled .home-network.is-process-active .home-center:nth-child(3)::before { animation-delay: 610ms; }

html.motion-enabled .home-network.is-process-active .home-delivery-flow li::before {
    animation: network-node-confirm 260ms ease-out both;
}

html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(1)::before { animation-delay: 780ms; }
html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(2)::before { animation-delay: 930ms; }
html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(3)::before { animation-delay: 1080ms; }
html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(4)::before { animation-delay: 1230ms; }

html.motion-enabled .home-network.is-process-active .home-delivery-flow li:not(:last-child)::after {
    animation: network-line-connect 360ms var(--motion-ease-out) both;
}

html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(1)::after { animation-delay: 830ms; }
html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(2)::after { animation-delay: 980ms; }
html.motion-enabled .home-network.is-process-active .home-delivery-flow li:nth-child(3)::after { animation-delay: 1130ms; }

@keyframes network-line-connect {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes network-node-confirm {
    from { opacity: .42; transform: scale(.72); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes network-center-confirm {
    from { opacity: .42; transform: translate(-50%, -50%) scale(.72); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 六个内页沿用旧官网的分段入场节奏，但取消图片缩放与大幅飞入。 */
html.motion-enabled body.site-page :is(
    .site-immersive-copy,
    .solutions-hero-copy,
    .about-hero-copy,
    .site-immersive-hero-copy
) > * {
    animation: inner-hero-enter 680ms var(--motion-ease-out) both;
}

html.motion-enabled body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > :nth-child(1) { animation-delay: 40ms; }
html.motion-enabled body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > :nth-child(2) { animation-delay: 105ms; }
html.motion-enabled body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > :nth-child(3) { animation-delay: 175ms; }
html.motion-enabled body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > :nth-child(4) { animation-delay: 245ms; }
html.motion-enabled body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > :nth-child(5) { animation-delay: 315ms; }

@keyframes inner-hero-enter {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.motion-enabled .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
}

html.motion-enabled .motion-reveal.motion-from-left {
    transform: translate3d(-24px, 0, 0);
}

html.motion-enabled .motion-reveal.motion-from-right {
    transform: translate3d(24px, 0, 0);
}

html.motion-enabled .motion-reveal.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 560ms ease,
        transform 660ms var(--motion-ease-out);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-enabled .motion-media-reveal {
    overflow: hidden;
}

.mobile-menu-btn span {
    transform-origin: center;
    transition: transform 260ms var(--motion-ease-out), opacity 180ms ease;
}

.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

:is(.btn, .site-button, .immersive-primary, .outline-button, .submit-button, .filter-button) {
    transition:
        transform 260ms var(--motion-ease-out),
        color 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 260ms ease;
}

:is(.text-link, .site-text-link, .immersive-text-link, .family-link) i {
    transition: transform 260ms var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    :is(.btn, .site-button, .immersive-primary, .outline-button, .submit-button):hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 22px rgba(64, 73, 64, .08);
    }

    :is(.text-link, .site-text-link, .immersive-text-link, .family-link):hover i {
        transform: translateX(4px);
    }

    :is(.home-product, .featured-card, .factory-scene, .mode-card, .center-card) {
        transition: transform 420ms var(--motion-ease-out), box-shadow 420ms ease;
    }

    :is(.home-product, .featured-card, .factory-scene, .mode-card, .center-card):hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(58, 65, 57, .07);
    }

}

@media (max-width: 820px) {
    html.motion-enabled .motion-reveal {
        transform: translate3d(0, 16px, 0);
    }

    html.motion-enabled .motion-reveal.motion-from-left,
    html.motion-enabled .motion-reveal.motion-from-right {
        transform: translate3d(0, 16px, 0);
    }
}

@media (max-width: 540px) {
    html.motion-enabled .home-network .home-center-map::after {
        transform: scaleY(0);
        transform-origin: center top;
    }

    html.motion-enabled .home-network.is-process-active .home-center-map::after {
        animation-name: network-line-connect-mobile;
    }

    @keyframes network-line-connect-mobile {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body { scroll-behavior: auto !important; }

    .motion-reveal,
    .motion-media-reveal > img,
    body.home-page .home-hero-copy > *,
    body.home-page .home-hero-proof > *,
    body.site-page :is(.site-immersive-copy, .solutions-hero-copy, .about-hero-copy, .site-immersive-hero-copy) > *,
    .site-header,
    .mobile-menu-btn span {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .mobile-inquiry-cta,
    .home-product-media img {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .home-network .home-center-map::after,
    .home-network .home-center::before,
    .home-network .home-delivery-flow li::before,
    .home-network .home-delivery-flow li::after {
        animation: none !important;
        transition: none !important;
    }

}