/* ==========================================================================
   礼物网页 · 样式
   配色：暖白纸感 + 玫瑰灰 + 一点金
   结构：门 → 序 → 四件礼物 → 过程 → 夜 → 信 → 问 → 尾
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --ivory:#FBF6F0;
  --ivory-2:#F4E9DE;
  --paper:#FFFDF9;
  --ink:#2A2320;
  --ink-2:#54463F;
  --muted:#95857B;
  --rose:#BC7078;
  --rose-d:#9A525C;
  --gold:#C2A468;
  --line:rgba(42,35,32,.13);
  --night-a:#1A1219;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.locked{height:100svh;overflow:hidden;}

h1,h2,h3,p,ol,ul{margin:0;padding:0;}
ol,ul{list-style:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
img{display:block;max-width:100%;}
[hidden]{display:none !important;}
::selection{background:rgba(188,112,120,.22);}

/* 纸面颗粒 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.30;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="180" height="180" filter="url(%23n)" opacity="0.20"/></svg>');
}

/* ---------- 2. 通用零件 ---------- */
.eyebrow{
  font-size:10.5px;
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}

.wrap{width:100%;max-width:400px;margin:0 auto;}

#story{position:relative;z-index:2;}

#ambient{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.scene{
  position:relative;
  scroll-snap-align:start;
}

/* 顶部进度条 */
.progress{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:50;
  background:rgba(42,35,32,.05);
}
.progress i{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transition:transform .12s linear;
}

/* 右侧章节点 */
.dots{
  position:fixed;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:6px;
}
.dots button{
  width:6px;height:6px;
  border-radius:99px;
  background:rgba(42,35,32,.20);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
}
.dots button.on{height:16px;background:var(--rose);}
.dots.is-dark button{background:rgba(244,231,222,.30);}
.dots.is-dark button.on{background:#E7C7B8;}

/* 音乐按钮 */
.sound{
  position:fixed;
  left:14px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:45;
  width:36px;height:36px;
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--ink-2);
  border:1px solid var(--line);
  background:rgba(255,253,249,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity .3s;
}
.sound svg{width:17px;height:17px;}
.sound .slash{opacity:0;transition:opacity .2s;}
.sound.is-off .slash{opacity:1;}
.sound.is-off{opacity:.5;}
body.is-dark .sound{color:#F2E3D9;border-color:rgba(242,227,217,.22);background:rgba(30,22,26,.5);}

/* 揭示动画 */
.rv{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .95s ease,transform 1s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.rv.rv-in{opacity:1;transform:none;}

/* ==========================================================================
   3. 开场门
   ========================================================================== */
.gate{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:32px 26px;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(120% 85% at 50% 6%,#FFFCF7 0%,#F8EEE4 46%,#EFDFD0 100%);
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.4,0,.2,1),visibility .9s;
}
.gate.is-out{
  opacity:0;
  transform:scale(1.05);
  visibility:hidden;
  pointer-events:none;
}
.gate::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(194,164,104,.22);
  pointer-events:none;
}
.gate__inner{position:relative;z-index:2;max-width:300px;}
.gate__bokeh{position:absolute;inset:0;pointer-events:none;}
.gate__bokeh i{
  position:absolute;
  bottom:-12%;
  width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(188,112,120,.55),rgba(188,112,120,.06) 70%);
  filter:blur(1px);
  animation:floatUp linear infinite;
}
.gate__bokeh i:nth-child(1){left:8%;animation-duration:19s;animation-delay:-2s;transform:scale(1.4);}
.gate__bokeh i:nth-child(2){left:26%;animation-duration:24s;animation-delay:-9s;transform:scale(.8);}
.gate__bokeh i:nth-child(3){left:44%;animation-duration:16s;animation-delay:-5s;transform:scale(1.1);}
.gate__bokeh i:nth-child(4){left:63%;animation-duration:27s;animation-delay:-14s;transform:scale(1.6);}
.gate__bokeh i:nth-child(5){left:79%;animation-duration:21s;animation-delay:-7s;transform:scale(.9);}
.gate__bokeh i:nth-child(6){left:92%;animation-duration:25s;animation-delay:-17s;transform:scale(1.2);}
@keyframes floatUp{
  0%{transform:translateY(0) scale(.9);opacity:0;}
  15%{opacity:.9;}
  85%{opacity:.5;}
  100%{transform:translateY(-112vh) scale(1.15);opacity:0;}
}

.seal{
  width:74px;height:74px;
  margin:0 auto 26px;
  border-radius:50%;
  border:1px solid rgba(194,164,104,.55);
  display:grid;
  place-items:center;
  position:relative;
  color:var(--rose);
}
.seal svg{width:28px;height:28px;}
.seal::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(194,164,104,.20);
  animation:sealPulse 3.6s ease-out infinite;
}
@keyframes sealPulse{
  0%{transform:scale(.94);opacity:0;}
  30%{opacity:1;}
  100%{transform:scale(1.14);opacity:0;}
}

