/* ============================================================
   components.css — 组件样式
   暖尘、留言板、来路电路走线、背光置物架、灯下纸卡与按钮
   ============================================================ */

/* 背景氛围层：铺满视口且不响应鼠标 */
.ambient {
    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

}

/* 暖尘微粒：夜里浮在光柱中的暖尘 */
.ambient .ember {
    position: absolute;

    bottom: -12px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background-color: rgba(245, 180, 92, 0.55);

    filter: blur(0.5px);

    animation: ember-rise 12s linear infinite;

}

/* 八粒暖尘按序取位与延时 */
.ambient .ember:nth-child(1) {
    left: 8%;

    animation-delay: 0s;

}

.ambient .ember:nth-child(2) {
    left: 21%;

    animation-delay: 2.2s;

}

.ambient .ember:nth-child(3) {
    left: 35%;

    animation-delay: 4.6s;

}

.ambient .ember:nth-child(4) {
    left: 49%;

    animation-delay: 1.2s;

}

.ambient .ember:nth-child(5) {
    left: 63%;

    animation-delay: 6s;

}

.ambient .ember:nth-child(6) {
    left: 74%;

    animation-delay: 3.4s;

}

.ambient .ember:nth-child(7) {
    left: 86%;

    animation-delay: 5.2s;

}

.ambient .ember:nth-child(8) {
    left: 94%;

    animation-delay: 7.8s;

}

/* 英雄区问候眉线：门边小灯牌 */
.hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 16px;

    background-color: rgba(58, 41, 27, 0.85);

    border: 1px solid var(--color-line);

    border-radius: var(--radius-chip);

    color: var(--color-amber);

    font-size: 16px;

    box-shadow: var(--shadow-warm);

}

/* 眉线内小灯芯 */
.hero-kicker::before {
    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: var(--color-amber);

    box-shadow: var(--glow-bulb);

}

/* 英雄区英文眉标：大写疏排的进场小字 */
.hero-eyebrow {
    margin-bottom: 14px;

    font-size: 12px;

    letter-spacing: 0.42em;

    text-transform: uppercase;

    color: var(--color-ink-faint);

}

/* 品牌名行：名字与印章并排 */
.hero-name-row {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 22px;

}

/* 品牌主标题：奶油衬线字被灯光微照 */
.hero-name {
    font-size: clamp(64px, 8vw, 118px);

    letter-spacing: 0.08em;

    color: var(--color-ink);

    text-shadow: 0 0 34px rgba(245, 180, 90, 0.28);

}

/* 宽屏展示级放大且不允许折行 */
@media (min-width: 1100px) {

    .hero-name {
        font-size: clamp(84px, 7.6vw, 136px);

        white-space: nowrap;

    }

}

/* 座右铭引文：灯芯琥珀色楷体 */
.hero-motto {
    margin-top: 20px;

    font-family: var(--font-quote);

    font-size: clamp(20px, 2.5vw, 27px);

    color: var(--color-amber);

}

/* 英雄区副文案 */
.hero-sub {
    margin-top: 12px;

    color: var(--color-ink-soft);

    font-size: 17.5px;

    max-width: 30em;

}

/* 英雄区按钮排 */
.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}

/* 门边留言板：木框软木板 */
.note-board {
    position: relative;

    padding: 22px 22px 26px;

    background-image:
        var(--wood-grain),
        radial-gradient(140% 90% at 50% 0%, rgba(245, 180, 92, 0.12), transparent 55%),
        linear-gradient(170deg, var(--color-card-lit), var(--color-card));

    background-size: 420px 160px, auto, auto;

    background-blend-mode: soft-light, normal, normal;

    border: 1px solid var(--color-line);

    border-radius: var(--radius-card);

    box-shadow: inset 0 0 0 6px rgba(84, 55, 29, 0.55), var(--shadow-warm);

}

/* 留言板标题 */
.note-board-title {
    text-align: center;

    font-size: 15px;

    letter-spacing: 0.34em;

    color: var(--color-ink-faint);

}

