/* ========== 1. 懒加载核心样式（优化：缩短过渡、统一节奏） ========== */
.qr-guide-card {
    opacity: 0;
    transform: translateX(50px);
    /* 统一过渡时长：0.3s 比原来0.4s更快，视觉更轻盈 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
}

/* 显示状态：和主类过渡一致，避免触发异常 */
.qr-guide-card.show {
    opacity: 1;
    transform: translateX(0);
}

/* ========== 2. 渐变流动边框+悬浮效果（优化：删冗余、调时长、改缓动） ========== */
/* 渐变边框底层 */
.qr-guide-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(#1377EB, #36CFC9, #722ED1, #F7BA1E, #1377EB);
    /* 删冗余：去掉无用的 rotate(0deg) */
    transform: translate(-50%, -50%);
    /* 关键优化：和主元素同时长0.3s，缓动一致，避免脱节 */
    transition: transform 0.3s ease-out;
    z-index: -2;
}
/* 白色背景层，只留出2px的边框位置 */
.qr-guide-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #fff;
    border-radius: 6px;
    z-index: -1;
}

/* 悬停效果：上浮+阴影+边框流动 */
.qr-guide-card:hover {
    transform: translateX(0) translateY(-8px);
    box-shadow: 0 12px 28px rgba(19, 119, 235, 0.15);
}
.qr-guide-card:hover::before {
    transform: translate(-50%, -50%) rotate(180deg);
}