/* ================= HỒI 1: LÁ THƯ ================= */
.scene{ position:fixed; inset:0; z-index:20; }

/* ---------- Cảnh 1–2: phong bì ---------- */
.scene-envelope{
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 55%, rgb(158 42 53 / .10) 100%),
    var(--paper), var(--ivory);
  --ew:min(86vw, 440px, 118svh);
  --eh:calc(var(--ew) * .68);
}
.env-kicker{
  position:absolute; top:max(22px, env(safe-area-inset-top)); left:24px; right:24px; margin:0;
  display:flex; justify-content:space-between; gap:12px;
  font:500 10.5px/1 var(--f-mono); letter-spacing:.22em; color:var(--red);
}
.env-kicker::before{
  content:""; order:1; flex:1; align-self:center; height:1px; background:var(--red-soft); opacity:.6;
}
.env-kicker span:last-child{ order:2; }

.env-title{
  position:absolute; left:24px; right:24px; top:max(64px, 10svh); margin:0;
  font:400 clamp(44px, 12.5vw, 76px)/.98 var(--f-display); letter-spacing:-.01em; color:var(--ink);
}
.env-title em{ font-style:italic; color:var(--red); }
@media (max-height: 640px){ .env-title{ display:none; } }
@media (min-width: 900px){
  .env-title{ left:8vw; top:14svh; }
  .scene-envelope{ --ew:min(560px, 46vw, 100svh); }
}

.env-stage{ position:relative; width:var(--ew); height:var(--eh); margin-top:-4svh; }
.envelope{ position:absolute; inset:0; transform-style:flat; will-change:transform; }
.env-shadow{
  position:absolute; left:8%; right:8%; bottom:-22px; height:26px; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgb(42 23 20 / .28), transparent 70%);
  filter:blur(4px);
}
.env-face{ position:absolute; inset:0; border-radius:6px; }

