/* ================================================================
   axwo — 设计语言参考 hamishw.com（浅色 · 编辑式 · 大字号）
   背景：蓝 · 粉 · 白
   ================================================================ */

:root {
  /* 主题色（浅色） */
  --background: oklch(96.12% 0 0);        /* 近白中性 */
  --background-light: #ffffff;
  --primary: #1a1a1a;
  --accent: oklch(72% 0.15 202.24);        /* 蓝色强调色 */
  --pink: #f2a7bb;                          /* 粉色点缀 */
  --text: #1a1a1a;
  --text-body: rgba(0, 0, 0, 0.78);
  --text-light: rgba(0, 0, 0, 0.55);
  --line: rgba(0, 0, 0, 0.13);

  /* 排版 */
  --font-stack: "Helvetica Neue", "Arial", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --fs-h0: clamp(3.5rem, 13vw, 8.75rem);
  --fs-h1: clamp(2.5rem, 6.5vw, 5rem);
  --fs-h2: clamp(2.1rem, 4.2vw, 3.125rem);
  --fs-h3: clamp(1.75rem, 3vw, 2.25rem);
  --fs-body-l: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body-m: 1.125rem;
  --fs-body-s: 1rem;

  --line-height-title: 1.1;
  --line-height-body: 1.6;

  /* 间距与容器 */
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-outer: clamp(24px, 5vw, 48px);
  --max-width: 1000px;

  /* 动效 */
  --duration-m: 0.5s;
  --duration-l: 0.8s;
  --bezier: cubic-bezier(0.22, 1, 0.36, 1);

  --radius-btn: 14px;
  --radius-panel: 24px;

  color-scheme: light;
}

/* ============ 优雅背景层：蓝粉白 ============ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}

.orb-1 {
  width: 900px; height: 900px;
  top: -320px; left: 50%;
  margin-left: -450px;
  background: radial-gradient(circle, rgba(167, 216, 240, 0.65), transparent 62%);
  animation: breathe-1 90s ease-in-out infinite alternate;
}
.orb-2 {
  width: 720px; height: 720px;
  bottom: -280px; right: -180px;
  background: radial-gradient(circle, rgba(247, 178, 197, 0.6), transparent 62%);
  animation: breathe-2 110s ease-in-out infinite alternate;
}
.orb-3 {
  width: 640px; height: 640px;
  top: 42%; left: -220px;
  background: radial-gradient(circle, rgba(210, 238, 248, 0.8), transparent 62%);
  animation: breathe-3 130s ease-in-out infinite alternate;
}

@keyframes breathe-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 90px) scale(1.15); }
}
@keyframes breathe-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-80px, -60px) scale(1.12); }
}
@keyframes breathe-3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(90px, -50px) scale(1.18); }
}

/* 细腻胶片颗粒 */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 边缘极淡的蓝灰晕染，聚拢视线 */
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 62%, rgba(90, 130, 160, 0.07) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-stack);
  font-weight: var(--font-weight-regular);
  background-color: var(--background);
  color: var(--text-body);
  width: 100vw;
  overflow-x: hidden;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 6px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: var(--font-weight-medium); }

:focus { outline: 3px solid var(--text); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* 顶部滚动进度条 */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
  pointer-events: none;
}

/* 跳过链接 */
.skip {
  position: fixed;
  top: var(--space-m);
  left: var(--space-m);
  z-index: 70;
  padding: var(--space-s) var(--space-m);
  background: var(--primary);
  color: #fff;
  font-weight: var(--font-weight-medium);
  transform: translateY(-200%);
  transition: transform 0.3s var(--bezier);
  border-radius: var(--radius-btn);
}
.skip:focus { transform: translateY(0); }

/* ============ 导航 ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--space-outer);
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.logo {
  display: grid;
  place-items: center;
  color: var(--text);
  transition: color 0.25s ease;
}
.logo:hover { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links > a {
  font-size: var(--fs-body-s);
  font-weight: var(--font-weight-medium);
  color: var(--text-body);
  position: relative;
  transition: color 0.25s ease;
}
.nav-links > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-m) var(--bezier);
}
.nav-links > a:hover { color: var(--text); }
.nav-links > a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-icons {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-left: var(--space-m);
  border-left: 1px solid var(--line);
}
.nav-icons a {
  color: var(--text-light);
  display: grid;
  place-items: center;
  transition: color 0.25s ease, transform 0.25s ease;
}
.nav-icons a:hover { color: var(--accent); transform: translateY(-2px); }

.menu-toggle {
  display: none;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: 0;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ============ Hero ============ */
.intro {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--space-outer) 96px;
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

.name {
  font-size: var(--fs-h0);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-title);
  letter-spacing: -0.02em;
  color: var(--text);
}

.roles {
  margin-top: var(--space-l);
  font-weight: var(--font-weight-medium);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.35;
  color: var(--text-body);
}

.role-row { display: flex; align-items: center; gap: var(--space-l); }

.role-row .line {
  flex: 1;
  max-width: 220px;
  height: 2px;
  background: var(--line);
  position: relative;
}
.role-row .line::after {
  content: "";
  position: absolute;
  top: -3px; right: 0;
  width: 64px; height: 8px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s var(--bezier) 0.15s;
}

.word.plus::before {
  content: "+";
  margin-right: 0.5em;
  color: var(--accent);
}

