html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    background: #ffffff;
    color: #212529;
}

/* =========================================================
   three.js 背景层
========================================================= */

#container,
#container canvas {
    resize: none !important;
    overflow: hidden !important;
}

#container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.site-header,
main,
.site-footer {
    position: relative;
    z-index: 10;
}

/* =========================================================
   滚动显现
========================================================= */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

.reveal-delay-4 {
    transition-delay: 0.32s;
}

.reveal-delay-5 {
    transition-delay: 0.40s;
}

.reveal-delay-6 {
    transition-delay: 0.48s;
}

/* =========================================================
   模块悬停浮起
========================================================= */

.position-card,
.strength-card,
.service-card,
.result-card,
.solution-positioning .card,
.strength-section .card,
.service-lineup .card,
.result-section .card,
.home-cta .card,
.hover-lift {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
    will-change: transform, box-shadow;
}

/* =========================================================
   Home Strength Fly In Effect
========================================================= */

.strength-fly-section {
    overflow-x: clip;
    overflow-y: visible;
}

html.home-js .strength-fly-section .strength-fly-item {
    opacity: 0;
    transform: translate3d(var(--fly-x, 0), var(--fly-y, 0), 0) rotate(var(--fly-rotate, 0deg)) scale(var(--fly-scale, 0.86));
    filter: blur(12px);
    will-change: transform, opacity, filter;
}

html.home-js .strength-fly-section.fly-ready .strength-fly-item {
    transition: opacity 1.05s ease, filter 1.05s ease, transform 1.55s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--fly-delay, 0ms);
}

html.home-js .strength-fly-section.fly-landed .strength-fly-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
}

html.home-js .strength-fly-section.fly-complete .strength-fly-item {
    will-change: auto;
}

html:not(.home-js) .strength-fly-section .strength-fly-item {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html.home-js .strength-fly-section .strength-fly-item,
    html.home-js .strength-fly-section.fly-ready .strength-fly-item,
    html.home-js .strength-fly-section.fly-landed .strength-fly-item {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .position-card,
    .strength-card,
    .service-card,
    .result-card,
    .solution-positioning .card,
    .strength-section .card,
    .service-lineup .card,
    .result-section .card,
    .home-cta .card,
    .hover-lift {
        cursor: pointer;
    }

        .position-card:hover,
        .strength-card:hover,
        .service-card:hover,
        .result-card:hover,
        .solution-positioning .card:hover,
        .strength-section .card:hover,
        .service-lineup .card:hover,
        .result-section .card:hover,
        .home-cta .card:hover,
        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12) !important;
        }
}

.badge {
    white-space: normal;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 768px) {
    #container {
        min-height: 520px;
    }

    .reveal-on-scroll {
        transform: translateY(24px);
    }
}

@media (max-width: 480px) {
    #container {
        min-height: 460px;
    }
}

@media (max-width: 991.98px) {
    #container {
        opacity: 0.94;
    }
}

/* 手机端不再用 clip-path 硬裁，改为 JS 动态计算 top */
@media (max-width: 575.98px) {
    #container {
        opacity: 0.98;
        min-height: 0;
    }
}