/* ============================================================
   CỔNG "MỞ THIỆP" — phủ toàn màn hình trước #hero.
   Bố cục theo mẫu thiệp Long–Phụng: nền đỏ sẫm có vignette + hoạ tiết
   Long–Phụng đối xứng + chữ 囍 trôi lơ lửng; thẻ ngang kính đỏ với phượng
   (trái) / rồng (phải) chìm làm nền, huy hiệu 囍, tên 3 dòng, nút đào vàng.
   Ảnh rồng/phượng là ảnh của cặp đôi (phoenix-gate.webp / dragon-gate.webp — thân đỏ sẫm + quầng trắng ám đỏ, dựng bởi tools/make-gate-art.py); huy hiệu
   là SVG tự vẽ — không chép hình từ mẫu tham khảo.
   Ghi đè bộ token .on-night ngay trên .cover-gate (file này nạp sau
   tokens.css, cùng độ ưu tiên selector nên thắng).
   ============================================================ */

/* Khoá cuộn khi cổng còn hiện — gỡ bởi cover-gate.js lúc bấm "Mở thiệp". */
html.is-gate-open,
html.is-gate-open body { overflow: hidden; }

.cover-gate {
  /* Thời lượng RIÊNG cho cổng — nhanh hơn --dur-cinematic dùng chung. */
  --dur-gate: 820ms;

  /* Palette riêng cho cổng — không đụng token chung. */
  --paper: #6E0607;
  --paper-deep: #380003;
  --ink: #FFF3E2;
  --ink-soft: #F6D9BE;
  --ink-faint: #E5BFA0;
  --peach: #FFC796;          /* tên + nút, đúng tông đào vàng của mẫu */
  --accent: #F2C14E;
  --accent-bright: #F2C14E;
  --sun: #F2C14E;
  --night: #6E0607;
  --hairline: 1px solid rgba(255, 199, 150, 0.22);

  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 0.6rem + 3vw, 3rem);
  overflow: hidden;
  /* Vignette: giữa đỏ sẫm, tối dần ra mép. */
  background: radial-gradient(120% 95% at 50% 45%, var(--paper) 0%, #520304 55%, var(--paper-deep) 100%);
  color: var(--ink);
  opacity: 1;
  transition: opacity var(--dur-gate) var(--ease-in-out-soft);
}
.cover-gate.is-opening { opacity: 0; pointer-events: none; }

/* Hoạ tiết Long–Phụng đối xứng (cùng ảnh + cách ghép với body::before/after
   ở style.css): nửa trái giữ nguyên, nửa phải lật gương, neo từ giữa màn
   hình. Mờ hơn nền trang để không tranh với thẻ. */
.cover-gate::before,
.cover-gate::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%;
  background: url("../img/Background/long-phung-pattern-gate.webp") right top / 460px 600px repeat;
  opacity: 0.55;
  pointer-events: none;
}
.cover-gate::before { left: 0; }
.cover-gate::after { right: 0; transform: scaleX(-1); }

.cover-gate__burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* ---- Chữ 囍 trôi lơ lửng --------------------------------------- */
.cover-gate__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cover-gate__xi {
  position: absolute; bottom: -3rem;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  color: #E9A27A; opacity: 0;
  animation: cover-gate-float var(--xi-dur, 16s) linear infinite;
  animation-delay: var(--xi-delay, 0s);
}
.cover-gate__xi--1 { left: 12%; font-size: 1.6rem; --xi-dur: 17s; --xi-delay: -2s; }
.cover-gate__xi--2 { left: 27%; font-size: 1.1rem; --xi-dur: 13s; --xi-delay: -9s; }
.cover-gate__xi--3 { left: 41%; font-size: 1.4rem; --xi-dur: 19s; --xi-delay: -5s; }
.cover-gate__xi--4 { left: 58%; font-size: 1rem;   --xi-dur: 14s; --xi-delay: -12s; }
.cover-gate__xi--5 { left: 71%; font-size: 1.8rem; --xi-dur: 21s; --xi-delay: -7s; }
.cover-gate__xi--6 { left: 84%; font-size: 1.2rem; --xi-dur: 15s; --xi-delay: -3s; }
.cover-gate__xi--7 { left: 93%; font-size: 1.5rem; --xi-dur: 18s; --xi-delay: -14s; }
@keyframes cover-gate-float {
  0%   { transform: translateY(0) rotate(-6deg); opacity: 0; }
  12%  { opacity: 0.55; }
  85%  { opacity: 0.45; }
  100% { transform: translateY(-115vh) rotate(8deg); opacity: 0; }
}

