/* ============================================================
   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);

}

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

    animation: ember-rise 11s linear infinite;

}

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

    animation: ember-rise 13s linear 2.2s infinite;

}

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

    animation: ember-rise 10s linear 4.6s infinite;

}

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

    animation: ember-rise 14s linear 1.2s infinite;

}

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

    animation: ember-rise 12s linear 6s infinite;

}

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

    animation: ember-rise 15s linear 3.4s infinite;

}

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

    animation: ember-rise 11s linear 5.2s infinite;

}

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

    animation: ember-rise 13s linear 7.8s infinite;

}

/* 英雄区问候眉线：门边小灯牌 */
.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: 15px;

    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-name-row {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 22px;

}

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

    letter-spacing: 0.1em;

    color: var(--color-ink);

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

}

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

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

    font-size: clamp(18px, 2.4vw, 22px);

    color: var(--color-amber);

}

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

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

    max-width: 30em;

}

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

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;

}

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

    padding: 22px 22px 26px;

    background:
        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));

    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: 14px;

    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: 14px;

    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;

}

/* 木梁链路：梁体与七盏吊灯 */
.beam {
    position: relative;

    height: 26px;

    border-radius: 6px;

    background: linear-gradient(180deg, #6b4a26 0%, var(--color-wood) 40%, var(--color-wood-deep) 100%);

    box-shadow: inset 0 2px 0 rgba(244, 231, 207, 0.18), 0 10px 26px rgba(0, 0, 0, 0.4);

}

/* 灯位排布：七盏灯等分挂位 */
.lamp-row {
    display: grid;

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

    margin-top: -4px;

}

/* 单盏吊灯：竖灯绳、灯体与铭牌 */
.lamp {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;

}

/* 灯绳：默认垂长 */
.lamp::before {
    content: "";

    width: 2px;

    height: 52px;

    background-color: #171009;

}

/* 单双号灯绳长短交错形成挂灯节奏 */
.lamp:nth-child(odd)::before {
    height: 68px;

}

.lamp:nth-child(4n)::before {
    height: 88px;

}

.lamp:nth-child(3n)::before {
    height: 44px;

}

/* 灯体：琥珀玻璃灯泡 */
.lamp-bulb {
    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: radial-gradient(circle at 38% 32%, #ffe6b0, var(--color-amber) 68%, #d98f35);

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

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

}

/* 吊灯悬停：灯火挑亮 */
.lamp:hover .lamp-bulb {
    filter: brightness(1.3);

    transform: scale(1.12);

}

/* 未接线的虚位灯：空玻璃壳呼吸 */
.lamp.is-wip .lamp-bulb {
    background: var(--color-card);

    border: 2px dashed rgba(240, 180, 92, 0.55);

    box-shadow: none;

}

/* 灯下铭牌：站号与站名 */
.lamp-label {
    margin-top: 10px;

    text-align: center;

    line-height: 1.4;

}

/* 站号小字 */
.lamp-no {
    display: block;

    font-size: 11px;

    letter-spacing: 0.14em;

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

}

/* 站名 */
.lamp-name {
    display: block;

    margin-top: 2px;

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

    font-size: 15px;

    color: var(--color-ink);

    white-space: nowrap;

}

/* 接线中徽标 */
.lamp-state {
    display: none;

    margin-top: 6px;

    padding: 1px 9px;

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

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

    color: var(--color-amber);

    font-size: 11px;

}

/* 虚位灯与手动熄灭灯显示徽标 */
.lamp.is-wip .lamp-state,
.lamp.is-off .lamp-state {
    display: inline-block;

}

/* 链路脚注：一行小字说明来路 */
.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: linear-gradient(180deg, var(--color-wood), var(--color-wood-deep));

    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);

}

/* 服务图标座 */
.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: 20px;

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

    color: var(--color-ink);

}

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

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

    font-size: 15px;

}

/* 服务地址徽章 */
.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: 13px;

    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: 12px 24px;

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

    border: 1px solid transparent;

    font-size: 15px;

    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;

}

/* 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;

}

/* ============================================================
   v3 增补层：木纹肌理、斜射光束、鼠标提灯、植物与细节贴片
   ============================================================ */

/* 木纹与墙纹的程序化纹理来源 */
:root {

    /* 木理纹理：横向拉长的噪声，叠在木器底色上 */
    --wood-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wMTEgMC4xNicgbnVtT2N0YXZlcz0nNCcgc2VlZD0nMTEnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMC4zMiAwIDAgMCAwIDAuMjAgMCAwIDAgMCAwLjA5IDAgMCAwIDAuNTUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSc0MjAnIGhlaWdodD0nMTYwJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4=");

}

/* 木梁：底色渐变上叠木理，走向横向 */
.beam {
    background-image: var(--wood-grain), linear-gradient(180deg, #6b4a26 0%, var(--color-wood) 40%, var(--color-wood-deep) 100%);

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

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

}

/* 置物架架板：同样的木理叠层 */
.shelf::after {
    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;

}

/* 留言板木框：软木板面叠一层细木理 */
.note-board {
    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;

}

/* 鼠标提灯：跟随指针的暖光斑 */
.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;

}

/* 服务罐高光层：随鼠标位置流动的玻璃反光 */
.service-card::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 40%), rgba(246, 197, 120, 0.2), transparent 62%);

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;

}

/* 悬停时显现高光 */
.service-card:hover::after {
    opacity: 1;

}

/* 吊灯可交互形态 */
.lamp {
    cursor: pointer;

    outline: none;

}

/* 键盘聚焦的灯位描边 */
.lamp:focus-visible .lamp-bulb {
    outline: 2px solid var(--color-amber);

    outline-offset: 4px;

}

/* 被手动熄灭的灯 */
.lamp.is-off .lamp-bulb {
    background: var(--color-card);

    border: 2px dashed rgba(240, 180, 92, 0.55);

    box-shadow: none;

    animation: none;

}

/* 热茶图形按容器宽度缩放 */
.tea svg {
    width: 100%;

    height: auto;

}

/* 留言板胶带贴角 */
.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);

}

/* 罐身编号贴纸 */
.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);

}

/* 灯下纸卡角落的热茶 */
.tea {
    position: absolute;

    top: -30px;

    right: 26px;

    width: 46px;

}

/* 蒸汽曲线基础形态 */
.tea .steam {
    fill: none;

    stroke: rgba(150, 124, 96, 0.75);

    stroke-width: 2;

    stroke-linecap: round;

    opacity: 0;

    animation: steam-rise 3.2s ease-in-out infinite;

}

/* 两缕蒸汽错开节奏 */
.tea .steam-s2 {
    animation-delay: 1.6s;

}

/* 手机断点下的链路适配 */
@media (max-width: 600px) {

    /* 灯绳统一收短 */
    .lamp::before,
    .lamp:nth-child(odd)::before,
    .lamp:nth-child(4n)::before,
    .lamp:nth-child(3n)::before {
        height: 30px;

    }

    /* 站名收小并允许紧排 */
    .lamp-name {
        font-size: 11px;

        letter-spacing: -0.02em;

    }

    /* 站号隐藏避免拥挤 */
    .lamp-no {
        display: none;

    }

    /* 留言签保持双列紧凑排布 */
    .note-grid {
        grid-template-columns: 1fr 1fr;

    }

}