/* ========== 邀请有礼页面样式 ========== */
/* 后续会替换为实际图标，统一样式便于维护 */
.invite-placeholder {
    display: inline-block;
    background-color: #FF4D4F;
    border-radius: 0.25rem;
    flex-shrink: 0;
    vertical-align: middle;
}

/* 页面整体背景 */
.invite-page {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

/* 通用内容容器（与 vipService 保持一致宽度 75rem = 1200px） */
.invite-container {
    width: 75rem;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===========================================
   一、Hero 区
   背景图来源：/static/img/inviteImages/topBanner.png
   与 vipService 同款做法：
   标题/副标题/吉祥物都在背景图里，只保留按钮
   =========================================== */
.invite-hero {
    width: 100%;
    height: 23.75rem;
    background: url(/static/img/inviteImages/topBanner.png);
    background-size: 100% 23.75rem;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.invite-hero-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    padding: 0 1.875rem;
    box-sizing: border-box;
    font-family: Alibaba PuHuiTi;
    font-size: 1.25rem;
    font-weight: normal;
    color: #ffffff;
    border-radius: 1.75rem;
    background: linear-gradient(270deg, #ff574e 0%, #ff643a 100%);
    border: 0.125rem solid #FFFFFF;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(255, 100, 58, 0.2);
    cursor: pointer;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    bottom: 3rem;
    left: 22.5rem;
    /*配合::before高光扫光需要*/
    overflow: hidden;
    z-index: 2;
    /* 呼吸灯效果：吸引用户点击。基础阴影用稍亮一些的色值；外圈双层光晕从无到最大并渐隐，
       颜色更饱和、扩散更远，整体比之前更明显 */
    animation: inviteHeroBtnBreathe 2.2s ease-in-out infinite;
}

/* 呼吸灯关键帧：
   - 第 1 个 box-shadow 是按钮本身的固定阴影（保持原 hover/active 效果兼容）
   - 第 2、3 个 box-shadow 是"双层光环"——
     内圈：spread 0 → 1.25rem，alpha 0.6 → 0
     外圈：spread 0 → 2.5rem，alpha 0.45 → 0
   - alpha 不再以 0 起步（保留 0.05 兜底），避免 ring 在最小态"完全消失再出现"的硬切，
     视觉上是连续的从暗到亮再到暗的呼吸（与 inviteNextMarkerBreathe 思路一致）
   - box-shadow 不受 overflow:hidden 影响，可以延伸到按钮外面形成光晕 */
@keyframes inviteHeroBtnBreathe {

    0%,
    100% {
        box-shadow: 0 0.375rem 0.875rem 0 rgba(255, 100, 58, 0.28),
            0 0 0 0 rgba(255, 100, 58, 0.6),
            0 0 0 0 rgba(255, 100, 58, 0.45);
    }

    50% {
        box-shadow: 0 0.375rem 0.875rem 0 rgba(255, 100, 58, 0.28),
            0 0 0 1.25rem rgba(255, 100, 58, 0.05),
            0 0 0 2.5rem rgba(255, 100, 58, 0.05);
    }
}

/* 高光扫光层（与 vipService 同款） */
.invite-hero-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
    transition: left 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.invite-hero-btn:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5rem 0 rgba(255, 79, 80, 0.45);
}

.invite-hero-btn:hover::before {
    left: 100%;
}

.invite-hero-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(255, 79, 80, 0.35);
}

.invite-hero-btn .arrow-icon {
    display: inline-block;
    /* 与 vipService 同名关键帧，便于未来收敛到 home.css 公共样式 */
    animation: arrowWiggle 2s ease-in-out infinite;
}

@keyframes arrowWiggle {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0.5rem);
    }
}

/* ===========================================
   二、活动奖励
   =========================================== */
.invite-reward {
    width: 100%;
    background: #ffffff;
    margin-top: 2.5rem;
    padding-bottom: 1.25rem;
    box-sizing: border-box;
}

/* 公共 section 标题（活动奖励 / 奖励测算 / 参与步骤）*/
.invite-section-title {
    text-align: center;
    margin: 0;
}

.invite-section-title-img {
    object-fit: cover;
}

.invite-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.invite-reward-card {
    border-radius: 1.125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 0.625rem 1.25rem 0px rgba(181, 27, 27, 0.05);
}

.invite-reward-card-header {
    width: 36.875rem;
    height: 3.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.125rem;
}

