/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    linear-gradient(rgba(255,248,252,.28), rgba(240,250,245,.28)),
    url('bg.jpg?v=49') center / cover no-repeat fixed;
  color: #6b4a5c;
  overflow: hidden;
  overscroll-behavior: none;
}
/* 电脑 / 横屏：换横版背景，铺满不拉伸变形 */
@media (min-width: 768px), (orientation: landscape) {
  body {
    background-image:
      linear-gradient(rgba(255,248,252,.28), rgba(240,250,245,.28)),
      url('bg-wide.jpg?v=49');
  }
}

/* ===== 页面切换：每页固定一屏，不滚动 ===== */
.screen {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  display: none;
  padding: max(14px, 2.5vh) 18px;
  opacity: 0;
}
.screen.active {
  display: flex; flex-direction: column; align-items: center;
  animation: fadeIn .35s ease forwards;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hidden { display: none !important; }

/* 通用入场动画 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 首页 ===== */
#page-home { justify-content: center; text-align: center; }
#page-home.active > * { animation: riseIn .6s cubic-bezier(.22,1,.36,1) backwards; }
#page-home.active > *:nth-child(1) { animation-delay: .06s; }
#page-home.active > *:nth-child(2) { animation-delay: .2s; }

.moon-stage { position: relative; width: min(58vw, 260px); height: min(58vw, 260px); cursor: pointer; }
.moon-stage:active { transform: scale(.96); }
.home-tip {
  position: absolute; left: 0; right: 0; bottom: max(16px, 4vh);
  margin: 0; text-align: center;
  font-size: 15px; color: rgba(217,136,172,.9); letter-spacing: 5px;
}
.moon-stage canvas {
  width: 100%; height: 100%;
  animation: moonGlow 3.6s ease-in-out infinite;
}
@keyframes moonGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(253,240,221,.35)); }
  50%      { filter: drop-shadow(0 0 20px rgba(253,240,221,.75)); }
}

