/* ============================================================
   HỘP QUÀ MỪNG — gộp thẳng vào trong thiệp (#invitation, xem
   .invite__gift trong index.html), không còn là section riêng. Hộp quà
   thật (thân + nắp rời + ruy-băng + nơ) vẽ bằng SVG/CSS gốc, 1 hộp lớn
   (tương tác) + 1 hộp nhỏ lệch phía sau (trang trí). Bấm hộp lớn → chuỗi
   hiệu ứng mở rồi mới hiện modal 2 mã QR.
   ============================================================ */

/* ---- Khối hộp quà, gộp thẳng vào thiệp (#invitation) ------------ */
/* Vạch ngăn + nhãn riêng, cùng kiểu khối RSVP ngay trên (.invite__rsvp /
   .invite__rsvp-label) — không có thì câu "Không bắt buộc đâu…" đọc như
   đang nói về việc trả lời RSVP chứ không phải quà mừng. */
.invite__gift {
  margin: clamp(1.6rem, 1.2rem + 2vw, 2.4rem) 0 clamp(2.8rem, 2.2rem + 3vw, 3.6rem);
  padding-top: clamp(0.8rem, 2vh, 1.2rem);
}
/* Tiêu đề kiểu "HỘP QUÀ MỪNG" trên thiệp đỏ — serif hoa, vàng kim. */
.invite__gift-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-wedding); font-weight: 600;
  font-size: calc(clamp(1.35rem, 1.1rem + 1vw, 1.7rem) * var(--invite-text)); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.invite__gift-hint { margin: 0 0 0.8rem; font-size: calc(0.98rem * var(--invite-text)); color: var(--ink-faint); }

/* Màn thấp: thiệp đã nén (xem @media max-height trong sections.css) — rút
   bớt khoảng trên vạch ngăn để khối mới thêm không đẩy thiệp dài ra. */
@media (max-height: 700px) {
  .invite__gift { margin-top: 1rem; padding-top: 0.6rem; }
}

/* ---- Khung chứa 2 hộp + tia lấp lánh --------------------------- */
.giftbox__envelope {
  position: relative;
  display: block; margin: 0 auto;
  border: none; background: transparent; padding: 0; cursor: pointer;
}
/* Thu nhỏ lại đáng kể so với bản section riêng cũ — giờ chỉ là một khối
   phụ bên trong thẻ thiệp (~30rem), không phải hero của cả một màn hình. */
.invite__gift .giftbox__envelope {
  width: min(13rem, 70%); height: clamp(6.5rem, 5.6rem + 5vw, 8.6rem);
}

/* Canvas hạt bung — to hơn hẳn khung hộp để hoa/tia có chỗ bay lên rồi
   rơi xuống mà không bị cắt ngang. Toạ độ gốc bung tính lại theo
   getBoundingClientRect() của chính canvas này trong gift-box.js. */
.giftbox__burst {
  position: absolute; left: 50%; top: 0; z-index: 5;
  width: 22rem; height: 20rem; transform: translate(-50%, -42%);
  pointer-events: none;
}

.giftbox__sparkle { position: absolute; width: 1rem; height: 1rem; fill: var(--sun); animation: giftbox-twinkle 2.4s ease-in-out infinite; }
.giftbox__sparkle--a { top: -0.4rem; right: 16%; animation-delay: 0.3s; }
.giftbox__sparkle--b { bottom: 6%; left: 2%; width: 0.7rem; height: 0.7rem; animation-delay: 1.1s; }
@keyframes giftbox-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---- Hộp nhỏ, lệch phía sau — thuần trang trí ------------------- */
.giftbox__box--small {
  position: absolute; top: 4%; right: 0; z-index: 1;
  width: 44%; height: 56%;
  transform: rotate(-9deg);
  opacity: 0.9;
}

/* ---- Hộp lớn ----------------------------------------------------- */
.giftbox__box--big { position: absolute; left: 2%; bottom: 0; z-index: 2; width: 58%; height: 84%; }

/* ---- Thân + nắp (dùng chung giữa hộp lớn/nhỏ) ------------------- */
/* Hộp kem + ruy-băng/nơ đỏ — như bao giấy kem hoạ tiết đỏ trên nền thiệp
   đỏ. Màu khai thẳng (không qua --paper) vì trong thiệp --paper là đỏ. */