.gate__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(23px,6.8vw,29px);
  line-height:1.72;
  letter-spacing:.06em;
  margin:18px 0 0;
  color:var(--ink);
}
.gate__sub{
  margin-top:16px;
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--muted);
}
.gate__btn{
  position:relative;
  margin-top:36px;
  padding:15px 40px;
  border-radius:999px;
  color:#FFF8F3;
  font-size:14px;
  letter-spacing:.22em;
  text-indent:.22em;
  background:linear-gradient(165deg,#C87E86,#A75B65);
  box-shadow:0 16px 34px -16px rgba(154,82,92,.85),0 1px 0 rgba(255,255,255,.35) inset;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.gate__btn::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sweep 3.6s ease-in-out infinite;
}
@keyframes sweep{
  0%{left:-60%;}
  55%{left:130%;}
  100%{left:130%;}
}
.gate__btn:active{transform:scale(.97);box-shadow:0 8px 20px -12px rgba(154,82,92,.9);}
.gate__tip{
  margin-top:22px;
  font-size:10.5px;
  letter-spacing:.2em;
  color:rgba(149,133,123,.75);
}

/* ==========================================================================
   4. 序
   ========================================================================== */
.scene--open{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:90px 30px 110px;
  text-align:center;
}
.frame{
  position:absolute;
  inset:16px;
  border:1px solid rgba(42,35,32,.09);
  pointer-events:none;
}
.open__inner{position:relative;width:100%;max-width:310px;}
.open__pre{
  margin-top:34px;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--muted);
}
.open__name{
  margin-top:10px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(44px,15vw,66px);
  line-height:1.24;
  letter-spacing:.08em;
  text-indent:.08em;
  color:var(--ink);
}
.open__name::after{
  content:"";
  display:block;
  width:34px;
  height:1px;
  margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.open__lines{
  margin-top:26px;
  color:var(--ink-2);
  font-size:clamp(12.5px,3.55vw,13.5px);
  line-height:2.15;
  letter-spacing:.02em;
}
.open__lines p{opacity:0;animation:fadeUp 1.4s ease forwards;}
.open__lines p:nth-child(1){animation-delay:.25s;}
.open__lines p:nth-child(2){animation-delay:.75s;}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

.hint{
  position:absolute;
  bottom:calc(36px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:46px;
  background:linear-gradient(180deg,transparent,rgba(42,35,32,.18));
}
.hint span{
  position:absolute;
  top:0;left:-2px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--rose);
  animation:dropDot 2.6s ease-in-out infinite;
}
@keyframes dropDot{
  0%{transform:translateY(-4px);opacity:0;}
  25%{opacity:1;}
  100%{transform:translateY(44px);opacity:0;}
}

/* ==========================================================================
   5. 礼物（一件一屏）
   ========================================================================== */
.gift{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:calc(62px + env(safe-area-inset-top)) 26px calc(38px + env(safe-area-inset-bottom));
  --acc:var(--rose);
}

.gift__head{
  width:100%;
  max-width:360px;
  display:flex;
  align-items:center;
  gap:12px;
}
.gift__no{
  font-size:10.5px;
  letter-spacing:.22em;
  color:var(--acc);
  font-weight:600;
}
.gift__rule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(42,35,32,.16),rgba(42,35,32,.03));
}
.gift__count{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted);
}

