/* ============================================================
   me-2026 · Acid Future Arcade
   Design tokens + layout + components
   翻译自 Ardot 文件 me-2026 · v0 (节点 5:1)
   ============================================================ */

/* ---------- Design Tokens (CSS Variables) ---------- */
:root {
  /* === 字号 === */
  --fs-eyebrow: 14px;
  --fs-h1: 44px;
  --fs-h2: 20px;
  --fs-h3: 22px;
  --fs-body: 13px;
  --fs-subtitle: 18px;
  --fs-tag: 12px;
  --fs-cta: 14px;
  --fs-email: 28px;

  /* === 字体 === */
  --ff-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* === 间距 === */
  --gap-section: 80px;
  --gap-card: 24px;
  --pad-section: 64px;
  --pad-frame: 80px;
  --pad-card: 20px;
  --gap-stack-sm: 8px;
  --gap-stack-md: 16px;
  --gap-stack-lg: 24px;

  /* === 圆角 === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* === 容器最大宽度 === */
  --w-frame: 1440px;
}

/* ---------- Theme Tokens ---------- */
/* cafe 是默认主题（深紫深绿 acid arcade），未设 data-theme 时也用它 */
:root,
[data-theme="cafe"] {
  --c-bg-top: #1A0033;
  --c-bg-bottom: #001A0F;
  --c-card: #1A1A1A;
  --c-pure-black: #0A0A0A;

  --c-accent: #00FF88;          /* 主色 · 荧光绿 */
  --c-accent-2: #B845FF;        /* 副色 · 荧光紫 */
  --c-accent-3: #00F2FF;        /* 故障色 · 青色 */

  --c-text-muted: #4A6B5F;
  --c-text-faint: #888888;

  --c-mask: rgba(10, 10, 10, 0.65);     /* 卡带蒙版 */
  --c-scanline: rgba(0, 0, 0, 0.45);    /* CRT 扫描线 */
  --hero-glow-1: rgba(184, 69, 255, 0.18);
  --hero-glow-2: rgba(0, 255, 136, 0.08);
  --shadow-cta: 0 0 24px rgba(184, 69, 255, 0.8);
  --shadow-social: 0 0 8px rgba(0, 255, 136, 0.6);
  --shadow-cart-title: 0 0 12px rgba(0, 255, 136, 0.6);
  --shadow-hero-visual: 0 0 32px rgba(184, 69, 255, 0.5);

  --img-saturate: 0.7;          /* 卡带封面饱和度 */
  --scanline-blend: multiply;
}

[data-theme="light"] {
  --c-bg-top: #FAF6F0;          /* 暖米色 */
  --c-bg-bottom: #FFFFFF;
  --c-card: #FFFFFF;
  --c-pure-black: #1A1A1A;

  --c-accent: #18181B;          /* 黑作主色 */
  --c-accent-2: #B845FF;        /* 紫保留点睛 */
  --c-accent-3: #6B7280;        /* 灰替代青 */

  --c-text-muted: #6B7280;
  --c-text-faint: #A1A1AA;

  --c-mask: rgba(255, 255, 255, 0.45);
  --c-scanline: rgba(0, 0, 0, 0.04);
  --hero-glow-1: rgba(184, 69, 255, 0.10);
  --hero-glow-2: rgba(24, 24, 27, 0.04);
  --shadow-cta: 0 8px 24px rgba(184, 69, 255, 0.25);
  --shadow-social: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-cart-title: none;
  --shadow-hero-visual: 0 12px 32px rgba(0, 0, 0, 0.12);

  --img-saturate: 1;
  --scanline-blend: multiply;
}

[data-theme="night"] {
  --c-bg-top: #0A0F1F;          /* 深空蓝紫黑，比 cafe 更冷 */
  --c-bg-bottom: #000000;
  --c-card: #111827;
  --c-pure-black: #000000;

  --c-accent: #38BDF8;          /* 冷蓝主色 */
  --c-accent-2: #818CF8;        /* 紫蓝副色 */
  --c-accent-3: #94A3B8;        /* 银灰故障色 */

  --c-text-muted: #475569;
  --c-text-faint: #64748B;

  --c-mask: rgba(0, 0, 0, 0.5);
  --c-scanline: rgba(56, 189, 248, 0.06);
  --hero-glow-1: rgba(129, 140, 248, 0.18);
  --hero-glow-2: rgba(56, 189, 248, 0.10);
  --shadow-cta: 0 0 24px rgba(129, 140, 248, 0.6);
  --shadow-social: 0 0 8px rgba(56, 189, 248, 0.5);
  --shadow-cart-title: 0 0 12px rgba(56, 189, 248, 0.5);
  --shadow-hero-visual: 0 0 32px rgba(129, 140, 248, 0.4);

  --img-saturate: 0.8;
  --scanline-blend: screen;
}

/* 兼容旧变量名（之前的样式继续用 --c-neon-* 不动） */
:root {
  --c-neon-green: var(--c-accent);
  --c-neon-purple: var(--c-accent-2);
  --c-neon-cyan: var(--c-accent-3);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Body / 全局背景 ---------- */
body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--c-bg-top) 0%, var(--c-bg-bottom) 100%);
  color: var(--c-neon-green);
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: hidden;
  transition: background 400ms linear, color 400ms linear;
}