.invite-reward-card-desc {
    font-family: Source Han Sans CN;
    font-size: 1rem;
    line-height: normal;
    font-weight: 500;
    color: #9E9E9E;
    margin: 0 1.375rem;
    display: flex;
    align-items: center;
}

.invite-reward-card-value {
    font-family: Source Han Sans CN;
    font-size: 2.25rem;
    line-height: normal;
    font-weight: 900;
    color: #000000;
    margin: 1.25rem 1.375rem 0.75rem;
}

.invite-tip-black {
    color: #333333;
}

.invite-tip-orange {
    color: #FE7A4F;
}

.invite-tip-icon {
    width: 1rem;
    height: 1rem;
    object-fit: cover;
    margin: 0 0.375rem;
    margin-top: 0.4375rem;
}

/* ===========================================
   二、活动奖励 - "实付金额"提示弹窗（原生 hover 实现）
   参考原 Vue a-tooltip 样式：白底/圆角/阴影 + 蓝点列表
   =========================================== */
.invite-payment-tip {
    /* inline-block 给内部 absolute 弹层提供定位上下文，且不破坏行内换行 */
    position: relative;
    display: inline-block;
}

.invite-payment-tip .invite-tip-icon {
    /* 覆盖上一行通用样式：加上 cursor + hover 微反馈 */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.invite-payment-tip .invite-tip-icon:hover,
.invite-payment-tip .invite-tip-icon:focus {
    /* 放大效果需 transform-origin 居中，避免光晕偏移 */
    transform: scale(1.15);
    outline: none;
}

.invite-payment-tip-popup {
    /* 弹层定位：图标正上方居中，bottom 100% + 8px 间距，宽度限制参考原 a-tooltip */
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 22.125rem;   /* 约 354px，略低于原 min-width 320 让窄卡片更好看 */
    max-width: 23.75rem;    /* 380px */
    background: #ffffff;
    color: #333333;
    border-radius: 0.5rem;  /* 8px */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    padding: 0.875rem 1.125rem;  /* 14px 18px */
    font-size: 0.8125rem;   /* 13px */
    line-height: 1.7;
    text-align: left;
    z-index: 100;
    /* 默认隐藏，hover/focus 时显示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 触发条件：包裹层 hover 或内部任意元素获得焦点（键盘可达性） */
.invite-payment-tip:hover .invite-payment-tip-popup,
.invite-payment-tip:focus-within .invite-payment-tip-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 箭头：白色方块旋转 45° 做出朝下三角，box-shadow 与弹层协调 */
.invite-payment-tip-arrow {
    position: absolute;
    bottom: -0.375rem;  /* -6px，让方块一半露出弹层下边缘 */
    left: 50%;
    /* 注意 translateX(-50%) + rotate(45deg) 不能合并写，复合 transform 顺序敏感 */
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.06);
    z-index: 1;
}

/* 弹层内容：一级蓝色实心圆点 + 二级蓝色空心圆点（对应原 a-tooltip 样式） */
.invite-payment-tip-content {
    display: block;
    color: #666666;
}

.invite-payment-tip-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 一级列表项：蓝实心圆点 */
.invite-payment-tip-content > ul > li {
    position: relative;
    padding-left: 0.875rem;   /* 14px */
    margin-bottom: 0.5rem;    /* 8px */
}

.invite-payment-tip-content > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;   /* 8px，配合 line-height 1.7 让圆点垂直居中 */
    width: 0.375rem;   /* 6px */
    height: 0.375rem;
    background: #3a69f9;
    border-radius: 50%;
}

/* 一级 strong 文字：与正文同色加粗，不加额外颜色 */
.invite-payment-tip-content > ul > li > strong {
    color: #333333;
    font-weight: 600;
}

/* 二级列表：缩进 + 蓝空心圆圈 + 灰色字号 */
.invite-payment-tip-content > ul > li > ul {
    margin-top: 0.375rem;     /* 6px */
    padding-left: 0.375rem;   /* 6px */
}

.invite-payment-tip-content > ul > li > ul > li {
    position: relative;
    padding-left: 0.875rem;   /* 14px */
    margin-top: 0.25rem;      /* 4px */
    color: #666666;
    font-size: 0.75rem;       /* 12px */
}