/* ===== 生日蛋糕 ===== */
.cake-wrap { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cake { position: relative; width: 210px; height: 180px; cursor: pointer; }
.cake-wrap[data-lit="1"] .cake { animation: cakePop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes cakePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.cake-candle {
  position: absolute; bottom: 112px; width: 10px; height: 46px;
  border-radius: 3px 3px 2px 2px;
  background: repeating-linear-gradient(180deg,
    #ffb3cf 0 8px, #fff 8px 12px,
    #a8e6c3 12px 20px, #fff 20px 24px,
    #ffb3cf 24px 32px, #fff 32px 36px,
    #a8e6c3 36px 44px);
  box-shadow: inset -2px 0 3px rgba(0,0,0,.12);
}
.cake-candle.c1 { left: 78px; transform: rotate(-3deg); }
.cake-candle.c2 { left: 100px; }
.cake-candle.c3 { left: 122px; transform: rotate(3deg); }
.cake-candle .flame {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: 16px; height: 26px; margin-bottom: 3px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff6fa 0%, #ffd9e8 45%, #ffb0cc 75%, rgba(255,150,190,.2) 100%);
  opacity: 0;
}
.cake-candle .flame.lit {
  opacity: 1; animation: flick 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(255,170,205,.85));
}
@keyframes flick {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%     { transform: translateX(-50%) scale(1.12, 1.05); }
}

.cake-top {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 62px;
  width: 128px; height: 50px;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #ffdceb, #ffc9e0);
  box-shadow: inset -8px 0 10px rgba(224,101,143,.25), inset 8px 0 8px rgba(255,255,255,.6);
}
.cake-top .cake-cream {
  position: absolute; left: 0; top: 0; width: 100%; height: 16px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #fffdfd, #fceef5);
}
.cake-top .cake-cream::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 6px;
  width: 40%; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.85);
}
.cherry {
  position: absolute; left: 50%; transform: translateX(-50%); top: -7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb0cc, #e0658f);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  z-index: 2;
}
.cake-bottom {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  width: 200px; height: 58px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, #d8f3e2, #bfe8d0);
  box-shadow: inset -10px 0 12px rgba(95,170,130,.25), inset 10px 0 10px rgba(255,255,255,.6);
}
.cake-bottom::before {
  content: ""; position: absolute; left: 8px; top: 6px; right: 8px; height: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdfd, #fceef5);
}
.cake-plate {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 218px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #eaf6ee, #cfe6d8);
  box-shadow: 0 4px 10px rgba(80,130,105,.3);
}
.cake-tip { font-size: 13px; color: #d988ac; letter-spacing: 6px; }

/* ===== 蛋糕许愿页（终点，独立一屏） ===== */
#page-cake { justify-content: center; text-align: center; }
#page-cake.active .cake-wrap { animation: riseIn .6s cubic-bezier(.22,1,.36,1) backwards; }

/* ===== 便签墙页（一屏自适应） ===== */
#page-wall { justify-content: flex-start; align-items: stretch; }

/* 让便签墙在剩余空间内等比缩放，始终一屏（底部给入口按钮留出位置） */
.wall-area {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 48px;
}
.wall {
  position: relative; aspect-ratio: 1 / 1;
  height: 100%; max-width: min(520px, 100%); width: auto;
}
.note {
  position: absolute; border-radius: 6px;
  box-shadow: 2px 5px 16px rgba(120,80,100,.22), 0 1px 3px rgba(0,0,0,.08);
  transform: rotate(var(--rot));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  background: #fffef9;
  padding: 6px;
  animation: noteIn .55s cubic-bezier(.34,1.56,.64,1) backwards;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
@keyframes noteIn {
  0%   { opacity: 0; transform: rotate(var(--rot)) scale(.3) translateY(16px); }
  60%  { opacity: 1; transform: rotate(var(--rot)) scale(1.07); }
  100% { opacity: 1; transform: rotate(var(--rot)) scale(1) translateY(0); }
}
.wall .note:nth-child(-n+5) { background: #d9f2e2; }
.wall .note:nth-child(n+6) { background: #ffe0ee; }
.note:active {
  transform: rotate(var(--rot)) scale(1.14);
  box-shadow: 4px 10px 26px rgba(120,80,100,.32);
  z-index: 10;
}
.note .tape {
  position: absolute; left: 50%; top: -8px; width: 44%; height: 15px;
  transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  opacity: .9;
}
.note .txt {
  font-size: clamp(11px, 3.4vw, 17px); line-height: 1.4;
  color: #3a3035; font-weight: 700; text-align: center;
  white-space: pre-line; word-break: break-word;
}

/* 便签墙页：胡萝卜鼠标指针 */
#page-wall {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text y="24" font-size="24">🥕</text></svg>') 6 6, auto;
}

/* 便签墙底部入口（纯文字） */
.wall-next {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(14px, 3.5vh); z-index: 30;
  background: none; border: none; padding: 10px 22px;
  color: #b06a8c; font-size: 13px; letter-spacing: 3px;
  cursor: pointer; transition: color .2s, transform .15s;
}
.wall-next:active { transform: translateX(-50%) scale(.94); }
@media (hover: hover) { .wall-next:hover { color: #8f4f70; } }

/* 便签弹层 */
.modal {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(255,240,248,.62); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal:not(.hidden) { animation: fadeIn .25s ease; }
.modal-note {
  width: min(84vw, 340px); background: #fffef9; color: #3a3035;
  border-radius: 4px; padding: 30px 26px; position: relative;
  box-shadow: 3px 6px 24px rgba(150,90,120,.25);
  animation: popIn .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.7) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-note .tape { position: absolute; left: 50%; top: -11px; width: 100px; height: 22px; transform: translateX(-50%) rotate(-2deg); background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5)); }
.modal-note .m-idx { display: none; }
.modal-note .m-text { font-size: 18px; line-height: 1.8; font-weight: 700; text-align: center; white-space: pre-line; }
.modal-close { position: absolute; right: 12px; top: 10px; font-size: 22px; color: rgba(90,60,80,.5); cursor: pointer; }

/* 兔子的烟花提问弹层 */
.ask-note { text-align: center; padding: 26px 26px 30px; }
.ask-bunny { font-size: 34px; margin-bottom: 6px; }
.ask-text { font-size: 19px; font-weight: 800; color: #3a3035; letter-spacing: 1px; }
.ask-tip {
  display: none; margin-top: 12px;
  font-size: 14px; font-weight: 700; color: #e0658f;
}
.ask-tip.show { display: block; animation: tipShake .5s ease; }
@keyframes tipShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.ask-btns { display: flex; gap: 34px; justify-content: center; margin-top: 20px; }
.ask-btn {
  border: none; background: none; cursor: pointer;
  font-size: 17px; font-weight: 700; letter-spacing: 4px;
  padding: 6px 10px;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .18s;
}
.ask-btn:active { transform: scale(.9); opacity: .7; }
.ask-yes { color: #e0658f; }
.ask-yes.urge { animation: urgePulse .9s ease-in-out infinite; }
@keyframes urgePulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.2); }
}
.ask-no { color: #b9a3ad; }
@media (hover: hover) {
  .ask-yes:hover { opacity: .75; }
  .ask-no:hover { opacity: .75; }
}

/* 一起看烟花弹层的回复文案 */
.tog-msg {
  display: none; margin-top: 6px;
  font-size: 17px; line-height: 1.9; font-weight: 700;
  color: #3a3035;
  animation: popIn .34s cubic-bezier(.34,1.56,.64,1);
}

/* 淡出幕布 */
#fadeVeil {
  position: fixed; inset: 0; z-index: 80;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity .75s ease;
}
#fadeVeil.show { opacity: 1; }

/* ===== 3D 环形旋转照片廊 ===== */
#page-photos {
  background: radial-gradient(120% 85% at 50% -10%, #e9f6ec 0%, #f7f1f3 46%, #fdeaf0 100%);
  padding: 0; justify-content: center; touch-action: pan-y;
}
.gallery { position: relative; width: 100%; height: 100%; }

/* 淡色氛围层：粉绿柔雾 + 白色波点微光 + 底部光池，全部纯 CSS */
.g-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.g-aurora {
  position: absolute; border-radius: 50%;
  filter: blur(58px);
  animation: gDrift 16s ease-in-out infinite alternate;
}
.g-aurora.a1 { left: -12%; top: 4%; width: 58vmin; height: 46vmin; background: radial-gradient(circle, rgba(134,222,168,.40), transparent 68%); }
.g-aurora.a2 { right: -14%; top: 20%; width: 52vmin; height: 42vmin; background: radial-gradient(circle, rgba(248,168,196,.42), transparent 68%); animation-duration: 21s; animation-delay: -6s; }
.g-aurora.a3 { left: 22%; bottom: -18%; width: 64vmin; height: 40vmin; background: radial-gradient(circle, rgba(167,232,214,.38), transparent 70%); animation-duration: 26s; animation-delay: -12s; }
@keyframes gDrift {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.18); }
}
/* 波点微光：两层平铺白点错开、交替明灭 */
.g-stars { position: absolute; inset: 0; }
.g-stars.s1 {
  background-image:
    radial-gradient(2.4px 2.4px at 22px 34px,   rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.8px 1.8px at 128px 92px,  rgba(255,255,255,.70), transparent 60%),
    radial-gradient(2.8px 2.8px at 204px 168px, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 74px 208px,  rgba(255,255,255,.60), transparent 60%);
  background-size: 240px 240px;
  animation: gTwinkle 4.5s ease-in-out infinite;
}
.g-stars.s2 {
  background-image:
    radial-gradient(1.8px 1.8px at 60px 60px,   rgba(255,255,255,.65), transparent 60%),
    radial-gradient(2.6px 2.6px at 190px 40px,  rgba(255,255,255,.80), transparent 60%),
    radial-gradient(1.8px 1.8px at 260px 210px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2.2px 2.2px at 110px 280px, rgba(255,255,255,.75), transparent 60%);
  background-size: 320px 320px;
  animation: gTwinkle 6.5s ease-in-out infinite reverse;
}
@keyframes gTwinkle { 0%, 100% { opacity: .8; } 50% { opacity: .3; } }
/* 底部光池：接住环的倒影 */
.g-pool {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 150%; height: 34%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), transparent 62%);
}

