/* 服务项目页动画 */

:root {
    --service-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --service-anim-duration: 0.75s;
}

/* ========== 通用滚动入场 ========== */
.service-anim-section [class$="-title"] {
    opacity: 0;
    transform: translateY(calc(32px * var(--layout-scale)));
    transition:
        opacity var(--service-anim-duration) var(--service-anim-ease),
        transform var(--service-anim-duration) var(--service-anim-ease);
}

.service-anim-section.service-anim-in [class$="-title"] {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 顶部区域 ========== */
.service-top-bg img {
    transform: scale(1.05);
    transition: transform 1.2s var(--service-anim-ease);
}

.service-top.is-loaded .service-top-bg img {
    transform: scale(1);
}

.service-top-title {
    opacity: 0;
    transform: translateY(calc(-24px * var(--layout-scale)));
    transition:
        opacity 0.85s var(--service-anim-ease) 0.1s,
        transform 0.85s var(--service-anim-ease) 0.1s;
}

.service-top.is-loaded .service-top-title {
    opacity: 1;
    transform: translateY(0);
}

.service-card {
    opacity: 0;
    transform: translateY(calc(28px * var(--layout-scale))) scale(0.96);
    transition:
        opacity 0.65s var(--service-anim-ease),
        transform 0.65s var(--service-anim-ease),
        box-shadow 0.35s ease;
}

.service-top.is-loaded .service-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.service-top.is-loaded .service-card--1 { transition-delay: 0.15s; }
.service-top.is-loaded .service-card--2 { transition-delay: 0.22s; }
.service-top.is-loaded .service-card--3 { transition-delay: 0.29s; }
.service-top.is-loaded .service-card--4 { transition-delay: 0.36s; }
.service-top.is-loaded .service-card--5 { transition-delay: 0.43s; }
.service-top.is-loaded .service-card--6 { transition-delay: 0.5s; }
.service-top.is-loaded .service-card--7 { transition-delay: 0.57s; }
.service-top.is-loaded .service-card--8 { transition-delay: 0.64s; }

.service-card-line {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--service-anim-ease);
}

.service-top.is-loaded .service-card .service-card-line {
    transform: scaleX(1);
    transition-delay: 0.35s;
}

.service-top.is-loaded .service-card--1 .service-card-line { transition-delay: 0.45s; }
.service-top.is-loaded .service-card--2 .service-card-line { transition-delay: 0.52s; }
.service-top.is-loaded .service-card--3 .service-card-line { transition-delay: 0.59s; }
.service-top.is-loaded .service-card--4 .service-card-line { transition-delay: 0.66s; }
.service-top.is-loaded .service-card--5 .service-card-line { transition-delay: 0.73s; }
.service-top.is-loaded .service-card--6 .service-card-line { transition-delay: 0.8s; }
.service-top.is-loaded .service-card--7 .service-card-line { transition-delay: 0.87s; }
.service-top.is-loaded .service-card--8 .service-card-line { transition-delay: 0.94s; }

.service-card:hover {
    transform: translateY(calc(-6px * var(--layout-scale))) scale(1);
    box-shadow:
        0 calc(8px * var(--layout-scale)) calc(24px * var(--layout-scale)) rgba(22, 84, 255, 0.1),
        0 calc(2px * var(--layout-scale)) calc(8px * var(--layout-scale)) rgba(7, 11, 18, 0.04);
}

.service-card-icon {
    transition: transform 0.35s var(--service-anim-ease);
}

.service-card:hover .service-card-icon {
    transform: scale(1.1) rotate(-3deg);
}

/* ========== 开发流程 ========== */
.service-process-pic {
    opacity: 0;
    transform: translateY(calc(24px * var(--layout-scale)));
    clip-path: inset(0 100% 0 0);
    transition:
        opacity 0.9s var(--service-anim-ease),
        transform 0.9s var(--service-anim-ease),
        clip-path 1.1s var(--service-anim-ease);
}

.service-process.service-anim-in .service-process-pic {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    transition-delay: 0.15s;
}

.service-process-pic img {
    transition: transform 0.5s var(--service-anim-ease);
}

