/* ---- 字体（本地托管的可变字体，见 fonts/） ---- */
/* Noto Serif SC 只含页面会用到的字符；改动页面文案后需重新生成，见 README */
@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/noto-serif-sc.woff2?v=dd18346c') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2?v=5d618c46') format('woff2');
}

/* ---- 变量（默认为「松釉青灰」，JS 按主题覆盖 --bg0 / --accent） ---- */
:root {
  --bg0: #e8efe9;
  --accent: #59705f;
  --ink: #1b1f23;
  --muted: #5b6570;
  --track: color-mix(in srgb, var(--accent) 15%, transparent);
  --ease-theme: .8s ease;
  --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-num: 'Cormorant Garamond', 'Times New Roman', serif;
  /* 桌面版（设计稿 3a，1920×1080）的缩放单位：1 设计像素 = var(--s) */
  --s: min(calc(100vw / 1920), calc(100vh / 1080));
}

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

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--bg0);
  color: var(--ink);
  font-family: var(--font-serif);
  font-variant-numeric: lining-nums;
  transition: background-color var(--ease-theme);
  -webkit-font-smoothing: antialiased;
}

/* ---- 背景：每个主题一层柔光 + 颗粒，切换时交叉淡入 ---- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--b0);
  opacity: 0;
  transition: opacity var(--ease-theme);
}

.bg-layer.is-active {
  opacity: 1;
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.blob-a {
  left: 50%;
  top: -40%;
  width: calc(1800 * var(--s));
  height: calc(1350 * var(--s));
  background: radial-gradient(closest-side, var(--b1), transparent);
  animation: flowA 26s ease-in-out infinite alternate;
}

.blob-b {
  left: -24%;
  top: 46%;
  width: calc(1500 * var(--s));
  height: calc(1200 * var(--s));
  background: radial-gradient(closest-side, var(--blob-b), transparent);
  animation: flowB 32s ease-in-out infinite alternate;
}

.blob-c {
  left: 26%;
  top: 18%;
  width: calc(960 * var(--s));
  height: calc(960 * var(--s));
  background: radial-gradient(closest-side, var(--blob-c), transparent);
  animation: flowC 38s ease-in-out infinite alternate;
}

.bg-layer:not(.is-active) .blob {
  animation-play-state: paused;
}

.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.09%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
}

/* 位移按色块自身尺寸的百分比，手机版色块缩小后幅度同比缩小 */
@keyframes flowA {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15%, 13%) scale(1.12); }
  100% { transform: translate(-5%, 24%) scale(.95); }
}

@keyframes flowB {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(22%, -18%) scale(1.18); }
  100% { transform: translate(36%, -5%) scale(1.02); }
}

@keyframes flowC {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-38%, -14%) scale(1.25); }
  100% { transform: translate(25%, 19%) scale(.9); }
}

/* ---- 页面骨架：色点 / 主体 / 页脚 ---- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: max(20px, calc(56 * var(--s))) max(20px, calc(192 * var(--s))) max(24px, calc(72 * var(--s)));
  overflow-x: clip;
}

/* ---- 主题色点 ---- */
.themes {
  display: flex;
  justify-content: flex-end;
  gap: max(12px, calc(18 * var(--s)));
}

.theme-dot {
  position: relative;
  appearance: none;
  border: none;
  padding: 0;
  width: max(14px, calc(18 * var(--s)));
  height: max(14px, calc(18 * var(--s)));
  border-radius: 50%;
  background: var(--dot);
  cursor: pointer;
  transition: box-shadow .35s ease;
}

/* 扩大点击区域，不改变视觉尺寸 */
.theme-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.theme-dot[aria-pressed='true'] {
  box-shadow: 0 0 0 3px var(--bg0), 0 0 0 4.5px var(--dot);
}

.theme-dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

/* ---- 主体 ---- */
.hero {
  align-self: center;
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}

.headline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(22 * var(--s));
  font-weight: 400;
}

.headline-aside {
  font-size: max(16px, calc(32 * var(--s)));
  color: var(--muted);
}

.headline-aside:empty {
  display: none;
}

.headline-name {
  font-size: max(30px, calc(72 * var(--s)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--accent);
  transition: color var(--ease-theme);
}

.clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(30 * var(--s));
  margin-top: calc(40 * var(--s));
  font-variant-numeric: lining-nums tabular-nums;
}

.clock-days,
.clock-hms {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
}

.clock-days {
  font-size: calc(520 * var(--s));
  font-weight: 500;
  line-height: .78;
  letter-spacing: -.03em;
}

/* 桌面版：「天」和时分秒与天数排成一行 */
.clock-side {
  display: contents;
}

.clock-unit {
  font-size: calc(80 * var(--s));
  margin-right: calc(48 * var(--s));
}

.clock-hms {
  font-size: calc(210 * var(--s));
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
}

/* 数字翻动：新数字从上方落入，旧数字向下淡出 */
.digit {
  position: relative;
  display: inline-block;
}

.digit-in,
.digit-out {
  display: inline-block;
  animation: .38s cubic-bezier(.3, 0, .2, 1) both;
}

.digit-in {
  animation-name: digitIn;
}

.digit-out {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: digitOut;
}