/* 3D 场景：视点偏高，环的远端向灭点收敛成拱形（参考 3D 旋转轮播图） */
.g-scene {
  position: absolute; inset: 0;
  perspective: 1100px; perspective-origin: 50% 24%;
  display: flex; align-items: center; justify-content: center;
}
.g-stage {
  position: relative; width: 1px; height: 1px;
  transform-style: preserve-3d;
  margin-top: 6vh;
  will-change: transform;
}

/* 照片板：静态站在环上（rotateY+translateZ 由 JS 一次写好），旋转靠舞台整体；浅底上用白框+粉调投影 */
.g-panel {
  position: absolute; left: 0; top: 0;
  border-radius: 6px; overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(190,120,150,.28), 0 0 0 1px rgba(255,255,255,.9);
  transition: box-shadow .3s ease;
  will-change: transform, opacity;
  animation: gIn .8s cubic-bezier(.22,1,.36,1) backwards;
  cursor: pointer;
}
/* 镜像倒影板：上下翻转贴在板底部，保持不透明的实心镜像 */
.g-refl {
  pointer-events: none; cursor: default;
  opacity: .5;
  box-shadow: none;
  animation: none;
}
@keyframes gIn { from { opacity: 0; } to { opacity: 1; } }
.g-panel.g-active {
  box-shadow: 0 22px 54px rgba(190,120,150,.34), 0 0 0 1px rgba(255,255,255,1), 0 0 40px rgba(248,168,196,.45);
}
.g-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-panel.g-ph { display: flex; align-items: center; justify-content: center; }
.g-panel.g-ph span {
  font-size: 54px; opacity: .92;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}