.giftbox__body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%;
  border-radius: 3px var(--radius-card) var(--radius-card) var(--radius-card);
  background: linear-gradient(165deg, #F4E6CC, #FBF3E4);
  border: 1px solid var(--sun);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.giftbox__lid {
  position: absolute; left: -7%; right: -7%; top: 0; height: 40%;
  border-radius: var(--radius-card) var(--radius-card) 2px 2px;
  background: linear-gradient(165deg, #FBF3E4, #F4E6CC);
  border: 1px solid var(--sun);
  box-shadow: var(--shadow-float);
  transform-origin: 50% 100%;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.giftbox__ribbon-v {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 16%;
  transform: translateX(-50%);
  background: #C8102E; opacity: 0.85;
}
.giftbox__ribbon-h {
  position: absolute; left: 0; right: 0; top: 58%; height: 24%;
  background: #C8102E; opacity: 0.85;
}

/* ---- Nơ trên nắp hộp lớn ----------------------------------------- */
.giftbox__bow {
  position: absolute; left: 50%; top: -0.85rem; z-index: 3;
  width: 3.6rem; height: 2.2rem;
  transform: translateX(-50%);
}
.giftbox__bow svg { width: 100%; height: 100%; overflow: visible; }
.giftbox__bow-loop {
  fill: #C8102E; opacity: 0.95; transform-origin: 30px 18px;
  transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.giftbox__bow-knot { fill: var(--sun); transition: opacity var(--dur-fast) var(--ease-out-expo); }

/* ---- Quầng sáng loé lên trong hộp lúc mở ------------------------- */
.giftbox__glow {
  position: absolute; left: 50%; top: 45%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  /* rgb ở đây phải bám theo --sun (#F2C14E). */
  background: radial-gradient(circle, rgba(242,193,78,0.85), rgba(242,193,78,0) 70%);
  opacity: 0; pointer-events: none; z-index: 1;
}

/* ---- Chuỗi hiệu ứng lúc bấm mở (kích hoạt bởi .is-open trên nút) --- */
.giftbox__envelope.is-open .giftbox__box--big .giftbox__lid {
  transform: translate(-0.3rem, -2.6rem) rotate(-18deg);
  opacity: 0;
}
.giftbox__envelope.is-open .giftbox__box--big .giftbox__bow-loop--l {
  transform: translate(-14px, -16px) rotate(-40deg); opacity: 0;
}
.giftbox__envelope.is-open .giftbox__box--big .giftbox__bow-loop--r {
  transform: translate(14px, -16px) rotate(40deg); opacity: 0;
}
.giftbox__envelope.is-open .giftbox__box--big .giftbox__bow-knot { opacity: 0; }
.giftbox__envelope.is-open .giftbox__box--big .giftbox__glow { animation: giftbox-glow 0.7s ease-out forwards; }
.giftbox__envelope.is-open .giftbox__box--big .giftbox__body { animation: giftbox-pop 0.5s var(--ease-spring); }

@keyframes giftbox-glow {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.3); }
  35%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes giftbox-pop {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.07, 0.9); }
  60%  { transform: scale(0.97, 1.05); }
  100% { transform: scale(1, 1); }
}

.giftbox__cta {
  position: absolute; left: 0; right: 0; bottom: -2.3rem; text-align: center;
  font-size: calc(var(--text-label) * var(--invite-text)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}
.giftbox__envelope.is-open .giftbox__cta { opacity: 0; }

.giftbox__envelope:hover .giftbox__box--big,
.giftbox__envelope:focus-visible .giftbox__box--big { transform: translateY(-2px); }
.giftbox__envelope.is-open:hover .giftbox__box--big,
.giftbox__envelope.is-open:focus-visible .giftbox__box--big { transform: none; }

/* ---- Gợi ý "bấm được": quầng sáng thở sau hộp + hộp lớn lắc 2 lần rồi
   nghỉ + chữ CTA nhấp nháy nhẹ. Chạy khi trong màn hình (.is-live,
   gift-box.js), tắt hẳn khi đã mở quà. Chỉ transform/opacity. ---- */
.giftbox__halo {
  position: absolute; left: 30%; top: 55%; z-index: 0;
  width: 140%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  /* Vàng ấm sáng (--sun) — đủ nổi cả trên sóng vảy cá đỏ ở đáy thiệp. */
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 85%, transparent), color-mix(in srgb, var(--sun) 25%, transparent) 40%, transparent 64%);
  opacity: 0; pointer-events: none;
}
.giftbox__envelope.is-live:not(.is-open) .giftbox__halo { animation: giftbox-halo 2.6s var(--ease-in-out-soft) infinite; }
.giftbox__envelope.is-live:not(.is-open) .giftbox__box--big { animation: giftbox-wiggle 3.5s ease-in-out infinite; transform-origin: 50% 100%; }
.giftbox__envelope.is-live:not(.is-open) .giftbox__cta { animation: giftbox-cta 2.6s var(--ease-in-out-soft) infinite; }
.giftbox__envelope.is-live:not(.is-open):hover .giftbox__box--big,
.giftbox__envelope.is-live:not(.is-open):focus-visible .giftbox__box--big { animation: none; transform: translateY(-2px); }
@keyframes giftbox-halo {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.8); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
}
@keyframes giftbox-wiggle {
  0%, 60%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-4deg); }
  72% { transform: rotate(4deg); }
  78% { transform: rotate(-3deg); }
  84% { transform: rotate(3deg); }
  90% { transform: rotate(0deg); }
}
@keyframes giftbox-cta {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .giftbox__envelope.is-live:not(.is-open) .giftbox__halo,
  .giftbox__envelope.is-live:not(.is-open) .giftbox__box--big,
  .giftbox__envelope.is-live:not(.is-open) .giftbox__cta { animation: none; }
  .giftbox__envelope:not(.is-open) .giftbox__halo { opacity: 0.45; transform: translate(-50%, -50%) scale(0.95); }
}