/* 留言签栅格 */
.note-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

}

/* 磁贴留言签：轻微歪斜的手贴感 */
.note {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background-color: rgba(50, 34, 22, 0.9);

    border: 1px solid var(--color-line);

    border-radius: 10px;

    color: var(--color-ink-soft);

    font-size: 15px;

    transition: transform 0.25s ease, border-color 0.25s ease;

}

/* 签顶小磁扣 */
.note::before {
    content: "";

    flex: none;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background-color: var(--color-flame);

    box-shadow: 0 0 8px rgba(232, 133, 58, 0.7);

}

/* 隔签反向歪斜，避免呆板 */
.note:nth-child(odd) {
    transform: rotate(-1.2deg);

}

.note:nth-child(even) {
    transform: rotate(1.4deg);

}

/* 悬停时签子摆正 */
.note:hover {
    transform: rotate(0deg);

    border-color: rgba(240, 180, 92, 0.4);

}

/* 通栏长签占据整行 */
.note-wide {
    grid-column: 1 / -1;

}

/* 留言板胶带贴角 */
.tape {
    position: absolute;

    width: 92px;

    height: 26px;

    background: rgba(238, 222, 186, 0.42);

    border-left: 2px dashed rgba(122, 92, 52, 0.28);

    border-right: 2px dashed rgba(122, 92, 52, 0.28);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);

    pointer-events: none;

}

/* 左上胶带 */
.tape-tl {
    top: -10px;

    left: -28px;

    transform: rotate(-38deg);

}

/* 右上胶带 */
.tape-tr {
    top: -10px;

    right: -28px;

    transform: rotate(38deg);

}

/* 来路电路走线：PCB 铜线、发光节点与状态徽标 */
.trace {
    width: 100%;

    overflow: visible;

}

/* 已点亮铜线：琥珀光晕铜箔 */
.trace-line-lit {
    fill: none;

    stroke: #e8994f;

    stroke-width: 3;

    stroke-linecap: round;

    filter: drop-shadow(0 0 6px rgba(240, 178, 80, 0.55));

}

/* 虚位断点：虚线弱化 */
.trace-line-wip {
    fill: none;

    stroke: rgba(240, 180, 92, 0.35);

    stroke-width: 2.5;

    stroke-dasharray: 8 8;

    stroke-linecap: round;

}

/* 巡行电流脉冲 */
.trace-pulse {
    fill: #ffe2a8;

    filter: drop-shadow(0 0 8px rgba(255, 226, 168, 0.9));

}

/* 节点：可点击的灯座 */
.trace-node {
    cursor: pointer;

    outline: none;

}

/* 灯座外环 */
.trace-node .ring {
    fill: var(--color-bg-deep);

    stroke: rgba(240, 180, 92, 0.8);

    stroke-width: 2;

    transition: stroke-width 0.2s ease;

}

/* 灯芯：琥珀发光圆点 */
.trace-node .core {
    fill: var(--color-amber);

    filter: drop-shadow(0 0 6px rgba(240, 178, 80, 0.85));

}

/* 键盘聚焦的节点加粗外环 */
.trace-node:focus-visible .ring {
    stroke-width: 3.5;

}

/* 虚位断点：虚线空环呼吸 */
.trace-node.is-wip .ring {
    fill: transparent;

    stroke: rgba(240, 180, 92, 0.5);

    stroke-dasharray: 5 5;

    animation: wip-pulse 2.8s ease-in-out infinite;

}

/* 虚位断点无灯芯 */
.trace-node.is-wip .core {
    fill: transparent;

    filter: none;

}

/* 手动熄灭的节点 */
.trace-node.is-off .core {
    fill: var(--color-card);

    filter: none;

}

/* 点亮瞬间的弹跳 */
.trace-node.pop .core {
    animation: lamp-pop 0.5s ease;

}

/* 已点亮灯芯呼吸 */
.trace-node.lit .core {
    animation: bulb-breath 3.2s ease-in-out infinite;

}

