/* =========================================================
   曾思诚 · 欢迎页
   背景大字 + Q 版形象（视线跟随）+ 进入按钮
   页面只保留：大字 / 形象 / 两行文字 / 按钮
   ========================================================= */

:root {
  --paper: #faf8f4;
  --paper-warm: #f6f2ea;
  --ink: #14120f;
  --ink-soft: #3a352f;
  --muted: #857f78;
  --accent: #9a6a3f;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Times New Roman", Georgia, serif;

  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);

  /* JS 写入：-1 → 1 */
  --mx: 0;
  --my: 0;
  /* 瞳孔最大位移（CSS 像素），JS 按实际渲染宽度换算 */
  --eye-x: 0px;
  --eye-y: 0px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body.welcome {
  margin: 0;
  background:
    radial-gradient(120% 90% at 50% 6%, #fffdf8 0%, var(--paper) 44%, var(--paper-warm) 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 纸张噪点 ---------- */
.noise {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}

/* ---------- 背景大字 ---------- */
.wordmark {
  position: fixed;
  top: 17.5%;
  left: 50%;
  z-index: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(74px, 17.4vw, 262px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: rgba(20, 18, 15, 0.055);
  -webkit-text-stroke: 1px rgba(20, 18, 15, 0.10);
  translate: -50% -50%;
  transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -11px), 0);
  will-change: transform;
  user-select: none;
  pointer-events: none;
  animation: fadeIn 1.4s var(--ease) both;
}

/* ---------- 主体 ---------- */
.hero {
  position: relative;
  z-index: 3;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vh, 46px);
  padding: clamp(40px, 10vh, 104px) 24px clamp(12px, 2.4vh, 26px);
}

.avatar-wrap {
  position: relative;
  perspective: 1200px;
  display: grid;
  justify-items: center;
  position: relative;
  animation: riseIn 1.1s var(--ease) both;
  animation-delay: 0.12s;
}

.avatar-tilt {
  position: relative;
  height: clamp(300px, 56vh, 620px);
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--mx) * 5deg))
    rotateX(calc(var(--my) * -3.5deg))
    translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0);
  transition: transform 0.14s linear;
  will-change: transform;
  mask-image: linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.55) 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.55) 96%, transparent 100%);
}

.avatar-base,
.avatar-eyes,
.avatar-blink {
  display: block;
  height: 100%;
  width: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-eyes,
.avatar-blink {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: auto;
}

.avatar-eyes {
  transform: translate3d(var(--eye-x), var(--eye-y), 0);
  transition: transform 0.1s linear, opacity 0.06s linear;
  will-change: transform;
}

/* 眨眼图层：平时完全透明，眨眼瞬间显示（只含眼睑区域） */
.avatar-blink {
  opacity: 0;
  transition: opacity 0.06s linear;
  pointer-events: none;
}

body.eyes-closed .avatar-blink { opacity: 1; }
body.eyes-closed .avatar-eyes { opacity: 0; }

/* 图片解码完成前不显示，避免"先出现两只眼睛"的闪烁 */
.avatar-tilt { opacity: 0; }
body.is-ready .avatar-tilt { opacity: 1; transition: opacity 0.45s var(--ease); }

/* 加载期间垫一张模糊占位图（1KB），避免中间大片空白 */
.avatar-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/welcome/avatar-lqip.webp") center / contain no-repeat;
  filter: blur(10px) saturate(0.9);
  opacity: 0.9;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
body.is-ready .avatar-wrap::before { opacity: 0; }

/* 阴影也要等人物出现再显示，否则会看到一团孤零零的灰影 */
.avatar-shadow { opacity: 0; transition: opacity 0.45s var(--ease); }
body.is-ready .avatar-shadow { opacity: 1; }

.avatar-shadow {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: min(72%, 380px);
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(60, 46, 30, 0.14) 0%, rgba(60, 46, 30, 0) 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* ---------- 按钮 ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-foot {
  display: grid;
  justify-items: center;
  animation: riseIn 1.1s var(--ease) both;
  animation-delay: 0.3s;
}

.enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 30px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}

.enter:hover,
.enter:focus-visible {
  background: var(--ink);
  color: var(--paper);
  letter-spacing: 0.34em;
}

.enter-arrow { display: inline-grid; place-items: center; transition: transform 0.35s var(--ease); }
.enter:hover .enter-arrow { transform: translate(2px, -2px); }

/* ---------- 动效 ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 进入时的转场 */
body.is-leaving .wordmark { opacity: 0; }
body.is-leaving .avatar-tilt { transform: scale(1.08); }
body.is-leaving .hero-foot { opacity: 0; transform: translateY(8px); }
body.is-leaving .wordmark,
body.is-leaving .avatar-tilt,
body.is-leaving .hero-foot { transition: opacity 0.42s var(--ease), transform 0.5s var(--ease); }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
  .wordmark { font-size: clamp(52px, 20vw, 112px); top: 16.5%; }
  .avatar-tilt { height: clamp(240px, 42vh, 400px); }
  .hero { gap: clamp(16px, 3vh, 26px); padding-top: clamp(60px, 11vh, 120px); padding-bottom: clamp(20px, 4vh, 44px); }
  .enter { padding: 10px 26px; }
}

@media (max-height: 700px) {
  .avatar-tilt { height: clamp(220px, 46vh, 380px); }
  .hero { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-tilt,
  .avatar-eyes,
  .wordmark { transform: none !important; transition: none !important; }
  .avatar-wrap, .hero-foot, .wordmark { animation: none; }
}