:root {
  --bg-1: #fbfaf7;
  --bg-2: #f4f1eb;
  --bg-3: #ece8e0;
  --ink: #1e2a35;
  --muted: rgba(30, 42, 53, 0.62);
  --soft: rgba(30, 42, 53, 0.42);
  --gold: #b3985f;
  --gold-line: rgba(179, 152, 95, 0.55);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --num: "Avenir Next", "Helvetica Neue", "PingFang SC", "Segoe UI", sans-serif;

  /* 数字在卡片里的垂直微调：正值往下。若换字体后折痕没对准数字一半，微调这个值即可 */
  --digit-shift: 0.07em;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--serif);
  background: linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.9), transparent 46%);
}

.page-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(64px);
  opacity: 0.4;
}

.page-glow-one {
  width: 36vw;
  height: 36vw;
  min-width: 240px;
  min-height: 240px;
  left: -10vw;
  top: -12vw;
  background: rgba(226, 217, 200, 0.5);
}

.page-glow-two {
  width: 30vw;
  height: 30vw;
  min-width: 220px;
  min-height: 220px;
  right: -8vw;
  bottom: -10vw;
  background: rgba(216, 214, 208, 0.5);
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(32px + env(safe-area-inset-top, 0px))
    calc(20px + env(safe-area-inset-right, 0px))
    calc(32px + env(safe-area-inset-bottom, 0px))
    calc(20px + env(safe-area-inset-left, 0px));
}

.hero {
  width: min(920px, 100%);
  text-align: center;
  transform: translateY(-2vh);
}

/* ---- 顶部日期 ---- */

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--num);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  color: var(--muted);
  animation: rise 0.9s ease both;
}

.eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ---- 结束状态提示（倒计时归零后出现） ---- */

.status {
  margin: clamp(22px, 3.5vw, 34px) 0 0;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--ink);
}

/* ---- 倒计时（无外框，翻页卡直接落在背景上） ---- */

.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 3.2vw, 36px);
  margin: clamp(38px, 6vw, 64px) auto clamp(28px, 4.5vw, 44px);
  animation: rise 0.9s 0.24s ease both;
}

.time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
}

/* ---- 翻页卡 ---- */

.flip {
  position: relative;
  font-family: var(--num);
  font-size: clamp(2.6rem, 9.4vw, 5.8rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink);
  width: 1.72em;
  height: 1.34em;
  perspective: 4.4em;
  border-radius: 0.14em;
  box-shadow:
    0 0.2em 0.5em rgba(30, 42, 53, 0.1),
    0 0.03em 0.08em rgba(30, 42, 53, 0.07);
}

.flip-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}

/* 上半类（静态上半页 + 上翻板）与下半类（静态下半页 + 下翻板）共用外观 */

.half-top,
.leaf-top {
  top: 0;
  border-radius: 0.14em 0.14em 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f9f6f0 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: none;
}

.half-bottom,
.leaf-bottom {
  top: 50%;
  border-radius: 0 0 0.14em 0.14em;
  background: linear-gradient(180deg, #f5f1ea 0%, #edeae2 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: none;
}

/* 中缝细线：正好压在数字的一半处 */
.flip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: rgba(30, 42, 53, 0.15);
  z-index: 6;
  pointer-events: none;
}

/* 数字：跨越整张卡，上/下半各裁一半；--digit-shift 做光学垂直居中 */
.num {
  position: absolute;
  left: 0;
  width: 100%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateY(var(--digit-shift));
}

.half-top .num,
.leaf-top .num {
  top: 0;
}

.half-bottom .num,
.leaf-bottom .num {
  top: -100%;
}

/* ---- 两片式翻板（不用背面，杜绝 Safari 重叠/穿透 bug） ---- */
/* 翻板常驻渲染：上翻板平时就压在上半页上（内容一致，看不出来），
   下翻板平时侧立 90° 收起（肉眼不可见）。不做显隐切换，
   避免 Safari 反复创建/销毁合成图层造成的白块和掉帧。 */

.leaf-top {
  transform-origin: center bottom;
  z-index: 4;
}

.leaf-bottom {
  transform: rotateX(90deg);
  transform-origin: center top;
  z-index: 5;
}

/* 翻板上的光影，加强立体感 */
.leaf-top::before,
.leaf-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 42, 53, 0.28);
  opacity: 0;
  pointer-events: none;
}

/* 第一段：旧值上翻板向下折（0 → -90°），像被重力拉下来 */
.flip.flipping .leaf-top {
  animation: foldTop 0.28s cubic-bezier(0.55, 0.08, 0.7, 0.2) both;
}

.flip.flipping .leaf-top::before {
  animation: shadeTop 0.28s linear both;
}

/* 第二段：新值下翻板落下（90° → 0），末端带一点回弹 */
.flip.flipping .leaf-bottom {
  animation: foldBottom 0.34s cubic-bezier(0.3, 1.45, 0.55, 1) 0.26s both;
}

.flip.flipping .leaf-bottom::before {
  animation: shadeBottom 0.34s 0.26s linear both;
}

@keyframes foldTop {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

@keyframes foldBottom {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

@keyframes shadeTop {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes shadeBottom {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}

/* ---- 单位标签 ---- */

.time-unit {
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- 底部说明 ---- */

.notice {
  margin: 0;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--muted);
  animation: rise 0.9s 0.36s ease both;
}

/* ---- 音乐播放器（隐藏） ---- */

.youtube-player {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---- 入场动画 ---- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow,
  .countdown,
  .notice {
    animation: none;
  }

  .flip.flipping .leaf-top,
  .flip.flipping .leaf-bottom,
  .flip.flipping .leaf-top::before,
  .flip.flipping .leaf-bottom::before {
    animation: none;
  }
}

/* ---- 响应式 ---- */

@media (max-width: 640px) {
  body {
    overflow: auto;
  }

  .hero {
    transform: translateY(-1vh);
  }

  .eyebrow {
    letter-spacing: 0.24em;
  }

  .countdown {
    gap: 9px;
    margin-top: 30px;
  }

  .flip {
    font-size: clamp(1.8rem, 10.4vw, 2.7rem);
  }

  .time-unit {
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

/* iPhone 横屏等矮屏：压缩上下留白，一屏放下 */
@media (max-height: 480px) {
  .hero {
    transform: none;
  }

  .countdown {
    margin-top: 20px;
    margin-bottom: 18px;
  }

  .flip {
    font-size: clamp(1.7rem, 7.2vh, 2.4rem);
  }

  .time-item {
    gap: 10px;
  }

  .notice {
    font-size: 0.92rem;
    line-height: 1.6;
  }
}