/* 站号铭牌 */
.trace-no {
    font-size: 11px;

    letter-spacing: 0.14em;

    fill: var(--color-ink-faint);

}

/* 站名铭牌 */
.trace-name {
    font-family: var(--font-display);

    font-size: 17px;

    fill: var(--color-ink);

}

/* 状态徽标 */
.trace-tag {
    font-size: 11px;

    fill: var(--color-amber);

}

/* 链路脚注 */
.beam-caption {
    margin-top: 34px;

    text-align: center;

    color: var(--color-ink-faint);

    font-size: 14px;

    letter-spacing: 0.22em;

}

/* 背光置物架：架内暖光从罐后透出 */
.shelf {
    position: relative;

    padding: 30px 26px 34px;

    background: linear-gradient(180deg, var(--color-card-lit), var(--color-panel));

    border: 1px solid var(--color-line);

    border-radius: var(--radius-card);

    box-shadow: var(--shadow-warm);

    overflow: hidden;

}

/* 架内背光带：顶部琥珀光晕 */
.shelf::before {
    content: "";

    position: absolute;

    top: -60px;

    left: 10%;

    width: 80%;

    height: 130px;

    background: radial-gradient(50% 100% at 50% 100%, rgba(245, 180, 92, 0.24), transparent 75%);

    filter: blur(6px);

    pointer-events: none;

}

/* 架前挡板：底部木质架板 */
.shelf::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 14px;

    background-image: var(--wood-grain), linear-gradient(180deg, var(--color-wood), var(--color-wood-deep));

    background-size: 420px 160px, 100% 100%;

    background-blend-mode: soft-light, normal;

    box-shadow: inset 0 2px 0 rgba(244, 231, 207, 0.16);

}

/* 服务罐：架上玻璃罐卡片 */
.service-card {
    position: relative;

    display: block;

    height: 100%;

    padding: var(--space-card);

    background: linear-gradient(165deg, rgba(245, 180, 92, 0.14), rgba(232, 133, 58, 0.05) 55%), var(--color-card);

    border: 1px solid rgba(240, 180, 92, 0.26);

    border-radius: 16px;

    box-shadow: inset 0 0 22px rgba(245, 180, 92, 0.08);

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

}

/* 服务罐悬停：灯火透亮并抬升 */
.service-card:hover {
    transform: translateY(-5px);

    border-color: rgba(240, 180, 92, 0.5);

    box-shadow: inset 0 0 26px rgba(245, 180, 92, 0.14), var(--glow-soft);

}

/* 罐身编号贴纸 */
.jar-sticker {
    position: absolute;

    top: 14px;

    right: 14px;

    padding: 2px 10px;

    border-radius: var(--radius-chip);

    background: rgba(238, 222, 186, 0.88);

    color: #5a4327;

    font-size: 11px;

    letter-spacing: 0.1em;

    transform: rotate(6deg);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}

/* 服务图标座 */
.service-icon {
    display: grid;

    place-items: center;

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: linear-gradient(150deg, rgba(232, 133, 58, 0.3), rgba(240, 180, 92, 0.14));

    border: 1px solid rgba(240, 180, 92, 0.3);

    color: var(--color-amber);

}

/* 服务名称 */
.service-name {
    margin-top: 16px;

    font-size: 23px;

    font-family: var(--font-display);

    color: var(--color-ink);

}

/* 服务描述 */
.service-desc {
    margin-top: 6px;

    color: var(--color-ink-soft);

    font-size: 16.5px;

}

/* 服务地址徽章 */
.service-host {
    display: inline-block;

    margin-top: 16px;

    padding: 4px 12px;

    border-radius: var(--radius-chip);

    background-color: rgba(240, 180, 92, 0.12);

    color: var(--color-amber);

    font-size: 14px;

    letter-spacing: 0.04em;

}

/* 筹备中罐子的弱化态 */
.service-card.is-planned {
    border-style: dashed;

    background: linear-gradient(165deg, rgba(245, 180, 92, 0.05), transparent 55%), transparent;

    box-shadow: none;

}