@keyframes digitIn {
  0% { transform: translateY(-.3em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes digitOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(.3em); opacity: 0; }
}

.info {
  margin-top: calc(44 * var(--s));
  font-size: max(15px, calc(26 * var(--s)));
  color: var(--muted);
  text-wrap: balance;
}

.range-to:not(:empty)::before {
  content: ' 至 ';
}

.range-total::before {
  content: ' · ';
}

.info-progress,
.vprogress {
  display: none;
}

.progress {
  width: 100%;
  margin-top: calc(72 * var(--s));
  display: flex;
  flex-direction: column;
  gap: max(10px, calc(16 * var(--s)));
}

.progress-track {
  height: max(3px, calc(4 * var(--s)));
  border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .6s ease, background-color var(--ease-theme);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: max(14px, calc(22 * var(--s)));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- 页脚 ---- */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px calc(84 * var(--s));
  font-size: max(14px, calc(22 * var(--s)));
}

.foot-item {
  display: flex;
  gap: max(12px, calc(18 * var(--s)));
  align-items: baseline;
}

.foot-label {
  font-size: max(13px, calc(19 * var(--s)));
  color: var(--muted);
  letter-spacing: .1em;
}

.foot-when::before {
  content: ' · ';
}

.foot-item.is-today .foot-value {
  display: none;
}

.foot-item.is-today .foot-when::before {
  content: none;
}

/* 桌面版多位数天数：两位数 340、三位及以上 260（设计稿 daysSizeW） */
@media (min-width: 641px) {
  .clock[data-digits='2'] .clock-days {
    font-size: calc(340 * var(--s));
  }

  .clock[data-digits='3'] .clock-days,
  .clock[data-digits='4'] .clock-days {
    font-size: calc(260 * var(--s));
  }
}

/* ---- 手机版（设计稿 2f：个位数出血，多位数放大，右侧竖向进度） ---- */
@media (max-width: 640px) {
  .page {
    padding: 8px 24px max(28px, env(safe-area-inset-bottom));
  }

  .theme-dot {
    width: 14px;
    height: 14px;
  }

  .foot-label {
    font-size: 13px;
  }

  .blob-a { width: 744px; height: 558px; }
  .blob-b { width: 620px; height: 496px; }
  .blob-c { width: 397px; height: 397px; }

  .themes {
    gap: 30px;
    min-height: 44px;
    align-items: center;
    margin-right: -3px;
  }

  .theme-dot::after {
    inset: -15px;
  }

  .hero {
    padding: 24px 4px;
  }

  .headline {
    gap: 10px;
  }

  .headline-aside {
    font-size: 17px;
  }

  .headline-name {
    font-size: 38px;
    line-height: 1.1;
  }

  /* 多位数：天数一行，时分秒另起一行 */
  .clock {
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 26px;
    margin-top: 32px;
  }

  .clock-days {
    font-size: 250px;
    line-height: .76;
    letter-spacing: -.04em;
  }

  .clock[data-digits='3'] .clock-days,
  .clock[data-digits='4'] .clock-days {
    font-size: 176px;
  }

  .clock-unit {
    font-size: 40px;
    margin-right: 0;
  }

  .clock-hms {
    flex-basis: 100%;
    font-size: 58px;
  }

  /* 个位数：数字放大到 340px 并伸出左边缘，「天」和时分秒叠在右侧 */
  .clock[data-digits='1'] {
    flex-wrap: nowrap;
    align-items: flex-end;
    margin-top: 20px;
    margin-left: -58px;
  }

  .clock[data-digits='1'] .clock-days {
    font-size: 340px;
    line-height: .74;
    letter-spacing: -.05em;
    color: var(--accent);
    transition: color var(--ease-theme);
  }

  .clock[data-digits='1'] .clock-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 6px;
  }

  .clock[data-digits='1'] .clock-unit {
    font-size: 34px;
  }

  .clock[data-digits='1'] .clock-hms {
    flex-basis: auto;
    font-size: 40px;
  }

  .info {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    line-height: 1.5;
  }

  .range-to:not(:empty)::before {
    content: ' — ';
  }

  .range-total::before {
    content: none;
  }

  .info-progress {
    display: block;
    margin-top: 12px;
    font-size: 13px;
  }

  .progress {
    display: none;
  }

  .vprogress {
    display: block;
    position: absolute;
    right: 34px;
    top: 106px;
    bottom: 170px;
    width: 2px;
    border-radius: 1px;
    background: var(--track);
  }

  .vprogress-fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: center top;
    transform: scaleY(0);
    transition: transform .6s ease, background-color var(--ease-theme);
  }

  .vprogress-dot {
    position: absolute;
    left: -4px;
    top: 0;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg0);
    transition: top .6s ease, background-color var(--ease-theme);
  }

  .vprogress-pct {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
  }

  .vprogress-label {
    position: absolute;
    left: 50%;
    top: -44px;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--muted);
  }

  .foot {
    flex-direction: column;
    gap: 14px;
    padding: 0 4px;
    font-size: 15px;
  }

  .foot-item {
    gap: 14px;
  }

  .foot-label {
    width: 76px;
    flex: none;
    white-space: nowrap;
  }

  .foot-text {
    display: contents;
  }

  .foot-value {
    flex: 1;
    min-width: 0;
  }

  .foot-when {
    color: var(--muted);
  }

  .foot-when::before {
    content: none;
  }

  .foot-item.is-today .foot-value {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .digit-in,
  .digit-out {
    animation: none !important;
  }

  .digit-out {
    display: none;
  }
}