/* ==========================================================
   JR杰瑞 · 暗色为主 · 抽象底图
   ------------------------------------------------------------
   解决 2026-09-09 用户反馈：
   1) 暗色下 .hero__panel/.mini-card 仍是白底
   2) 主调换成暗色为主，亮色为辅
   3) 背景不再用手绘/插画 .webp，改用「矿物暖墨」抽象大色块
   4) hero / 各 section banner 全部走纯 CSS 色块 + 暖墨晕染
   ========================================================== */

/* ============================================================
   A. 默认改为暗色（官网 4 页 data-theme-default="dark" 同步改）
   —— 整体不写选择器，直接用 html[data-jr-base] 翻转
   ========================================================== */

/* ============================================================
   B. hero 全幅背景：去掉手绘 webp，换成抽象大色块
      暗色主调下：左上一团赭石暖光，右下藤黄，底色深墨
      亮色下：浅纸 + 暖墨晕染
   ========================================================== */
[data-jr-base] .hero__media {
  background-image: none;  /* 干掉手绘 webp */
}
[data-jr-base] .hero__media::after {
  background:
    /* 主暗色：墨底 */
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 60%, var(--mn-50) 100%),
    /* 暖墨晕染：左上赭石 + 右下藤黄 */
    radial-gradient(60% 70% at 18% 25%, rgba(217, 138, 78, .32) 0%, transparent 65%),
    radial-gradient(55% 65% at 85% 78%, rgba(224, 168, 60, .22) 0%, transparent 70%),
    /* 底部下沉：融进 section */
    linear-gradient(180deg, transparent 60%, var(--mn-50) 100%);
  background-blend-mode: normal, screen, screen, normal;
}
/* 亮色模式：换成浅纸 + 暖墨晕 */
[data-jr-base][data-theme="light"] .hero__media::after {
  background:
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 60%, var(--mn-50) 100%),
    radial-gradient(60% 70% at 18% 25%, rgba(180, 83, 42, .14) 0%, transparent 65%),
    radial-gradient(55% 65% at 85% 78%, rgba(217, 154, 43, .12) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--mn-50) 100%);
  background-blend-mode: normal, multiply, multiply, normal;
}

/* ============================================================
   C. hero 卡（.hero__panel / .mini-card / 里面的字）—— 暗色
   ========================================================== */
[data-jr-base] .hero__panel {
  background: var(--panel);
  background-image: none;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
}
[data-jr-base][data-theme="light"] .hero__panel {
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(0);
  box-shadow: var(--shadow);
}
[data-jr-base] .mini-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
}
[data-jr-base] .mini-card:hover {
  background: var(--panel);
  border-color: var(--accent);
}
[data-jr-base] .mini-card__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ============================================================
   D. 副背景（hero__glow / hero__grid / hero 装饰）—— 跟随暗色
   ========================================================== */
[data-jr-base] .hero__glow--1 { background: radial-gradient(circle, rgba(217,138,78,.28) 0%, transparent 70%); }
[data-jr-base] .hero__glow--2 { background: radial-gradient(circle, rgba(224,168,60,.22) 0%, transparent 70%); }
[data-jr-base] .hero__grid {
  background-image:
    linear-gradient(rgba(232,225,213,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,225,213,.04) 1px, transparent 1px);
}
[data-jr-base][data-theme="light"] .hero__grid {
  background-image:
    linear-gradient(rgba(28,26,23,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,26,23,.035) 1px, transparent 1px);
}

/* ============================================================
   E. 全部 .banner--xxx 干掉 webp 手绘/摄影/织物/胶片
      改成抽象色块 + 暖墨晕染（每个 section 一个调子）
   ========================================================== */
