@import url("tokens.css");

/* 分层：背景色 → 波纹 → 剪影 → 纸白容器 → 媒体。
   纹样与剪影静止，不随滚动独立移动。 */

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

html, body { margin: 0; }

body {
  min-height: 100%;
  background-color: var(--site-bg);
  color: var(--site-ink);
  font: 400 16px/1.7 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 层 1：背景波纹。只在容器外侧与区块间隙，不穿透媒体。 */
.layer-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("assets/wave-tile.svg?v=ca206c6") repeat;
  background-size: 240px 128px;
  pointer-events: none;
}

.page { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: 32px;
}

/* 纸白容器：柔软、接近被轻轻揉圆的纸片。 */
.paper {
  position: relative;
  background-color: var(--site-paper);
  border-radius: var(--r-shell);
  padding: var(--pad-shell);
  isolation: isolate;
}

/* 层 3：纸张颗粒只铺在容器底层，不覆盖照片与视频。 */
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("assets/paper-grain.svg") repeat;
  background-size: 512px 512px;
  opacity: .5;
  pointer-events: none;
}

/* 大型横向容器上下边缘的极轻微弧度，左右略不对称但重心稳定。 */
.paper--shell {
  border-radius: 80px 72px 76px 68px / 68px 76px 72px 80px;
}

.card {
  position: relative;
  background-color: var(--site-paper);
  border-radius: var(--r-card);
  padding: 28px;
  isolation: isolate;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("assets/paper-grain.svg") repeat;
  background-size: 512px 512px;
  opacity: .5;
}

.card--mint { background-color: var(--site-mint); }

/* 占位线：标题较粗较短，正文较细且长短有变化。静态，无动画。 */
.ph { border-radius: 999px; background: var(--ph-body); height: 10px; }
.ph-title { height: 22px; border-radius: 999px; background: var(--ph-title); }
.ph-title--lg { height: 30px; }
.ph-title--sm { height: 16px; }
.ph-lines { display: grid; gap: 12px; }
.ph-lines > i { display: block; height: 10px; border-radius: 999px; background: var(--ph-body); }

/* 按钮：胶囊形，适度厚实，底部轻微色差形成柔软按压感。 */
.btn {
  text-decoration:none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: var(--site-leaf);
  box-shadow: inset 0 -3px 0 rgb(47 74 56 / .3);
  /* 奶油白对 #507A5C 是 4.60:1，正常文字即达标，字号不再受限。 */
  color: var(--site-paper);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease;
}

/* 次要按钮：奶油白底配暖木棕字，6.83:1。 */
.btn--ghost {
  background: var(--site-paper);
  color: var(--site-ink);
  box-shadow: inset 0 0 0 2px rgb(103 83 63 / .22), inset 0 -3px 0 rgb(103 83 63 / .1);
}

.btn--sm { min-width: 104px; min-height: 44px; padding: 0 22px; }
/* 只放图标的按钮不需要正文宽度。 */
.btn--icon { min-width: 44px; padding: 0 14px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--site-leaf-hover); }
  .btn--ghost:hover { background: #f3efdd; }
}

/* 底色由浅到深单调加深，三态都通过正常文字标准。 */
.btn:active {
  transform: translateY(2px);
  background: var(--site-leaf-deep);
  color: var(--site-paper);
  box-shadow: inset 0 -1px 0 rgb(47 74 56 / .36);
}

.btn--ghost:active {
  background: var(--site-mint);
  /* 辅助浅绿底上用深叶绿字，5.03:1。 */
  color: var(--site-leaf-deep);
  box-shadow: inset 0 0 0 2px rgb(70 107 83 / .4), inset 0 -1px 0 rgb(103 83 63 / .12);
}

.btn:focus-visible {
  outline: 3px solid var(--site-leaf-deep);
  outline-offset: 3px;
}

/* 媒体区域保持干净：无纸纹、无纹样、无装饰覆盖。 */
.media {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background: #e8e5df;
}

.media > video,
.media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--still { border-radius: var(--r-card); }

.icon { width: 24px; height: 24px; display: block; }
/* display:block 的优先级高于 [hidden] 的默认样式，不写这条会让两个图标同时出现。 */
.icon[hidden] { display: none; }

/* 区块进入视野的轻微淡入与小幅位移。 */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}