/* ======================================
   第四轮迭代：第一性原理交互优化
   目标：更柔和的悬停动效 + 系统闭环文字重排
   ====================================== */

/* ---------- 第一性原理卡片项 (.principle-item) ---------- */
.principle-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-inline: 5px;
    transition: 
        border-color .65s ease,
        color .65s ease;
}

/* 卡片背景装饰层（伪元素实现渐变光晕） */
.principle-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px 0;
    border-radius: 24px;
    background: linear-gradient(
        110deg,
        rgba(255,255,255,.8),
        rgba(239,229,248,.52),
        rgba(255,248,225,.46)
    );
    opacity: 0;
    transform: scaleX(.96);
    transform-origin: center;
    transition: 
        opacity .65s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1),
        box-shadow .8s cubic-bezier(.22,1,.36,1);
}

/* 卡片悬停态 */
.principle-item:hover {
    padding-left: 5px;
    padding-right: 5px;
    background: transparent;
    border-color: rgba(154,120,191,.22);
}

/* 悬停时显示背景光晕 */
.principle-item:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* 点击时的微压感反馈 */
.principle-item:active::before {
    transform: scaleX(.992) scaleY(.97);
}

/* 卡片内子元素基础过渡 */
.principle-item > span {
    transition: 
        color .55s ease,
        transform .7s cubic-bezier(.22,1,.36,1);
}

.principle-item > div {
    transition: transform .75s cubic-bezier(.22,1,.36,1);
}

.principle-item > i {
    transition: 
        transform .75s cubic-bezier(.22,1,.36,1),
        color .55s ease;
}

/* 悬停时子元素位移 & 颜色变化 */
.principle-item:hover > span {
    color: #7d54a3;
    transform: translateX(8px);
}

.principle-item:hover > div {
    transform: translateX(12px);
}

.principle-item:hover > i {
    color: #8e68b1;
    transform: translate(-9px,-2px) rotate(45deg);
}


/* ---------- 系统闭环区域 (.system-heading / .data-loop) ---------- */
.system-heading {
    display: block;
}

.system-heading h2 {
    margin-bottom: 0;
}

/* 数据闭环容器 */
.data-loop {
    flex-wrap: wrap;
    row-gap: 12px;
}

/* 闭环说明文案 */
.loop-copy {
    flex: 1 1 330px;
    max-width: 520px;
    margin: 0 0 0 8px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -.01em;
}


/* ======================================
   响应式适配
   ====================================== */

/* 平板及以下：简化动效 + 调整布局 */
@media (max-width: 760px) {
    /* 禁用卡片悬停位移 */
    .principle-item:hover > span,
    .principle-item:hover > div,
    .principle-item:hover > i {
        transform: none;
    }

    .data-loop {
        align-items: flex-start;
    }

    .loop-copy {
        flex-basis: 100%;
        margin: 8px 0 0;
        font-size: 14px;
    }

    .data-loop .loop-divider {
        display: none;
    }
}

/* 减少动画偏好：完全关闭过渡 */
@media (prefers-reduced-motion: reduce) {
    .principle-item,
    .principle-item::before,
    .principle-item > * {
        transition: none !important;
    }
}