/* ---- Thẻ mời: ngang, kính đỏ ------------------------------------ */
.cover-gate__card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.35rem;
  width: 100%; max-width: 44rem; min-height: min(33rem, 82svh);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.5rem, 1rem + 3vw, 3rem);
  border: 1px solid rgba(255, 199, 150, 0.22);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(150, 22, 22, 0.62), rgba(110, 10, 12, 0.7));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 220, 190, 0.08);
  transform: scale(1);
  transition: transform var(--dur-gate) var(--ease-out-expo), opacity var(--dur-gate) var(--ease-in-out-soft);
}
.cover-gate.is-opening .cover-gate__card { transform: scale(1.4); opacity: 0; }

/* Phượng chìm bên trái (quay phải), rồng chìm bên phải (lật → quay trái). */
.cover-gate__art {
  position: absolute; z-index: -1; height: 95%; width: auto; top: 3%;
  opacity: 0.16; pointer-events: none; user-select: none;
}
.cover-gate__art--phoenix { left: -2%; }
.cover-gate__art--dragon { right: -1%; transform: scaleX(-1); }

/* ---- Huy hiệu 囍 ------------------------------------------------- */
.cover-gate__emblem {
  width: clamp(4.6rem, 3.8rem + 3vw, 6rem); height: auto; overflow: visible;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 18px rgba(255, 190, 140, 0.45)) drop-shadow(0 0 4px rgba(255, 190, 140, 0.35));
}
.cover-gate__emblem-disc { fill: #8A1210; }
.cover-gate__emblem-ring { fill: none; stroke: var(--peach); stroke-width: 1.4; }
.cover-gate__emblem-key { fill: none; stroke: var(--peach); stroke-width: 4; stroke-dasharray: 2.2 1.6; opacity: 0.9; }
.cover-gate__emblem-xi {
  fill: var(--peach);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; font-weight: 700; font-size: 34px;
}

/* ---- Tên 3 dòng ---------------------------------------------------- */
.cover-gate__names {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  color: var(--peach);
  font-family: var(--font-display); font-weight: 400; line-height: 1.12;
}
.cover-gate__name { font-size: clamp(2.3rem, 1.6rem + 3vw, 3.7rem); }
.cover-gate__amp { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin: 0.15rem 0; }

/* Vạch chia: 2 gạch mảnh + 1 hoạ tiết nhỏ (CSS thuần — glyph "❦" bị font
   Windows vẽ thành emoji màu). */
.cover-gate__rule { display: flex; align-items: center; gap: 0.8rem; width: 8rem; margin: 0.9rem 0 0.4rem; }
.cover-gate__rule::before,
.cover-gate__rule::after { content: ""; flex: 1; height: 1px; background: var(--peach); opacity: 0.55; }
.cover-gate__rule span {
  width: 0.5rem; height: 0.5rem; flex: 0 0 auto;
  border: 1px solid var(--peach); transform: rotate(45deg); opacity: 0.85;
}

.cover-gate__date {
  margin: 0; color: var(--ink-soft);
  font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
}
.cover-gate__invite {
  margin: 1rem 0 1.4rem; color: var(--ink-soft);
  font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
}
.cover-gate__to-name { color: var(--peach); }

/* ---- Nút đào vàng đặc ------------------------------------------- */
.cover-gate__btn {
  padding: 0.95rem 2.6rem;
  border: 0; border-radius: 999px;
  background: var(--peach); color: #5A0507;
  font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  box-shadow: 0 0 28px rgba(255, 190, 140, 0.45), 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}
.cover-gate__btn:hover,
.cover-gate__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(255, 190, 140, 0.65), 0 14px 28px -10px rgba(0, 0, 0, 0.6);
}
/* Cổng tự focus nút lúc mở (cover-gate.js) nên vòng focus hiện ngay từ đầu —
   giữ cho người dùng bàn phím nhưng mảnh/mờ để không thành viền kép nặng. */
.cover-gate__btn:focus-visible { outline: 1px solid rgba(255, 243, 226, 0.55); outline-offset: 5px; }

/* ---- Mobile: thẻ dọc, rồng/phượng thu về 2 góc ---------------------- */
@media (max-width: 640px) {
  .cover-gate__card { min-height: min(36rem, 88svh); }
  .cover-gate__art { height: 52%; opacity: 0.14; }
  .cover-gate__art--phoenix { top: -2%; left: -10%; }
  .cover-gate__art--dragon { top: auto; bottom: -2%; right: -8%; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-gate__xi { animation: none; opacity: 0.35; bottom: auto; top: var(--xi-top, 20%); }
  .cover-gate__xi--2, .cover-gate__xi--4, .cover-gate__xi--6 { --xi-top: 70%; }
}