/*
 * 阶段三：可玩的世界。
 *
 * 让首页先看起来像一个正在制作游戏的工作室：深色游戏外壳、真实作品媒体、
 * 高对比状态色和明确的项目层级。山水只进入作品画面与几何切面，不再让整页
 * 看起来像文创包装或手工艺品牌页。
 */
:root {
  color-scheme: dark;
  --bg: #071218;
  --surface: #0d2028;
  --surface-2: #122c35;
  --surface-3: #1b3b43;
  --surface-4: #2a5558;
  --paper: #f3f4ec;
  --paper-light: #fafbf5;
  --ink: #071218;
  --ink-deep: #040d12;
  --jade: #79b9ab;
  --jade-deep: #4c908a;
  --mineral: #6b95b7;
  --signal: #c8ed6d;
  --cinnabar: #ff4f47;
  --cinnabar-dark: #d33c38;
  --line: rgba(243, 244, 236, 0.16);
  --line-strong: rgba(243, 244, 236, 0.34);
  --text: var(--paper);
  --text-muted: #a7bcb9;
  --text-dim: #71908d;
  --accent: var(--cinnabar);
  --accent-strong: #ff716a;
  --accent-soft: rgba(255, 79, 71, 0.14);
  --accent-line: rgba(255, 79, 71, 0.58);
  --maxw: 1520px;
}

html,
body {
  background: var(--bg);
}

body,
.site-main {
  color: var(--paper);
  background: var(--bg);
}

.site-rail {
  border-right-color: rgba(243, 244, 236, 0.13);
  background: var(--ink-deep);
}

.site-rail__panel::before {
  background: var(--cinnabar);
}

.site-rail__brand,
.site-rail__brand-name {
  color: var(--paper-light);
}

.site-rail__brand-mark {
  background: var(--cinnabar);
  color: var(--paper-light);
}

.site-rail__link {
  color: rgba(243, 244, 236, 0.56);
}

.site-rail__link:hover,
.site-rail__link.is-active {
  background: rgba(121, 185, 171, 0.14);
  border-left-color: var(--cinnabar);
  color: var(--paper-light);
}

.site-rail__index {
  color: var(--jade);
}

.site-rail__link.is-active .site-rail__index {
  color: var(--cinnabar);
}

.site-rail__foot {
  color: rgba(243, 244, 236, 0.42);
}

.site-header {
  background: rgba(7, 18, 24, 0.96);
  border-bottom-color: var(--line);
}

.brand,
.brand:hover,
.site-nav__link,
.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--paper);
}

.brand__logo {
  filter: none;
}

.site-nav__link:hover {
  background: var(--accent-soft);
}

.site-nav__link.is-active {
  color: var(--cinnabar);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--cinnabar);
}

.site-nav__toggle {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--paper);
}

.hero {
  min-height: min(100svh, 960px);
  background: var(--bg);
  border-bottom-color: var(--line);
}

.hero::before {
  right: -7vw;
  width: 59%;
  background: var(--surface);
  opacity: 0.74;
}

.hero::after {
  background: var(--cinnabar);
  opacity: 0.86;
}

.hero__inner {
  min-height: min(100svh, 960px);
}

.hero__copy::before {
  width: 70px;
  height: 7px;
  margin-bottom: 30px;
  background: var(--cinnabar);
}

.hero__title {
  color: var(--paper-light);
  font-size: clamp(3.2rem, 5.6vw, 6.4rem);
  font-weight: 850;
  text-shadow: 8px 8px 0 rgba(7, 18, 24, 0.42);
}

.hero__lead {
  color: var(--text-muted);
}

.btn {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--paper);
}

.btn:hover {
  border-color: var(--cinnabar);
  background: var(--accent-soft);
  color: var(--paper-light);
}

.btn--primary,
.btn--primary:hover {
  border-color: var(--cinnabar);
  background: var(--cinnabar);
  color: var(--ink-deep);
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--paper);
}

.hero__visual-slot {
  min-height: clamp(480px, 66vh, 700px);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.28);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

/* 首屏主视觉使用真实首页媒体，抽象几何只作为框体与状态层。 */
.hero__visual-slot .hero__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}

/* 同 redesign.css：这里原来是概念图背景层。主视觉改成一律用服务器图片后，
   home.js 不再生成 hero__media--concept，这两条已经是兜底，不再引用内置图。 */
.hero__visual-slot .hero__media--concept::before {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-3);
  content: "";
}

.hero__visual-slot .hero__media--concept .media > img {
  opacity: 0 !important;
}

.hero__visual-slot .hero__media::before {
  position: absolute;
  inset: 8% 8% 7% 9%;
  z-index: 2;
  border: 1px solid rgba(243, 244, 236, 0.46);
  content: "";
  pointer-events: none;
}

