/* ---------- Màn "Mở thiệp": phong bì có dấu sáp trên nền ảnh cổng ---------- */
.cover {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 16px;
  text-align: center;
  background: var(--ink);
  transition: opacity .7s ease 2.3s, visibility 0s linear 3s;
}
.cover__bg { position: absolute; inset: 0; overflow: hidden; }
/* Điện thoại: màn dọc hẹp hơn ảnh nên ảnh bị cắt hai bên → căn theo --cover-focus (photos.coverFocus trong wedding-config.js)
   để hai khuôn mặt nằm giữa màn, không lệch về một phía */
.cover__photo { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-focus, 50% 25%); }
/* Laptop/máy tính — bố cục giống phần đầu trang (.hero): ảnh chiếm trọn NỬA TRÁI, cao hết màn hình,
   gần như không phủ tối nên thấy rõ cô dâu chú rể; chữ + phong bì nằm giữa NỬA PHẢI trên nền tối.
   Ảnh dọc 2:3 vừa khít nửa màn ngang nên chỉ cắt bớt chút trên/dưới, không bị phóng to quá khổ. */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  /* Nửa phải cùng nền phông xám studio của ảnh (đo trên ảnh: tối dần lên đỉnh ~#8b8987, giữa/dưới ~#c4c0bd)
     → ảnh và phần chữ như chung một tấm phông; mép phải ảnh tan dần vào nền, không còn đường ghép */
  .cover {
    /* Màu đo đúng phông ảnh sát chỗ nối, theo từng độ cao (trên hơi tối, giữa-dưới sáng ấm) → không còn vệt tối */
    --cover-paper: linear-gradient(to bottom, #c8c3c0 0%, #d6d1ce 20%, #ded9d6 40%, #dfdad7 70%, #dcd7d4 100%);
    grid-template-columns: 1fr 1fr; place-items: center;
    background: var(--cover-paper);
  }
  .cover::before { border-color: rgba(31, 29, 27, .18); }
  .cover .cover__inner { grid-column: 2; width: min(100%, 32rem); color: var(--ink); }
  /* .cover đứng trước để thắng các rule màu chữ trắng khai báo phía dưới file */
  .cover .cover__names { text-wrap: balance; text-shadow: none; }
  .cover .cover__script { color: var(--accent); }
  .cover .cover__date { color: var(--ink); }
  .cover .cover__guest { color: rgba(31, 29, 27, .8); }
  .cover .cover__guest strong { color: var(--ink); }
  .cover .cover__hint { color: rgba(31, 29, 27, .75); }
  .cover__bg { right: 50%; overflow: visible; }
  .cover__photo {
    object-position: 50% 18%; transform: none;
    /* Tan dần từ 52%: mép phải ảnh gốc tự tối dần (tối góc) → bắt đầu tan trước vùng tối đó để không thành vệt */
    -webkit-mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .15) 88%, transparent);
    mask-image: linear-gradient(to right, #000 52%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .15) 88%, transparent);
  }
  .cover .cover__bg::after { display: none; } /* bỏ lớp phủ tối: ảnh giữ đúng màu gốc */
}
.cover__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgb(var(--dark-rgb) / .5), rgb(var(--dark-rgb) / .85));
}
.cover::before {
  content: ""; position: absolute; inset: 14px; z-index: 1;
  border: 1px solid rgba(230, 211, 187, .5); border-radius: 4px;
  pointer-events: none;
}
.cover__inner { position: relative; z-index: 2; color: #fff; }
.cover__script { margin: 0; font: var(--fs-script-md)/1.2 var(--script); color: var(--champagne); }
.cover__names { margin: .35rem 0 .5rem; font: 400 var(--fs-h1)/1.1 var(--serif); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.cover__date { margin: 0 0 .75rem; letter-spacing: .4em; font-size: var(--fs-sm); }
.cover__guest { margin: 0 0 .75rem; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.cover__guest:empty { display: none; } /* link không có tên khách: không chiếm chỗ */
.cover__guest strong { color: #fff; font-weight: 500; }
.cover__hint { margin: 1.25rem 0 0; font-size: var(--fs-sm); letter-spacing: .08em; color: rgba(255, 255, 255, .8); }

/* ---------- Màn mở thiệp: chi tiết tinh tế theo mẫu ----------
   hai nhẫn giữa "Thiệp mời cưới" và tên · ngày trong nền bo tròn · phong bì có chỉ vàng viền nắp
   + dây vàng ngang qua dấu sáp + nhành hoa baby · lời nhắc nghiêng có vạch hai bên · sóng/nhành lá vàng ở góc */
.cover__rings { display: block; width: min(260px, 72%); height: 30px; margin: .35rem auto .5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' fill='none' stroke='%23c2a57e' stroke-linecap='round'%3E%3Cpath d='M0 13h96M144 13h96' stroke-width='.8'/%3E%3Ccircle cx='114' cy='13' r='7.5' stroke-width='1.2'/%3E%3Ccircle cx='126' cy='13' r='7.5' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.cover .cover__names { margin: .25rem 0 .9rem; }
/* Hàng ngày: mỗi buổi lễ một ô bo tròn; không đủ chỗ thì tự xuống hàng */
.cover .cover__date { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; margin: 0 0 1rem; letter-spacing: 0; }
.cover__date-item {
  padding: .45rem 1.2rem;
  border-radius: 999px; background: rgba(255, 255, 255, .14);
  font: 500 var(--fs-md)/1 var(--serif); letter-spacing: .3em; font-variant-numeric: lining-nums;
  white-space: nowrap;
}
/* Điện thoại hẹp: thu khoảng cách chữ để 2 ô ngày vẫn nằm cùng hàng */
@media (max-width: 420px) { .cover__date-item { letter-spacing: .14em; padding-inline: .85rem; } }
.cover .cover__hint { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 1.5rem; font: italic 400 var(--fs-serif-text)/1.3 var(--serif); letter-spacing: .02em; }
.cover__hint::before, .cover__hint::after { content: ""; width: clamp(28px, 6vw, 56px); height: 1px; background: currentColor; opacity: .45; }
/* Sóng chỉ vàng góc trên-phải, nhành lá vàng góc dưới-phải */
.cover__wave, .cover__sprig { position: absolute; z-index: 1; pointer-events: none; }
.cover__wave { top: 0; right: 0; width: clamp(140px, 22vw, 300px); aspect-ratio: 240 / 170; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170' fill='none' stroke='%23c2a57e' stroke-width='.6' stroke-linecap='round'%3E%3Cpath d='M20 0C60 40 150 30 240 70' opacity='0.9'/%3E%3Cpath d='M29 0C68 46 146 39 240 80' opacity='0.82'/%3E%3Cpath d='M38 0C76 52 142 48 240 90' opacity='0.74'/%3E%3Cpath d='M47 0C84 58 138 57 240 100' opacity='0.66'/%3E%3Cpath d='M56 0C92 64 134 66 240 110' opacity='0.58'/%3E%3Cpath d='M65 0C100 70 130 75 240 120' opacity='0.5'/%3E%3Cpath d='M74 0C108 76 126 84 240 130' opacity='0.42'/%3E%3Cpath d='M83 0C116 82 122 93 240 140' opacity='0.34'/%3E%3Cpath d='M92 0C124 88 118 102 240 150' opacity='0.26'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1); opacity: .9; }
.cover__sprig { right: clamp(14px, 3vw, 48px); bottom: clamp(14px, 3vw, 40px); width: clamp(70px, 9vw, 120px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23c2a57e' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M10 112C40 90 70 60 104 14'/%3E%3Cpath d='M34 92c-8-2-14-9-14-18 9 2 14 10 14 18zM34 92c3-8 11-12 19-11-3 8-11 12-19 11z'/%3E%3Cpath d='M58 66c-8-3-12-11-11-19 8 3 12 11 11 19zM58 66c4-7 12-10 20-8-4 7-12 10-20 8z'/%3E%3Cpath d='M80 40c-7-4-10-12-8-19 7 4 10 12 8 19zM80 40c5-6 13-8 20-5-5 6-13 8-20 5z'/%3E%3Ccircle cx='104' cy='14' r='2'/%3E%3Ccircle cx='96' cy='10' r='1.4'/%3E%3Ccircle cx='108' cy='22' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Laptop (nền sáng như phông ảnh): tên nâu đậm như chữ trên thiệp, ngày trong nền trắng ngà */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .cover .cover__names { color: #4a2a1c; }
  .cover .cover__date-item { background: rgba(246, 232, 224, .9); color: #4a2a1c; letter-spacing: .32em; }
  .cover .cover__hint { color: #5a4636; }
}

/* Phong bì: ẢNH dựng sẵn (giấy, chỉ vàng, dấu sáp V♥N, hoa baby) — vẽ CSS không thể giống ảnh mẫu.
   Ảnh được tách thành lớp để có hiệu ứng mở thiệp:
   · nắp = phần ảnh phía trên mép nắp (đường cong đo trên ảnh), lật lên quanh mép trên
   · thân = phần ảnh phía dưới mép nắp
   · dấu sáp = lớp tròn riêng (mảnh dấu sáp cắt từ chính ảnh, đo: tâm 50,1% / 59,1%, đường kính 23,7% bề ngang)
     đè lên trên → nắp lật ra sau nhưng dấu sáp vẫn nằm yên giữa phong bì (như mẫu). Lớp này cũng là nút bấm.
   · lòng phong bì + tấm thiệp ngà viền khung vàng nằm phía sau, nhô lên khi nắp đã mở */
.envelope {
  --w: min(380px, 82vw);
  --img: url("../assets/web/decor/cover-envelope.webp");
  /* Đường cong mép nắp (đo trên ảnh), dùng chung cho thân và nắp. 3 nét vẽ dọc mép (bóng, viền mặt trong nắp, vệt sáng)
     là SVG nhúng trong url() nên không dùng biến được — đổi ảnh phong bì thì sửa cả các path "M0.0 2.0 …" bên dưới cho khớp. */
  --flap-edge: 0.0% 2.0%, 1.0% 4.0%, 2.0% 5.9%, 3.0% 7.9%, 4.0% 9.8%, 5.0% 11.7%, 5.9% 13.5%, 6.8% 15.2%, 7.6% 16.9%, 8.7% 18.7%, 10.0% 20.7%, 11.7% 23.0%, 13.6% 25.5%, 15.8% 28.1%, 17.9% 30.7%, 20.0% 33.2%, 22.0% 35.6%, 24.0% 38.1%, 26.0% 40.4%, 28.0% 42.7%, 30.0% 44.9%, 32.0% 46.9%, 34.0% 48.9%, 36.0% 50.7%, 38.0% 52.4%, 40.0% 54.0%, 42.0% 55.6%, 44.0% 57.2%, 46.0% 58.6%, 48.0% 59.6%, 50.0% 60.0%, 52.0% 59.6%, 54.0% 58.6%, 56.0% 57.2%, 58.0% 55.6%, 60.0% 54.0%, 62.0% 52.4%, 64.0% 50.7%, 66.0% 48.9%, 68.0% 46.9%, 70.0% 44.9%, 72.0% 42.7%, 74.0% 40.4%, 76.0% 38.1%, 78.0% 35.6%, 80.0% 33.2%, 82.1% 30.7%, 84.2% 28.1%, 86.4% 25.5%, 88.3% 23.0%, 90.0% 20.7%, 91.3% 18.7%, 92.4% 16.9%, 93.2% 15.2%, 94.1% 13.5%, 95.0% 11.7%, 96.0% 9.8%, 97.0% 7.9%, 98.0% 5.9%, 99.0% 4.0%, 100.0% 2.0%;
  position: relative;
  width: var(--w); aspect-ratio: 1077 / 651;
  margin: calc(var(--w) * .1) auto 0; /* khoảng thở giữa ngày và phong bì */
  perspective: 900px; perspective-origin: 50% 20%; /* nhìn hơi từ trên xuống: nắp lật có phối cảnh rõ */
  filter: drop-shadow(0 20px 26px rgba(74, 52, 36, .16)) drop-shadow(0 3px 6px rgba(74, 52, 36, .08));
  /* Ẩn tới khi đủ các lớp ảnh (js/intro-and-motion.js gắn .is-ready): không lộ tấm thiệp bên trong trước vỏ phong bì */
  opacity: 0; transition: opacity .5s ease;
}
.envelope.is-ready { opacity: 1; }
.envelope__back, .envelope__front { position: absolute; inset: 0; border-radius: 9px; }
.envelope__back { background: linear-gradient(180deg, #e3d6c4, #eadfcf 40%, #f1e8db); } /* lòng phong bì, hơi tối */
.envelope__letter {
  position: absolute; left: 7%; right: 7%; top: 10%; height: 80%; z-index: 1;
  display: grid; justify-items: center; align-content: start; gap: .2rem;
  padding-top: 11%; /* chữ nằm ở phần trên — phần nhô ra khỏi phong bì khi mở */
  background: linear-gradient(180deg, #fffdf8, #f8f0e4); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(74, 52, 36, .12),
    inset 0 0 0 6px #fffdf8, inset 0 0 0 7px rgba(201, 164, 108, .8),   /* khung vàng ngoài */
    inset 0 0 0 10px #fffdf8, inset 0 0 0 10.5px rgba(201, 164, 108, .5); /* khung vàng trong, mảnh hơn */
  color: var(--ink);
  transition: transform .95s cubic-bezier(.3, .65, .25, 1) 1.2s;
}
.envelope__letter::before, .envelope__letter::after {
  content: ""; position: absolute; top: 6%; width: 22%; aspect-ratio: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='none' stroke='%23c9a46c' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M4 24C18 20 34 14 56 6'/%3E%3Cpath d='M16 21c-1-5 2-9 7-10-1 5-3 8-7 10zM26 17c0-5 3-8 8-9-1 5-4 8-8 9zM36 13c1-5 4-7 9-7-2 4-5 7-9 7zM20 20c4 3 9 3 13 1-4-3-9-3-13-1zM31 16c4 2 9 2 12 0-4-3-8-2-12 0z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9;
}
.envelope__letter::before { left: 5%; }
.envelope__letter::after { right: 5%; transform: scaleX(-1); }
.envelope__letter-eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); }
.envelope__letter-names { font: calc(var(--w) * .058)/1.2 var(--script); color: var(--accent); white-space: nowrap; } /* co theo cỡ phong bì, không bị cắt */
.envelope__front, .envelope__flap { background: var(--img) center / 100% 100% no-repeat; }
.envelope__front { z-index: 2; clip-path: polygon(var(--flap-edge), 100% 100%, 0% 100%); }
/* Bóng mép túi đổ xuống thiệp/lòng phong bì (nằm dưới thân, chỉ lộ phần phía trên mép) → có chiều sâu khi nắp mở */
.envelope__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.0 2.0 L1.0 4.0 L2.0 5.9 L3.0 7.9 L4.0 9.8 L5.0 11.7 L5.9 13.5 L6.8 15.2 L7.6 16.9 L8.7 18.7 L10.0 20.7 L11.7 23.0 L13.6 25.5 L15.8 28.1 L17.9 30.7 L20.0 33.2 L22.0 35.6 L24.0 38.1 L26.0 40.4 L28.0 42.7 L30.0 44.9 L32.0 46.9 L34.0 48.9 L36.0 50.7 L38.0 52.4 L40.0 54.0 L42.0 55.6 L44.0 57.2 L46.0 58.6 L48.0 59.6 L50.0 60.0 L52.0 59.6 L54.0 58.6 L56.0 57.2 L58.0 55.6 L60.0 54.0 L62.0 52.4 L64.0 50.7 L66.0 48.9 L68.0 46.9 L70.0 44.9 L72.0 42.7 L74.0 40.4 L76.0 38.1 L78.0 35.6 L80.0 33.2 L82.1 30.7 L84.2 28.1 L86.4 25.5 L88.3 23.0 L90.0 20.7 L91.3 18.7 L92.4 16.9 L93.2 15.2 L94.1 13.5 L95.0 11.7 L96.0 9.8 L97.0 7.9 L98.0 5.9 L99.0 4.0 L100.0 2.0' stroke='%235a3c22' stroke-width='7' stroke-linejoin='round' vector-effect='non-scaling-stroke' transform='translate(0 -2.5)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: blur(4px);
}
/* NẮP: một tấm duy nhất xoay 3D quanh mép trên. 2 lớp chồng khít xoay cùng nhau:
   mặt ngoài (.envelope__flap = phần ảnh phía trên mép nắp) và mặt trong (.envelope__flap-back = giấy + viền chỉ vàng),
   mỗi lớp chỉ hiện khi quay về phía người xem (backface-visibility). Mép cong nội suy mượt từ đường đo trên ảnh. */
.envelope__flap, .envelope__flap-back {
  position: absolute; inset: 0; z-index: 3; border-radius: 9px;
  clip-path: polygon(0% 0%, var(--flap-edge), 100% 0%);
  transform-origin: top center; backface-visibility: hidden;
}
.envelope__flap-back {
  transform: rotateY(180deg); /* quay lưng lại: chỉ thấy khi nắp đã lật quá 90° */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.0 2.0 L1.0 4.0 L2.0 5.9 L3.0 7.9 L4.0 9.8 L5.0 11.7 L5.9 13.5 L6.8 15.2 L7.6 16.9 L8.7 18.7 L10.0 20.7 L11.7 23.0 L13.6 25.5 L15.8 28.1 L17.9 30.7 L20.0 33.2 L22.0 35.6 L24.0 38.1 L26.0 40.4 L28.0 42.7 L30.0 44.9 L32.0 46.9 L34.0 48.9 L36.0 50.7 L38.0 52.4 L40.0 54.0 L42.0 55.6 L44.0 57.2 L46.0 58.6 L48.0 59.6 L50.0 60.0 L52.0 59.6 L54.0 58.6 L56.0 57.2 L58.0 55.6 L60.0 54.0 L62.0 52.4 L64.0 50.7 L66.0 48.9 L68.0 46.9 L70.0 44.9 L72.0 42.7 L74.0 40.4 L76.0 38.1 L78.0 35.6 L80.0 33.2 L82.1 30.7 L84.2 28.1 L86.4 25.5 L88.3 23.0 L90.0 20.7 L91.3 18.7 L92.4 16.9 L93.2 15.2 L94.1 13.5 L95.0 11.7 L96.0 9.8 L97.0 7.9 L98.0 5.9 L99.0 4.0 L100.0 2.0' stroke='%23c9a46c' stroke-width='1.5' stroke-linejoin='round' vector-effect='non-scaling-stroke' transform='translate(0 -1.3)'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(180deg, #f8f1e6 0%, #f1e6d6 40%, #e7d9c5 62%);
}
/* Mảng giấy che dấu sáp + hoa baby in trên mặt ngoài nắp (2 lớp riêng đè lên, nằm yên) → nắp lật lên sạch như thật */
.envelope__flap::before, .envelope__flap::after { content: ""; position: absolute; background: #f6e6da; }
.envelope__flap::before {
  left: 35.65%; top: 35.48%; width: 28.32%; height: 46.08%;
  -webkit-mask: url("../assets/web/decor/cover-seal-patch.webp") center / 100% 100% no-repeat;
  mask: url("../assets/web/decor/cover-seal-patch.webp") center / 100% 100% no-repeat;
}
.envelope__flap::after {
  left: 48.28%; top: 12.75%; width: 20.8%; height: 37.94%;
  background: #f9ede1; /* giấy quanh chùm hoa sáng hơn chỗ dấu sáp một chút (đo trên ảnh) */
  -webkit-mask: url("../assets/web/decor/cover-sprig-patch.webp") center / 100% 100% no-repeat;
  mask: url("../assets/web/decor/cover-sprig-patch.webp") center / 100% 100% no-repeat;
}
/* Vệt sáng vàng chạy dọc mép nắp lúc mở */
.envelope__glow {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.0 2.0 L1.0 4.0 L2.0 5.9 L3.0 7.9 L4.0 9.8 L5.0 11.7 L5.9 13.5 L6.8 15.2 L7.6 16.9 L8.7 18.7 L10.0 20.7 L11.7 23.0 L13.6 25.5 L15.8 28.1 L17.9 30.7 L20.0 33.2 L22.0 35.6 L24.0 38.1 L26.0 40.4 L28.0 42.7 L30.0 44.9 L32.0 46.9 L34.0 48.9 L36.0 50.7 L38.0 52.4 L40.0 54.0 L42.0 55.6 L44.0 57.2 L46.0 58.6 L48.0 59.6 L50.0 60.0 L52.0 59.6 L54.0 58.6 L56.0 57.2 L58.0 55.6 L60.0 54.0 L62.0 52.4 L64.0 50.7 L66.0 48.9 L68.0 46.9 L70.0 44.9 L72.0 42.7 L74.0 40.4 L76.0 38.1 L78.0 35.6 L80.0 33.2 L82.1 30.7 L84.2 28.1 L86.4 25.5 L88.3 23.0 L90.0 20.7 L91.3 18.7 L92.4 16.9 L93.2 15.2 L94.1 13.5 L95.0 11.7 L96.0 9.8 L97.0 7.9 L98.0 5.9 L99.0 4.0 L100.0 2.0' stroke='%23ffe3a3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: blur(1.5px) drop-shadow(0 0 6px rgba(255, 210, 130, .9));
}
/* Chùm hoa baby tách từ ảnh (scripts/build-cover-sprig.py): nằm yên cạnh dấu sáp */
.envelope__sprig {
  position: absolute; left: 48.28%; top: 12.75%; width: 20.8%; height: 37.94%; z-index: 5; pointer-events: none;
  background: url("../assets/web/decor/cover-sprig.webp") center / 100% 100% no-repeat;
}
.envelope__seal {
  /* Dấu sáp tách theo đúng hình thật (mép gợn sóng) bằng scripts/build-cover-seal.py; nằm yên khi nắp lật */
  position: absolute; left: 35.65%; top: 35.48%; z-index: 6;
  width: 28.32%; height: 46.08%;
  padding: 0; border: 0;
  background: url("../assets/web/decor/cover-seal.webp") center / 100% 100% no-repeat;
  cursor: pointer;
}
/* Không vẽ viền tròn quanh dấu sáp (trang tự đặt focus vào nút này khi mở); dòng "Chạm vào dấu sáp…" đã đủ gợi ý */
.envelope__seal:focus, .envelope__seal:focus-visible { outline: none; }
/* ---------- Hiệu ứng mở thiệp: nắp phong bì THẬT xoay 3D (~2,3s) ----------
   0–0,45s    chữ quanh phong bì tan dần
   0–1,0s     phong bì trôi vào giữa màn, phóng nhẹ
   0–0,6s     dấu sáp phát sáng vàng
   0,25–1,0s  vệt sáng vàng chạy dọc mép nắp
   0,45–1,6s  nắp xoay quanh mép trên: nhấc lên (mặt ngoài tối dần) → qua 90° lộ mặt trong (sáng dần)
              → ngả ra sau, quá đà một chút rồi dội nhẹ về (quán tính); phong bì nhún nhẹ theo
   1,0–1,5s   bóng mép túi hiện dần trên thiệp
   1,2–2,15s  thiệp trượt lên khỏi miệng phong bì (đi trước nắp đã mở, sau thân phong bì)
   2,3–3,0s   cả màn mờ dần (js/intro-and-motion.js hiện trang chính 2,5s, gỡ màn 3,1s)
   Góc xoay chia theo mốc thời gian (linear giữa các mốc) để mô phỏng tăng tốc – giảm tốc – dội. */
.envelope__seal::after {
  content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 220, 150, .85), rgba(255, 200, 120, .35) 55%, transparent 100%);
}
.cover.is-opening .envelope__seal::after { animation: seal-halo .7s ease-out forwards; }
.cover.is-opening .envelope__glow { animation: edge-glow .75s ease-in-out .25s forwards; }
/* "Máy quay tiến lại gần": chữ tan đi, phong bì trôi vào giữa màn và phóng nhẹ rồi mới mở → nắp lật lên không đè vào đâu.
   --focus-y / --focus-scale do js/intro-and-motion.js đo lúc bấm (canh giữa cả hình phong bì đã mở nắp). */
.cover.is-opening .envelope {
  translate: 0 var(--focus-y, 0px); scale: var(--focus-scale, 1);
  transition: translate 1s cubic-bezier(.4, 0, .2, 1), scale 1s cubic-bezier(.4, 0, .2, 1);
}
.cover.is-opening .envelope__flap { animation: flap-front 1.15s linear .45s forwards; }
.cover.is-opening .envelope__flap-back { animation: flap-back 1.15s linear .45s forwards; }
.cover.is-opening .envelope__shade { opacity: .28; transition: opacity .5s ease 1s; }
.cover.is-opening .envelope__letter { transform: translateY(-34%); }
/* Toàn bộ chữ quanh phong bì tan dần, nhường sân cho phong bì */
.cover.is-opening :is(.cover__script, .cover__rings, .cover__names, .cover__date, .cover__guest, .cover__hint) { opacity: 0; transition: opacity .45s ease; }
@keyframes seal-halo { 0% { opacity: 0; scale: .8; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }
@keyframes edge-glow { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
/* Mặt ngoài: nhấc lên chậm → nhanh dần; càng dựng đứng càng khuất sáng. Qua 90° thì tụt xuống dưới thiệp (z-index) */
@keyframes flap-front {
  0%   { rotate: x 0deg;   filter: brightness(1);   z-index: 3; }
  12%  { rotate: x 8deg;   filter: brightness(.985); }
  26%  { rotate: x 38deg;  filter: brightness(.94); }
  40%  { rotate: x 80deg;  filter: brightness(.88); z-index: 3; }
  44%  { rotate: x 92deg;  filter: brightness(.87); z-index: 0; }
  58%  { rotate: x 135deg; }
  72%  { rotate: x 170deg; }
  84%  { rotate: x 186deg; }
  93%  { rotate: x 178deg; }
  100% { rotate: x 180deg; z-index: 0; }
}
/* Mặt trong: cùng góc xoay; vừa lộ ra còn khuất sáng, ngả ra sau thì sáng dần */
@keyframes flap-back {
  0%   { rotate: x 0deg;   z-index: 3; }
  12%  { rotate: x 8deg; }
  26%  { rotate: x 38deg; }
  40%  { rotate: x 80deg;  z-index: 3; }
  44%  { rotate: x 92deg;  filter: brightness(.86); z-index: 0; }
  58%  { rotate: x 135deg; filter: brightness(.93); }
  72%  { rotate: x 170deg; filter: brightness(.985); }
  84%  { rotate: x 186deg; filter: brightness(1.02); }
  93%  { rotate: x 178deg; filter: brightness(.99); }
  100% { rotate: x 180deg; filter: brightness(1); z-index: 0; }
}
.cover.is-opening { opacity: 0; visibility: hidden; }
body.is-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cover, .envelope__flap, .envelope__flap-back, .envelope__letter, .envelope__shade, .envelope__seal { transition: none; }
  .cover.is-opening :is(.envelope__flap, .envelope__flap-back, .envelope__glow), .cover.is-opening .envelope__seal::after { animation: none; }
  .cover.is-opening .envelope { transition: none; }
  .cover.is-opening :is(.envelope__flap, .envelope__flap-back) { display: none; } /* không chuyển động: bỏ nắp, hiện luôn thiệp */
}