@charset "utf-8";
/* 主题：8 套设备实拍背景 + 深浅色。背景图在 assets/themes/ 下。 */

/* ---------- 浅色基线 ---------- */
html {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --top-bg: rgba(255, 255, 255, .86);
  --input-bg: rgba(255, 255, 255, .92);
  --hover: rgba(15, 23, 42, .045);
  --line: rgba(15, 23, 42, .10);
  --line-strong: rgba(15, 23, 42, .18);
  --text: #17202b;
  --text-dim: #3f4d5c;
  --text-faint: #7b8794;
  --ok: #17803d;
  --ok-soft: rgba(23, 128, 61, .10);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, .12);
  --danger: #c81e1e;
  --danger-soft: rgba(200, 30, 30, .08);
  --na: #8592a0;
  --na-soft: rgba(133, 146, 160, .12);
  --hero-veil: linear-gradient(92deg,
      color-mix(in srgb, var(--panel) 92%, transparent) 0%,
      color-mix(in srgb, var(--panel) 55%, transparent) 46%,
      color-mix(in srgb, var(--panel) 8%, transparent) 100%);
  --brand: #1e5aa8;
  --brand-strong: #164274;
  --brand-soft: rgba(30, 90, 168, .10);
  --theme-img: none;
  --chip-bg: rgba(255, 255, 255, .78);
  color-scheme: light;
}

html[data-mode="dark"] {
  --bg: #0f1419;
  --panel: #171e26;
  --panel-2: #1b232c;
  --top-bg: rgba(23, 30, 38, .88);
  --input-bg: rgba(255, 255, 255, .06);
  --hover: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --text: #e8edf3;
  --text-dim: #b6c1cd;
  --text-faint: #8894a1;
  --ok: #3ecf7a;
  --ok-soft: rgba(62, 207, 122, .14);
  --warn: #f0a33c;
  --warn-soft: rgba(240, 163, 60, .16);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .14);
  --na: #7d8a98;
  --na-soft: rgba(125, 138, 152, .16);
  --hero-veil: linear-gradient(92deg, rgba(15, 20, 25, .94) 0%, rgba(15, 20, 25, .70) 46%, rgba(15, 20, 25, .30) 100%);
  --chip-bg: rgba(0, 0, 0, .40);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 8px 16px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- 主题配色（背景 + 主色） ---------- */
html[data-theme="bridge-dawn"], html[data-theme="bridge-dawn"] {
  --theme-img: url("/assets/themes/bridge-dawn.jpg");
  --brand: #b4521f; --brand-strong: #8f3c14; --brand-soft: rgba(180, 82, 31, .10);
}
html[data-theme="bridge-sky"] {
  --theme-img: url("/assets/themes/bridge-sky.jpg");
  --brand: #1f5f8b; --brand-strong: #174769; --brand-soft: rgba(31, 95, 139, .10);
}
html[data-theme="bridge-work"] {
  --theme-img: url("/assets/themes/bridge-work.jpg");
  --brand: #9a6a08; --brand-strong: #7a5306; --brand-soft: rgba(154, 106, 8, .12);
}
html[data-theme="haul-snow"] {
  --theme-img: url("/assets/themes/haul-snow.jpg");
  --brand: #256a8a; --brand-strong: #1b5069; --brand-soft: rgba(37, 106, 138, .10);
}
html[data-theme="haul-dusk"] {
  --theme-img: url("/assets/themes/haul-dusk.jpg");
  --brand: #7a5a2e; --brand-strong: #5d4422; --brand-soft: rgba(122, 90, 46, .12);
}
html[data-theme="haul-array"] {
  --theme-img: url("/assets/themes/haul-array.jpg");
  --brand: #a8261f; --brand-strong: #831d18; --brand-soft: rgba(168, 38, 31, .10);
}
html[data-theme="forklift-yard"] {
  --theme-img: url("/assets/themes/forklift-yard.jpg");
  --brand: #2f6b52; --brand-strong: #22503d; --brand-soft: rgba(47, 107, 82, .10);
}
html[data-theme="plain"] {
  --theme-img: none;
  --brand: #33507a; --brand-strong: #24395a; --brand-soft: rgba(51, 80, 122, .10);
}

