/* ═══════════════════════════════════════════════════════════
   base.css —— 设计变量 / 重置 / 排版 / 通用件
   《胸怀天下 · 大国担当》H5 电子展厅
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── 色板 ── */
  --c-red:        #B8221C;
  --c-red-deep:   #7A1310;
  --c-red-bright: #D93A2F;
  --c-gold:       #C9A227;
  --c-gold-light: #E8C766;
  --c-gold-pale:  #F4E6B8;
  --c-ink:        #0B1424;
  --c-ink-2:      #141F36;
  --c-ink-3:      #1D2C4A;
  --c-paper:      #F5F1E8;
  --c-paper-2:    #E7E0D0;
  --c-text:       #E9E5DB;
  --c-text-mute:  #8B95A7;

  /* ── 字体 ── */
  --f-serif: "Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --f-sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --f-num:   "DIN Alternate","HarmonyOS Sans","Helvetica Neue",Impact,system-ui,sans-serif;

  /* ── 尺度 ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --sh-1: 0 2px 10px rgba(0,0,0,.25);
  --sh-2: 0 10px 34px rgba(0,0,0,.42);
  --sh-gold: 0 0 24px rgba(201,162,39,.28);

  /* ── 布局 ── */
  --h-top: 60px;
  --h-bottom: 66px;
  --w-drawer: 320px;
  --w-panel: 520px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.75;
  color:var(--c-text);
  background:var(--c-ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 展厅墙面：深墨蓝 + 顶部金色穹光 + 极淡网格肌理 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(201,162,39,.20), transparent 62%),
    radial-gradient(760px 520px at 12% 108%, rgba(184,34,28,.20), transparent 66%),
    radial-gradient(760px 520px at 92% 104%, rgba(29,44,74,.85), transparent 66%),
    linear-gradient(178deg,#0B1424 0%,#101B30 46%,#0A1120 100%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.34;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}

img{ max-width:100%; display:block; border:0; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:var(--c-gold-light); text-decoration:none; }
kbd{
  font-family:var(--f-num); font-size:11px; line-height:1;
  padding:3px 6px; margin-right:3px; border-radius:3px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}

:focus-visible{ outline:2px solid var(--c-gold-light); outline-offset:3px; }

/* ── 排版件 ── */
.eyebrow{
  font-size:12px; letter-spacing:.42em; text-indent:.42em;
  color:var(--c-gold); text-transform:uppercase; margin:0;
}
.gold{ color:var(--c-gold-light); }
.red{ color:var(--c-red-bright); }

/* 金色细线 + 菱形节点 */
.rule{
  display:flex; align-items:center; gap:10px;
  color:var(--c-gold); margin:14px 0;
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--c-gold),transparent);
}
.rule .dia{ width:7px; height:7px; transform:rotate(45deg); background:var(--c-gold); flex:none; }

/* ── 通用滚动条 ── */
.scroll-y{ overflow-y:auto; overscroll-behavior:contain; }
.scroll-y::-webkit-scrollbar{ width:8px; }
.scroll-y::-webkit-scrollbar-track{ background:rgba(0,0,0,.22); }
.scroll-y::-webkit-scrollbar-thumb{ background:rgba(201,162,39,.42); border-radius:8px; }
.scroll-y::-webkit-scrollbar-thumb:hover{ background:rgba(201,162,39,.68); }

/* ── 遮罩 ── */
.mask{
  position:fixed; inset:0; z-index:60;
  background:rgba(4,8,16,.66); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s var(--ease);
}
.mask.show{ opacity:1; }
.mask[hidden]{ display:none; }

/* ── 图片占位 / 加载失败降级 ── */
.ph{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(29,44,74,.95), rgba(11,20,36,.95)),
    repeating-linear-gradient(45deg, rgba(201,162,39,.07) 0 8px, transparent 8px 16px);
  display:grid; place-items:center; text-align:center; padding:16px;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--f-serif); font-size:13px; letter-spacing:.16em;
  color:rgba(201,162,39,.72); line-height:1.9;
}

/* ── 提示条 ── */
#toast{
  position:fixed; left:50%; bottom:calc(var(--h-bottom) + 22px); z-index:120;
  transform:translate(-50%,16px);
  padding:11px 22px; border-radius:999px;
  background:rgba(12,21,38,.95); border:1px solid rgba(201,162,39,.5);
  color:var(--c-gold-pale); font-size:14px; letter-spacing:.04em;
  box-shadow:var(--sh-2); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ── 首屏载入 ── */
#boot{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--c-ink);
  transition:opacity .6s var(--ease), visibility .6s;
}
#boot.done{ opacity:0; visibility:hidden; }
.boot-inner{ text-align:center; color:var(--c-gold); }
.boot-seal{
  display:grid; place-items:center; width:74px; height:74px; margin:0 auto 18px;
  font-family:var(--f-serif); font-size:24px; letter-spacing:2px;
  color:var(--c-paper); background:var(--c-red);
  border-radius:6px; box-shadow:var(--sh-gold);
  animation:sealPulse 1.6s var(--ease) infinite;
}
.boot-inner p{ font-size:13px; letter-spacing:.4em; text-indent:.4em; margin:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ── 无动效降级：低配设备 / 老旧投影 / 截图验收
      开启方式：在网址后加 ?motion=off  或在控制台执行 Inter.noMotion() ── */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation:none !important; transition:none !important;
}
html.no-motion .rv{ opacity:1 !important; }
html.no-motion .scene{ opacity:1 !important; }
html.no-motion .scene:not(.on){ visibility:hidden !important; opacity:0 !important; }
html.no-motion .scene.on{ visibility:visible !important; opacity:1 !important; transform:none !important; }
html.no-motion .mapwrap .route{ stroke-dashoffset:0 !important; }
html.no-motion .cover-inner > *{ opacity:1 !important; }