/* ═══════════ kiki.dating · 一封信 ═══════════ */

:root {
  --cream-bg: #efe6d1;
  --paper: #fbf5e8;
  --ink: #4a4234;
  --ink-soft: #8a7d61;
  --accent: #bc5a45;
  --sage: #8b9a63;
  --sage-deep: #6d7c49;
  --f-hand: 'Ma Shan Zheng', 'LXGW WenKai Screen', cursive;
  --f-script: 'Great Vibes', cursive;
  --f-body: 'LXGW WenKai Screen', 'Noto Serif SC', 'Songti SC', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body.sealed { overflow: hidden; height: 100dvh; }
body.sealed #letter { visibility: hidden; }

/* 纸张颗粒质感（全局覆盖层） */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.48 0 0 0 0 0.44 0 0 0 0 0.36 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════ 场景一：3D 信封 ═══════════ */

#scene3d {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: radial-gradient(120% 100% at 50% 22%, #f8f1e1 0%, #efe4cc 55%, #e4d4b2 100%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s ease;
}
#scene3d.exit { opacity: 0; pointer-events: none; }
#scene3d canvas { position: absolute; inset: 0; display: block; }

/* ═══════════ 场景二：信（信纸铺满全屏） ═══════════ */

#letter { min-height: 100vh; }
body.opened #letter { animation: letter-in .7s ease-out both; }
@keyframes letter-in {
  from { opacity: 0; }
}

.paper {
  min-height: 100vh;
  background:
    linear-gradient(rgba(255, 252, 242, .55), rgba(249, 241, 222, 0) 30%),
    var(--paper);
}

.content {
  max-width: 660px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 110px) clamp(26px, 6.5vw, 64px) clamp(80px, 12vh, 140px);
}

/* ——— 排版 ——— */

.letter-head { margin-bottom: 2.2em; }
.kicker {
  font-size: 13px;
  letter-spacing: .38em;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.salute {
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: clamp(34px, 7.5vw, 46px);
  color: var(--ink);
  text-align: left;
}

section { margin: 0 0 1.6em; }
section.closing { margin-top: 3em; }
section.closing p { text-align: left; }
section p {
  font-size: clamp(16px, 4.3vw, 17.5px);
  line-height: 2.15;
  letter-spacing: .03em;
  margin-bottom: 1em;
  text-align: justify;
  text-justify: inter-ideograph;
}
section p:last-child { margin-bottom: 0; }

em.dots {
  font-style: normal;
  -webkit-text-emphasis: filled circle var(--accent);
  text-emphasis: filled circle var(--accent);
  -webkit-text-emphasis-position: under right;
  text-emphasis-position: under right;
}

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .9em;
  background: rgba(139, 154, 99, .15);
  color: #5d6d3b;
  padding: .1em .45em;
  border-radius: 6px;
  white-space: nowrap;
}

.divider {
  width: 150px;
  margin: 2.6em auto;
  color: #ab9271;
}
.divider svg { display: block; width: 100%; }

.memos-block { margin-top: 2.2em; }
.memos-title {
  font-family: var(--f-hand);
  font-size: clamp(21px, 5vw, 26px);
  color: var(--sage-deep);
  text-align: center !important;
  margin-bottom: 1.4em !important;
}
.memo {
  position: relative;
  background: #fffdf3;
  border: 1px solid #ede2c4;
  box-shadow: 0 3px 10px rgba(110, 90, 50, .10);
  padding: 20px 22px 16px;
  width: min(100%, 470px);
  margin: 20px auto;
}
.memo p {
  font-size: clamp(15px, 4vw, 16.5px) !important;
  line-height: 1.9 !important;
  margin: 0 !important;
  text-align: left !important;
}
.memo .tape {
  position: absolute;
  top: -11px; left: 50%;
  width: 78px; height: 22px;
  background: rgba(222, 184, 160, .55);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 1px 2px rgba(110, 90, 50, .12);
}
.m1 { transform: rotate(-1.3deg); }
.m2 { transform: rotate(1.1deg); }
.m2 .tape { transform: translateX(-50%) rotate(2.4deg); background: rgba(180, 197, 145, .5); }
.m3 { transform: rotate(-.6deg); }
.m3 .tape { transform: translateX(-50%) rotate(-1.2deg); background: rgba(226, 178, 181, .55); }

.days-block { text-align: center; margin: 3em 0; }
.days-line { text-align: center !important; color: var(--ink-soft); font-size: 15px !important; }
.days-num {
  font-family: var(--f-hand);
  font-size: clamp(54px, 12vw, 72px) !important;
  color: var(--accent);
  line-height: 1.3 !important;
  text-align: center !important;
}
.days-unit { font-size: .35em; margin-left: 10px; color: var(--ink); }

.wish { text-align: center; margin: 3.2em 0 2.6em; }
.wish-big {
  font-family: var(--f-hand);
  font-size: clamp(30px, 7vw, 42px) !important;
  color: var(--accent);
  line-height: 1.6 !important;
  text-align: center !important;
}
.wish-small {
  color: var(--ink-soft);
  font-size: 15px !important;
  text-align: center !important;
  margin-top: .6em;
}

.signoff { text-align: right; margin-top: 3em; }
.sig-name {
  font-family: var(--f-hand);
  font-size: clamp(26px, 6vw, 32px) !important;
  text-align: right !important;
  line-height: 1.5 !important;
}
.sig-date {
  font-size: 13.5px !important;
  color: var(--ink-soft);
  text-align: right !important;
  letter-spacing: .12em;
}

.ps { color: var(--ink-soft); margin-top: 2.8em; }
.ps p { font-size: 15.5px !important; margin-bottom: .3em !important; }

/* 滚动浮现 */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease, transform .95s ease;
}
.rv.on { opacity: 1; transform: none; }
body.no3d .rv { opacity: 1; transform: none; }

/* 无障碍：减弱动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}