/* 照片卡 */
.photo{
  --ph:min(64vw,300px,38svh);
  width:var(--ph);
  padding:9px 9px 0;
  background:var(--paper);
  border-radius:4px;
  box-shadow:0 1px 2px rgba(60,40,30,.07),0 22px 44px -22px rgba(60,40,30,.45);
  transform:rotate(-1.8deg);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.photo--alt{transform:rotate(1.7deg);}
.photo:active{transform:rotate(0deg) scale(.98);}
.photo-wrap{display:flex;justify-content:center;width:100%;}

.photo__media{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 25% 5%,#FBF2E9,#F0E2D5 60%,#E9D8C9 100%);
}
.photo__media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .7s ease;
}
.photo.has-img .photo__media::before{opacity:1;}
.photo__ph{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:16px;
  text-align:center;
  color:#AF9788;
}
.photo__ph svg{width:26px;height:26px;opacity:.6;}
.photo__ph span{
  font-size:10.5px;
  line-height:1.8;
  letter-spacing:.06em;
  word-break:break-all;
}
.photo.has-img .photo__ph{display:none;}
.photo__cap{
  padding:11px 6px 13px;
  text-align:center;
  font-family:var(--serif);
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--muted);
}

.gift__body{
  width:100%;
  max-width:300px;
  text-align:center;
}
.gift__name{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px,6.4vw,28px);
  line-height:1.3;
  letter-spacing:.05em;
  text-indent:.05em;
  color:var(--ink);
}
.gift__sub{
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--acc);
}
.gift__desc{
  margin-top:16px;
  font-size:clamp(12.8px,3.55vw,13.6px);
  line-height:2.05;
  color:var(--ink-2);
  letter-spacing:.01em;
}
.gift__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:17px;
  padding:6px 14px;
  border:1px solid rgba(42,35,32,.12);
  border-radius:999px;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--muted);
}
.gift__tag::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:var(--acc);
}

/* ==========================================================================
   6. 过程
   ========================================================================== */
.scene--prep{
  padding:calc(92px + env(safe-area-inset-top)) 34px calc(96px + env(safe-area-inset-bottom));
}
.sec-head{text-align:center;}
.sec-title{
  margin-top:20px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px,6.3vw,28px);
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--ink);
}
.sec-sub{
  margin-top:14px;
  max-width:290px;
  margin-left:auto;
  margin-right:auto;
  font-size:12.2px;
  line-height:1.95;
  color:var(--muted);
  letter-spacing:.02em;
}

.tl{
  position:relative;
  margin-top:46px;
}
.tl::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:26px;
  width:1px;
  background:linear-gradient(180deg,rgba(42,35,32,.02),rgba(42,35,32,.14) 12%,rgba(42,35,32,.14) 88%,rgba(42,35,32,.02));
}
.tl li{
  position:relative;
  padding:0 0 34px 30px;
}
.tl li:last-child{padding-bottom:0;}
.tl__dot{
  position:absolute;
  left:0;top:6px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--ivory);
  border:1px solid rgba(42,35,32,.20);
}
.tl li.is-now .tl__dot{
  background:var(--rose);
  border-color:var(--rose);
  box-shadow:0 0 0 4px rgba(188,112,120,.14);
}
.tl__day{
  display:inline-block;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted);
  padding:4px 9px;
  border-radius:3px;
  background:rgba(42,35,32,.045);
}
.tl li.is-now .tl__day{color:var(--rose-d);background:rgba(188,112,120,.10);}
.tl__title{
  margin-top:11px;
  font-family:var(--serif);
  font-weight:500;
  font-size:17.5px;
  letter-spacing:.06em;
  color:var(--ink);
}
.tl__text{
  margin-top:8px;
  font-size:13px;
  line-height:1.92;
  color:var(--ink-2);
}
.tl__img{
  margin-top:14px;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 14px 30px -18px rgba(60,40,30,.55);
}

/* ==========================================================================
   7. 夜
   ========================================================================== */
