/* ============================================================
   光中传媒 · index-v3 基础样式
   文件: base.css
   依赖: tokens.css (Design Tokens)
   说明: Reset + 网格 + 工具类 + 全局质感
   ============================================================ */

/* ============================================================
   1. 字体导入
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   2. Reset
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 12px);
}

body {
  font-family: var(--font-zh);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-leading);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.015'/></svg>");
  background-repeat: repeat;
  background-blend-mode: multiply;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

:lang(en),
.en {
  font-family: var(--font-en);
}

.mono {
  font-family: var(--font-mono);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

p {
  max-width: var(--paragraph-max-width);
}

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--duration-interact) var(--ease-interact);
}
a:hover {
  color: var(--color-hover);
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  background-color: var(--color-brand);
  color: var(--color-bg-alt);
}

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ============================================================
   3. 字号阶梯工具类
   ============================================================ */
.text-hero {
  font-size: var(--text-hero-size);
  font-weight: var(--text-hero-weight);
  letter-spacing: var(--text-hero-spacing);
  line-height: var(--text-hero-leading);
}
.text-section {
  font-size: var(--text-section-size);
  font-weight: var(--text-section-weight);
  letter-spacing: var(--text-section-spacing);
  line-height: var(--text-section-leading);
}
.text-sub {
  font-size: var(--text-sub-size);
  font-weight: var(--text-sub-weight);
  line-height: var(--text-sub-leading);
}
.text-body {
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-leading);
}
.text-aux {
  font-size: var(--text-aux-size);
  font-weight: var(--text-aux-weight);
  letter-spacing: var(--text-aux-spacing);
  line-height: var(--text-aux-leading);
}
.text-data {
  font-family: var(--font-en);
  font-size: var(--text-data-size);
  font-weight: var(--text-data-weight);
  letter-spacing: var(--text-data-spacing);
  line-height: var(--text-data-leading);
}

/* ============================================================
   4. 颜色工具类
   ============================================================ */
.c-text             { color: var(--color-text); }
.c-text-secondary   { color: var(--color-text-secondary); }
.c-text-muted       { color: var(--color-text-muted); }
.c-brand            { color: var(--color-brand); }
.c-brand-deep       { color: var(--color-brand-deep); }
.c-cyan             { color: var(--color-cyan); }
.c-dark-text        { color: var(--color-dark-text); }
.c-dark-text-secondary { color: var(--color-dark-text-secondary); }

.bg-main       { background-color: var(--color-bg); }
.bg-alt        { background-color: var(--color-bg-alt); }
.bg-dark       { background-color: var(--color-dark-bg); }
.bg-brand      { background-color: var(--color-brand); }
.bg-cyan       { background-color: var(--color-cyan); }

/* ============================================================
   5. 网格系统
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.container-wide {
  width: 100%;
  max-width: var(--grid-max-width-nav);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { grid-column: span 6; }
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 12; }
}

/* ============================================================
   6. 间距工具类 (margin/padding)
   ============================================================ */
/* 通用 margin */
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-24 { margin: var(--space-24); }
.m-40 { margin: var(--space-40); }
/* margin-top */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-40 { margin-top: var(--space-40); }
/* margin-bottom */
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-40 { margin-bottom: var(--space-40); }
/* 通用 padding */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-24 { padding: var(--space-24); }
.p-40 { padding: var(--space-40); }
/* padding-top */
.pt-1  { padding-top: var(--space-1); }
.pt-2  { padding-top: var(--space-2); }
.pt-3  { padding-top: var(--space-3); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-24 { padding-top: var(--space-24); }
.pt-40 { padding-top: var(--space-40); }
/* padding-bottom */
.pb-1  { padding-bottom: var(--space-1); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-3  { padding-bottom: var(--space-3); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-24 { padding-bottom: var(--space-24); }
.pb-40 { padding-bottom: var(--space-40); }

/* ============================================================
   7. 章节工具类
   ============================================================ */
.section {
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  position: relative;
}
.section-dark {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.section-dark a {
  color: var(--color-brand);
}
.section-dark a:hover {
  color: var(--color-hover);
}

/* ============================================================
   8. 通用工具类
   ============================================================ */
.measure     { max-width: var(--paragraph-max-width); }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

.hidden { display: none !important; }
.block  { display: block; }
.inline { display: inline; }
.w-full { width: 100%; }
.h-full { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ============================================================
   9. 动效基类 (初始隐藏, JS触发is-visible后显示)
   ============================================================ */
.animate {
  opacity: 0;
  will-change: transform, opacity;
}
.animate.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-enter-long) var(--ease-enter),
    transform var(--duration-enter-long) var(--ease-enter);
}
.animate-up       { transform: translateY(40px); }
.animate-down     { transform: translateY(-40px); }
.animate-left     { transform: translateX(-40px); }
.animate-right    { transform: translateX(40px); }
.animate-scale    { transform: scale(0.92); }

/* 关键帧动画工具类 */
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }
@keyframes scaleIn     { from { opacity: 0; transform: scale(0.92); }     to { opacity: 1; transform: none; } }

.anim-fade-in        { animation: fadeIn       var(--duration-enter-long) var(--ease-enter) both; }
.anim-fade-in-up     { animation: fadeInUp     var(--duration-enter-long) var(--ease-enter) both; }
.anim-fade-in-down   { animation: fadeInDown   var(--duration-enter-long) var(--ease-enter) both; }
.anim-fade-in-left   { animation: fadeInLeft   var(--duration-enter-long) var(--ease-enter) both; }
.anim-fade-in-right  { animation: fadeInRight  var(--duration-enter-long) var(--ease-enter) both; }
.anim-scale-in       { animation: scaleIn      var(--duration-enter-long) var(--ease-enter) both; }

/* ============================================================
   10. 全局质感 (噪点 / 滚动条 / 图片调色 / 链接hover下划线)
   ============================================================ */
/* 固定全屏极淡噪点 - 消除塑料感 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIvPjwvc3ZnPg==");
  background-size: 160px 160px;
  background-repeat: repeat;
}

/* 自定义细滚动条 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }
html { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* 图片统一暖调降饱和 */
img {
  filter: saturate(0.9) sepia(0.03);
}

/* 全局链接hover渐变下划线 (排除导航/品牌/案例/邮箱链接) */
a:not(.nav-link):not(.nav-brand):not(.work-link):not(.contact-email) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition:
    background-size var(--duration-interact) var(--ease-interact),
    color var(--duration-interact) var(--ease-interact);
}
a:not(.nav-link):not(.nav-brand):not(.work-link):not(.contact-email):hover {
  background-size: 100% 1px;
}

/* ============================================================
   11. 减弱动效偏好兜底
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body::after { opacity: 0.012; }
}