/* base.css
 * 全局基础样式 & 多巴胺配色变量
 */

:root {
  /* 颜色变量：可以以后统一修改主题 */
  --color-primary: #ff6b6b;   /* 亮粉，多巴胺主色 */
  --color-secondary: #5c7cfa; /* 荧光蓝，辅助主色 */
  --color-accent: #ffd43b;    /* 柠檬黄，高亮点缀 */

  --color-bg: #ffffff;        /* 页面背景 */
  --color-bg-soft: #f8f9fa;   /* 柔和背景块 */
  --color-text: #212529;      /* 主文字 */
  --color-text-muted: #495057;/* 次级文字 */
  --color-border-subtle: #e9ecef;

  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.08);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 999px;

  --transition-fast: 0.2s ease-out;
  --transition-normal: 0.3s ease-out;

  --container-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.site-wrapper {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(255, 107, 107, 0.08), transparent 55%),
              radial-gradient(circle at bottom right, rgba(92, 124, 250, 0.08), transparent 55%);
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 80px 0;
}

.section-header {
  margin-bottom: 32px;
}

.section-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
}

.section-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .section {
    padding: 96px 0;
  }

  .section-title {
    font-size: 32px;
  }
}

/* Intersection Observer 进入视口时的通用动画 */

.js-observe {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.js-observe.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 星空 / 银河轻量特效层（不影响交互） */
.site-wrapper::before,
.site-wrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 1;
}

/* 远处星点：细密、微闪烁 */
.site-wrapper::before {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1px 1px at 50% 70%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.4), transparent 55%);
  animation: star-twinkle 5s ease-in-out infinite alternate;
}

/* 近处柔和光雾，模拟银河条带 */
.site-wrapper::after {
  background-image:
    radial-gradient(40% 20% at 60% 20%, rgba(92, 124, 250, 0.16), transparent 60%),
    radial-gradient(35% 18% at 30% 60%, rgba(255, 107, 107, 0.14), transparent 65%),
    radial-gradient(30% 16% at 70% 75%, rgba(255, 212, 59, 0.12), transparent 70%);
  animation: nebula-shift 12s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.35; transform: translate3d(0, 0, 0); }
  100% { opacity: 0.75; transform: translate3d(4px, -6px, 0); }
}

@keyframes nebula-shift {
  0% { opacity: 0.38; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0.62; transform: translate3d(-6px, 8px, 0) scale(1.02); }
}