.invite-payment-tip-content > ul > li > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5625rem;  /* 9px */
    width: 0.3125rem; /* 5px */
    height: 0.3125rem;
    background: #ffffff;
    border: 0.0625rem solid #3a69f9;   /* 1px */
    border-radius: 50%;
    box-sizing: border-box;
}

/* ===========================================
   三、奖励测算
   =========================================== */
.invite-calc {
    width: 100%;
    background: #ffffff;
    padding-bottom: 2rem;
}

.invite-calc-card {
    background: #ffffff;
    border-radius: 1.125rem;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(255, 107, 53, 0.08);
    padding: 1.875rem 2.5rem;
    box-sizing: border-box;
}

.invite-calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.invite-calc-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invite-calc-header-label {
    font-family: Source Han Sans SC;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333333;
}

/* 段位徽章容器：现在仅作为 <img> 包裹元素，背景与文字都已在图片里 */
.invite-calc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border-radius: 0.875rem;
    box-sizing: border-box;
    /* 保留 transition 以便后续如需切换图片时有过渡 */
    transition: opacity 0.3s ease;
}

/* 段位徽章图片（lv_1 ~ lv_5.png）*/
.invite-calc-badge-img {
    display: block;
    width: 9.375rem;
    height: 3rem;
    object-fit: contain;
    user-select: none;
}

.invite-calc-header-right {
    display: flex;
    align-items: center;
}

.invite-calc-estimate-label {
    font-family: Source Han Sans CN;
    font-size: 1.125rem;
    font-weight: 350;
    line-height: normal;
    color: #333333;
    margin-right: 0.625rem;
}

.invite-calc-estimate-value {
    font-family: Source Han Sans CN;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
    color: #000000;
    margin: 0 1rem;
    min-width: 1.5rem;
    text-align: center;
}

/* 模拟查看的 - N + 三件套容器 */
.invite-calc-counter {
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.invite-calc-counter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    border-radius: 50%;
    transition: opacity 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.invite-calc-counter-btn:hover {
    transform: scale(1.08);
}

.invite-calc-counter-btn:active {
    transform: scale(0.95);
}

.invite-calc-counter-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.invite-calc-counter-icon {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: cover;
    display: block;
}

/* ----- 进度条 -----
   关键对齐：
   1) 进度条轨道(.invite-progress-bar)铺满卡片宽度（无左右 margin），灰色背景全宽可见
   2) 渐变填充条(.invite-progress-fill)的"右端"要对齐下方对应 marker 数字
      ——marker 容器(.invite-progress-markers)左右各 6.625rem 缩进，所以 marker row 宽度
        = 轨道宽度 - 13.25rem；4 个 marker 在 marker row 内用 space-between 均匀分布
        （位置 0、1/3、2/3、1），对应数值 1/5/10/20
   3) fill 宽度由 JS 根据 count 在 4 个 marker 位置之间做分段线性插值得到
      （详见 invite.html 中 getFillPercent 函数）*/
.invite-progress {
    position: relative;
    margin: 1rem 0 0.5rem;
}

.invite-progress-bar {
    position: relative;
    width: 100%;
    /* 铺满卡片宽度，无左右 margin；灰色 track 全宽可见 */
    margin: 0;
    height: 0.5rem;
    background: #F1F5F9;
    border-radius: 0.25rem;
    overflow: visible;
    box-sizing: border-box;
}

.invite-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    /* 默认 0%。width 由 JS 通过 getFillPercent(count) 计算：
       ——根据 count 在 4 个 marker 数字中心位置（7.5/25.833/44.167/62.5rem）之间
         做分段线性插值，再换算成相对轨道宽度（70rem）的百分比
       ——这样 fill 右端才能精确对齐下方对应 marker 数字（count=1 对齐"1"、count=5 对齐"5" 等）
       transition 始终在 width 上，所以 width 变化时会自动平滑过渡 */
    /* 进度条渐变色：左红 → 中橙 → 右黄，呼应 marker 三个状态的色系 */
    background: linear-gradient(270deg, #f53f3f 0%, #fe774f 42%, #faad14 100%);
    border-radius: 0.25rem;
    transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.invite-progress-markers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 关键间距：左右各 6.625rem 缩进，让"1"和"20"两个 marker 落在卡片内容区内侧
       ——进度条轨道本身是铺满卡片宽度的（无 margin），但 fill 的右端要对齐 marker，
         所以 fill 宽度由 JS 按 4 个 marker 位置（0/1/3/2/3/1）做分段线性插值
       ——marker row 宽度 = 70rem - 13.25rem = 56.75rem */
    margin: 1.125rem 6.625rem 0;
    padding: 0;
    box-sizing: border-box;
}

.invite-progress-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    position: relative;
}

