/* ============================================
   按钮波纹动效（ripple）— 2026-10-15
   ------------------------------------------------------------
   配合 ripple.js 使用：鼠标移入 / 按下时，从**指针位置**扩散一圈波纹。
   分三档强度（由 JS 按选择器打类，形态一致，只有深浅和快慢不同）：

     .rp-primary    主 CTA   —— Hero / 快速解决方案 / 材料指南 / 轮播 / 右侧需求入口
     .rp-secondary  次要按钮 —— More / 功能块 More
     .rp-form       表单提交 —— 搜索 / 提交 / 需求弹窗

   ⚠️ .rp-host 由 JS 加（同时按需补 position:relative 和 overflow:hidden），
      所以禁用 JS 时按钮完全保持原样 —— 不会因为 overflow 被裁掉内容。
   ⚠️ <input> 不能放子元素 → 走下面的 .rp-css（纯 CSS 径向渐变波纹）。
   ============================================ */

/* 宿主：波纹需要被裁进按钮圆角里 */
.rp-host{
    overflow: hidden;
    /* ⚠️ 必须有：overflow 一旦不是 visible，inline-block 的基线就从「最后一行文字基线」
       变成「下外边距边缘」。按钮所在行盒于是要额外容纳父级行长（strut）的下行高（约 2px），
       行盒变高 → 首次 hover 加类这种「一次性」改动会把按钮/hero 顶高一点点
       （实测 /141/ 的 hero 480→482px，且刷新后重来一次）。
       vertical-align: bottom 让行盒高度重新等于按钮自身高度，与加类前像素一致。
       对 block / flex 子项 / absolute 的宿主，该属性被忽略 → 无副作用。 */
    vertical-align: bottom;
    /* 顺带把原本「hover 硬切换底色」改成 0.3s 过渡；后两项服务于下面的提亮与上浮 */
    transition: background-color .3s cubic-bezier(.22, .61, .36, 1),
                transform .18s cubic-bezier(.22, .61, .36, 1),
                box-shadow .18s cubic-bezier(.22, .61, .36, 1);
}

/* hover：提亮 + 轻微上浮（0.3s 过渡由 .rp-host 提供，原本是硬切换）
   提亮色 #FEE13A 与全站按钮已有 hover 色一致（industry/aboutMe/materialSel/askQuestion 均为此值），
   这里做兜底：cover-btn / moreBox / .sd-cta / .ind-faq-search>button 等没写 hover 的按钮也统一提亮。
   .rn-req 是深蓝底（右侧需求入口），提亮成黄色会破坏配色 → 排除，只保留上浮。 */
.rp-host:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
.rp-host:not(.rn-req):hover{
    background-color: #FEE13A;
}

/* ---------- 波纹墨点 ---------- */
.rp-ink{
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .42);
    animation: rp-ink .32s cubic-bezier(.22, .61, .36, 1) forwards;
    will-change: transform, opacity;
}
@keyframes rp-ink{
    0%{
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* ---------- 三档强度 ---------- */
.rp-primary .rp-ink{
    background: rgba(255, 255, 255, .45);
    animation-duration: .45s;   /* 主按钮波纹走得远一点，给足时间 */
}
.rp-secondary .rp-ink{
    background: rgba(255, 255, 255, .26);
    animation-duration: .30s;
}
.rp-form .rp-ink{
    background: rgba(255, 255, 255, .34);
    animation-duration: .35s;
}
/* 深蓝底的按钮（右侧「Leave Your Requirements」）白波纹看不出来 → 换成品牌黄 */
.rn-req .rp-ink{
    background: rgba(254, 201, 1, .34);
}

/* ---------- <input> 按钮：不能放子元素，改用径向渐变做波纹 ----------
   !important 是必须的：.submitBox:hover / .inputBox > form > input:nth-child(2)
   这类规则用 `background:` 简写把 background-image 重置成了 none，权重也比这里高。 */
input.rp-css{
    background-image: radial-gradient(circle,
        rgba(255, 255, 255, .55) 0%,
        rgba(255, 255, 255, .55) 52%,
        rgba(255, 255, 255, 0) 72%) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 0% 0%;
    transition: background-size .35s cubic-bezier(.22, .61, .36, 1),
                background-color .3s cubic-bezier(.22, .61, .36, 1),
                transform .18s cubic-bezier(.22, .61, .36, 1),
                box-shadow .18s cubic-bezier(.22, .61, .36, 1);
}
input.rp-css:hover{
    background-size: 300% 300%;
    /* 提亮同理需要 !important（.inputBox>form>input:nth-child(2) 这类结构选择器权重更高） */
    background-color: #FEE13A !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* 系统开启「减少动态效果」→ 全部关掉（JS 也不会绑定事件，这里只是双保险） */
@media (prefers-reduced-motion: reduce){
    .rp-ink{
        display: none !important;
    }
    input.rp-css{
        background-image: none !important;
    }
    input.rp-css:hover{
        background-size: 0% 0%;
    }
    /* 上浮与投影也一并关掉（提亮保留，它只是颜色变化、不是动效） */
    .rp-host:hover,
    input.rp-css:hover{
        transform: none !important;
        box-shadow: none !important;
    }
}