/* ============ lá thư mời (letter.js) ============
   Tỉ lệ cố định 100 × 180, mọi cỡ tính theo cqw nên bố cục giống hệt nhau ở mọi màn hình.
   .paper: giấy + chữ thật · .mask: tô màu thuần cho Blender (đỏ = mực, lục = mực đỏ rượu, lam = ép kim)
   .ghost: trong suốt, chồng đúng lên ảnh lá thư ở khung cuối video — chỉ còn chữ viết tay và vùng bấm */
.letter { --l-ink: #3A1219; --l-wine: #6E0F1C; --l-foil: #A98443; --l-paper: #F7EFE1;
  position: relative; aspect-ratio: 100 / 180; container-type: inline-size; color: var(--l-ink); text-align: center; }
.letter.paper { background: #F4ECDD; border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 8px 20px -10px rgba(0,0,0,.45); isolation: isolate; }
.letter.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain-dark); opacity: .45; box-shadow: inset 0 0 60px rgba(150,100,40,.13); pointer-events: none; }
.l-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 8cqw 8cqw 11cqw; }
/* không dòng nào được co lại: bố cục phải giống hệt nhau ở mặt nạ (in lên thiệp) và lớp thư (vùng bấm) */
.l-in > * { flex-shrink: 0; }
.l-frame { position: absolute; inset: 3.6cqw; border: .34cqw solid var(--l-foil); pointer-events: none; }
.l-frame::after { content: ""; position: absolute; inset: .9cqw; border: .16cqw solid var(--l-foil); }
.l-orn { width: 38cqw; color: var(--l-foil); line-height: 0; }
.l-orn .orn { width: 100%; max-width: none; height: auto; color: inherit; }
.l-kicker { margin: 2.6cqw 0 0; font: 600 3.05cqw/1.3 var(--font-body); letter-spacing: .3em; text-transform: uppercase; padding-left: .3em; }
/* tên khách viết tay: chân chữ đặt trên dòng chấm, nét móc buông xuống qua dòng như viết bút thật */
.l-guest { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 72cqw; height: 11cqw; margin: .6cqw 0 0; }
.l-dots { position: absolute; left: 4cqw; right: 4cqw; bottom: 2.2cqw; border-bottom: .34cqw dotted var(--l-ink); opacity: .55; }
/* tên khách chưa hiện cho tới khi lá thư dừng hẳn (.writing), rồi được viết vào: mặt nạ có mép mềm lướt từ trái sang phải.
   Đệm rộng thêm (bù bằng lề âm, bố cục không đổi) để nét bay của chữ viết tay không bị mặt nạ cắt. */