.invite-progress-marker-num {
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: bold;
    color: #FFFFFF;
    width: 1.75rem;
    height: 1.75rem;
    text-align: center;
    border-radius: 50%;
    /* 下一个目标：红粉渐变 + 浅红实心外环（#ffdbdc） + 呼吸灯外环 */
    background: linear-gradient(180deg, #FF8A80 0%, #FF4D4F 100%);
    box-shadow: 0 0 0 0.25rem #ffdbdc;
    display: inline-block;
    box-sizing: border-box;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    /* 红色（next）状态专属呼吸灯（参照 .invite-hero-btn 的双层脉冲风格，2s ease-in-out）：
       - 静态粉环（#ffdbdc 0.25rem）始终保留，作为 marker 的固定外环
       - 双层红光环从 0.25rem 起步，向 0.5rem 与 0.75rem 扩散并淡出（光晕贴身，不再外扩到上方进度条）
       - 终点 alpha 保留 0.05（不归零）——避免"消失+出现"的硬切，整圈是连续的从暗到亮再到暗的呼吸
       - 双层错落让光晕更有层次（内圈亮且近、外圈淡且稍远），靠更高的 alpha 提升明显度、不靠更大的 spread */
    animation: inviteNextMarkerBreathe 2s ease-in-out infinite;
}

/* 红色 next marker 的外环呼吸灯关键帧（参照 .invite-hero-btn，2 关键帧结构）
   - 第 1 层 #ffdbdc 静态粉环永远保留
   - 第 2 层：内圈脉冲，alpha 0.7 → 0.05，spread 0.25rem → 0.5rem
   - 第 3 层：外圈脉冲，alpha 0.55 → 0.05，spread 0.25rem → 0.75rem
   关键修复：外层最大外扩 0.75rem，加上 0.25rem 静态环 = 光晕距 marker 边缘仅 1rem，
   不会再向上盖到进度条；同时把 alpha 提到 0.7 / 0.55 提升"亮感"，补回 spread 缩小损失的视觉冲击 */
@keyframes inviteNextMarkerBreathe {

    0%,
    100% {
        box-shadow:
            0 0 0 0.25rem #ffdbdc,
            0 0 0 0.25rem rgba(255, 77, 79, 0.7),
            0 0 0 0.25rem rgba(255, 77, 79, 0.55);
    }

    50% {
        box-shadow:
            0 0 0 0.25rem #ffdbdc,
            0 0 0 0.5rem rgba(255, 77, 79, 0.05),
            0 0 0 0.75rem rgba(255, 77, 79, 0.05);
    }
}

/* 已达成 marker：count >= 该 marker 数值时由 JS 加 .passed
   黄色填充 + 浅黄外环（#ffeed2）
   animation: none 关闭呼吸灯（仅红色 next 状态有） */
.invite-progress-marker.passed .invite-progress-marker-num {
    background: #FAAD14;
    box-shadow: 0 0 0 0.25rem #ffeed2;
    color: #FFFFFF;
    animation: none;
}

/* 未达成且非下一个目标 marker（"下下个"及以后目标）：count < markerValue 且
   已有比它更小的未达成 marker 时由 JS 加 .future
   灰色 + 浅灰实心外环（#f4f4f4）
   animation: none 关闭呼吸灯（仅红色 next 状态有） */
.invite-progress-marker.future .invite-progress-marker-num {
    background: #E5E7EB;
    box-shadow: 0 0 0 0.25rem #f4f4f4;
    color: #FFFFFF;
    animation: none;
}

.invite-progress-dot {
    /* 已过 marker 在进度条与数字之间的小红点：通过 flex 堆叠自然落位
       （marker 容器为 column flex，dot 是第一个子元素，位于数字上方） */
    width: 0.5rem;
    height: 0.5rem;
    background: #FF4D4F;
    border-radius: 50%;
    box-shadow: 0 0 0 0.1875rem rgba(255, 77, 79, 0.18);
}

.invite-calc-hint {
    height: 3.5rem;
    margin-top: 1.875rem;
    background: linear-gradient(94deg, #FFF1ED 0%, #FFE5DC 100%);
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    box-sizing: border-box;
    position: relative;
}

.invite-calc-hint-icon {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    position: absolute;
    top: -1.25rem;
    left: 0;
}

.invite-calc-hint-text {
    font-family: Source Han Sans SC;
    font-size: 0.9375rem;
    font-weight: normal;
    color: #333333;
    margin-left: 4.25rem;
}

.invite-calc-hint-link {
    font-family: Source Han Sans SC;
    font-size: 0.9375rem;
    font-weight: bold;
    color: #FF4D4F;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.invite-calc-hint-link .arrow-icon {
    display: inline-block;
    animation: arrowWiggle 2s ease-in-out infinite;
}

/* ===========================================
   四、参与步骤
   =========================================== */
.invite-steps {
    width: 100%;
    background: #ffffff;
    padding-bottom: 1.25rem;
}

.invite-steps-card {
    height: 11.25rem;
    border-radius: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #FFFFFF;
    box-shadow: 0 0.625rem 1.25rem 0 rgba(181, 27, 27, 0.05);
}

.invite-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.invite-step-icon {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
}

.invite-step-title {
    font-family: Source Han Sans SC;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
}

.invite-step-desc {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333333;
    white-space: pre-line;
}

.invite-step-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #FF6B35;
    align-self: center;
    /* 居中后下沉一些与文字基线对齐 */
    transform: translateY(0.5rem);
}

.invite-step-arrow-line {
    display: inline-block;
    width: 10rem;
    height: 0;
    border-top: 0.125rem dashed #F7A9A5;
}

.invite-step-arrow-img {
    width: 0.625rem;
    height: 0.875rem;
    object-fit: cover;
}

/* ===========================================
   五、平台声明
   =========================================== */
.invite-statement {
    width: 100%;
    background: #ffffff;
    padding: 0 0 5rem;
}

.invite-statement-title {
    font-family: Source Han Sans SC;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: normal;
    color: #333333;
    margin: 0 0 1.125rem;
}

.invite-statement-list {
    list-style: none;
    padding: 0;
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    line-height: 1.875;
    font-weight: normal;
    color: #333333;
}

.invite-statement-list li {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.invite-statement-bold {
    color: #333333;
    font-weight: 700;
    margin-right: 0.25rem;
}

.invite-statement-foot {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.125rem;
    text-align: center;
    color: #666666;
    margin-top: 2.75rem;
}

/* ===========================================
   入场动画 - 卡片组 staggered（与 vipService 同款思路）
   =========================================== */
/* 通用 .fade-up 由 home.css 定义 */

/* 奖励卡 - 从下方滑入 + 淡入（staggered 2 张） */
.invite-reward-card {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.invite-reward-card.invite-reward-card-visible {
    opacity: 1;
    transform: translateY(0);
}

.invite-reward-card:nth-child(2).invite-reward-card-visible {
    transition-delay: 0.12s;
}

/* 步骤卡 - 从下方滑入 + 淡入（staggered 3 张） */
.invite-step {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.invite-step.invite-step-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 步骤之间夹着 .invite-step-arrow（DOM 顺序 1,2,3,4,5），无法用 nth-child 直接选 step。
   :nth-of-type(N) 匹配的是"父级下第 N 个同类型元素"——本容器所有子节点都是 <div>，所以：
     1st div = 1st step   2nd div = 1st arrow
     3rd div = 2nd step   4th div = 2nd arrow
     5th div = 3rd step
   用 .invite-step:nth-of-type(3) / (5) 精准选中第 2、3 个 step */
.invite-steps-card .invite-step:nth-of-type(3).invite-step-visible {
    transition-delay: 0.12s;
}

.invite-steps-card .invite-step:nth-of-type(5).invite-step-visible {
    transition-delay: 0.24s;
}

/* hover 上浮效果（仅入场完成后生效，避免与入场动画冲突） */
.invite-reward-card.invite-reward-card-visible:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.875rem 0 rgba(255, 100, 58, 0.15);
}

.invite-step.invite-step-visible:hover {
    transform: translateY(-0.25rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.invite-step.invite-step-visible:hover .invite-step-icon {
    /* hover 时图标轻微放大，强化"可点击"反馈 */
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.invite-step-icon {
    transition: transform 0.3s ease;
}