/* ============================================================
 * layout.css — 整体布局：导航 / 首屏 / 区块 / 页脚
 * 首屏采用非对称电影海报式构图（左 42% / 右 58%）
 * ============================================================ */

/* 远景背景层 */
.rain-canvas { position: fixed; inset: 0; z-index: var(--z-rain); pointer-events: none; }
.fog { position: fixed; inset: 0; z-index: var(--z-fog); pointer-events: none; overflow: hidden; }
.fog-blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.5;
  will-change: transform;
}
.fog-a { width: 60vw; height: 60vw; left: -10vw; top: 10vh;
  background: radial-gradient(circle, rgba(91,143,214,0.42), transparent 70%);
  animation: fogDrift 38s var(--ease-soft) infinite alternate; }
.fog-b { width: 50vw; height: 50vw; right: -8vw; bottom: -5vh;
  background: radial-gradient(circle, rgba(107,95,158,0.32), transparent 70%);
  animation: fogDrift 46s var(--ease-soft) infinite alternate-reverse; }
.no-fog .fog { display: none; }

/* 电影颗粒（静态 SVG 噪点） */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; top: 50%; left: 50%; width: 360px; height: 360px; z-index: 3;
  margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  opacity: 0; mix-blend-mode: screen; transition: opacity var(--t-slow) var(--ease-soft);
}
body.has-pointer .cursor-glow { opacity: 0.5; }

/* 滚动进度 */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-progress); pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* 导航 */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: 14px var(--pad-x);
  background: rgba(7, 10, 18, 0.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.nav.scrolled { background: rgba(7, 10, 18, 0.72); border-bottom-color: var(--glass-border-soft); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-family: var(--font-en); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em;
  color: var(--ink); border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,143,214,0.25), rgba(107,95,158,0.18));
  border: 1px solid var(--glass-border);
}
.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav-links a {
  position: relative; font-size: 0.95rem; color: var(--ink-2);
  padding: 6px 2px; transition: color var(--t-fast) var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-toggle { display: none; width: 42px; height: 42px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast); }

/* 首屏 */
.hero {
  position: relative; z-index: var(--z-content);
  min-height: 100svh; padding: 0 var(--pad-x);
  display: flex; align-items: center;
  max-width: var(--maxw); margin: 0 auto;
  scroll-margin-top: 80px;
}
.hero-grid {
  width: 100%; display: grid; grid-template-columns: 42% 58%;
  align-items: center; gap: clamp(24px, 4vw, 64px);
}
.hero-info { max-width: 560px; }
.hero-visual { display: flex; justify-content: center; align-items: center; }

/* 通用区块 */
.section {
  position: relative; z-index: var(--z-content);
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(64px, 10vh, 130px) var(--pad-x);
  scroll-margin-top: 72px;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.section-title::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 16px;
  background: linear-gradient(90deg, var(--accent), transparent); }

/* 页脚 */
.footer {
  position: relative; z-index: var(--z-content);
  text-align: center; padding: 48px var(--pad-x) 64px;
  color: var(--ink-3); font-size: 0.9rem;
  border-top: 1px solid var(--glass-border-soft);
}
.footer-sub { margin-top: 6px; color: var(--ink-3); }