.hero__visual-slot .hero__media::after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(7, 18, 24, 0.82));
  content: "";
  pointer-events: none;
}

.hero__visual-slot .hero__media .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--surface-3);
}

.hero__visual-slot .hero__media .media__placeholder {
  background: var(--surface-3);
}

.hero__visual-slot .hero__media .media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.95) contrast(1.04);
}

.hero__visual-slot::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(243, 244, 236, 0.18);
  content: "";
  pointer-events: none;
}

.hero__visual-slot::after {
  position: absolute;
  top: 9%;
  right: 7%;
  z-index: 4;
  width: clamp(72px, 8vw, 112px);
  aspect-ratio: 1;
  background: var(--cinnabar);
  content: "";
  clip-path: polygon(0 0, 100% 0, 100% 84%, 78% 100%, 0 100%);
  box-shadow: 10px 10px 0 rgba(243, 244, 236, 0.13);
}

.hero__scroll {
  color: var(--jade);
}

.section {
  background: var(--bg);
  border-bottom-color: var(--line);
}

.section__title {
  color: var(--paper-light);
}

.section__title::before {
  background: var(--cinnabar);
}

.section__subtitle,
.about__lead {
  color: var(--text-muted);
}

.stats {
  border-top-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
}

.stat {
  border-right-color: var(--line);
}

.stat__value {
  color: var(--signal);
}

.stat__label,
.home-contact__label,
.group-tags__label {
  color: var(--text-dim);
}

/* 真实作品图恢复显示，避免首页像无内容的设计稿。 */
.group-banner__open,
.card,
.group-block,
.contact-form,
.contact-info__item,
.empty-state,
.error-state {
  border-color: var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--paper);
  box-shadow: none;
}

.group-banner__open:hover,
.card:hover {
  border-color: var(--cinnabar);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.22);
}

.group-banner__media .media {
  background: var(--surface-3);
}

/* 这一条原来是 .group-block__figure--art——只有「演示概念图」那条路径才生效。
   现在配图一律是服务器图片，--art 不再生成，所以改成对所有配图生效，
   把美术版定下的 100% × 100% + cover + 轻微降饱和 原样保留下来。 */
.group-banner__media .media > img,
.group-block__figure .media > img,
.masonry .card__media img,
.group-news .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.94) contrast(1.04);
}

.group-banner__body {
  background: rgba(7, 18, 24, 0.88);
  color: var(--paper);
}

.group-banner__kind {
  border-color: var(--cinnabar);
  border-radius: 0;
  color: var(--cinnabar);
}

.group-banner__name {
  color: var(--paper-light);
}

.group-banner__summary,
.group-banner__more {
  color: var(--text-muted);
}

.group-banner__more {
  color: var(--paper-light);
}

.chip {
  border-color: var(--line);
  border-radius: 0;
  background: rgba(121, 185, 171, 0.08);
  color: var(--text-muted);
}

.chip:hover,
.chip[aria-pressed="true"],
.chip.is-active {
  border-color: var(--cinnabar);
  background: var(--accent-soft);
  color: var(--paper-light);
}

.page-head,
.news-hero {
  background: var(--surface);
  border-bottom-color: var(--line);
}

.page-head__eyebrow,
.page-head__lead,
.news-hero__lead,
.news-hero__title {
  color: var(--paper-light);
}

.group-block__figure {
  border-color: var(--line);
  background: var(--surface-3);
}

.group-block__figure--art {
  background-position: center;
  background-size: cover;
}

.group-block__figure--art .media > img,
.group-block__figure--art .media__placeholder {
  opacity: 0.12 !important;
}

.group-block__body,
.group-block__works,
.group-tags--block {
  border-top-color: var(--line);
}

.input,
.textarea,
.select {
  border-color: var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--paper);
}

.site-footer {
  background: var(--ink-deep);
  border-top-color: var(--line);
}

.footer__bottom {
  border-top-color: var(--line);
}

@media (max-width: 820px) {
  .site-header {
    background: var(--ink-deep);
    border-bottom-color: var(--line);
  }

  .brand,
  .brand:hover {
    color: var(--paper-light);
  }

  .brand__tag {
    color: var(--text-dim);
  }

  .hero::before {
    background: var(--surface);
    opacity: 0.72;
  }

  .hero__title {
    font-size: clamp(2.8rem, 11vw, 4.5rem);
  }

  .hero__visual-slot {
    min-height: clamp(330px, 80vw, 470px);
    height: clamp(330px, 80vw, 470px);
    box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.26);
  }

  .group-banner__body {
    background: var(--surface);
    color: var(--paper);
  }

  .group-banner__name {
    color: var(--paper-light);
  }

  .group-banner__summary {
    color: var(--text-muted);
  }
}