main {
  max-width: var(--w-frame);
  margin: 0 auto;
}

/* ---------- 通用 · 区块标题（带 chromatic aberration） ---------- */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-neon-green);
  text-shadow:
     2px 0 0 var(--c-neon-purple),
    -2px 0 0 var(--c-neon-cyan);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  max-width: var(--w-frame);
  margin: 0 auto;
  padding: 32px var(--pad-frame);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
}
.site-header .logo { color: var(--c-neon-green); }
.site-header .nav { display: flex; gap: 24px; }
.site-header .nav a {
  position: relative;
  color: var(--c-text-muted);
  padding: 4px 2px 10px;
  display: inline-block;
  transition: color 200ms;
}
.site-header .nav a:hover,
.site-header .nav a:focus-visible { color: var(--c-neon-green); }

/* 手写笔迹下划线（SVG path）—— 4 条不同曲率的"墨水线" */
.nav__ink {
  position: absolute;
  left: -2%;
  bottom: 0;
  width: 104%;             /* 略宽于文字，模拟手写超出边界 */
  height: 10px;
  fill: none;
  stroke: var(--c-neon-purple);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 默认隐藏：用 dasharray + dashoffset 把线"藏在右侧" */
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 480ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  /* 微旋转让线条不那么平直 */
  transform: rotate(-1deg);
}
.site-header .nav a:hover .nav__ink,
.site-header .nav a:focus-visible .nav__ink {
  stroke-dashoffset: 0;    /* hover 时画出来 */
}
@media (prefers-reduced-motion: reduce) {
  .nav__ink {
    transition: none;
    stroke-dashoffset: 0;  /* 直接显示，不动画 */
  }
}

/* ============================================================
   HERO
   1440 设计稿尺寸：1440 × 480；视觉图 320×320 @ left:80, top:80
   ============================================================ */
.hero {
  --x: 50%;
  --y: 50%;
  position: relative;
  min-height: 480px;
  padding: var(--pad-frame) var(--pad-frame) var(--pad-frame) 432px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-stack-md);
  background:
    radial-gradient(
      circle 480px at var(--x) var(--y),
      var(--hero-glow-1) 0%,
      var(--hero-glow-2) 35%,
      transparent 70%
    );
  transition: background 80ms linear;
}
.hero__visual {
  position: absolute;
  left: var(--pad-frame);
  top: var(--pad-frame);
  width: 320px;
  height: 320px;
  border: 2px solid var(--c-neon-purple);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-hero-visual);
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--c-neon-green);
  letter-spacing: 0.04em;
}
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--c-neon-green);
  letter-spacing: -0.01em;
  text-shadow:
     2px 0 0 var(--c-neon-purple),
    -2px 0 0 var(--c-neon-cyan);
}
.hero__subtitle {
  font-size: var(--fs-subtitle);
  color: var(--c-text-muted);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 48px;
  background: var(--c-neon-purple);
  color: var(--c-pure-black);
  font-size: var(--fs-cta);
  font-weight: 700;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-cta);
  margin-top: var(--gap-stack-sm);
}
.hero__tags {
  display: flex;
  gap: 12px;
  margin-top: var(--gap-stack-sm);
}
.hero__tags li {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-neon-green);
  border-radius: var(--r-pill);
  color: var(--c-neon-green);
  font-size: var(--fs-tag);
  font-weight: 700;
}

/* Hero / Now 之间的分割线 */
.divider {
  position: absolute;
  bottom: -40px;          /* 跨在 Hero 末尾下方，居中于 80gap */
  left: var(--pad-frame);
  right: var(--pad-frame);
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.divider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-neon-green);
}
.divider__line {
  flex: 1;
  height: 1px;
  background: var(--c-neon-green);
}

/* ============================================================
   NOW PLAYING
   ============================================================ */
.now {
  padding: var(--pad-section) var(--pad-frame);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-lg);
}
.now__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}
.now-card {
  background: var(--c-card);
  border-radius: var(--r-md);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-sm);
}
.now-card__index {
  font-size: var(--fs-tag);
  font-weight: 700;
  color: var(--c-neon-purple);
  letter-spacing: 0.04em;
}
.now-card__title {
  font-size: var(--fs-subtitle);
  font-weight: 700;
  color: var(--c-neon-green);
}
.now-card__body {
  font-size: var(--fs-body);
  color: var(--c-text-muted);
}

/* ============================================================
   WORKS / GAME CARTRIDGES
   ============================================================ */
.works {
  padding: var(--pad-section) var(--pad-frame);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-lg);
}
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 192px;
  gap: var(--gap-card);
}
.cart {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-card);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--img-saturate));
  z-index: 0;
}
/* 半透明蒙版（颜色随主题切换） */
.cart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-mask);
  z-index: 1;
  pointer-events: none;
}
.cart__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-neon-purple);
  z-index: 2;
}
.cart__index,
.cart__title,
.cart__tags { position: relative; z-index: 3; }