[data-jr-base] .banner--products,
[data-jr-base] .banner--capability,
[data-jr-base] .banner--workflow,
[data-jr-base] .banner--showcase,
[data-jr-base] .banner--pricing,
[data-jr-base] .banner--cta,
[data-jr-base] .banner--painting,
[data-jr-base] .banner--drama,
[data-jr-base] .banner--wardrobe {
  background-image: none !important;
  opacity: 1;
}
/* 暗色：底色就是 --bg，每节用 ::after 做主题色晕染 */
[data-jr-base] .banner--products::after {
  background:
    radial-gradient(60% 60% at 20% 40%, rgba(180, 83, 42, .22) 0%, transparent 70%),
    radial-gradient(50% 50% at 82% 70%, rgba(217, 154, 43, .14) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--capability::after {
  background:
    radial-gradient(60% 60% at 78% 30%, rgba(180, 83, 42, .24) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--workflow::after {
  background:
    linear-gradient(100deg, rgba(180, 83, 42, .20) 0%, transparent 45%, rgba(217, 154, 43, .16) 100%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--showcase::after {
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(217, 154, 43, .20) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--pricing::after {
  background:
    radial-gradient(60% 60% at 30% 65%, rgba(47, 93, 80, .28) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--cta::after {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(180, 83, 42, .28) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--painting::after {
  /* 画室 · 赭石主 */
  background:
    radial-gradient(55% 60% at 25% 40%, rgba(180, 83, 42, .30) 0%, transparent 70%),
    radial-gradient(50% 50% at 78% 68%, rgba(217, 154, 43, .14) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--drama::after {
  /* 剧场 · 藤黄主 */
  background:
    radial-gradient(55% 55% at 72% 32%, rgba(217, 154, 43, .28) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}
[data-jr-base] .banner--wardrobe::after {
  /* 衣橱 · 松绿主 */
  background:
    radial-gradient(55% 55% at 28% 60%, rgba(47, 93, 80, .32) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 50%, var(--mn-50) 100%);
}

/* 亮色：用浅底 + 浅暖墨晕 */
[data-jr-base][data-theme="light"] .banner--products::after,
[data-jr-base][data-theme="light"] .banner--capability::after,
[data-jr-base][data-theme="light"] .banner--workflow::after,
[data-jr-base][data-theme="light"] .banner--showcase::after,
[data-jr-base][data-theme="light"] .banner--pricing::after,
[data-jr-base][data-theme="light"] .banner--cta::after,
[data-jr-base][data-theme="light"] .banner--painting::after,
[data-jr-base][data-theme="light"] .banner--drama::after,
[data-jr-base][data-theme="light"] .banner--wardrobe::after {
  /* 弱化版：alpha 一律砍半 */
  filter: saturate(.7);
}

/* 噪点：暗色下需要更弱，避免画面脏 */
[data-jr-base] .banner::before { opacity: .14; mix-blend-mode: soft-light; }

/* 子页副 hero */
[data-jr-base] .sub-hero__bg { background: var(--mn-50); }

/* ============================================================
   F. index.html 开场门廊 .gate —— 干掉手绘 gate-rooms.webp
      暗色：用矿物暖墨抽象色块（赭石/藤黄/松绿三块并列）
      亮色：浅纸 + 浅色晕染
   ========================================================== */
[data-jr-base] .gate {
  background-color: var(--mn-50);
  background-image: none;
}
[data-jr-base][data-theme="dark"] .gate {
  background:
    /* 三列主题色抽象块：从左到右赭石/藤黄/松绿 */
    linear-gradient(90deg,
      rgba(180, 83, 42, .28) 0%, transparent 33%,
      rgba(217, 154, 43, .18) 33%, transparent 66%,
      rgba(47, 93, 80, .32) 66%, transparent 100%),
    radial-gradient(60% 70% at 20% 30%, rgba(217,138,78,.20) 0%, transparent 70%),
    radial-gradient(50% 60% at 82% 70%, rgba(47,93,80,.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 100%);
}
[data-jr-base][data-theme="light"] .gate {
  background:
    linear-gradient(90deg,
      rgba(180, 83, 42, .14) 0%, transparent 33%,
      rgba(217, 154, 43, .10) 33%, transparent 66%,
      rgba(47, 93, 80, .18) 66%, transparent 100%),
    linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 100%);
}