/* 灯下纸卡：暗屋中被一盏灯照亮的书页 */
.passage-card {
    position: relative;

    padding: var(--space-card);

    background: linear-gradient(rgba(246, 234, 210, 0.96), rgba(246, 234, 210, 0.96));

    border-radius: var(--radius-card);

    color: var(--color-paper-ink);

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 180, 92, 0.12);

}

/* 纸卡上方灯池：阅读灯的光洒下来 */
.passage-card::before {
    content: "";

    position: absolute;

    top: -46px;

    left: 18%;

    width: 64%;

    height: 60px;

    background: radial-gradient(50% 100% at 50% 100%, rgba(245, 180, 92, 0.35), transparent 78%);

    filter: blur(4px);

    pointer-events: none;

}

/* 文摘标题 */
.passage-title {
    font-size: 18px;

    letter-spacing: 0.12em;

    color: #7a5f49;

}

/* 文摘正文 */
.passage-text {
    margin-top: 14px;

    font-family: var(--font-quote);

    font-size: 17px;

    line-height: 2.1;

    text-align: justify;

}

/* 文摘落款印章 */
.passage-seal {
    margin-top: 16px;

    width: 52px;

    height: 52px;

    font-size: 16px;

}

/* 印章：四字方章 */
.seal {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    place-items: center;

    width: 64px;

    height: 64px;

    padding: 6px;

    background-color: var(--color-seal);

    border-radius: 10px;

    color: #fff6ea;

    font-family: var(--font-display);

    font-size: 20px;

    line-height: 1;

    box-shadow: inset 0 0 0 2px rgba(255, 246, 234, 0.6), 0 6px 18px rgba(195, 66, 58, 0.35);

    transform: rotate(6deg);

}

/* 按钮基础形态 */
.btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 13px 28px;

    border-radius: var(--radius-chip);

    border: 1px solid transparent;

    font-size: 16px;

    letter-spacing: 0.04em;

    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

}

/* 主按钮：灯火橙实底配深咖字 */
.btn-primary {
    background-color: var(--color-flame);

    color: #24150a;

    box-shadow: 0 8px 26px rgba(232, 133, 58, 0.35);

}

/* 幽灵按钮：夜里透光的描边 */
.btn-ghost {
    background-color: rgba(58, 41, 27, 0.7);

    border-color: var(--color-line);

    color: var(--color-ink-soft);

}

/* 按钮悬停轻微上浮 */
.btn:hover {
    transform: translateY(-2px);

    box-shadow: 0 12px 32px rgba(232, 133, 58, 0.28);

}

/* 无脚本后备链接列表 */
.fallback-list {
    display: grid;

    gap: 10px;

}

/* 后备链接颜色 */
.fallback-list a,
.fallback-list li {
    color: var(--color-amber);

}

/* 后备链接下划线强调可点 */
.fallback-list a {
    text-decoration: underline;

}

/* 鼠标提灯：跟随指针的暖光斑 */
.cursor-lantern {
    position: fixed;

    left: 0;

    top: 0;

    z-index: 3;

    width: 640px;

    height: 640px;

    margin: -320px 0 0 -320px;

    pointer-events: none;

    background: radial-gradient(closest-side, rgba(246, 190, 105, 0.15), rgba(246, 190, 105, 0.05) 46%, transparent 72%);

    mix-blend-mode: screen;

    opacity: 0;

    transition: opacity 0.6s ease;

}

/* 指针设备就绪后点亮提灯 */
body.lantern-on .cursor-lantern {
    opacity: 1;

}

/* 404 页：满屏居中暖场 */
.notfound {
    position: relative;

    z-index: 2;

    min-height: 82vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    text-align: center;

    padding: 48px 24px;

}

/* 404 主标题 */
.notfound-title {
    font-size: clamp(28px, 4vw, 40px);

    letter-spacing: 0.08em;

    color: var(--color-ink);

}

/* 404 说明文案 */
.notfound-text {
    color: var(--color-ink-soft);

    max-width: 28em;

}

/* 404 按钮排 */
.notfound-actions {
    margin-top: 10px;

}

