/* ============================================================
   about.css —— 仅 about.html 使用（页面级样式）
   ============================================================ */
/* ---------- 入场动效（首屏加载即播放） ----------
   背景 Ken Burns 缓推 → 遮罩左扫淡入 → 标题蒙版揭示+模糊上浮 → 描述左滑淡入 */

/* ============================================================
   第1屏：About Hero（1920 x 500，1rem = 100px）
   背景图 + 左侧黑色渐变遮罩；标题 left 260 / top 137 / 宽 729
   描述 left 260 / top 304 / 宽 520；顶部预留导航栏 80
   ============================================================ */
.first {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    height: 5rem;
    /* 500px */
    margin: 0.8rem auto 0;
    /* 顶部空出导航栏 80px */
    box-sizing: border-box;
    overflow: hidden;
    padding: 1.37rem 0 0 2.6rem;
}

/* 背景图层独立成层，便于 Ken Burns 缓推入场 */
.first::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../assets/images/materials/first-img.webp") no-repeat center / cover;
}


.first__inner {
    position: relative;
    z-index: 2;
    height: 100%;
}

/* 标题：40px / 600 / #FFF，left 260 / top 137 / 宽 729 */
.first__title {
    width: 7.29rem;
    margin: 0;
    overflow: hidden;
    padding-bottom: 0.05rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    z-index: 10;
    position: relative;
    margin-bottom: 0.1rem;
}

.first__title span {
    display: inline-block;
}

/* 描述：16px / 400 / #FFF，left 260 / top 304 / 宽 520 */
.first__desc {
    width: 5.2rem;
    margin: 0;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
    text-transform: capitalize;
    z-index: 10;
    position: relative;
}

