/* ========================================================
   3. BÌA THIỆP (ENVELOPE / COVER SCREEN)
   Nửa trên sage, nửa dưới đào, ngày cưới xếp bậc thang.
   ======================================================== */
.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  background: var(--page-outer);
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.invite-opening .envelope-screen,
.invite-open .envelope-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-box {
  position: relative;
  width: min(100%, var(--cover-width, 800px));
  min-height: 100%;
  container-type: inline-size;
  container-name: envelope;
}

.envelope-card {
  /* Mobile / fallback */
  --cover-date-size: min(124px, 31.8vw, 14.7vh);
  --cover-name-size: min(46px, 11.8vw, 5.45vh);
  --cover-kicker-size: 11px;
  --cover-btn-size: 11px;
  --cover-amp-size: 15px;
  --cover-guest-size: 18px;
  --cover-seal-size: 48px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overflow: clip; /* clip (không tạo vùng cuộn) để nút "Mở thiệp" bám đáy màn hình được */
  background: var(--peach);
  color: var(--teal-ink);
  font-family: var(--font-body);
}

@supports (height: 1dvh) {
  .envelope-card {
    --cover-date-size: min(124px, 31.8vw, 14.7dvh);
    --cover-name-size: min(46px, 11.8vw, 5.45dvh);
  }
}

/* Web: scale theo bề rộng khung thiệp (tới 900px) */
@supports (width: 1cqi) {
  .envelope-card {
    --cover-date-size: clamp(100px, 24cqi, 220px);
    --cover-name-size: clamp(42px, 10cqi, 92px);
    --cover-kicker-size: clamp(11px, 2.2cqi, 16px);
    --cover-btn-size: clamp(11px, 2.1cqi, 15px);
    --cover-amp-size: clamp(15px, 2.8cqi, 22px);
    --cover-guest-size: clamp(18px, 3.4cqi, 28px);
    --cover-seal-size: clamp(48px, 9cqi, 64px);
  }
}

/* Khối sage: thanh trên + ngày cưới. Cao tối thiểu ~59% màn hình, tự dãn nếu ngày cưới lớn hơn */
.cover-sage {
  flex: none;
  min-height: 59.25vh;
  min-height: 59.25dvh;
  padding: 32px var(--gutter) 40px;
  background: var(--sage);
}

/* Thanh trên: nhãn + nút 囍 */
.cover-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cover-kicker {
  padding: 8px 12px;
  background: var(--cream);
  color: var(--teal-ink);
  font-size: var(--cover-kicker-size);
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.4;
  text-transform: uppercase;
}

.envelope-seal {
  width: var(--cover-seal-size);
  height: var(--cover-seal-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--teal-ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: calc(var(--cover-seal-size) * 0.46);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.envelope-seal:hover { background: #ffffff; }

/* Ngày cưới: 12 / 12 / 2026 */
.envelope-date {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: var(--cover-date-size);
  font-weight: 700;
  line-height: 0.9;
  color: var(--peach);
  font-variant-numeric: lining-nums tabular-nums;
}

.envelope-date span:nth-child(2) { padding-left: calc(var(--cover-date-size) * 0.484); }
.envelope-date span:nth-child(3) { padding-left: calc(var(--cover-date-size) * 0.968); color: var(--cream); }

/* Tên chú rể & cô dâu */
.envelope-names {
  margin: 32px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.envelope-name-line {
  font-family: var(--font-display);
  font-size: var(--cover-name-size);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.envelope-name-amp {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--cover-amp-size);
  font-weight: 600;
  line-height: 1.4;
  color: var(--sage-deep);
}

.envelope-name-amp .line {
  width: 48px;
  height: 2px;
  background: var(--sage);
}

@supports (width: 1cqi) {
  .envelope-name-amp { gap: clamp(12px, 2.2cqi, 18px); }
  .envelope-name-amp .line { width: clamp(48px, 9cqi, 72px); }
}

/* Khách mời: cuộn cùng nội dung bìa, đẩy xuống sát nút khi bìa vừa màn hình */
.cover-bottom {
  margin: auto var(--gutter) 0;
  padding: 32px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cover-guest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cover-guest[hidden] { display: none; }

.cover-guest-label {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-soft);
}

.envelope-invite-text {
  display: block;
  font-family: var(--font-display);
  font-size: var(--cover-guest-size);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chỉ nút "Mở thiệp" bám đáy màn hình khi cuộn bìa; các phần khác đứng yên theo nội dung.
   Bìa vừa màn hình thì nút nằm đúng chỗ cuối bìa. */
.btn-open {
  position: sticky;
  bottom: 36px;
  z-index: 2;
  flex-shrink: 0;
  align-self: flex-end;
  min-height: 48px;
  margin: 0 var(--gutter) 36px 0;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--teal-ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--cover-btn-size);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

@supports (width: 1cqi) {
  .btn-open {
    min-height: clamp(48px, 8.5cqi, 60px);
    padding: 0 clamp(20px, 3.6cqi, 32px);
    gap: clamp(10px, 1.8cqi, 14px);
  }
  .cover-kicker {
    padding: clamp(8px, 1.4cqi, 12px) clamp(12px, 2.2cqi, 18px);
  }
}

.btn-open:hover { background: var(--sage-deep); }

.btn-open svg { transition: transform 0.2s ease; }
.btn-open:hover svg { transform: translateX(3px); }

.envelope-seal:focus-visible,
.btn-open:focus-visible {
  outline: 2px solid var(--teal-ink) !important;
  outline-offset: 3px;
}

/* Khi mở thiệp: nội dung bìa trượt lên rồi mờ dần */
.envelope-card > *:not(.cover-sage) {
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.invite-opening .envelope-card > *:not(.cover-sage) {
  opacity: 0;
  transform: translateY(-36px);
}

.invite-opening .cover-sage {
  transform: translateY(-100%);
  transition: transform 1.6s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Loading chỉ phủ bìa trong lúc chờ dữ liệu thiệp */
#envelope-screen .cover-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(255, 239, 217, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: wait;
}
#envelope-screen .cover-loading-overlay[hidden] { display: none; }
#envelope-screen .cover-loading-spinner {
  width: 44px;
  height: 44px;
  color: var(--teal-ink);
  border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: coverLoadingSpin 0.9s linear infinite;
}
@keyframes coverLoadingSpin { to { transform: rotate(360deg); } }
#envelope-screen[aria-busy="true"] { cursor: wait; }
#envelope-screen button:disabled { cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .envelope-card > *:not(.cover-sage),
  .invite-opening .cover-sage { transition: none; }
}