/* 左侧竖排导航栏：宽屏专属骨架 */
.rail {
    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    z-index: 20;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 220px;

    padding: 34px 30px 28px;

    border-right: 1px solid rgba(236, 217, 184, 0.1);

    background: linear-gradient(180deg, rgba(18, 11, 6, 0.72), rgba(18, 11, 6, 0.26));

    backdrop-filter: blur(8px);

}

/* 栏顶品牌字 */
.rail-brand {
    font-family: var(--font-display);

    font-size: 21px;

    letter-spacing: 0.22em;

    color: var(--color-ink);

}

/* 品牌下的英文小注 */
.rail-brand small {
    display: block;

    margin-top: 6px;

    font-size: 10px;

    letter-spacing: 0.34em;

    color: var(--color-ink-faint);

}

/* 导航链接列 */
.rail-nav {
    display: grid;

    gap: 20px;

}

/* 单条导航链接 */
.rail-link {
    display: flex;

    align-items: baseline;

    gap: 12px;

    font-family: var(--font-display);

    font-size: 16px;

    letter-spacing: 0.2em;

    color: var(--color-ink-faint);

    transition: color 0.25s ease, transform 0.25s ease;

}

/* 链接序号 */
.rail-link .no {
    font-size: 10.5px;

    letter-spacing: 0.12em;

    color: var(--color-ink-faint);

}

/* 悬停与当前态提亮 */
.rail-link:hover {
    color: var(--color-ink);

    transform: translateX(4px);

}

/* 当前所在分区的导航高亮 */
.rail-link.is-active {
    color: var(--color-amber);

}

.rail-link.is-active .no {
    color: var(--color-flame);

}

/* 栏底备注 */
.rail-foot {
    font-size: 10.5px;

    letter-spacing: 0.26em;

    color: var(--color-ink-faint);

}

/* 窄屏收起侧栏（与布局层媒体查询对齐） */
@media (max-width: 1099px) {

    .rail {
        display: none;

    }

}

/* 展示级品牌名：宽屏进一步放大且不允许折行 */
@media (min-width: 1100px) {

    .hero-name {
        font-size: clamp(84px, 7.6vw, 136px);

        white-space: nowrap;

    }

}

/* 英雄区底部滚动提示 */
.scroll-hint {
    position: absolute;

    left: 50%;

    bottom: 26px;

    transform: translateX(-50%);

    display: grid;

    justify-items: center;

    gap: 8px;

    color: var(--color-ink-faint);

    font-size: 11px;

    letter-spacing: 0.4em;

}

/* 提示下方的一段光路 */
.scroll-hint::after {
    content: "";

    width: 1px;

    height: 44px;

    background: linear-gradient(180deg, var(--color-amber), transparent);

    animation: hint-drop 2.2s ease-in-out infinite;

}

/* 手机端收细走线铭牌 */
@media (max-width: 600px) {

    .trace-name {
        font-size: 10px;

    }

    .trace-no,
    .trace-tag {
        display: none;

    }

}

/* ============================================================
   来路走线的年代装饰层：每段一种当年手艺的图形记忆
   ============================================================ */

/* 装饰组整体：点亮段全亮 */
.seg-decor {

    opacity: 0.95;

}

/* 装饰线条：铜线细描 */
.seg-decor path,
.seg-decor line,
.seg-decor polyline {

    fill: none;

    stroke: var(--color-amber);

    stroke-width: 1.4;

    stroke-linecap: round;

    stroke-linejoin: round;

}

/* 装饰框件：缆卡等空心件 */
.seg-decor rect {

    fill: none;

    stroke: var(--color-amber);

    stroke-width: 1.2;

}

/* 实心点与柱：焊点、图柱 */
.seg-decor .dot {

    fill: var(--color-amber);

    stroke: none;

}

.seg-decor .bar {

    fill: var(--color-flame);

    stroke: none;

    opacity: 0.85;

}

/* 未接线路段的装饰降为虚影 */
.seg-decor.is-dim {

    opacity: 0.35;

}