.scene--night{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 30px calc(13svh + env(safe-area-inset-bottom));
  overflow:hidden;
  background:linear-gradient(180deg,
    #FBF6F0 0%,
    #CBAAAB 7%,
    #6B4B54 13%,
    #2C1D28 22%,
    var(--night-a) 34%,
    var(--night-a) 100%);
  color:#F4E8DF;
}
#sky{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.night__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:330px;
  text-align:center;
  padding-bottom:8px;
}
.night__inner p{
  font-family:var(--serif);
  font-size:clamp(18px,5.2vw,22px);
  line-height:2.1;
  letter-spacing:.05em;
  color:rgba(246,234,225,.94);
  opacity:0;
  transform:translateY(16px);
  filter:blur(6px);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1.2s ease;
  transition-delay:calc(var(--i,0) * 620ms + 300ms);
}
.night__inner p + p{margin-top:14px;}
.scene--night.in .night__inner p{opacity:1;transform:none;filter:none;}

/* ==========================================================================
   8. 信
   ========================================================================== */
.scene--letter{
  display:grid;
  place-items:center;
  padding:calc(88px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--night-a),#1D1520 55%,#221925);
}
.paper{
  position:relative;
  width:100%;
  max-width:420px;
  padding:40px 26px 32px;
  border-radius:5px;
  background:linear-gradient(178deg,#FFFDF8,#FBF3E8);
  color:var(--ink);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);
  transform:rotate(-.5deg);
}
.paper::before{
  content:"";
  position:absolute;
  top:-11px;left:50%;
  width:78px;height:21px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:rgba(226,205,182,.62);
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}
.paper__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:17px;
  letter-spacing:.24em;
  text-indent:.24em;
  text-align:center;
  color:var(--ink);
}
.paper__title::after{
  content:"";
  display:block;
  width:26px;height:1px;
  margin:16px auto 0;
  background:var(--gold);
  opacity:.6;
}
.paper__body{margin-top:26px;}
.paper__body p{
  font-family:var(--serif);
  font-size:14px;
  line-height:2.15;
  letter-spacing:.02em;
  color:#4A3B34;
  text-indent:2em;
}
.paper__body p + p{margin-top:13px;}
.paper__sign{
  margin-top:24px;
  text-align:right;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--ink-2);
}

/* ==========================================================================
   9. 问
   ========================================================================== */
.scene--ask{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(92px + env(safe-area-inset-top)) 26px calc(92px + env(safe-area-inset-bottom));
  text-align:center;
  background:linear-gradient(180deg,#221925,#261A24 55%,#2B1B26);
  color:#F4E8DF;
  overflow:hidden;
}
.scene--ask::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(58% 38% at 50% 46%,rgba(206,124,134,.20),rgba(206,124,134,0) 72%);
  pointer-events:none;
}
.ask__inner{position:relative;z-index:2;width:100%;max-width:330px;}
.scene--ask .eyebrow{color:rgba(244,232,223,.45);}
.ask__title{
  margin-top:22px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(23px,6.9vw,30px);
  line-height:1.62;
  letter-spacing:.05em;
  color:#F7ECE4;
  transition:opacity .5s;
}
.ask__sub{
  margin-top:16px;
  min-height:22px;
  font-size:12.5px;
  letter-spacing:.06em;
  color:rgba(244,232,223,.46);
  transition:opacity .4s;
}
.ask__btns{
  margin-top:38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:opacity .4s,transform .4s;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:196px;
  padding:15px 30px;
  border-radius:999px;
  font-size:13.5px;
  letter-spacing:.16em;
  text-indent:.16em;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .3s,opacity .4s;
}
.btn:active{transform:scale(.97);}
.btn--yes{
  color:#FFF8F3;
  background:linear-gradient(165deg,#CE848C,#A95D67);
  box-shadow:0 18px 36px -18px rgba(188,112,120,.9),0 1px 0 rgba(255,255,255,.28) inset;
}
.btn--no{
  color:rgba(244,232,223,.68);
  border:1px solid rgba(244,232,223,.22);
  background:rgba(255,255,255,.02);
}
.btn--ghost{
  color:var(--ink-2);
  border:1px solid rgba(42,35,32,.18);
  background:transparent;
  min-width:auto;
  padding:12px 26px;
  font-size:12.5px;
}
.ask__reply{
  margin:26px auto 0;
  max-width:290px;
  font-size:13px;
  line-height:1.95;
  letter-spacing:.02em;
  color:rgba(244,232,223,.72);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .7s ease,transform .7s ease;
}
.ask__reply.show{opacity:1;transform:none;}

.ask__next{
  margin-top:34px;
  font-size:11.5px;
  letter-spacing:.16em;
  color:rgba(244,232,223,.45);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .9s ease .2s,transform .9s ease .2s;
}
.ask__next.show{opacity:1;transform:none;}

.ask__btns.is-hidden{opacity:0;transform:translateY(-6px);pointer-events:none;}
.btn.is-hidden{opacity:0;transform:translateY(-4px);pointer-events:none;}

/* 撒心 */
.heart-burst{
  position:absolute;
  left:50%;top:52%;
  width:0;height:0;
  pointer-events:none;
  z-index:1;
}
.heart-burst i{
  position:absolute;
  left:0;top:0;
  font-style:normal;
  font-size:var(--s,12px);
  color:rgba(232,168,168,.9);
  transform:translate(-50%,-50%);
  animation:heartFly 2.6s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--dl,0s);
  opacity:0;
}
@keyframes heartFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg);}
  18%{opacity:1;}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(var(--sc,1)) rotate(var(--r));}
}

