/* ==========================================================================
   UI detail polish · r67
   --------------------------------------------------------------------------
   来源说明：手法参考 https://github.com/uiverse-io/galaxy（uiverse.io）
   ★ 但没有直接采用其组件代码 —— 那个库整体是霓虹/旋转/弹跳风格，
     与本站的米色纸感 + 衬线编辑设计完全不兼容。
     这里只借鉴 3 个「克制型」交互手法，用本站变量与色板重写：

   1) 按钮箭头滑动        参考 AqFox_nervous-crab-0 的 ::before 填充思路
                          -> 改为箭头位移，不做整块填充（更像编辑设计）
   2) 输入框聚焦底线加粗  参考 saidbl1_little-eagle-84 / ozgeozkaraa01_big-sloth-59
                          -> 本站输入框本来只有 1px 底线，聚焦时加粗 + 变色
   3) 链接下划线从中心展开 参考 Tooltips/Buttons 类目里常见的 ::after scaleX 手法
                          -> 用于 .mh-head-link / .r12-link

   原则：
   · 只做 0.2~0.3s 的微动效，不加旋转、不加霓虹、不加弹跳
   · 颜色全部走现有变量/色板，不引入新色
   · 所有改动可被 prefers-reduced-motion 关闭
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 按钮箭头 */

/* 注意：.button 有两种上下文 ——
      header 里是 .button.header-cta，段落里是 .button.project-link。
   所以不能用 .r8-site .button 限定（header 不在 .r8-site 里）。 */
a.button > span[aria-hidden="true"],
button.button > span[aria-hidden="true"],
.button.project-link > span,
.r12-solid > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform .24s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

a.button:hover > span[aria-hidden="true"],
button.button:hover > span[aria-hidden="true"],
.button.project-link:hover > span,
.r12-solid:hover > span[aria-hidden="true"] {
    transform: translateX(4px);
}

/* 按钮本身加一条极淡的上浮，强调可点 */
a.button,
button.button,
.r12-solid {
    transition: background .2s ease, color .2s ease,
                border-color .2s ease, transform .2s ease,
                box-shadow .2s ease;
}

a.button:hover,
button.button:hover,
.r12-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(20, 28, 24, .55);
}

a.button:active,
button.button:active,
.r12-solid:active {
    transform: translateY(0);
    transition-duration: .08s;
}

/* ---------------------------------------------------------------- 2. 输入框聚焦 */

/* footer 订阅输入框：底线加粗 + 提亮 */
footer#site-footer.site-footer.shared-footer .qs-subscribe input:focus {
    outline: none !important;
    box-shadow: inset 0 -2px 0 0 rgba(238, 241, 231, .85) !important;
}

footer#site-footer.site-footer.shared-footer .qs-subscribe-row:focus-within {
    border-bottom-color: rgba(238, 241, 231, .85) !important;
}

/* 其他页面里的文本输入（联系表单等）：统一聚焦反馈 */
main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="tel"]:focus,
main textarea:focus,
main select:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 0 currentColor;
    transition: box-shadow .2s ease;
}

/* 占位符在聚焦时稍微淡出，减少视觉噪音 */
main input:focus::placeholder,
main textarea:focus::placeholder {
    opacity: .45;
    transition: opacity .2s ease;
}

/* ---------------------------------------------------------------- 3. 链接下划线 */

/* 从中心向两侧展开的下划线（替代静态 border-bottom） */
.mh-head-link,
.r12-link {
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid rgba(238, 241, 231, .32);
    transition: border-color .2s ease, color .2s ease;
}

.mh-head-link::after,
.r12-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    transition: left .26s cubic-bezier(.2, .7, .2, 1),
                right .26s cubic-bezier(.2, .7, .2, 1);
}

.mh-head-link:hover::after,
.r12-link:hover::after {
    left: 0;
    right: 0;
}

.mh-head-link:hover,
.r12-link:hover {
    border-bottom-color: transparent;
}

/* 浅色段落里的链接用深色下划线 */
.mh-materials .mtry-foot .mh-head-link {
    border-bottom-color: rgba(238, 241, 231, .32);
}

/* ---------------------------------------------------------------- 4. 加/减号按钮 */

/* FAQ 的圆形加减号：hover 时圆环扩张一点，更明确 */
.faq-q i {
    transition: opacity .2s ease, background .2s ease,
                border-color .2s ease, transform .2s ease;
}
details.faq-item > .faq-q:hover i {
    transform: scale(1.12);
}

/* ---------------------------------------------------------------- 5. 材料分组 chip */

.mtry-cats button {
    transition: background .18s ease, opacity .18s ease,
                border-color .18s ease, transform .18s ease;
}
.mtry-cats button:hover {
    transform: translateY(-1px);
}
.mtry-cats button:active {
    transform: translateY(0);
}

/* ---------------------------------------------------------------- 6. 色号卡 */

.mtry-swatch-img {
    transition: box-shadow .22s ease, transform .22s ease;
}

/* ---------------------------------------------------------------- 7. 无障碍 */

@media (prefers-reduced-motion: reduce) {
    a.button > span,
    button.button > span,
    .button.project-link > span,
    .r12-solid > span,
    .mh-head-link::after,
    .r12-link::after,
    details.faq-item > .faq-q i,
    .mtry-cats button {
        transition: none !important;
        transform: none !important;
    }
    a.button:hover,
    button.button:hover,
    .button.project-link:hover,
    .r12-solid:hover,
    .mtry-cats button:hover {
        transform: none !important;
    }
    .mh-head-link:hover::after,
    .r12-link:hover::after {
        left: 0; right: 0;
    }
}

/* 键盘聚焦可见性（不改变鼠标体验） */
a.button:focus-visible,
button.button:focus-visible,
.button.project-link:focus-visible,
.r12-solid:focus-visible,
.mh-head-link:focus-visible,
.r12-link:focus-visible,
.mtry-cats button:focus-visible,
.mtry-swatch:focus-visible,
.faq-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ==========================================================================
   header 按钮补强（2026-10-26 r67b）
   --------------------------------------------------------------------------
   #site-shell .header-cta 有 ID 级优先级，且 transition 只写了
   background / color，没给 transform 留位子。
   这里用同级别选择器只追加 transform 与 box-shadow，不动原规则。
   ========================================================================== */

#site-shell .header-cta {
    transition: background .2s ease, color .2s ease,
                transform .2s ease, box-shadow .2s ease;
}

#site-shell .header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(45, 60, 46, .55);
}

#site-shell .header-cta:active {
    transform: translateY(0);
    transition-duration: .08s;
}

/* 箭头：同样要 ID 级选择器才压得过 */
#site-shell .header-cta > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform .24s cubic-bezier(.2, .7, .2, 1);
}

#site-shell .header-cta:hover > span[aria-hidden="true"] {
    transform: translateX(4px);
}

#site-shell .header-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    #site-shell .header-cta,
    #site-shell .header-cta > span[aria-hidden="true"] {
        transition: none !important;
    }
    #site-shell .header-cta:hover,
    #site-shell .header-cta:hover > span[aria-hidden="true"] {
        transform: none !important;
    }
}