.first::before {
    transform: scale(1.15);
    animation: first-bg-in 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.first__title {
    opacity: 0;
    animation: first-title-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.first__desc {
    opacity: 0;
    animation: first-desc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

@keyframes first-bg-in {
    from {
        transform: scale(1.15);
    }

    to {
        transform: scale(1);
    }
}

/* 遮罩：从左向右展开淡入 */
@keyframes first-shade-in {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* 标题：模糊上浮揭示 */
@keyframes first-title-in {
    from {
        opacity: 0;
        transform: translateY(0.4rem);
        filter: blur(0.06rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* 描述：轻微左滑淡入 */
@keyframes first-desc-in {
    from {
        opacity: 0;
        transform: translateX(-0.3rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .first {
    height: auto;
    margin-top: 0.8rem;
    /* H5 重新定义内边距，覆盖 PC 的 1.37rem / 2.6rem，避免标题溢出 */
    padding: 0.7rem 0.3rem 0.5rem;
}

html[data-mode="h5"] .first__title {
    left: auto;
    top: auto;
    width: 100%;
    font-size: 0.36rem;
}

html[data-mode="h5"] .first__desc {
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
}

/* 系统开启"减少动态效果"时：直接显示，不做隐藏与动画 */
@media (prefers-reduced-motion: reduce) {
    .first::before {
        animation: none;
        transform: none;
    }

    .first__title,
    .first__desc {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
    }
}

/* ============================================================
   面包屑导航（1920 设计稿，1920x60，bg #F5F5F5，padding-left 160）
   滚动时吸附在固定导航栏（0.8rem）下方
   入场动效由 about.js 的 IntersectionObserver 添加 .is-in-view 触发
   ============================================================ */
.breadcrumb {
    position: sticky;
    top: 0.8rem;
    /* 吸附于 80px 高的导航栏下方 */
    z-index: 90;
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    height: 0.6rem;
    /* 60px */
    margin: 0 auto;
    padding-left: 2.6rem;
    /* 160px */
    background: #F2F3ED;
    display: flex;
    align-items: center;
}

.breadcrumb__inner {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    /* 12px */
}

/* 面包屑项：14px / 400 / 行高 24px */
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    color: #333;
    font-family: "Montserrat", sans-serif;
    /* Gabarito */
    font-size: 0.14rem;
    /* 14px */
    font-style: normal;
    font-weight: 400;
    line-height: 0.24rem;
    /* 24px */
    text-decoration: none;
    cursor: pointer;
}

a.breadcrumb__item {
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.breadcrumb__item:hover {
    color: #1078D8;
    transform: translateX(0.03rem);
}

/* 当前页：不可点击，弱化为 #999 */
.breadcrumb__item.is-current {
    color: #999;
    cursor: default;
}

/* 分隔符 */
.breadcrumb__sep {
    color: #999;
    font-size: 0.14rem;
    line-height: 0.24rem;
    user-select: none;
}

/* Home 图标：24px，悬浮轻旋 */
.breadcrumb__icon {
    display: block;
    width: 0.24rem;
    /* 24px */
    height: 0.24rem;
    /* 24px */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.breadcrumb__item--home:hover .breadcrumb__icon {
    transform: rotate(-14deg) scale(1.12);
}

/* ---------- 入场动效：整条自导航栏下方滑落展开，内容错峰淡入 ----------
   隐藏初始态统一限定在 html.js 下：JS 失效（含缓存空脚本）时内容直接显示 */

html.js .breadcrumb.is-in-view {
    clip-path: inset(0 0 -20% 0);
    transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* 内容项：错峰自左滑入 */
html.js .breadcrumb__item,
html.js .breadcrumb__sep {
    opacity: 0;
    transform: translateX(-0.2rem);
}

.breadcrumb.is-in-view .breadcrumb__item,
.breadcrumb.is-in-view .breadcrumb__sep {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.breadcrumb.is-in-view .breadcrumb__item--home {
    transition-delay: 0.25s;
}

.breadcrumb.is-in-view .breadcrumb__sep:nth-of-type(1) {
    transition-delay: 0.32s;
}

.breadcrumb.is-in-view .breadcrumb__item:nth-of-type(2) {
    transition-delay: 0.38s;
}

.breadcrumb.is-in-view .breadcrumb__sep:nth-of-type(2) {
    transition-delay: 0.44s;
}

.breadcrumb.is-in-view .breadcrumb__item.is-current {
    transition-delay: 0.5s;
}

/* Home 图标：弹性缩放弹入 */
html.js .breadcrumb__icon {
    opacity: 0;
    scale: 0.3;
}

.breadcrumb.is-in-view .breadcrumb__icon {
    opacity: 1;
    scale: 1;
    transition: opacity 0.4s ease 0.25s,
        scale 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.breadcrumb.is-in-view .breadcrumb__item--home:hover .breadcrumb__icon {
    transform: rotate(-14deg) scale(1.12);
}

/* ---------- H5 适配（750 设计稿基准） ---------- */
html[data-mode="h5"] .breadcrumb {
    padding-left: 0.3rem;
}

html[data-mode="h5"] .breadcrumb__item {
    font-size: 0.13rem;
}

/* ---------- 动效减弱（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {

    .breadcrumb,
    .breadcrumb__item,
    .breadcrumb__sep,
    .breadcrumb__icon {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        scale: none !important;
    }
}

/* ============================================================
   第4屏：Ready to Start Your Project? CTA 横幅（复制 about.html 第十屏）
   ============================================================ */
.fourth {
    position: relative;
    height: 5.2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背景：入场时 Ken Burns 缩放回正 */
.fourth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.fourth.is-in-view .fourth__bg {
    transform: scale(1);
}

/* 压暗遮罩，保证文字可读性 */
.fourth__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(2, 18, 38, 0.55) 0%,
            rgba(2, 18, 38, 0.15) 45%,
            rgba(2, 18, 38, 0.5) 100%);
}

.fourth__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.fourth__desc {
    color: #E6E6E6;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 1.5;
}

/* 标题：overflow 裁切 + 上移入场的蒙版揭示效果 */
.fourth__title {
    margin-top: 0.14rem;
    overflow: hidden;
    padding-bottom: 0.06rem;
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.48rem;
    font-weight: 600;
    line-height: 1.2;
}

.fourth__title span {
    display: inline-block;
}

/* ---------- CTA 圆形按钮 ---------- */
.fourth__cta {
    position: relative;
    display: block;
    width: 1.97rem;
    height: 1.97rem;
    margin: 0.22rem auto 0;
}

.fourth__cta-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    background: #EA5404;
    border-radius: 50%;
    transition: transform 0.35s ease;
}

/* ---------- 环形文字：沿圆内侧排布（设计稿 "Share Your Ideas ..."） ---------- */
.fourth__cta-ring-text {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    transform: rotate(-45deg);
    /* 起点转到左下（约 7 点半方向），文字顺时针向上绕排 */
    transition: transform 6s linear;
    pointer-events: none;
}

.fourth__cta-ring-text-inner {
    fill: rgba(255, 255, 255, 0.55);
    font-family: Montserrat, sans-serif;
    font-size: 9px;
    font-weight: 500;
}

.fourth__cta:hover .fourth__cta-ring-text {
    transform: rotate(-405deg);
}

.fourth__cta-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.46rem;
    color: #FFF;
    font-family: Montserrat;
    font-size: 0.16rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01rem;
    text-transform: uppercase;
    text-align: center;
}

/* 圆内右下方的白色小圆点（设计稿 6px、60% 白点，约 4 点半方向） */
.fourth__cta-dot {
    position: absolute;
    top: 70.6%;
    left: 73.6%;
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transition: transform 0.35s ease;
}

/* 呼吸扩散光环（仅在入场后循环播放） */
.fourth__cta-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.46rem;
    height: 1.46rem;
    margin: -0.73rem 0 0 -0.73rem;
    border: 1px solid rgba(234, 84, 4, 0.85);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.fourth.is-in-view .fourth__cta-ring {
    animation: fourth-ring 2.4s ease-out 1.4s infinite;
}

@keyframes fourth-ring {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

/* hover：圆放大、小圆点右移 */
.fourth__cta:hover .fourth__cta-circle {
    transform: scale(1.08);
}

.fourth__cta:hover .fourth__cta-dot {
    transform: translateX(0.08rem);
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ---------- */
html.js .fourth__desc {
    opacity: 0;
    transform: translateY(0.3rem);
    transition: opacity 0.8s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

html.js .fourth__title span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

html.js .fourth__cta {
    transform: scale(0) rotate(-45deg);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
}

html.js .fourth__cta-dot {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease 0.95s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s;
}

html.js .fourth__cta-ring-text {
    opacity: 0;
    transition: opacity 0.7s ease 1.1s, transform 6s linear;
}

.fourth.is-in-view .fourth__cta-ring-text {
    opacity: 1;
}

.fourth.is-in-view .fourth__desc {
    opacity: 1;
    transform: none;
}

.fourth.is-in-view .fourth__title span {
    transform: none;
}

.fourth.is-in-view .fourth__cta {
    transform: none;
}

.fourth.is-in-view .fourth__cta-dot {
    opacity: 1;
    transform: none;
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .fourth {
    height: auto;
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .fourth__desc {
    font-size: 0.24rem;
}

html[data-mode="h5"] .fourth__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .fourth__cta {
    width: 1.7rem;
    height: 1.7rem;
}

html[data-mode="h5"] .fourth__cta-circle {
    width: 1.26rem;
    height: 1.26rem;
    margin: -0.63rem 0 0 -0.63rem;
}

html[data-mode="h5"] .fourth__cta-text {
    width: 1.26rem;
    font-size: 0.18rem;
    letter-spacing: 0;
}

html[data-mode="h5"] .fourth__cta-ring-text {
    width: 1.26rem;
    height: 1.26rem;
    margin: -0.63rem 0 0 -0.63rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    .fourth__bg,
    .fourth.is-in-view .fourth__bg {
        transform: none;
        transition: none;
    }

    html.js .fourth__desc,
    html.js .fourth__title span,
    html.js .fourth__cta,
    html.js .fourth__cta-dot,
    html.js .fourth__cta-ring-text {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fourth.is-in-view .fourth__cta-ring {
        animation: none;
    }
}

/* ============================================================
   sixth —— Three Ways to Customize Your Foam（复制 index 第三屏，1920 基准）
   背景图 + 标题 + 居中模式无限轮播
   ============================================================ */
.sixth {
    position: relative;
    height: 7.82rem;
    overflow: hidden;
}

.sixth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sixth.is-in-view .sixth__bg {
    transform: scale(1);
}

.sixth__shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.sixth__inner {
    position: relative;
    z-index: 1;
}

/* ---------- 标题：蒙版揭示 ---------- */
.sixth__title {
    margin: 1rem 0 0;
    overflow: hidden;
    padding-bottom: 0.05rem;
    text-align: center;
    color: #333333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-weight: 600;
    line-height: 1.2;
}

.sixth__title span {
    display: inline-block;
}

html.js .sixth__title span {
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.sixth.is-in-view .sixth__title span {
    transform: none;
}

/* ---------- 轮播 ---------- */
.sixth__carousel {
    position: relative;
    margin-top: 0.6rem;
}

.sixth__viewport {
    overflow: hidden;
    width: 100%;
    /* 上下留白容纳卡片悬浮上移与阴影，负 margin 抵消避免撑高布局 */
    padding: 0.5rem 0;
    margin: -0.5rem 0;
}

.sixth__track {
    display: flex;
    gap: 1.1rem; /* 110px */
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sixth__card {
    flex: 0 0 11.8rem; /* 1180px */
    display: flex;
    height: 4.54rem; /* 454px */
    background: #FFF;
    box-shadow: 0 0.04rem 0.3rem rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
    cursor: pointer;
}

.sixth__card-media {
    flex: 0 0 4.98rem; /* 498px */
    overflow: hidden;
}

.sixth__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.sixth__card-body {
    flex: 1;
    padding: 0.79rem 0.4rem 0 0.76rem;
    box-sizing: border-box;
}

.sixth__card-icon {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sixth__card-title {
    margin: 0.33rem 0 0;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 1.25;
}

/* 标题下装饰线：hover 时变橙加长 */
.sixth__card-line {
    display: block;
    width: 0.3rem; /* 30px */
    height: 2px;
    margin: 0.18rem 0 0.15rem;
    background: #ACACAC;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}

.sixth__card-desc {
    width: 4.01rem; /* 401px */
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 1.5;
}

.sixth__card-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    width: 1.9rem; /* 190px */
    height: 0.48rem; /* 48px */
    margin-top: 0.52rem;
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    border-radius: 1rem;
    background: #EA5404;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.sixth__card-btn svg {
    width: 0.2rem;
    height: 0.2rem;
    transition: transform 0.3s ease;
}

.sixth__card-btn::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

/* ---------- 左右切换按钮 ---------- */
.sixth__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem; /* 50px */
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease, box-shadow 0.3s ease;
}

.sixth__nav svg {
    display: block;
    width: 0.32rem;
    height: 0.32rem;
}

.sixth__nav--prev,
.sixth__nav--next {
    background: #FFF;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.15);
}

.sixth__nav--prev {
    left: 2.9rem; /* 290px */
}

.sixth__nav--next {
    right: 2.9rem;
}

/* 悬浮：白底变主题橙，箭头同步变白 */
.sixth__nav--prev:hover,
.sixth__nav--next:hover {
    background: #EA5404;
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.45);
}

.sixth__nav:hover svg path {
    stroke: #FFF;
}

/* ---------- 悬浮动效 ---------- */
.sixth__card:hover {
    transform: translateY(-0.12rem);
    box-shadow: 0 0.16rem 0.4rem rgba(0, 0, 0, 0.28);
}

.sixth__card:hover .sixth__card-img {
    transform: scale(1.08);
}

.sixth__card:hover .sixth__card-icon {
    transform: rotate(90deg) scale(1.1);
}

.sixth__card:hover .sixth__card-line {
    width: 0.6rem;
    background: #EA5404;
}

.sixth__card:hover .sixth__card-btn {
    background: #f2600f;
    box-shadow: 0 0.08rem 0.2rem rgba(234, 84, 4, 0.42);
}

.sixth__card:hover .sixth__card-btn svg {
    transform: translate(0.02rem, -0.02rem);
}

.sixth__card:hover .sixth__card-btn::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.sixth__nav:hover {
    transform: translateY(-50%) scale(1.12);
}

.sixth__nav:active {
    transform: translateY(-50%) scale(0.92);
    transition-duration: 0.12s;
}

/* ---------- 入场动效（common.js 滚动加 .is-in-view 触发） ---------- */
/* 卡片：animation + backwards 填充，结束后不残留，避免影响 hover 过渡 */
html.js .sixth:not(.is-in-view) .sixth__card {
    opacity: 0;
}

/* 轮播含首尾克隆（共 9 个子元素），按列位置错峰：1/4/7 → 2/5/8 → 3/6/9 */
.sixth.is-in-view .sixth__card:nth-child(3n+1) {
    animation: sixth-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

.sixth.is-in-view .sixth__card:nth-child(3n+2) {
    animation: sixth-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.sixth.is-in-view .sixth__card:nth-child(3n) {
    animation: sixth-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s backwards;
}

@keyframes sixth-card-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

html.js .sixth__nav {
    opacity: 0;
    transition: opacity 0.6s ease 0.9s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease, box-shadow 0.3s ease;
}

.sixth.is-in-view .sixth__nav {
    opacity: 1;
}

/* ---------- H5 适配 ---------- */
html[data-mode="h5"] .sixth {
    height: auto;
    padding: 0.6rem 0;
}

html[data-mode="h5"] .sixth__title {
    margin-top: 0;
    font-size: 0.32rem;
    padding: 0 0.4rem;
}

html[data-mode="h5"] .sixth__carousel {
    margin-top: 0.4rem;
}

html[data-mode="h5"] .sixth__track {
    gap: 0.3rem;
}

html[data-mode="h5"] .sixth__card {
    flex: 0 0 6rem;
    flex-direction: column;
    height: auto;
}

html[data-mode="h5"] .sixth__card-media {
    flex: 0 0 auto;
    width: 100%;
    height: 3rem;
}

/* ============================================================
   第五屏：Memory Foam（Figma 362_1932：1337 x 392）
   padding 100/260；左图 671x392（圆角 20）+ 间距 119 + 右内容区 547
   （顶部偏移 99）：标题 40px/600/#333 → 描述 16px/400/#666
   ============================================================ */
.fifth {
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 2.6rem;
    /* 100px 260px */
}

.fifth__inner {
    display: flex;
    align-items: flex-start;
}

/* 左图：671 x 392，圆角 20 */
.fifth__img {
    flex: 0 0 6.71rem;
    display: block;
    width: 6.71rem;
    height: 3.92rem;
    border-radius: 0.2rem;
    object-fit: cover;
}

/* 右内容区：宽 547，间距 119，顶部偏移 99 */
.fifth__content {
    flex: 0 1 5.47rem;
    min-width: 0;
    margin-left: 1.19rem;
    padding-top: 0.99rem;
}

/* 标题：40px / 600 / #333 */
.fifth__title {
    margin: 0;
    overflow: hidden;
    padding-bottom: 0.05rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.fifth__title span {
    display: inline-block;
}

/* 描述：16px / 400 / #666，宽 547，标题下 24 */
.fifth__desc {
    margin: 0.24rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   图片斜向擦除揭示 + 模糊缩放聚焦 → 标题蒙版揭示 → 描述逐字上浮
   ============================================================ */
html.js .fifth__img,
html.js .fifth__title,
html.js .fifth__desc {
    opacity: 0;
}

/* 图片：斜向 clip 擦除 + 模糊缩放聚焦 */
.fifth.is-in-view .fifth__img {
    opacity: 1;
    animation: fifth-img-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

@keyframes fifth-img-in {
    from {
        opacity: 0;
        filter: blur(0.12rem) brightness(1.2);
        transform: scale(1.1) rotate(1.5deg);
        clip-path: inset(0 0 100% 100%);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 1;
        filter: none;
        transform: none;
        clip-path: inset(0 0 0 0);
    }
}

/* 标题：蒙版揭示 + 上浮 */
.fifth.is-in-view .fifth__title {
    opacity: 1;
    animation: fifth-title-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards;
}

@keyframes fifth-title-in {
    from {
        opacity: 0;
        transform: translateY(0.55rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

/* 描述：模糊上浮淡入 */
.fifth.is-in-view .fifth__desc {
    opacity: 1;
    animation: fifth-desc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
}

@keyframes fifth-desc-in {
    from {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ---------- H5 适配（750 设计稿基准） ---------- */
html[data-mode="h5"] .fifth {
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .fifth__inner {
    flex-direction: column;
}

html[data-mode="h5"] .fifth__img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 671 / 392;
}

html[data-mode="h5"] .fifth__content {
    flex: 0 0 auto;
    margin: 0.4rem 0 0;
    padding-top: 0;
}

html[data-mode="h5"] .fifth__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .fifth__desc {
    font-size: 0.22rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .fifth__img,
    html.js .fifth__title,
    html.js .fifth__desc,
    .fifth.is-in-view .fifth__img,
    .fifth.is-in-view .fifth__title,
    .fifth.is-in-view .fifth__desc {
        opacity: 1;
        transform: none;
        clip-path: none;
        filter: none;
        transition: none;
        animation: none;
    }
}

/* ============================================================
   第五屏（镜像行）：Latex Foam（Figma 362_1933：1341 x 392）
   内容在左（宽 547，间距 123）+ 右图 671x392（圆角 20）
   与上一行共用 .fifth 基础样式，仅镜像排布与专属动画
   ============================================================ */
.fifth__inner--rev {
    margin-top: 0.6rem;
}

/* 镜像行：内容在左，图片在右，间距 123 */
.fifth__inner--rev .fifth__content {
    margin-left: 0;
}

.fifth__inner--rev .fifth__img {
    margin-left: 1.23rem;
}

/* ============================================================
   镜像行入场动效：图片自右侧擦除揭示（与首行方向相反）
   → 标题蒙版揭示 → 描述模糊上浮（错峰后移，营造交错感）
   ============================================================ */
html.js .fifth__inner--rev .fifth__img,
html.js .fifth__inner--rev .fifth__title,
html.js .fifth__inner--rev .fifth__desc {
    opacity: 0;
}

/* 图片：自右向左擦除揭示 + 反向微旋缩放聚焦 */
.fifth.is-in-view .fifth__inner--rev .fifth__img {
    opacity: 1;
    animation: fifth2-img-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

@keyframes fifth2-img-in {
    from {
        opacity: 0;
        filter: blur(0.12rem) brightness(1.2);
        transform: scale(1.1) rotate(-1.5deg);
        clip-path: inset(0 100% 0 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 1;
        filter: none;
        transform: none;
        clip-path: inset(0 0 0 0);
    }
}

/* 标题：蒙版自顶部揭示（区别于首行底部揭示） */
.fifth.is-in-view .fifth__inner--rev .fifth__title {
    opacity: 1;
    animation: fifth2-title-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards;
}

@keyframes fifth2-title-in {
    from {
        opacity: 0;
        transform: translateY(-0.55rem);
        clip-path: inset(100% 0 0 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 -10% 0);
    }
}

/* 描述：左滑模糊淡入 */
.fifth.is-in-view .fifth__inner--rev .fifth__desc {
    opacity: 1;
    animation: fifth2-desc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
}

@keyframes fifth2-desc-in {
    from {
        opacity: 0;
        transform: translateX(0.3rem);
        filter: blur(0.04rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ---------- H5 适配（750 设计稿基准） ---------- */
html[data-mode="h5"] .fifth__inner--rev {
    margin-top: 0.6rem;
}

html[data-mode="h5"] .fifth__inner--rev .fifth__img {
    margin-left: 0;
    order: -1;
    /* H5 下图片置顶 */
}

/* ============================================================
   第二屏：PU Foam（Figma 358_1818：1759 x 340）
   padding 100/0/100/260；左列 621：标题 40px/600/#333（top 18）
   → 描述 16px/#666（top 87）→ 底部两个 50x50 圆形切换按钮
   （默认 #F2F3ED/#999 图标，悬浮 #EA5404/白图标，间距 20）
   右侧无限轮播：卡片 518x340 圆角 10、间距 26，向右出血到页面边缘
   ============================================================ */
.second {
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 1rem 0 1rem 2.6rem;
    /* 100 0 100 260 */
}

.second__inner {
    display: flex;
    align-items: flex-start;
}

/* 左列：621，与轮播同高 */
.second__left {
    flex: 0 0 6.21rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 3.4rem;
}

/* 标题：40px / 600 / #333，顶部偏移 18 */
.second__title {
    margin: 0.18rem 0 0;
    overflow: hidden;
    padding-bottom: 0.05rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.second__title span {
    display: inline-block;
}

/* 描述：16px / 400 / #666，宽 621，标题下 20 */
.second__desc {
    margin: 0.2rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

/* 切换按钮：贴左列底部 */
.second__navs {
    display: flex;
    gap: 0.2rem;
    margin-top: auto;
}

/* 按钮：50 x 50 圆形，默认 #F2F3ED / #999 图标 → 悬浮 #EA5404 / 白图标 */
.second__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #F2F3ED;
    color: #999;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.second__nav svg {
    display: block;
    width: 0.32rem;
    /* 32px */
    height: 0.32rem;
    /* 按钮为 flex 居中，图标保持正中 */
}

.second__nav:hover {
    background: #EA5404;
    color: #FFF;
    transform: scale(1.08);
}

.second__nav:active {
    transform: scale(0.92);
    transition-duration: 0.12s;
}

/* 右侧轮播：占满剩余宽度直至页面右缘（右 padding 为 0） */
.second__carousel {
    flex: 1;
    min-width: 0;
    margin-left: 0.76rem;
    overflow: hidden;
}

.second__track {
    display: flex;
    gap: 0.26rem;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* 卡片：518 x 340，圆角 10 */
.second__card {
    flex: 0 0 5.18rem;
    display: block;
    width: 5.18rem;
    height: 3.4rem;
    border-radius: 0.1rem;
    object-fit: cover;
    user-select: none;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   标题蒙版揭示 → 描述模糊上浮 → 按钮错峰回弹弹出
   → 轮播卡片错峰自右滑入 + 依次揭示
   ============================================================ */
html.js .second__title,
html.js .second__desc,
html.js .second__nav,
html.js .second__card {
    opacity: 0;
}

/* 标题：蒙版揭示 */
.second.is-in-view .second__title {
    opacity: 1;
    animation: second2-title-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

@keyframes second2-title-in {
    from {
        opacity: 0;
        transform: translateY(0.55rem);
        clip-path: inset(0 0 100% 0);
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(-10% 0 0 0);
    }
}

/* 描述：模糊上浮 */
.second.is-in-view .second__desc {
    opacity: 1;
    animation: second2-desc-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards;
}

@keyframes second2-desc-in {
    from {
        opacity: 0;
        transform: translateY(0.3rem);
        filter: blur(0.04rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 按钮：错峰回弹弹出 */
.second.is-in-view .second__nav {
    opacity: 1;
    animation: second2-nav-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.second.is-in-view #secondPrev {
    animation-delay: 0.6s;
}

.second.is-in-view #secondNext {
    animation-delay: 0.72s;
}

@keyframes second2-nav-in {
    from {
        opacity: 0;
        transform: scale(0.2) rotate(-90deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 轮播卡片：错峰自右滑入揭示（含首尾克隆，按 2n 错峰） */
html.js .second:not(.is-in-view) .second__card {
    opacity: 0;
}

.second.is-in-view .second__card:nth-child(2n+1) {
    opacity: 1;
    animation: second2-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

.second.is-in-view .second__card:nth-child(2n) {
    opacity: 1;
    animation: second2-card-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s backwards;
}

@keyframes second2-card-in {
    from {
        opacity: 0;
        transform: translateX(0.5rem) scale(0.94);
        clip-path: inset(0 0 0 60%);
        border-radius: 1rem;
    }

    70% {
        clip-path: inset(0 0 0 0);
        border-radius: 0.1rem;
    }

    to {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
        border-radius: 0.1rem;
    }
}

/* ---------- H5 适配（750 设计稿基准） ---------- */
html[data-mode="h5"] .second {
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .second__inner {
    flex-direction: column;
}

html[data-mode="h5"] .second__left {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
}

html[data-mode="h5"] .second__title {
    margin-top: 0;
}

html[data-mode="h5"] .second__desc {
    font-size: 0.22rem;
}

html[data-mode="h5"] .second__navs {
    margin-top: 0.3rem;
}

html[data-mode="h5"] .second__carousel {
    flex: 0 0 auto;
    width: 100%;
    margin: 0.4rem 0 0;
}

html[data-mode="h5"] .second__track {
    gap: 0.2rem;
}

html[data-mode="h5"] .second__card {
    flex: 0 0 5.6rem;
    width: 5.6rem;
    height: 3.68rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .second__title,
    html.js .second__desc,
    html.js .second__nav,
    html.js .second__card,
    html.js .second:not(.is-in-view) .second__card,
    .second.is-in-view .second__title,
    .second.is-in-view .second__desc,
    .second.is-in-view .second__nav,
    .second.is-in-view .second__card {
        opacity: 1;
        transform: none;
        clip-path: none;
        filter: none;
        transition: none;
        animation: none;
    }
}

/* ============================================================
   第3屏：Materials 手风琴（Figma 362_1893：1920 x 860）
   背景 #F9FAF4；容器 1400 居中（左右 260）；上下 padding 78/84
   条目分隔线 1px #C6CDD7；条目 = 左头部(图标16/标题79) + 右面板(左起761)
   展开项右面板：标题 20px/600（top 43）→ 描述 20px/400/#666 宽 518
   → 图片 333x219 圆角 10（top 236）
   高度全部由 padding + 内容撑开，不写固定高度
   ============================================================ */
.third {
    box-sizing: border-box;
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding: 0.78rem 2.6rem 0.84rem;
    background: #F9FAF4;
}

.third__inner {
    width: 14rem;
    /* 1400px */
    margin: 0 auto;
}

/* 条目：flex 行（左头部 + 右面板），上下 1px 分隔线 */
.third__item {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #C6CDD7;
}

.third__item:first-child {
    border-top: 1px solid #C6CDD7;
}

/* 头部：761px 区域；收起态标题 top 36（垂直居中），展开态 top 48 */
.third__head {
    flex: 0 0 7.61rem;
    position: relative;
    box-sizing: border-box;
    padding: 0.36rem 0 0.36rem 0.79rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__item.is-open .third__head {
    padding-top: 0.48rem;
}

/* 圆形图标：30x30，收起=加号，展开=减号（竖线缩隐 + 整体旋转） */
.third__icon {
    position: absolute;
    left: 0.16rem;
    top: 0.36rem;
    width: 0.3rem;
    height: 0.3rem;
    color: #333;
    transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.3s ease;
}

.third__item.is-open .third__icon {
    top: 0.48rem;
}

.third__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__item.is-open .third__icon svg {
    transform: rotate(180deg);
}

.third__icon-v {
    transform-origin: 15px 15px;
    transition: transform 0.35s ease, opacity 0.3s ease;
}

.third__item.is-open .third__icon-v {
    transform: scaleY(0);
    opacity: 0;
}

/* 头部标题：24px / 600 / #333 */
.third__title {
    margin: 0;
    overflow: hidden;
    padding-bottom: 0.04rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 0.3rem;
    transition: color 0.3s ease;
}

.third__title span {
    display: inline-block;
}

.third__head:hover .third__title,
.third__item.is-open .third__title {
    color: #EA5404;
}

.third__head:hover .third__icon {
    color: #EA5404;
}

/* 右面板：grid-rows 0fr→1fr 动画展开（高度由内容决定） */
.third__panel {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__item.is-open .third__panel {
    grid-template-rows: 1fr;
}

.third__panel-clip {
    overflow: hidden;
    min-height: 0;
}

/* 面板内容：标题 top 43 / 描述 / 图片 top 236（间距由 margin 撑出） */
.third__body {
    padding: 0.43rem 0 0.56rem 0;
}

.third__body-title {
    margin: 0;
    overflow: hidden;
    padding-bottom: 0.04rem;
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-weight: 600;
    line-height: normal;
}

.third__body-title span {
    display: inline-block;
}

.third__body-desc {
    max-width: 5.18rem;
    margin: 0.15rem 0 0;
    color: #666;
    font-family: Montserrat, sans-serif;
    font-size: 0.2rem;
    font-weight: 400;
    line-height: 1.5;
}

.third__body-img {
    display: block;
    width: 3.33rem;
    height: 2.19rem;
    margin-top: 0.32rem;
    border-radius: 0.1rem;
    object-fit: cover;
    background: #D9D9D9;
}

/* ============================================================
   入场动效（common.js 滚动加 .is-in-view 触发）
   条目错峰模糊上浮 → 头部标题蒙版揭示 → 图标回弹旋入
   → 展开项：面板标题蒙版揭示 / 描述模糊上浮 / 图片自上而下擦除揭示
   ============================================================ */
html.js .third__item {
    opacity: 0;
}

.third.is-in-view .third__item {
    opacity: 1;
    animation: third-item-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.third.is-in-view .third__item:nth-child(1) {
    animation-delay: 0.1s;
}

.third.is-in-view .third__item:nth-child(2) {
    animation-delay: 0.28s;
}

.third.is-in-view .third__item:nth-child(3) {
    animation-delay: 0.46s;
}

@keyframes third-item-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        filter: blur(0.06rem);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 头部标题：蒙版揭示（跟随各条目错峰） */
html.js .third__title span {
    transform: translateY(110%);
}

.third.is-in-view .third__title span {
    transform: none;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.third.is-in-view .third__item:nth-child(1) .third__title span {
    transition-delay: 0.35s;
}

.third.is-in-view .third__item:nth-child(2) .third__title span {
    transition-delay: 0.53s;
}

.third.is-in-view .third__item:nth-child(3) .third__title span {
    transition-delay: 0.71s;
}

/* 图标：反向旋转 + 回弹缩放旋入 */
html.js .third__icon {
    opacity: 0;
    scale: 0.2;
    rotate: -180deg;
}

.third.is-in-view .third__icon {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    transition: opacity 0.4s ease, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        top 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.third.is-in-view .third__item:nth-child(1) .third__icon {
    transition-delay: 0.45s, 0.45s, 0.45s, 0s, 0s;
}

.third.is-in-view .third__item:nth-child(2) .third__icon {
    transition-delay: 0.63s, 0.63s, 0.63s, 0s, 0s;
}

.third.is-in-view .third__item:nth-child(3) .third__icon {
    transition-delay: 0.81s, 0.81s, 0.81s, 0s, 0s;
}

/* 展开项面板内容：切换与入场共用（is-open 驱动，错峰揭示） */
html.js .third__body-title span {
    transform: translateY(110%);
}

html.js .third__body-desc,
html.js .third__body-img {
    opacity: 0;
    transform: translateY(0.3rem);
    filter: blur(0.04rem);
}

html.js .third__body-img {
    clip-path: inset(0 0 100% 0);
    transform: none;
}

.third__body-title span {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.third__body-desc,
.third__body-img {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease, clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.third.is-in-view .third__item.is-open .third__body-title span {
    transform: none;
    transition-delay: 0.55s;
}

.third.is-in-view .third__item.is-open .third__body-desc {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: 0.7s;
}

.third.is-in-view .third__item.is-open .third__body-img {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
    transition-delay: 0.85s;
}

/* ---------- H5 适配（750 设计稿基准） ---------- */
html[data-mode="h5"] .third {
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .third__inner {
    width: 100%;
}

html[data-mode="h5"] .third__item {
    flex-direction: column;
}

html[data-mode="h5"] .third__head {
    flex: 0 0 auto;
    width: 100%;
    padding: 0.3rem 0 0.3rem 0.72rem;
}

html[data-mode="h5"] .third__item.is-open .third__head {
    padding-top: 0.34rem;
}

html[data-mode="h5"] .third__icon {
    left: 0.16rem;
    top: 0.3rem;
    width: 0.34rem;
    height: 0.34rem;
}

html[data-mode="h5"] .third__item.is-open .third__icon {
    top: 0.34rem;
}

html[data-mode="h5"] .third__title {
    font-size: 0.28rem;
    line-height: 0.34rem;
}

html[data-mode="h5"] .third__body {
    padding: 0.06rem 0 0.4rem;
}

html[data-mode="h5"] .third__body-title {
    font-size: 0.26rem;
}

html[data-mode="h5"] .third__body-desc {
    max-width: 100%;
    margin-top: 0.16rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .third__body-img {
    width: 4.2rem;
    height: 2.76rem;
}

/* 系统开启"减少动态效果"时：直接显示，不做动画 */
@media (prefers-reduced-motion: reduce) {

    html.js .third__item,
    html.js .third__title span,
    html.js .third__icon,
    html.js .third__body-title span,
    html.js .third__body-desc,
    html.js .third__body-img,
    .third.is-in-view .third__item,
    .third.is-in-view .third__title span,
    .third.is-in-view .third__icon,
    .third.is-in-view .third__body-title span,
    .third.is-in-view .third__body-desc,
    .third.is-in-view .third__body-img {
        opacity: 1;
        transform: none;
        scale: none;
        rotate: none;
        filter: none;
        clip-path: none;
        transition: none;
        animation: none;
    }
}