/* 左右箭头：纯三角，不带按钮底 */
.g-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 72px; z-index: 130;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .85; transition: opacity .2s;
}
.g-prev { left: max(8px, 2.5vw); }
.g-next { right: max(8px, 2.5vw); }
.g-arrow span {
  width: 0; height: 0;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.g-prev span { border-right: 18px solid rgba(146,106,124,.75); }
.g-next span { border-left: 18px solid rgba(146,106,124,.75); }
.g-arrow:active span { transform: scale(.8); }
@media (hover: hover) { .g-arrow:hover { opacity: 1; } }

/* 小兔子（照片廊里点它提问，浅底上带一圈粉调柔影） */
.bunny {
  position: fixed; right: 7%; bottom: 9%;
  font-size: 40px; line-height: 1; z-index: 125;
  cursor: pointer; user-select: none;
  filter: drop-shadow(0 4px 10px rgba(190,120,150,.35));
}

/* 底部一句话 */
.photo-note {
  position: absolute; left: 0; right: 0; bottom: max(14px, 3vh);
  text-align: center; font-size: 13px; letter-spacing: 2px;
  color: #8c5470;
  z-index: 110; pointer-events: none;
}

/* ===== 压轴：拍立得 + 信（吹灭蜡烛后） ===== */
#page-mail {
  background: radial-gradient(120% 85% at 50% -10%, #e9f6ec 0%, #f7f1f3 46%, #fdeaf0 100%);
  padding: 0; justify-content: flex-start;
}
.mail-wrap {
  position: relative;
  width: 100%; height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  gap: 34px;
  padding: 9vh 22px 96px;
}
/* 拍立得：白框 + 胶带，掉落入场 */
.mail-polaroid {
  position: relative; flex: none;
  width: min(76vw, 360px);
  background: #fff; padding: 10px 10px 14px; border-radius: 4px;
  box-shadow: 0 16px 40px rgba(190,120,150,.25);
  transform: rotate(-2deg);
  animation: mailDrop .9s cubic-bezier(.22,1,.36,1) backwards;
}
.mail-polaroid .tape {
  position: absolute; left: 50%; top: -12px; width: 96px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.5));
  box-shadow: 0 2px 6px rgba(190,120,150,.18);
}
.mail-polaroid img { width: 100%; display: block; border-radius: 2px; }
@keyframes mailDrop {
  from { opacity: 0; transform: translateY(-46px) rotate(-7deg) scale(.92); }
  to   { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
}
/* 信纸：默认手写扫描，.typed 时切电子版正文 */
.mail-paper {
  position: relative; flex: none;
  width: min(88vw, 560px);
  background: #fffdf8; border-radius: 6px;
  box-shadow: 0 18px 46px rgba(190,120,150,.22);
  padding: 16px;
  animation: riseIn .8s .3s cubic-bezier(.22,1,.36,1) backwards;
}
.mail-paper img { width: 100%; display: block; border-radius: 4px; }
.mail-type { display: none; padding: 10px 8px 6px; }
.mail-paper.typed img { display: none; }
.mail-paper.typed .mail-type { display: block; }
.mail-type p {
  margin: 0 0 1.25em; font-size: 15px; line-height: 2;
  color: #4a3b44; text-align: justify; letter-spacing: .5px;
  animation: riseIn .6s cubic-bezier(.22,1,.36,1) backwards;
}
.mail-sign {
  flex: none; font-size: 15px; letter-spacing: 2px; font-weight: 500;
  color: #8c5470;
  animation: riseIn .8s .5s backwards;
}
/* 手写/电子切换：右下角常驻纯文字 */
.mail-toggle {
  position: fixed; right: 18px; bottom: max(18px, 3vh); z-index: 130;
  padding: 6px 2px; border: 0; background: none;
  -webkit-appearance: none; appearance: none; font-family: inherit;
  color: #8c5470; font-size: 13px; letter-spacing: 1px; cursor: pointer;
  text-shadow: 0 1px 6px rgba(255,255,255,.9);
  transition: transform .15s, opacity .15s;
}
.mail-toggle:active { transform: scale(.94); opacity: .6; }

/* ===== 彩蛋页（夜空 + 烟花） ===== */
#page-ending {
  justify-content: center; text-align: center;
  background: #000;
}
.ending-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; width: 100%;
}
.ending-inner > * { animation: riseIn .6s cubic-bezier(.22,1,.36,1) backwards; }