.service-process.service-anim-in .service-process-pic img {
    animation: service-process-float 6s ease-in-out 1.2s infinite;
}

@keyframes service-process-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-6px * var(--layout-scale)));
    }
}

/* ========== 底部背景 ========== */
.service-bottom-bg img {
    opacity: 0;
    transform: translateY(calc(20px * var(--layout-scale)));
    transition:
        opacity 1s var(--service-anim-ease),
        transform 1s var(--service-anim-ease);
}

.service-bottom-area.service-anim-in .service-bottom-bg img {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 服务保障 ========== */
.service-guarantee-card {
    opacity: 0;
    transform: translateY(calc(40px * var(--layout-scale)));
    transition:
        opacity 0.75s var(--service-anim-ease),
        transform 0.75s var(--service-anim-ease),
        box-shadow 0.35s ease;
}

.service-guarantee.service-anim-in .service-guarantee-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.service-guarantee.service-anim-in .service-guarantee-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.service-guarantee.service-anim-in .service-guarantee-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.service-guarantee-card:hover {
    transform: translateY(calc(-8px * var(--layout-scale)));
    box-shadow: 0 calc(16px * var(--layout-scale)) calc(40px * var(--layout-scale)) rgba(22, 84, 255, 0.12);
}

.service-guarantee-item {
    opacity: 0;
    transform: translateX(calc(-12px * var(--layout-scale)));
    transition:
        opacity 0.45s var(--service-anim-ease),
        transform 0.45s var(--service-anim-ease);
}

.service-guarantee-card.is-items-in .service-guarantee-item {
    opacity: 1;
    transform: translateX(0);
}

.service-guarantee-card.is-items-in .service-guarantee-item:nth-child(1) { transition-delay: 0.05s; }
.service-guarantee-card.is-items-in .service-guarantee-item:nth-child(2) { transition-delay: 0.12s; }
.service-guarantee-card.is-items-in .service-guarantee-item:nth-child(3) { transition-delay: 0.19s; }
.service-guarantee-card.is-items-in .service-guarantee-item:nth-child(4) { transition-delay: 0.26s; }
.service-guarantee-card.is-items-in .service-guarantee-item:nth-child(5) { transition-delay: 0.33s; }

.service-guarantee-card-head-inner {
    transition: transform 0.35s var(--service-anim-ease);
}

.service-guarantee-card:hover .service-guarantee-card-head-inner {
    transform: translateX(calc(4px * var(--layout-scale)));
}

/* ========== 核心优势 ========== */
.service-advantage-carousel {
    opacity: 0;
    transform: translateY(calc(28px * var(--layout-scale)));
    transition:
        opacity 0.8s var(--service-anim-ease),
        transform 0.8s var(--service-anim-ease);
}

.service-advantage.service-anim-in .service-advantage-carousel {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.service-advantage-card-icon-wrap {
    transition: transform 0.35s var(--service-anim-ease);
}

.service-advantage-card:hover .service-advantage-card-icon-wrap {
    transform: scale(1.12) rotate(4deg);
}

/* ========== 侧边栏 ========== */
.service-page ~ .side-float,
body.service-anim-ready .side-float {
    opacity: 0;
    transform: translateX(calc(20px * var(--layout-scale)));
    transition:
        opacity 0.6s var(--service-anim-ease) 0.8s,
        transform 0.6s var(--service-anim-ease) 0.8s;
}

body.service-anim-ready .side-float {
    opacity: 1;
    transform: translateX(0);
}

body.service-anim-ready .side-float-item {
    transition: transform 0.25s ease;
}

body.service-anim-ready .side-float-item:hover {
    transform: translateX(calc(-3px * var(--layout-scale)));
}

/* ========== 无障碍 ========== */
@media (prefers-reduced-motion: reduce) {
    .service-top-bg img,
    .service-top-title,
    .service-card,
    .service-card-line,
    .service-anim-section [class$="-title"],
    .service-process-pic,
    .service-bottom-bg img,
    .service-guarantee-card,
    .service-guarantee-item,
    .service-advantage-carousel,
    .side-float {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}