.cart__index {
  font-size: var(--fs-tag);
  font-weight: 700;
  color: var(--c-neon-purple);
}
.cart__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-neon-green);
  text-shadow: var(--shadow-cart-title);
}
.cart__tags {
  font-size: var(--fs-tag);
  color: var(--c-text-muted);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding: var(--pad-section) var(--pad-frame);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-height: 240px;
}
.contact__label {
  font-size: var(--fs-tag);
  font-weight: 700;
  color: var(--c-neon-purple);
  margin-bottom: var(--gap-stack-sm);
}
.contact__value {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--c-neon-green);
  font-size: var(--fs-email);
  font-weight: 700;
  text-shadow:
     2px 0 0 var(--c-neon-purple),
    -2px 0 0 var(--c-neon-cyan);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.contact__value::after {
  content: " ▸ COPY";
  font-size: var(--fs-tag);
  color: var(--c-text-muted);
  letter-spacing: 0.06em;
  margin-left: 12px;
  vertical-align: middle;
  font-weight: 700;
  text-shadow: none;
  transition: color 200ms;
}
.contact__value:hover::after { color: var(--c-neon-purple); }
.contact__value:active { transform: translateY(1px) scale(0.99); }
.contact__value.is-copied::after {
  content: " ✓ COPIED";
  color: var(--c-neon-green);
}
.social-list {
  display: flex;
  gap: 16px;
}
.social-list a {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-pure-black);
  border: 1px solid var(--c-neon-green);
  border-radius: 50%;
  color: var(--c-neon-green);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  box-shadow: var(--shadow-social);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  max-width: var(--w-frame);
  margin: 0 auto;
  padding: 32px var(--pad-frame) 48px;
  font-size: var(--fs-tag);
  color: var(--c-text-muted);
}
.footer__signoff { color: var(--c-neon-purple); }

/* ============================================================
   CRT Scanline Overlay
   覆盖整页，pointer-events:none 不阻挡交互
   ============================================================ */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    var(--c-scanline) 0px,
    var(--c-scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: var(--scanline-blend);
}

/* ============================================================
   Scroll Reveal · IntersectionObserver 触发的渐显动画
   初始 opacity:0 + translateY(20px) → 进入视口加 .is-visible
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Toast · 右下角复制反馈
   ============================================================ */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1001;                 /* 在 CRT(999) + 主题栏(1000) 之上 */
  padding: 12px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-neon-green);
  border-radius: var(--r-md);
  color: var(--c-neon-green);
  font-family: var(--ff-mono);
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-social);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.toast.is-show {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 100ms linear; transform: none !important; }
}
@media (max-width: 640px) {
  .toast { right: 16px; bottom: 16px; }
}
.theme-switch {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--c-card);
  border: 1px solid var(--c-text-muted);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
}
.theme-switch__btn {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font: inherit;
  text-transform: uppercase;
  transition: color 200ms, background 200ms;
}
.theme-switch__btn:hover {
  color: var(--c-neon-green);
}
.theme-switch__btn[aria-pressed="true"] {
  background: var(--c-neon-purple);
  color: var(--c-pure-black);
}
@media (max-width: 640px) {
  .theme-switch { top: 16px; right: 16px; }
  .theme-switch__btn { padding: 4px 8px; font-size: 10px; }
}

/* ============================================================
   响应式 · 桌面 1440 / 平板 768 / 移动 375
   ============================================================ */

/* === 平板（≤ 1024px）=== */
@media (max-width: 1024px) {
  :root {
    --pad-frame: 48px;
    --pad-section: 48px;
    --fs-h1: 36px;
    --fs-email: 24px;
  }
  .hero {
    padding: var(--pad-frame);
    min-height: auto;
  }
  .hero__visual {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--gap-stack-lg);
  }
  .now__list,
  .works__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .divider {
    bottom: -24px;
  }
}

/* === 移动（≤ 640px）=== */
@media (max-width: 640px) {
  :root {
    --pad-frame: 24px;
    --pad-section: 32px;
    --fs-h1: 28px;
    --fs-h2: 18px;
    --fs-h3: 18px;
    --fs-email: 20px;
    --fs-subtitle: 15px;
  }
  .site-header {
    flex-direction: column;
    gap: var(--gap-stack-md);
    padding: 24px var(--pad-frame);
  }
  .site-header .nav { flex-wrap: wrap; gap: 16px; }
  .hero__cta { width: 100%; }
  .now__list,
  .works__grid {
    grid-template-columns: 1fr;
  }
  .works__grid { grid-auto-rows: 200px; }
  .contact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-stack-lg);
  }
  .social-list a { width: 40px; height: 40px; }
}

/* === 极小屏（≤ 375px，iPhone SE 等）=== */
@media (max-width: 375px) {
  :root {
    --pad-frame: 16px;
    --fs-h1: 24px;
  }
  .hero__title { letter-spacing: 0; }
  .hero__tags { flex-wrap: wrap; }
}