.hand { position: relative; max-width: 84cqw; padding: .4em 2.6cqw 1.9cqw; margin: -.4em -.6cqw 0; font: 400 7.6cqw/1.2 var(--font-script); color: var(--l-ink); white-space: nowrap;
  -webkit-mask: linear-gradient(90deg, #000 46%, transparent 54%) 100% 0 / 250% 100% no-repeat; mask: linear-gradient(90deg, #000 46%, transparent 54%) 100% 0 / 250% 100% no-repeat; }
.l-what { margin: .4cqw 0 0; font: italic 400 3.7cqw/1.35 var(--font-body); }
.l-names { margin: .8cqw 0 0; display: flex; flex-direction: column; align-items: center; font: 400 11.6cqw/1.04 var(--font-script); color: var(--l-foil); }
.l-names .amp { font: italic 400 5.6cqw/1 var(--font-display); margin: .3cqw 0 .9cqw; }
.letter.paper .l-names { background: linear-gradient(170deg, #C9A465, #8E6A2F 45%, #D7B677 70%, #9C7738); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-fams { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; width: 100%; margin-top: 2.6cqw; }
.l-fam h3 { margin: 0 0 .5cqw; font: italic 400 4.3cqw/1.25 var(--font-display); }
.l-fam p { margin: 0; font: 400 3.45cqw/1.42 var(--font-body); }
.wine { color: var(--l-wine); }
.l-date { margin-top: 5cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; width: 80cqw; }
.l-date span { font: 600 3cqw/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; border-block: .26cqw solid var(--l-foil); padding: 2.1cqw 0 2.1cqw .2em; }
.l-date b { font: 400 8.6cqw/1 var(--font-display); }
.l-lunar { margin: 1.5cqw 0 0; font: italic 400 3.4cqw/1.35 var(--font-body); }
.l-evs { display: grid; grid-template-columns: 1fr 1fr; gap: 3.6cqw; width: 100%; margin-top: 2.8cqw; }
.l-ev { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.l-ev h3 { margin: 0 0 .7cqw; font: 500 4.4cqw/1.2 var(--font-display); letter-spacing: .02em; }
.l-ev p { margin: 0; font: 400 3.3cqw/1.4 var(--font-body); text-wrap: balance; }
.l-ev .l-at { font-style: italic; }
.l-ev .l-time { margin-top: .9cqw; font-weight: 600; }
.l-map { display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw; margin-top: 1.8cqw; padding: 1.5cqw 3.6cqw 1.5cqw 3cqw; border: .26cqw solid var(--l-ink); border-radius: 99cqw; font: 500 3.15cqw/1 var(--font-ui); color: var(--l-ink); text-decoration: none; cursor: pointer; }
.l-map svg { width: 3.5cqw; height: 3.5cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.l-close { margin: 2.3cqw 0 2.9cqw; max-width: 82cqw; font: italic 400 3.5cqw/1.5 var(--font-body); }
/* nút: nền mực đỏ rượu, chữ ép kim, một viền chỉ vàng mảnh lùi vào trong mép nút */
.l-cta { margin-top: auto; width: 76cqw; min-height: 10.4cqw; padding: 2cqw 5cqw; border: 0; border-radius: 99cqw; background: var(--l-wine); color: var(--l-foil);
  outline: .3cqw solid var(--l-foil); outline-offset: -1.1cqw; font: 600 3.9cqw/1.2 var(--font-body); letter-spacing: .06em; cursor: pointer; position: relative; overflow: hidden; }
.letter.paper .l-cta { background: linear-gradient(170deg, #7A1422, #6E0F1C 45%, #57101B); outline-color: #B48F4E; box-shadow: 0 1cqw 3cqw -1.4cqw rgba(60,10,15,.6); }
.letter.paper .l-cta span { background: linear-gradient(170deg, #E2C68A, #B8934F 45%, #E6CD94 70%, #BE9A58); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* viền chỉ vàng dùng outline nên khi bấm phím Tab phải trả lại vòng focus rõ ràng */
.letter .l-cta:focus-visible { outline: 2px solid var(--gold-ok); outline-offset: 3px; }
/* mặt nạ cho Blender: màu thuần theo kênh, không chữ viết tay */
.letter.mask { --l-ink: #F00; --l-wine: #0F0; --l-foil: #00F; --l-paper: #000; background: #000; }
.letter.mask .hand { visibility: hidden; }
/* lớp trong suốt chồng lên ảnh: chỉ còn chữ viết tay, ánh sáng lướt qua nút ép kim và phản hồi khi chạm */
.letter.ghost { --l-ink: transparent; --l-wine: transparent; --l-foil: transparent; --l-paper: transparent; }
.letter.ghost .l-dots { opacity: 0; }
/* ?debug=1: hiện lớp thư bán trong suốt để soi độ khớp với ảnh */
.letter.ghost.debug { --l-ink: rgba(0,140,255,.75); --l-wine: rgba(0,190,60,.75); --l-foil: rgba(255,0,200,.6); --l-paper: rgba(255,255,255,.4); }
.letter.ghost.debug .l-dots { opacity: 1; }
.letter.ghost .hand { color: #2A0B11; opacity: .9; mix-blend-mode: multiply; }
.letter.ghost .l-map:active, .letter.ghost .l-cta:active { background: rgba(60,20,10,.12); }
.letter.ghost .l-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,240,210,.3) 50%, transparent); transform: skewX(-18deg); mix-blend-mode: screen; animation: sweep 3.6s var(--ease) infinite 1.6s; }
.letter.writing .hand { animation: handWrite 1.9s cubic-bezier(.42,.08,.32,1) .1s forwards; }
@keyframes handWrite { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes sweep { 0% { left: -45%; } 45%, 100% { left: 120%; } }

@media (prefers-reduced-motion: reduce) {
  .letter .l-cta::after, .letter .hand { animation: none !important; }
  .letter .hand { -webkit-mask: none; mask: none; }
}