/* Mặt trước */
.env-face-front{
  overflow:hidden;
  background:
    linear-gradient(155deg, rgb(255 255 255 / .07), transparent 45%, rgb(0 0 0 / .10)),
    var(--paper), var(--red-velvet);
  box-shadow:0 1px 0 rgb(255 255 255 / .1) inset, 0 18px 40px -18px rgb(42 23 20 / .55);
}
.env-face-front::before{
  content:""; position:absolute; inset:10px; border:1px solid rgb(251 244 240 / .22); border-radius:3px; pointer-events:none;
}
.env-watermark{ position:absolute; left:50%; top:50%; width:42%; translate:-50% -50%; color:rgb(60 0 8 / .16); }
.env-stamp{
  --p:12px;
  position:absolute; top:8%; right:6%; width:96px; height:120px;
  background:var(--ivory); rotate:2deg;
  filter:drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.env-stamp img{ width:100%; height:calc(100% - 16px); object-fit:cover; border:3px solid var(--ivory); }
.env-stamp-cap{ display:flex; justify-content:space-between; padding:1px 3px 0; font:600 6.5px/12px var(--f-mono); letter-spacing:.12em; color:var(--red); }
.env-postmark{
  position:absolute; z-index:2; top:calc(8% + 8px); right:calc(6% + 58px); width:84px; height:84px;
  color:#2A1714; opacity:0; visibility:hidden; filter:url(#ink); mix-blend-mode:multiply;
}
.env-postmark > svg:first-child{ width:100%; height:100%; }
.env-postmark .cancel{ position:absolute; right:94%; top:20%; width:min(120px, 26vw); height:46px; }
.env-postmark .cancel path{ fill:none; stroke:currentColor; stroke-width:2.6; }

.env-address{
  position:absolute; left:7%; bottom:12%; width:min(62%, 270px);
  padding:12px 14px 10px; background:var(--paper), var(--ivory); rotate:-1.2deg;
  box-shadow:0 2px 0 rgb(0 0 0 / .08), 0 8px 18px -10px rgb(0 0 0 / .5);
  color:var(--ink);
}
.env-address small{ display:block; font:600 9px/1 var(--f-mono); letter-spacing:.24em; color:var(--red); }
.env-address .typed{ min-height:1.5em; margin:8px 0 0; font:500 clamp(13px, 3.6vw, 15.5px)/1.5 var(--f-mono); }
.env-address i{ display:block; height:1px; margin-top:7px; background:repeating-linear-gradient(90deg, var(--red-soft) 0 4px, transparent 4px 7px); }
.env-from{ margin:7px 0 0; font:500 15px/1.2 var(--f-hand); color:var(--red-deep); }
.env-reg{ position:absolute; right:14px; bottom:12px; margin:0; font:500 9px/1 var(--f-mono); letter-spacing:.18em; color:rgb(251 244 240 / .55); }

/* Mặt sau */
.env-face-back{ visibility:hidden; }
.env-inside{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  background:
    linear-gradient(to bottom, rgb(126 11 18 / .45), transparent 45%),
    url(../assets/svg/lining.svg) 0 0 / 34px 34px,
    var(--blush);
}
.letter-peek{
  position:absolute; left:6%; right:6%; top:6%; height:88%;
  padding:5% 7%; background:var(--paper), var(--ivory);
  box-shadow:0 -2px 10px rgb(0 0 0 / .12);
  display:flex; flex-direction:column; align-items:center; gap:6%;
}
.letter-peek p{ margin:0; font:600 9px/1 var(--f-mono); letter-spacing:.3em; color:var(--red); }
.letter-peek img{ width:78%; aspect-ratio:3/2; object-fit:cover; rotate:-2deg; border:4px solid #fff; box-shadow:0 2px 6px rgb(0 0 0 / .18); }
.letter-peek span{ width:70%; height:5px; border-radius:3px; background:var(--blush); }
.letter-peek span.short{ width:40%; }
.env-pocket{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 -1px 1px rgb(0 0 0 / .12)); }
.env-pocket path:nth-child(-n+2){ filter:brightness(1.02); }
.env-flap{
  position:absolute; left:0; right:0; top:0; height:63%; z-index:3;
  transform-origin:50% 0; filter:drop-shadow(0 4px 5px rgb(42 23 20 / .32));
}
.env-flap svg{ width:100%; height:100%; overflow:visible; }
.flap-face{ fill:#A93541; transition:fill .01s; }
.env-flap.inner .flap-face{ fill:#EFD3CD; }
.env-flap.inner{ filter:none; }

.seal{
  position:absolute; left:50%; top:62%; z-index:5; width:max(86px, calc(var(--ew) * .24)); aspect-ratio:1;
  translate:-50% -50%; padding:0; border:0; background:none; border-radius:50%;
  touch-action:manipulation;
}
.seal:focus-visible{ outline:2px dashed var(--gold); outline-offset:6px; }
.seal-half{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 3px 3px rgb(60 0 8 / .45)); }
.seal-glow{
  position:absolute; inset:8%; border-radius:50%;
  box-shadow:0 0 0 0 rgb(201 164 92 / .55);
  animation:sealPulse 2.2s var(--ease-out) infinite;
}
@keyframes sealPulse{
  0%{ box-shadow:0 0 0 0 rgb(201 164 92 / .55); }
  70%,100%{ box-shadow:0 0 0 22px rgb(201 164 92 / 0); }
}
.seal.opened .seal-glow{ display:none; }

.hint{
  position:absolute; left:0; right:0; bottom:max(13svh, 70px); margin:0; text-align:center;
  font:400 12px/1.4 var(--f-mono); letter-spacing:.14em; color:var(--ink); opacity:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.hint-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.2; } }
.quick-skip{
  position:absolute; right:16px; bottom:max(16px, env(safe-area-inset-bottom));
  border:0; background:none; padding:8px; font:500 12px var(--f-body); color:var(--ink); opacity:.55;
}

/* ---------- Cảnh 3: lá thư mời ---------- */
.scene-letter{
  z-index:22; visibility:hidden; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:max(28px, 5svh) 14px max(40px, 8svh);
  background:
    radial-gradient(120% 70% at 50% 0%, transparent 50%, rgb(158 42 53 / .09) 100%),
    var(--paper), var(--ivory);
}
.letter{
  position:relative; width:min(100%, 540px); margin:0 auto;
  padding:46px clamp(20px, 6vw, 44px) 40px;
  background:var(--paper), #FDF8F4;
  border:1px solid rgb(179 18 29 / .14);
  box-shadow:0 1px 0 #fff inset, 0 30px 60px -30px rgb(42 23 20 / .45), 0 2px 6px rgb(42 23 20 / .06);
  color:var(--ink); text-align:center;
}
.lace{ position:absolute; width:62px; height:62px; color:var(--red-soft); pointer-events:none; stroke-dasharray:1; stroke-dashoffset:1; }
.lace.tl{ left:8px; top:8px; }
.lace.tr{ right:8px; top:8px; transform:scaleX(-1); }
.lace.bl{ left:8px; bottom:8px; transform:scaleY(-1); }
.lace.br{ right:8px; bottom:8px; transform:scale(-1); }

.l-head{
  display:flex; justify-content:space-between; gap:10px; padding:0 10px 12px; margin:0 8px;
  border-bottom:1px dashed var(--red-soft);
  font:500 9.5px/1.3 var(--f-mono); letter-spacing:.2em; color:var(--red);
}
.l-head b{ font-weight:600; }

.l-photo{ position:relative; margin:30px 8px 26px; padding:9px; background:#fff; rotate:-2deg;
  box-shadow:0 1px 2px rgb(0 0 0 / .1), 0 14px 26px -16px rgb(42 23 20 / .55); }
.l-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(.94) contrast(1.03) sepia(.06); }
.pc{ position:absolute; width:30px; height:30px; color:var(--red-deep); }
.pc.tl{ left:-7px; top:-7px; }
.pc.tr{ right:-7px; top:-7px; transform:scaleX(-1); }
.pc.bl{ left:-7px; bottom:-7px; transform:scaleY(-1); }
.pc.br{ right:-7px; bottom:-7px; transform:scale(-1); }