/* 入场动画（加载时由 JS 添加 .in） */
[data-load] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--duration-l) var(--bezier), transform var(--duration-l) var(--bezier);
}
[data-load].in { opacity: 1; transform: none; }
.role-row .line { transform: scaleX(0); transform-origin: right; transition: transform 0.9s var(--bezier); }
.intro.in .role-row .line { transform: scaleX(1); }

.scroll-indicator {
  position: absolute;
  bottom: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--fs-body-s);
  font-weight: var(--font-weight-medium);
  color: var(--text-light);
  transition: color 0.25s ease;
}
.scroll-indicator svg { animation: bob 2.2s ease-in-out infinite; }
.scroll-indicator:hover { color: var(--accent); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============ 内容行（编号 + 说明 + 插图） ============ */
.row {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-outer);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* 出现动画 */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-l) var(--bezier), transform var(--duration-l) var(--bezier);
}
[data-reveal].in { opacity: 1; transform: none; }

.index { margin-bottom: var(--space-l); }

.divider {
  position: relative;
  height: 2px;
  background: var(--line);
  margin-bottom: var(--space-m);
}
.divider .line { display: block; height: 100%; background: var(--line); }
.divider .notch {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 8px;
  width: 64px;
  background: var(--accent);
}

/* 分割线绘制动画（进入视口后） */
[data-reveal] .divider .notch,
[data-reveal] .divider .line {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s var(--bezier);
}
[data-reveal].in .divider .line { transform: scaleX(1); }
[data-reveal].in .divider .notch { transform: scaleX(1) translateY(-50%); transition-delay: 0.25s; }

.index-number {
  font-size: var(--fs-body-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--text-light);
}

.row-title {
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-title);
  color: var(--text);
  margin-bottom: var(--space-m);
}

.row-desc {
  font-size: var(--fs-body-l);
  color: var(--text-body);
  max-width: 34ch;
  margin-bottom: var(--space-xl);
}

/* 按钮（圆角矩形） */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 11px 24px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  font-size: var(--fs-body-s);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.btn svg { transition: transform 0.25s var(--bezier); }
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background-color: rgba(91, 196, 221, 0.07);
}
.btn:hover svg { transform: translateX(4px); }
.btn .icon-start { margin-right: 2px; }
.btn:hover .icon-start { transform: translateX(-3px); }

/* 插图面板 */
.col-preview { display: grid; place-items: center; }

.panel {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background:
    radial-gradient(120% 120% at 50% 30%, #ffffff, #f0f6fa 72%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.6s var(--bezier);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(167, 216, 240, 0.22), transparent 70%);
}
.panel:hover {
  border-color: rgba(91, 196, 221, 0.65);
  transform: translateY(-4px);
}
.art {
  width: 78%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* ============ 关于 ============ */
.about {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-outer) var(--space-4xl, 96px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.about-title {
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-title);
  color: var(--text);
  margin-bottom: var(--space-l);
}

.about-text {
  font-size: var(--fs-body-l);
  color: var(--text-body);
  margin-bottom: var(--space-m);
  max-width: 44ch;
}
.about-text a {
  color: var(--primary);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.about-text a:hover { color: var(--accent); border-color: var(--accent); }

.about .btn { margin-top: var(--space-m); }

.col-portrait { display: flex; flex-direction: column; gap: var(--space-l); }

.tag { display: flex; align-items: center; gap: var(--space-m); }
.tag .divider { flex: 1; margin-bottom: 0; }
.tag-text {
  font-size: var(--fs-body-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  color: var(--text-light);
  white-space: nowrap;
}
.col-portrait .divider .notch,
.col-portrait .divider .line {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.9s var(--bezier);
}
[data-reveal].in .col-portrait .divider .line { transform: scaleX(1); }
[data-reveal].in .col-portrait .divider .notch { transform: scaleX(1) translateY(-50%); transition-delay: 0.25s; }

.portrait {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background:
    radial-gradient(130% 90% at 50% 25%, rgba(247, 178, 197, 0.28), transparent 65%),
    linear-gradient(160deg, #ffffff, #f4f0f7 75%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.6s var(--bezier);
}
.portrait svg { width: 52%; height: auto; position: relative; z-index: 1; }
.portrait:hover {
  border-color: rgba(242, 167, 187, 0.65);
  transform: translateY(-4px);
}

/* ============ 页脚 ============ */
.footer {
  padding: var(--space-3xl) var(--space-outer) var(--space-2xl);
  text-align: center;
  font-size: var(--fs-body-s);
  color: var(--text-light);
}
.footer a {
  color: var(--text-light);
  border-bottom: 1px solid var(--line);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer a:hover { color: var(--accent); border-color: var(--accent); }

/* ============ 响应式 ============ */
@media (max-width: 820px) {
  .row, .about { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .col-preview { order: -1; }
  .row.alternate .col-preview { order: -1; }
  .panel { max-width: 100%; }

  .menu-toggle { display: grid; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100svh;
    width: min(300px, 78vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-3xl) var(--space-xl);
    background: rgba(252, 252, 252, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.45s var(--bezier);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > a { font-size: var(--fs-h4, 1.5rem); font-weight: var(--font-weight-medium); }
  .nav-icons { border-left: 0; padding-left: 0; gap: var(--space-l); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-load], [data-reveal] { opacity: 1; transform: none; }
  .scroll-indicator svg { animation: none; }
}