/* 桌面端字号稍大 */
@media (min-width: 768px) {
  .note .txt { font-size: 18px; }
}

/* ===== 打字机开场屏（仿 faahim/happy-birthday：一屏一句，浮现→停留→消散） ===== */
#page-letter {
  justify-content: center; text-align: center;
  background: #fff;
  transition: opacity .9s ease;
}
#page-letter.fade-out { opacity: 0; }
.letter-stage {
  position: relative; width: 100%; height: 260px;
  padding: 0 28px;
}
/* 每一屏都绝对居中，靠动画接力 */
.l-scene {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
}
.l-scene.t-m { font-size: 23px; font-weight: 500; color: #1c1c1e; letter-spacing: 3px; }
.l-scene.t-l { font-size: 32px; font-weight: 800; color: #1c1c1e; letter-spacing: 1.5px; line-height: 1.55; padding: 0 16px; }
@media (min-width: 768px) {
  .l-scene.t-m { font-size: 28px; }
  .l-scene.t-l { font-size: 42px; }
}
/* 普通句：上移淡入 → 停留 → 上移淡出（原版节奏：.7进 / 停2.2 / .7出） */
.l-scene.fx-pop { animation: lPop 3.6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes lPop {
  0% { opacity: 0; transform: translateY(calc(-50% + 30px)); }
  19% { opacity: 1; transform: translateY(-50%); }
  81% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% - 24px)); }
}
/* 压轴句：从小弹入 → 停留 → 放大冲出屏幕（对应原版的 S O 炸开） */
.l-scene.fx-zoom { animation: lZoom 4.7s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes lZoom {
  0% { opacity: 0; transform: translateY(-50%) scale(.4); }
  11% { opacity: 1; transform: translateY(-50%) scale(1.04); }
  14% { transform: translateY(-50%) scale(1); }
  72% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .l-scene.fx-pop, .l-scene.fx-zoom { animation-duration: 2.4s; }
}

/* ===== 礼物盒开场屏 ===== */
#page-gift { justify-content: center; text-align: center; }
.gift-scene {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  cursor: pointer; user-select: none;
}
/* 背景闪烁的小星光 */
.gift-scene::before, .gift-scene::after {
  content: '✦'; position: absolute; color: #ffd97a; pointer-events: none;
  animation: sparkTw 2.6s ease-in-out infinite;
}
.gift-scene::before { top: 4%; left: 20%; font-size: 18px; }
.gift-scene::after { top: 16%; right: 18%; font-size: 13px; animation-delay: 1.3s; }
@keyframes sparkTw {
  0%, 100% { opacity: .15; transform: scale(.7) rotate(0deg); }
  50% { opacity: .9; transform: scale(1.2) rotate(45deg); }
}
.gift {
  position: relative; width: 200px; height: 196px;
  animation: giftFloat 3.4s ease-in-out infinite;
}
@keyframes giftFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.gift-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,225,.4) 0%, rgba(255,215,150,.14) 46%, transparent 72%);
  animation: glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
