/*
 * 瑞诺鑫站点自定义样式
 * 布局和大部分样式直接用 Tailwind class 写在 HTML 里；
 * 这里只放 Tailwind 不方便表达的部分：动效、工程图线稿、导航细节、流程时间轴。
 *
 * 动效只在 <html class="motion"> 时生效：
 *   - 访客系统开启了"减少动态效果"时不会加 motion，页面直接静态显示；
 *   - 脚本加载失败 3 秒后也会自动去掉 motion，保证内容可见。
 */

:root {
    --ease: cubic-bezier(.2, .7, .2, 1);
    --teal: #1E9187;
    --deep: #14706A;
    --ink: #1A202C;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 键盘操作时清晰的焦点框 */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* ---------- 导航 ---------- */
.site-nav { transition: box-shadow .35s var(--ease); }
.site-nav .nav-bar,
.site-nav .nav-logo { transition: height .35s var(--ease); }
.site-nav.is-scrolled { box-shadow: 0 1px 0 rgba(26, 32, 44, .06), 0 10px 30px -18px rgba(26, 32, 44, .35); }
@media (min-width: 1024px) {
    .site-nav.is-scrolled .nav-bar { height: 68px; }
    .site-nav.is-scrolled .nav-logo { height: 44px; }
}

/* 导航链接：悬停时下划线从左向右展开，当前页常亮 */
.nav-link { position: relative; padding: 6px 0; }
.nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--teal); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* 汉堡按钮 ↔ 关闭图标 */
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
               transition: transform .3s var(--ease), opacity .2s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 手机菜单展开/收起 */
.mobile-menu { display: grid; grid-template-rows: 0fr; visibility: hidden;
               transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s; }
.mobile-menu > div { overflow: hidden; }
.mobile-menu.is-open { grid-template-rows: 1fr; visibility: visible;
                       transition: grid-template-rows .35s var(--ease), visibility 0s; }

/* Keep navigation usable if scripts are disabled or fail to initialize. */
@media (max-width: 1023px) {
    html:not(.js-ready) .mobile-menu { grid-template-rows: 1fr; visibility: visible; }
    html:not(.js-ready) .site-nav { position: static; }
    html:not(.js-ready) #mobile-menu-btn { visibility: hidden; }
}

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100;
    padding: 12px 20px; background: #fff; color: var(--deep); border: 2px solid var(--deep);
    border-radius: 4px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* ---------- 首屏 ---------- */
.hero { min-height: 100vh; min-height: 100svh; }
@media (min-width: 1024px) { .hero { min-height: 760px; min-height: min(100svh, 920px); } }

/* 工程图纸网格底纹，边缘淡出 */
.bp-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%);
}
.bp-grid-light {
    background-image:
        linear-gradient(rgba(26, 32, 44, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 32, 44, .05) 1px, transparent 1px);
    background-size: 24px 24px;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slowzoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* 首屏：文字依次升起，背景缓慢推进 */
html.motion .hero-in { animation: rise .9s var(--ease) both; animation-delay: var(--d, 0ms); }
html.motion .hero-media { animation: slowzoom 22s var(--ease) both; }
html.motion .banner-media { animation: slowzoom 16s var(--ease) both; }

/* ---------- 滚动出现 ---------- */
html.motion [data-reveal] { opacity: 0; transform: translateY(14px);
    transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
html.motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* 标题下的"尺寸线"标记 */
.dim-rule { display: block; width: 56px; height: 9px;
    border-left: 1.5px solid var(--teal); border-right: 1.5px solid var(--teal);
    background: linear-gradient(var(--teal), var(--teal)) center / 100% 1.5px no-repeat; }
.dim-rule.on-dark { border-color: #5CC2B7; background-image: linear-gradient(#5CC2B7, #5CC2B7); }
html.motion [data-reveal] .dim-rule { width: 0; transition: width .9s var(--ease) .25s; }
html.motion [data-reveal].is-visible .dim-rule { width: 56px; }

/* 文字链接：下划线展开 */
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--deep);
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
    padding-bottom: 3px; transition: background-size .35s var(--ease), color .2s; }
.text-link:hover { background-size: 100% 1.5px; color: var(--ink); }
.text-link svg { transition: transform .35s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- 工程图线稿 ---------- */
.dwg { overflow: visible; }
.dwg .part, .dwg .dim, .dwg .cl, .dwg .hid { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dwg .part { stroke: var(--ink-c, #1A202C); stroke-width: 1.6; }
.dwg .thin { stroke-width: 1; }
.dwg .dim { stroke: var(--dim-c, #1E9187); stroke-width: 1; }
.dwg .cl { stroke: var(--cl-c, #A0AEC0); stroke-width: .9; stroke-dasharray: 16 4 3 4; }
.dwg .hid { stroke: var(--cl-c, #A0AEC0); stroke-width: 1; stroke-dasharray: 5 3; }
.dwg .hatch line { stroke: var(--ink-c, #1A202C); stroke-width: .7; opacity: .4; }
.dwg .arrow { fill: var(--dim-c, #1E9187); }
.dwg .node { fill: var(--dim-c, #1E9187); }
.dwg .soft { fill: var(--soft-c, rgba(30, 145, 135, .08)); }
.dwg text { fill: var(--dim-c, #1E9187); font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dwg text.label { fill: var(--ink-c, #1A202C); font: 600 18px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.dwg-dark { --ink-c: #E2E8F0; --dim-c: #5CC2B7; --cl-c: #718096; --soft-c: rgba(92, 194, 183, .08); }

/* 线稿逐笔画出：脚本先计算每条线的长度，滚动到可见时再画 */
html.motion svg[data-draw]:not(.is-ready) .ln { opacity: 0; }
html.motion svg[data-draw] .late { opacity: 0; transition: opacity .9s ease var(--late, 1.4s); }
html.motion svg[data-draw].is-drawn .late { opacity: 1; }

/* 定位图钉：出现时扩散一次 */
@keyframes ping { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
.pin-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
html.motion .is-drawn .pin-ring { animation: ping 1.8s var(--ease) 1.2s 2; }

/* ---------- 流程时间轴 ---------- */
.timeline { position: relative; }
.timeline .tl-track { position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: #E2E8F0; }
.timeline .tl-fill { position: absolute; inset: 0; background: var(--teal); transform: scaleY(0); transform-origin: top;
    transition: transform 1.8s var(--ease) .2s; }
@media (min-width: 768px) {
    .timeline .tl-track { left: 18px; right: calc((100% - (var(--cols, 5) - 1) * 1.5rem) / var(--cols, 5) - 18px); top: 17px; bottom: auto; width: auto; height: 2px; }
    .timeline .tl-fill { transform: scaleX(0); transform-origin: left; }
}
.timeline.is-visible .tl-fill, html:not(.motion) .timeline .tl-fill { transform: none; }
.tl-dot { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 9999px; background: #fff;
    border: 2px solid #CBD5E0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #718096;
    font-variant-numeric: tabular-nums; transition: border-color .4s, color .4s; transition-delay: var(--d, 0ms); }
.timeline.is-visible .tl-dot, html:not(.motion) .tl-dot { border-color: var(--teal); color: var(--deep); }

/* 新闻卡片图片悬停放大 */
.zoom-img img { transition: transform .7s var(--ease); }
.zoom-img:hover img { transform: scale(1.05); }


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                             transition-duration: .01ms !important; transition-delay: 0ms !important; }
}