html[data-mode="dark"][data-theme="bridge-dawn"] { --brand: #e08a52; --brand-strong: #f0a878; --brand-soft: rgba(224, 138, 82, .16); }
html[data-mode="dark"][data-theme="bridge-sky"] { --brand: #5fa8d0; --brand-strong: #7fc0e0; --brand-soft: rgba(95, 168, 208, .16); }
html[data-mode="dark"][data-theme="bridge-work"] { --brand: #d9a83a; --brand-strong: #e8bd5f; --brand-soft: rgba(217, 168, 58, .16); }
html[data-mode="dark"][data-theme="haul-snow"] { --brand: #61b0cf; --brand-strong: #82c6e0; --brand-soft: rgba(97, 176, 207, .16); }
html[data-mode="dark"][data-theme="haul-dusk"] { --brand: #c9a468; --brand-strong: #ddb980; --brand-soft: rgba(201, 164, 104, .16); }
html[data-mode="dark"][data-theme="haul-array"] { --brand: #e4645c; --brand-strong: #f18a83; --brand-soft: rgba(228, 100, 92, .16); }
html[data-mode="dark"][data-theme="forklift-yard"] { --brand: #5cb894; --brand-strong: #7ccbae; --brand-soft: rgba(92, 184, 148, .16); }
html[data-mode="dark"][data-theme="plain"] { --brand: #7f9dc9; --brand-strong: #a0b8dc; --brand-soft: rgba(127, 157, 201, .16); }

/* ---------- 背景图承载（低透明度，只做氛围，不干扰阅读） ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--theme-img);
  background-size: cover;
  background-position: center;
  opacity: .10;
  filter: saturate(.9);
  z-index: -2;
  pointer-events: none;
  transition: opacity .3s;
}
html[data-mode="dark"] body::before { opacity: .16; filter: saturate(.7) brightness(.5); }
html[data-theme="plain"] body::before { display: none; }
/* 内容区顶部一点品牌色氛围光 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(52% 240px at 24% 0%, var(--brand-soft), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* 首页大图 */
.hero {
  position: relative;
  margin: -26px -30px 26px;
  height: 248px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--theme-img);
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.03);
  animation: heroIn .6s ease both;
}
@keyframes heroIn { from { transform: scale(1.07); opacity: .6; } to { transform: scale(1.03); opacity: 1; } }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-veil);
}
.hero-inner { position: relative; z-index: 1; }
.hero-title {
  margin: 0 0 8px;
  font-size: 2em;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text);
}
.hero-sub { color: var(--text-dim); font-size: .98em; letter-spacing: .8px; }
.hero-meta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-chip {
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--chip-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font-size: .86em;
  font-weight: 550;
  color: var(--text-dim);
  box-shadow: var(--shadow-1);
}

/* ---------- 入场与数据动画（桌面/手机通用，尊重系统减动效设置） ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes growX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* Hero 分层入场 */
.hero-inner > * { animation: fadeUp .5s cubic-bezier(.2, .7, .3, 1) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .16s; }
.hero-chip { animation: popIn .4s cubic-bezier(.2, .7, .3, 1) both; }
.hero-chip:nth-child(2) { animation-delay: .2s; }
.hero-chip:nth-child(3) { animation-delay: .26s; }
.hero-chip:nth-child(4) { animation-delay: .32s; }

/* 统计卡依次浮现 */
.stat-grid .stat { animation: fadeUp .45s cubic-bezier(.2, .7, .3, 1) both; }
.stat-grid .stat:nth-child(1) { animation-delay: .05s; }
.stat-grid .stat:nth-child(2) { animation-delay: .11s; }
.stat-grid .stat:nth-child(3) { animation-delay: .17s; }
.stat-grid .stat:nth-child(4) { animation-delay: .23s; }
.stat-grid .stat:nth-child(5) { animation-delay: .29s; }

/* 项目卡片交错浮现 */
.grid-cards > .proj-card { animation: fadeUp .45s cubic-bezier(.2, .7, .3, 1) both; }
.grid-cards > .proj-card:nth-child(1) { animation-delay: .06s; }
.grid-cards > .proj-card:nth-child(2) { animation-delay: .12s; }
.grid-cards > .proj-card:nth-child(3) { animation-delay: .18s; }
.grid-cards > .proj-card:nth-child(4) { animation-delay: .24s; }
.grid-cards > .proj-card:nth-child(5) { animation-delay: .3s; }
.grid-cards > .proj-card:nth-child(6) { animation-delay: .36s; }
.grid-cards > .proj-card:nth-child(n+7) { animation-delay: .4s; }

/* 进度条生长动画 */
.progress > i {
  transform-origin: left center;
  animation: growX .8s cubic-bezier(.25, .8, .3, 1) both;
  animation-delay: .3s;
}

/* 页面切换轻入场 */
#view > * { animation-name: fadeIn; animation-duration: .25s; }
#view > .hero, #view > .stat-grid, #view > .grid-cards { animation-name: none; }

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