/* 盒身：粉色渐变 + 白色波点暗纹 */
.gift-boxbody {
  position: absolute; left: 5px; bottom: 0; width: 190px; height: 130px;
  border-radius: 8px;
  background-image:
    radial-gradient(rgba(255,255,255,.22) 2.2px, transparent 2.8px),
    linear-gradient(160deg, #ffc0d8 0%, #f78fb8 52%, #e06a9e 100%);
  background-size: 26px 26px, 100% 100%;
  box-shadow: inset -12px -14px 26px rgba(160,60,110,.3), 0 20px 44px rgba(120,50,90,.38);
}
/* 竖丝带：金色渐变 + 中间高光 */
.gift-ribbon-v {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 30px; height: 130px; z-index: 2;
  background: linear-gradient(90deg, #eec25e, #ffe9a8 32%, #fff3cd 50%, #ffe9a8 68%, #e8b34f);
  box-shadow: 0 0 8px rgba(255,220,140,.35);
}
/* 盒盖：带横向丝带 */
.gift-lid {
  position: absolute; left: -7px; bottom: 124px; width: 214px; height: 38px;
  border-radius: 7px;
  background: linear-gradient(160deg, #ffd0e2, #f488b4 70%, #e87aa8);
  box-shadow: 0 8px 16px rgba(150,60,105,.38);
  z-index: 4;
  transition: transform .7s cubic-bezier(.34,1.2,.64,1), opacity .7s ease;
}
.gift-lid::after {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 30px; height: 100%;
  background: linear-gradient(90deg, #eec25e, #ffe9a8 32%, #fff3cd 50%, #ffe9a8 68%, #e8b34f);
}
/* 蝴蝶结：左右两个环 + 中间结 */
.gift-bow {
  position: absolute; left: 50%; bottom: 158px; margin-left: -9px;
  width: 18px; height: 15px; border-radius: 5px; z-index: 5;
  background: linear-gradient(180deg, #ffe9a8, #f0b95a);
  box-shadow: inset 0 -2px 3px rgba(160,100,20,.3);
  transition: transform .7s cubic-bezier(.34,1.2,.64,1), opacity .7s ease;
}
.gift-bow::before, .gift-bow::after {
  content: ''; position: absolute; top: -10px; width: 42px; height: 31px;
  border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%;
  background: linear-gradient(160deg, #ffe9a8, #f5c96b 60%, #e8a94e);
  box-shadow: inset -2px -5px 9px rgba(160,100,20,.32);
}
.gift-bow::before { right: 13px; transform: rotate(-23deg); }
.gift-bow::after { left: 13px; transform: rotate(23deg); }
/* 拆开：盒盖和蝴蝶结飞走，盒身轻弹 */
.gift.open { animation: none; }
.gift.open .gift-lid { transform: translateY(-160px) rotate(-26deg); opacity: 0; }
.gift.open .gift-bow { transform: translate(30px, -180px) rotate(24deg); opacity: 0; }
.gift.open .gift-boxbody { animation: giftPop .55s .25s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes giftPop {
  to { transform: scale(1.08); }
}
.gift-tip {
  font-size: 15px; color: #d988ac; letter-spacing: 3px; line-height: 2.2;
  transition: opacity .4s;
}
.gift-tip span { font-size: 14px; color: #b98ea6; letter-spacing: 5px; }
.gift-scene.open .gift-tip { opacity: 0; }

/* ===== 蜡烛熄灭 ===== */
.cake-candle .flame.out {
  animation: none; opacity: 0;
  transition: opacity .55s ease;
}
.cake-wrap .smoke {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px;
  width: 6px; height: 26px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(200,200,210,.55));
  border-radius: 50%; filter: blur(2px);
  animation: smokeUp 1.4s ease-out forwards;
  pointer-events: none;
}
@keyframes smokeUp {
  0% { opacity: .8; transform: translate(-50%, 0) scaleY(.6); }
  100% { opacity: 0; transform: translate(-40%, -30px) scaleY(1.6); }
}

/* ===== 照片灯箱 ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; cursor: zoom-out;
}
.lightbox:not(.hidden) { animation: fadeIn .25s ease; }
.lightbox img {
  max-width: 96vw; max-height: 88vh; object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}