/* ==========================================================================
   10. 尾
   ========================================================================== */
.scene--end{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:28svh 26px calc(40px + env(safe-area-inset-bottom));
  text-align:center;
  background:
    radial-gradient(85% 42% at 50% 100%,rgba(255,226,196,.95),rgba(255,226,196,0) 72%),
    linear-gradient(180deg,#2B1B26 0%,#87585F 8%,#DCB1A3 16%,#F6E6D8 24%,#FAF0E4 40%,#FBF6F0 78%);
}
.scene--end::before{
  content:"";
  position:absolute;
  left:50%;
  top:43%;
  width:min(82vw,360px);
  height:min(82vw,360px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,236,.95) 0%,rgba(255,236,214,.42) 46%,rgba(255,236,214,0) 72%);
  pointer-events:none;
}
.end__inner{position:relative;z-index:2;width:100%;max-width:320px;padding-bottom:6px;}
.end__line{
  font-family:var(--serif);
  font-size:14px;
  line-height:2;
  letter-spacing:.04em;
  color:var(--ink-2);
}
.end__line2{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.95;
  color:var(--muted);
  letter-spacing:.02em;
}
.end__final{
  margin:22px 0 26px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px,9vw,40px);
  letter-spacing:.14em;
  text-indent:.14em;
  color:var(--rose-d);
}
.credit{
  margin-top:24px;
  font-size:9.5px;
  letter-spacing:.26em;
  color:rgba(149,133,123,.7);
}

/* ==========================================================================
   11. 看大图
   ========================================================================== */
.zoom{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(22,15,17,.94);
  opacity:0;
  transition:opacity .35s ease;
  overscroll-behavior:contain;
  touch-action:none;
}
.zoom.in{opacity:1;}
.zoom img{
  max-width:100%;
  max-height:100%;
  border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transform:scale(.96);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.zoom.in img{transform:scale(1);}

/* ==========================================================================
   12. 适配
   ========================================================================== */
@media (max-height:680px){
  .photo{--ph:min(58vw,280px,34svh);}
  .gift{gap:16px;padding-top:calc(52px + env(safe-area-inset-top));}
  .gift__desc{margin-top:12px;line-height:1.85;}
  .gift__tag{margin-top:12px;}
  .open__pre{margin-top:22px;}
  .open__lines{margin-top:18px;}
}

@media (min-width:640px){
  .gift{padding-top:88px;padding-bottom:64px;}
  .photo{--ph:min(320px,42svh);}
  .dots{right:26px;}
  .sound{left:26px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none;}
  .night__inner p{opacity:1;transform:none;filter:none;}
  .open__lines p{opacity:1;}
}

/* 预览/截图模式（?to=s-letter 之类），把动画一次性定格 */
html.is-shot *,
html.is-shot *::before,
html.is-shot *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}
html.is-shot .rv{opacity:1 !important;transform:none !important;}
html.is-shot .open__lines p{opacity:1 !important;}
html.is-shot .night__inner p{opacity:1 !important;transform:none !important;filter:none !important;}