/* ============================================================
   MODAL 2 MÃ QR — .sheet--gift chỉ chỉnh .sheet__card về 1 cột (2 sheet
   kia — #song/#secrets — dùng layout 2 cột mặc định của .sheet__card).
   ============================================================ */
.sheet--gift .sheet__card { display: block; max-width: 34rem; }
/* Lớp phủ sau popup quà: đỏ sẫm thay xanh đen, cho đồng tông giấy đỏ
   (nền/chữ của .sheet__card ở đây dùng chung với thiệp — xem sections.css). */
.sheet--gift .sheet__scrim { background: rgba(48,0,4,0.82); }

.gift-qr__eyebrow { margin-bottom: 0.6rem; }
.gift-qr__title {
  margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  color: var(--accent);
}
.gift-qr__intro { margin: 0 0 1.8rem; color: var(--ink-soft); }

.gift-qr__list { display: grid; gap: 1.6rem; }
@media (min-width: 560px) {
  .gift-qr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gift-qr__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1.4rem 1rem; border-radius: var(--radius-card);
  border: var(--hairline);
}
.gift-qr__who { margin: 0 0 0.4rem; font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sun); }

/* Nền/ô CỐ Ý hardcode sáng-tối bất kể theme quanh (modal đang nền tối
   kiểu .sheet__card) — máy quét QR không chắc đọc được kiểu đảo màu, xem
   ghi chú tương tự ở gift-box.js (QR_DARK/QR_LIGHT). */
.gift-qr__code {
  width: 9rem; height: 9rem; padding: 0.6rem;
  background: #FFFFFF; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--accent);
}
.gift-qr__code svg { display: block; width: 100%; height: 100%; }

.gift-qr__bank { margin: 0.5rem 0 0; font-weight: 500; }
.gift-qr__account { margin: 0.1rem 0 0; letter-spacing: 0.06em; color: var(--ink-soft); }
.gift-qr__holder { margin: 0; font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.gift-qr__save {
  margin-top: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--sun); background: transparent; color: var(--sun);
  font-size: var(--text-label); letter-spacing: 0.08em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
.gift-qr__save:hover,
.gift-qr__save:focus-visible { background: var(--sun); color: var(--paper); }