.l-greet{ margin:0 0 18px; text-align:left; font:500 15px/1.5 var(--f-mono); min-height:1.5em; }
.l-intro{ margin:0; font:italic 400 17px/1.5 var(--f-display); color:var(--ink); opacity:.85; }
.l-names{
  margin:8px 0 22px; font:400 clamp(44px, 12.5vw, 66px)/1 var(--f-display); color:var(--red);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.l-names .amp{ font:italic 400 .58em/1 var(--f-display); color:var(--gold); }
.shine{
  background:linear-gradient(100deg, var(--red) 0 42%, #EFCB86 50%, var(--red) 58% 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0 .06em;
}

.l-dates{ display:grid; grid-template-columns:1fr; gap:0; margin:0 0 24px; border-top:1px solid var(--red-soft); border-bottom:1px solid var(--red-soft); }
.l-dates.two{ grid-template-columns:1fr 1fr; }
.l-ev{ padding:16px 8px 18px; }
.l-dates.two .l-ev + .l-ev{ border-left:1px solid var(--red-soft); }
.l-ev small{ display:block; font:600 9.5px/1.4 var(--f-mono); letter-spacing:.2em; color:var(--red); }
.l-ev .d{ display:block; margin:8px 0 4px; font:400 clamp(34px, 10vw, 48px)/1 var(--f-display); color:var(--ink); letter-spacing:.01em; }
.l-ev .d sup{ font-size:.38em; vertical-align:.9em; margin-left:2px; color:var(--mute); }
.l-ev .t{ display:block; font:500 12px/1.5 var(--f-mono); letter-spacing:.06em; }
.l-ev .lunar{ display:block; font:italic 400 13.5px/1.4 var(--f-display); color:var(--mute); margin-top:2px; }
.l-ev .addr{ display:block; margin-top:8px; font:400 12.5px/1.5 var(--f-body); color:var(--ink); opacity:.8; }

.l-note{ margin:0 auto 6px; max-width:30ch; font:italic 400 18px/1.55 var(--f-display); }
.l-sign svg{ width:min(280px, 80%); margin:0 auto; overflow:visible; }
.l-sign text, .thanks-sign text{
  font:700 46px var(--f-hand); fill:var(--red-deep); fill-opacity:0;
  stroke:var(--red-deep); stroke-width:.9; stroke-dasharray:900; stroke-dashoffset:900;
}

.l-cta{ margin-top:18px; display:grid; justify-items:center; gap:12px; }
.stamp-btn{
  --p:12px; position:relative; width:264px; height:84px; border:0; background:var(--red); color:var(--ivory);
  filter:drop-shadow(0 6px 10px rgb(126 11 18 / .35));
  touch-action:manipulation;
}
.stamp-btn-in{
  display:flex; align-items:center; justify-content:center; gap:10px; height:100%;
  border:1.5px dashed rgb(251 244 240 / .55);
  font:600 14px/1 var(--f-mono); letter-spacing:.22em;
}
.stamp-btn-in svg{ width:22px; height:22px; }
.stamp-btn:focus-visible{ outline:2px dashed var(--red); outline-offset:6px; }
.stamp-btn .rubber{
  color:var(--ivory); border-color:var(--ivory); mix-blend-mode:normal; font-size:15px;
  box-shadow:inset 0 0 0 2px var(--red), inset 0 0 0 3.5px var(--ivory);
}
.l-cta-note{ margin:0; font:400 12px/1.5 var(--f-body); color:var(--mute); }

/* ---------- Lá thư gấp đôi ---------- */
.fold{
  position:fixed; left:0; top:0; z-index:35; visibility:hidden; pointer-events:none;
  width:300px; height:400px;
}
.fold > div{ position:absolute; left:0; right:0; height:50%; }
.fold-bottom{ bottom:0; background:var(--paper), #FDF8F4; box-shadow:0 20px 40px -20px rgb(42 23 20 / .5);
  background-image:linear-gradient(rgb(42 23 20 / .08), transparent 22%), var(--paper); }
.fold-top{ top:0; transform-origin:50% 100%; transform-style:preserve-3d; }
.fold-top > div{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fold-top-front{ background:var(--paper), #FDF8F4; }
.fold-top-back{ transform:rotateX(180deg); background:linear-gradient(rgb(179 18 29 / .06), rgb(42 23 20 / .1)), var(--paper), #F4E8E2; }
.fold-bottom::after, .fold-top-front::after{
  content:""; position:absolute; left:16%; right:16%; top:30%; height:40%;
  background:repeating-linear-gradient(transparent 0 9px, rgb(42 23 20 / .1) 9px 11px);
}

/* Điện thoại xoay ngang */
@media (max-height: 500px){
  .scene-envelope{ --ew:min(80vw, 90svh); }
  .env-stage{ margin-top:0; }
  .hint{ bottom:max(10px, env(safe-area-inset-bottom)); }
}