/* Wedding Invite — Dark Red & Gold — cinelove-style */
:root {
  --color-dark: #5a1d2a;
  --color-dark-mid: #42151f;
  --color-dark-soft: #7a3441;
  --color-gold: #c4a166;
  --color-gold-light: #e4d1a6;
  --color-gold-muted: #99764e;
  --color-rose: #d7a5aa;
  --color-rose-deep: #b77981;
  --color-paper: #fcf8f2;
  --color-paper-deep: #f0e5d7;
  --color-ink: #2b1d20;
  --color-ink-muted: #766569;
  --color-text-light: #fff9f2;
  --color-text-dim: rgba(255, 249, 242, 0.68);
  --font-display:
    "Cormorant Garamond", "Playfair Display", "Times New Roman", serif;
  --font-serif: "Playfair Display", "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --font-script: "Alex Brush", "Brush Script MT", cursive;
  --font-script-alt: "Dancing Script", "Brush Script MT", cursive;
  --content-max: 44rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-ink);
  background: var(--color-dark);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Thuộc tính hidden luôn thắng các display của component (JS bật/tắt theo loại thiệp) */
[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--color-gold);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ══ Layout ══ */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--color-paper);
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-text-light);
}

/* ══ Scroll reveal — stagger via --d custom property ══ */
.reveal {
  opacity: 0;
  transform: translateY(2.8rem);
  transition:
    opacity 0.95s var(--ease-out) var(--d, 0s),
    transform 0.95s var(--ease-out) var(--d, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Biến thể reveal cho ảnh: mỗi ảnh có hướng đi vào riêng để nhịp cuộn tự nhiên hơn. */
.reveal--from-left {
  transform: translateX(-3.5rem) rotate(-3deg);
}
.reveal--from-right {
  transform: translateX(3.5rem) rotate(3deg);
}
.reveal--rise {
  transform: translateY(3.5rem) scale(0.94);
}
.reveal--from-left.is-visible,
.reveal--from-right.is-visible,
.reveal--rise.is-visible {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ══ Ornament divider ══ */
.ornament {
  text-align: center;
  color: var(--color-gold-muted);
  font-size: 0.82rem;
  letter-spacing: 0.58em;
  margin: 0.2rem 0 2.25rem;
}

/* ══ Section titles ══ */
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  text-align: center;
  margin: 0 0 0.2rem;
  color: var(--color-dark-mid);
  letter-spacing: 0.02em;
}

.section--dark .section__title {
  color: var(--color-gold);
}
.section--dark .ornament {
  color: rgba(212, 175, 55, 0.5);
}

.section__lead {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  line-height: 1.85;
}
.section__lead--light {
  color: var(--color-text-dim);
}

/* ══════════════════════════════════════
   HERO — full-screen portrait photo
══════════════════════════════════════ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 1.5rem 4.5rem;
  overflow: hidden;
  background: var(--color-dark);
}

/* Portrait photo — fills entire viewport */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  z-index: 0;
}

/* Gradient veil — giữ ảnh sáng ở đầu, chuyển dần về xám than dịu ở đáy. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(47, 43, 43, 0.02) 0%,
    rgba(47, 43, 43, 0.1) 28%,
    rgba(48, 43, 44, 0.48) 60%,
    rgba(42, 37, 38, 0.83) 82%,
    #302a2b 100%
  );
}

.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* Ảnh Hero là poster đã in sẵn tên + ngày: ẩn chữ đè lên ảnh (vẫn giữ cho screen reader),
   bỏ lớp phủ tối để poster hiện rõ. */
/* Vị trí neo riêng cho từng poster: heroPosition trong js/events.js */
.hero--poster .hero__photo {
  object-position: center top;
}
.hero--poster .hero__veil {
  background: linear-gradient(
    to bottom,
    rgba(47, 43, 43, 0) 0%,
    rgba(47, 43, 43, 0) 80%,
    rgba(42, 37, 38, 0.45) 100%
  );
}
.hero--poster .hero__content {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Màn ngang (máy tính, tablet xoay ngang): ảnh Hero dọc nếu cover sẽ bị
   phóng theo chiều rộng và cắt mất poster. Hiện trọn ảnh ở giữa, hai bên
   là chính ảnh đó phóng to làm mờ. --hero-bg gán bởi script trong index.html. */
@media (min-aspect-ratio: 1/1) {
  .hero::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    background:
      linear-gradient(rgba(90, 29, 42, 0.45), rgba(90, 29, 42, 0.45)),
      var(--hero-bg, none) center / cover no-repeat;
    filter: blur(36px) brightness(0.6) saturate(1.1);
  }
  .hero__photo {
    left: 50%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 1718 / 2576;
    transform: translateX(-50%);
    object-fit: cover;
    /* Ghi đè heroPosition inline: ảnh hiện trọn nên không cần neo. */
    object-position: center !important;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.55);
  }
}

/* Cascade in on page load — no scroll trigger needed */
.hero__names {
  animation: heroUp 1.2s var(--ease-out) 0.6s both;
}
.hero__date {
  animation: heroUp 1.1s var(--ease-out) 0.85s both;
}
.hero__ornament {
  animation: heroUp 1.1s var(--ease-out) 1s both;
}

@keyframes heroUp {
  from {
    opacity: 0;
    transform: translateY(1.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0.15rem 0;
  line-height: 1;
}

.hero__groom,
.hero__bride {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 13vw, 8.5rem);
  font-weight: 400;
  color: #fff;
  margin: 0;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 80px rgba(255, 255, 255, 0.2),
    0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero__groom {
  transform: translateX(clamp(-2.4rem, -6vw, -0.6rem));
}
.hero__bride {
  transform: translateX(clamp(0.6rem, 6vw, 2.4rem));
}

.hero__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.6rem, 8vw, 4.2rem);
  margin: -0.3rem 0;
  z-index: 1;
}

.hero__ring-glow {
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.42) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(5px);
  animation: heroRingGlow 3.6s ease-in-out infinite;
}
@keyframes heroRingGlow {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.hero__ring-photo {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 14px rgba(212, 175, 55, 0.55));
}

.hero__date {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--color-text-light);
  margin: 0.7rem 0 0;
  text-transform: uppercase;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.3);
}

.hero__ornament {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  letter-spacing: 0.6em;
  margin: 0.5rem 0 0;
}

.hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
  animation: bounce 2.6s ease-in-out infinite;
  animation-delay: 1.5s;
  line-height: 1;
  text-decoration: none !important;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
}

/* ══ Nhẫn cưới ══ */
.rings {
  text-align: center;
}

.rings__photo-wrap {
  position: relative;
  width: clamp(6rem, 30vw, 8.5rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.rings__glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.32) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(10px);
}
.rings__photo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 16px rgba(212, 175, 55, 0.3));
}

.rings__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 34rem;
  margin: 0 auto;
  padding-block: 6rem;
  margin-block: -1.5rem;
  overflow: hidden;
}

.rings__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  will-change: transform;
}

.rings__divider {
  color: var(--color-gold);
  font-size: 1.1rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.rings__lead {
  margin-top: 2rem;
}

@media (max-width: 480px) {
  .rings__grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .rings__divider {
    display: none;
  }
}

/* ══ Lời mời trong thiệp ══ */
.invite__message {
  text-align: center;
  padding: 0 0 2.25rem;
}

.invite__message .section__title {
  font-size: clamp(1.8rem, 5.5vw, 2.5rem);
}

/* Dòng mời đích danh: "Trân trọng kính mời" + tên khách */
.invite__guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem;
  font-weight: 400;
}
.invite__guest-verb {
  font-family: var(--font-serif);
  font-size: clamp(0.82rem, 2.8vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.invite__guest-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-dark-mid);
  text-wrap: balance;
}

/* Trạng thái chưa chốt ngày / giờ / địa điểm */
.invite__tbd {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  color: var(--color-ink-muted);
  text-align: center;
  margin: 0 auto 1.5rem;
}
.invite__tbd[hidden] {
  display: none;
}

.invitation__text {
  max-width: 32rem;
  margin: 0 auto;
}

.invitation__text p {
  color: var(--color-ink-muted);
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.9;
}

/* ══ Countdown ══ */
.countdown {
  text-align: center;
  margin-top: 1.75rem;
}

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 2.5vw, 0.85rem);
  max-width: 26rem;
  margin: 0 auto;
}

.countdown__unit {
  background: var(--color-dark);
  border: 1px solid rgba(255, 237, 221, 0.18);
  border-radius: 0.5rem;
  padding: 1rem 0.35rem 0.85rem;
}

.countdown__value {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  transition: opacity 0.3s var(--ease-out);
}

.countdown__label {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 3vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin-top: 0.15rem;
}

.countdown__done {
  text-align: center;
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--ir-maroon, #6d1620);
  display: none;
  padding: 2rem 0;
}

.countdown.is-ended .countdown__grid {
  display: none;
}
.countdown.is-ended .countdown__done {
  display: block;
}

/* ══ Invite (Trân trọng kính mời) ══ */
/* ══ Invite — thiệp giấy trên nền đỏ (receipt card) ══ */
.invite {
  --ir-red: #6e2433;
  --ir-red-deep: #501823;
  --ir-maroon: #5a1e2b;
  --ir-cream: #fcf7ef;
  --ir-ink: #2b1d20;
  --ir-pad: clamp(1.25rem, 5vw, 2.5rem);
  background: var(--ir-red);
  color: var(--ir-ink);
  text-align: center;
  padding-block: 0 0;
  padding-inline: 0;
  overflow: hidden;
}

.invite__card {
  max-width: 30rem;
  margin: 0 auto;
}

/* Tab đầu thiệp — hẹp hơn thân, bo góc lớn */
.invite__tab {
  background: var(--ir-cream);
  border-radius: 2.5rem 2.5rem 0 0;
  margin: clamp(1.5rem, 5vw, 2.75rem) clamp(0.75rem, 3vw, 1.5rem) 0;
  padding: 1.75rem 1.25rem 1.4rem;
}

/* Hai vạt giấy mở rộng ra hai bên, biến phần chuyển tiếp thành miệng phong bì mở. */
.invite__open-flaps {
  position: relative;
  height: clamp(1.35rem, 4vw, 2rem);
  margin: 0 clamp(0.75rem, 3vw, 1.5rem);
  background: var(--ir-cream);
  border-bottom: 1px solid rgba(109, 22, 32, 0.16);
}

.invite__open-flaps::before,
.invite__open-flaps::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: clamp(0.75rem, 3vw, 1.5rem);
  height: 100%;
  background: var(--ir-cream);
  border-bottom: 1px solid rgba(109, 22, 32, 0.16);
}

.invite__open-flaps::before {
  right: 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.invite__open-flaps::after {
  left: 100%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.invite__title {
  font-family: var(--font-script);
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 400;
  color: var(--ir-ink);
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.2;
}

/* Thân thiệp — rộng hơn tab */
.invite__body {
  background: var(--ir-cream);
  padding: 2rem var(--ir-pad) 2.5rem;
  position: relative;
}

/* Đường xé vé: kẻ ngang + 2 nửa tròn khoét vào mép */
.invite__notch {
  position: relative;
  height: 2px;
  background: var(--ir-maroon);
  margin: 2.25rem calc(var(--ir-pad) * -1);
}
.invite__notch::before,
.invite__notch::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--ir-red);
  border-radius: 50%;
  transform: translateY(-50%);
}
.invite__notch::before {
  left: calc(-1.75rem / 2);
}
.invite__notch::after {
  right: calc(-1.75rem / 2);
}

/* Tiêu đề viết tay dùng chung */
.invite__script-heading {
  font-family: var(--font-script);
  font-size: clamp(2rem, 6.5vw, 2.8rem);
  font-weight: 400;
  color: var(--ir-ink);
  margin: 0 0 1.5rem;
  line-height: 1.25;
}

/* ── Gia đình hai bên ── */
.invite__families {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 1rem;
  margin: 0 auto 1.75rem;
}

.invite__family {
  flex: 1 1 10rem;
}

.invite__family-label {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ir-ink);
  margin: 0 0 0.5rem;
}

.invite__family-names {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ir-ink);
  line-height: 1.7;
  margin: 0 0 0.35rem;
}

.invite__family-address {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(31, 21, 18, 0.6);
  line-height: 1.55;
  margin: 0;
}

/* ── Tên cô dâu chú rể ── */
/* Hai tên so le: người đầu lệch trái, "&" ở giữa, người sau lệch phải. */
.invite__couple {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.1rem;
  width: min(100%, 24rem);
  margin: 0 auto 1.75rem;
}

.invite__couple-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.invite__couple-person:first-of-type {
  justify-self: start;
}

.invite__couple-person:last-of-type {
  justify-self: end;
}

.invite__couple-name {
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 8vw, 3rem);
  color: var(--ir-maroon);
  line-height: 1.25;
  white-space: nowrap;
}

.invite__couple-role {
  font-family: var(--font-script-alt);
  font-weight: 500;
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  color: var(--ir-red);
  line-height: 1.4;
}

.invite__couple-amp {
  justify-self: center;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-style: italic;
  line-height: 1;
  color: var(--ir-red);
}

/* Sao 4 cánh lấp lánh quanh tên (dùng lại nhịp dressTwinkle của váy cưới). */
.invite__couple-stars {
  position: absolute;
  inset: -0.5rem -0.75rem;
  pointer-events: none;
}
.invite__couple-stars i {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  background: linear-gradient(135deg, #f1dfb0, var(--color-gold) 55%, #99764e);
  clip-path: polygon(
    50% 0,
    61% 39%,
    100% 50%,
    61% 61%,
    50% 100%,
    39% 61%,
    0 50%,
    39% 39%
  );
  animation: dressTwinkle 2.8s ease-in-out infinite;
}
.invite__couple-stars i:nth-child(1) {
  top: 2%;
  right: 6%;
  width: 1rem;
  height: 1rem;
}
.invite__couple-stars i:nth-child(2) {
  top: 24%;
  right: 20%;
  width: 0.55rem;
  height: 0.55rem;
  animation-delay: 0.9s;
}
.invite__couple-stars i:nth-child(3) {
  top: 44%;
  left: 34%;
  width: 0.6rem;
  height: 0.6rem;
  animation-delay: 1.8s;
}
.invite__couple-stars i:nth-child(4) {
  top: 44%;
  right: 33%;
  width: 0.5rem;
  height: 0.5rem;
  animation-delay: 0.5s;
}
.invite__couple-stars i:nth-child(5) {
  bottom: 26%;
  left: 5%;
  width: 0.95rem;
  height: 0.95rem;
  animation-delay: 1.3s;
}
.invite__couple-stars i:nth-child(6) {
  bottom: 4%;
  left: 20%;
  width: 0.5rem;
  height: 0.5rem;
  animation-delay: 2.2s;
}

/* ── Ba tấm ảnh so le ── */
.invite__photos {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 2rem;
}

.invite__photo {
  width: 30%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(31, 21, 18, 0.2);
  margin-top: 1.75rem;
}

.invite__photo--b {
  width: 36%;
  margin-top: 0;
  aspect-ratio: 3 / 4.4;
  box-shadow: 0 10px 24px rgba(31, 21, 18, 0.28);
  z-index: 1;
}

/* ── Dòng dẫn + khung giờ ── */
.invite__lead {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ir-ink);
  margin: 0 0 0.75rem;
}

.invite__lead-sub {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ir-ink);
  margin: 0 0 1.25rem;
}

.invite__time-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 4vw, 1.75rem);
  margin: 0 auto 2.25rem;
}

/* Ngày âm lịch ngay dưới thẻ giờ */
.invite__lunar {
  margin: -1.25rem auto 2.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  color: var(--ir-ink);
  text-align: center;
}

.invite__time-side {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  color: var(--ir-ink);
}

.invite__time-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0 clamp(0.75rem, 4vw, 1.75rem);
  border-left: 1px solid var(--ir-ink);
  border-right: 1px solid var(--ir-ink);
}

.invite__time-weekday,
.invite__time-month {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  color: var(--ir-ink);
}

.invite__time-day {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 9vw, 3rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ir-ink);
  line-height: 1.1;
}

/* ── Lịch ── */
.invite__calendar {
  border: 1px solid rgba(31, 21, 18, 0.5);
  background: #fff;
  margin: 0 auto 1rem;
  overflow: hidden;
}

.invite__calendar-title {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  background: var(--ir-maroon);
  margin: 0.4rem 0 0;
  padding: 0.5rem 1.1rem;
  text-align: left;
}

.invite__calendar-inner {
  position: relative;
  padding: 0.5rem 1rem 1.1rem;
}

.invite__calendar-ghost {
  position: absolute;
  inset: 2.4rem 0 auto;
  font-family: var(--font-body);
  font-size: clamp(4.5rem, 20vw, 7rem);
  font-weight: 700;
  color: rgba(123, 31, 34, 0.07);
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.invite__calendar-grid {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  /* Cột đều nhau, ô có tim không làm giãn cột. */
  table-layout: fixed;
}

.invite__calendar-grid th {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(31, 21, 18, 0.75);
  font-weight: 500;
  padding: 0.8rem 0 0.6rem;
}

.invite__calendar-grid td {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ir-ink);
  padding: 0.42rem 0;
  text-align: center;
}

.invite__calendar-grid td.is-marked {
  position: relative;
}

.invite__calendar-grid td.is-marked span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.3rem 0;
  /* Tim nặng phần trên: đẩy số lên cho nằm giữa phần thân tim. */
  padding-bottom: 0.22rem;
  color: var(--ir-cream);
  font-weight: 700;
  z-index: 1;
}

.invite__calendar-grid td.is-marked span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--ir-red), var(--ir-red-deep));
  /* Tim bo tròn (path 24×24) làm mask để màu vẫn lấy từ token. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2c-.3 0-.6-.1-.8-.3C6.3 16.6 2.2 13 2.2 8.7 2.2 5.6 4.6 3.2 7.6 3.2c1.8 0 3.4.9 4.4 2.2 1-1.3 2.6-2.2 4.4-2.2 3 0 5.4 2.4 5.4 5.5 0 4.3-4.1 7.9-9 12.2-.2.2-.5.3-.8.3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2c-.3 0-.6-.1-.8-.3C6.3 16.6 2.2 13 2.2 8.7 2.2 5.6 4.6 3.2 7.6 3.2c1.8 0 3.4.9 4.4 2.2 1-1.3 2.6-2.2 4.4-2.2 3 0 5.4 2.4 5.4 5.5 0 4.3-4.1 7.9-9 12.2-.2.2-.5.3-.8.3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  z-index: -1;
}

/* ── Địa điểm ── */
.invite__venue-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.invite__venue-pin {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  /* Font script có baseline thấp, nhích pin xuống cho cân với chữ. */
  margin-top: 0.08em;
  overflow: visible;
}
.invite__venue-pin path {
  fill: var(--ir-red);
  filter: drop-shadow(0 2px 2px rgba(80, 24, 35, 0.28));
}
.invite__venue-pin circle {
  fill: var(--ir-cream);
}

.invite__venue-name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  font-style: italic;
  font-weight: 700;
  color: var(--ir-ink);
  line-height: 1.6;
  margin: 0 auto 1.35rem;
  text-wrap: balance;
}

.invite__map {
  position: relative;
  width: 100%;
  margin: 0 auto 1.25rem;
  padding-top: 62%;
  overflow: hidden;
  border-radius: 0.6rem;
  border: 1px solid rgba(31, 21, 18, 0.15);
}

.invite__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.invite .btn--gold {
  background: #883143;
  background-image: none;
  color: #fff;
  border-radius: 0.4rem;
  box-shadow: none;
  font-size: 0.78rem;
}
.invite .btn--gold:hover {
  filter: brightness(1.1);
  color: #fff;
}

/* ── Con dấu 囍 ── */
.invite__stamp {
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7a2737;
  border-radius: 0.35rem;
  box-shadow: 0 3px 10px rgba(31, 21, 18, 0.25);
}

.invite__stamp span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 1.1rem);
  height: calc(100% - 1.1rem);
  border: 3px solid var(--ir-cream);
  color: var(--ir-cream);
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
}

/* ── Vùng minh hoạ nền đỏ cuối thiệp ── */
.invite__flourish {
  padding: 3.5rem 1.5rem 3rem;
}

.invite__flourish-art {
  position: relative;
  max-width: 22rem;
  height: 11rem;
  margin: 0 auto 1.5rem;
}

.invite__ico {
  position: absolute;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.invite__dress {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 8.5rem;
  height: 11.5rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}
.invite__dress-veil {
  fill: url(#dress-veil-fill);
}
.invite__dress-veil-folds path {
  fill: none;
  stroke: rgba(255, 253, 248, 0.32);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.invite__dress-veil-edge {
  fill: none;
  stroke: rgba(255, 253, 248, 0.85);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.invite__dress-veil-lace {
  fill: none;
  stroke: rgba(228, 209, 166, 0.8);
  stroke-width: 1.4;
  stroke-dasharray: 0.5 4;
  stroke-linecap: round;
}
.invite__dress-veil-glints circle {
  fill: #fff;
  opacity: 0.85;
}
.invite__dress-comb path {
  fill: none;
  stroke: url(#dress-gold);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.invite__dress-comb circle {
  fill: #fffaf0;
  stroke: #c4a166;
  stroke-width: 0.8;
}
.invite__dress-skirt {
  fill: url(#dress-skirt-fill);
}
.invite__dress-beads circle {
  fill: #c4a166;
  opacity: 0.7;
}
.invite__dress-bodice {
  fill: url(#dress-bodice-fill);
}
.invite__dress-fold path,
.invite__dress-seam {
  fill: none;
  stroke: rgba(153, 118, 78, 0.28);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.invite__dress-lace {
  fill: none;
  stroke: rgba(196, 161, 102, 0.75);
  stroke-width: 1.6;
  stroke-dasharray: 1 3.5;
  stroke-linecap: round;
}
.invite__dress-belt {
  fill: url(#dress-gold);
}
.invite__dress-brooch {
  fill: #fff6df;
  stroke: #c4a166;
  stroke-width: 1.2;
}
.invite__dress-sparkle path {
  fill: #e4d1a6;
  transform-box: fill-box;
  transform-origin: center;
  animation: dressTwinkle 2.8s ease-in-out infinite;
}
.invite__dress-sparkle path:nth-child(2) {
  animation-delay: 0.9s;
}
.invite__dress-sparkle path:nth-child(3) {
  animation-delay: 1.8s;
}
@keyframes dressTwinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
.invite__ico--envelope {
  font-size: 2.2rem;
  left: 4%;
  top: 0;
  transform: rotate(-12deg);
}
.invite__ico--ring {
  font-size: 2.2rem;
  right: 5%;
  top: 0.5rem;
}
.invite__ico--heels {
  font-size: 2rem;
  left: 2%;
  bottom: 0.5rem;
  transform: rotate(-8deg);
}
.invite__ico--bouquet {
  font-size: 2.3rem;
  right: 3%;
  bottom: 0;
}

.invite__flourish-quote {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 4.5vw, 1.8rem);
  color: var(--ir-cream);
  max-width: 26rem;
  margin: 0 auto;
  line-height: 1.5;
}

/* Lời mời chuyển tiếp giúp phần minh hoạ cuối thiệp không bị hiểu là cuối trang. */
.invite__continue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: max-content;
  max-width: calc(100% - 3rem);
  margin: -0.25rem auto 0;
  padding: 0.7rem 1.25rem 1rem;
  color: rgba(253, 248, 238, 0.92);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.invite__continue:hover {
  color: #fff;
  text-decoration: none;
}

.invite__continue-arrow {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  animation: inviteContinueNudge 1.7s ease-in-out infinite;
}

@keyframes inviteContinueNudge {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }
  50% {
    transform: translateY(0.35rem);
    opacity: 1;
  }
}

.form__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.3rem;
}

.form__fieldset legend {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-muted);
  margin-bottom: 0.5rem;
  padding: 0;
}

.form__radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
  cursor: pointer;
}

.form__radio input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #7a2737;
  cursor: pointer;
}

/* ══ Buttons ══ */
.btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-block;
  padding: 0.95rem 2.5rem;
  border: none;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    filter 0.3s;
  text-decoration: none;
}

.btn--gold {
  background: linear-gradient(
    135deg,
    var(--color-gold) 0%,
    var(--color-gold-light) 50%,
    var(--color-gold) 100%
  );
  background-size: 200% auto;
  color: var(--color-dark);
  font-weight: 600;
  box-shadow: 0 4px 24px rgba(212, 175, 55, 0.35);
}

.btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(212, 175, 55, 0.5);
  filter: brightness(1.07);
  text-decoration: none;
  color: var(--color-dark);
}

.btn--gold:active {
  transform: scale(0.97);
}
.btn--gold:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* ══ Gallery ══ */
.gallery-section {
  background: var(--color-dark);
  /* Ảnh trượt vào từ mép phải không được đẩy trang cuộn ngang */
  overflow-x: clip;
}
.gallery-section .section__title {
  color: var(--color-gold);
}
.gallery-section .ornament {
  color: rgba(212, 175, 55, 0.5);
}
.gallery-section .section__lead {
  color: var(--color-text-dim);
}

/* Mỗi ảnh là một "tấm ảnh in" (cùng kiểu viền trắng + bóng với .invite__photo),
   chú thích nằm trên dải giấy phía dưới như Polaroid. Khung ôm đúng tỉ lệ gốc
   của từng ảnh (không cắt), vừa trong hộp ~88vw × ~78% chiều cao viewport. */
.gallery__story,
.gallery__video {
  --vh: 1vh;
  --frame-pad: clamp(6px, 1.6vw, 12px);
  --cap-h: clamp(4.6rem, calc(11 * var(--vh)), 6.2rem);
  --photo-max-h: calc(78 * var(--vh) - var(--cap-h) - 2 * var(--frame-pad));
  --photo-max-w: calc(88vw - 2 * var(--frame-pad));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, calc(8 * var(--vh)), 5rem);
  padding-block: 1rem 2rem;
}
@supports (height: 1svh) {
  .gallery__story,
  .gallery__video {
    --vh: 1svh;
  }
}

.gallery__panel {
  position: relative;
  margin: 0;
}

/* Nghiêng xen kẽ như ảnh đặt trên bàn; ảnh đang ở giữa màn hình (.is-active)
   xoay thẳng và "nhấc" lên. Transform nằm trên nút để không đụng .reveal ở panel. */
.gallery__panel:nth-of-type(odd) {
  --tilt: -1.5deg;
  --shift: -2vw;
}
.gallery__panel:nth-of-type(even) {
  --tilt: 1.5deg;
  --shift: 2vw;
}

.gallery__slide-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  padding: var(--frame-pad) var(--frame-pad) 0;
  background: #fffdf9;
  cursor: zoom-in;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 2px 6px rgba(0, 0, 0, 0.22);
  transform: translateX(var(--shift, 0)) rotate(var(--tilt, 0deg));
  transition:
    transform 0.8s var(--ease-smooth),
    box-shadow 0.8s var(--ease-smooth);
}

.gallery__panel.is-active .gallery__slide-btn,
.gallery__slide-btn:hover,
.gallery__slide-btn:focus-visible {
  transform: translateX(0) rotate(0deg) scale(1.02);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

/* width/height tự động theo tỉ lệ thật (lấy từ thuộc tính width/height trong
   HTML trước khi ảnh tải xong), chỉ bị chặn bởi hộp tối đa → không cắt ảnh. */
.gallery__slide-btn img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--photo-max-w);
  max-height: var(--photo-max-h);
}

.gallery__caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* width 0 + min-width 100%: chú thích dài không nới rộng khung, chỉ xuống dòng */
  width: 0;
  min-width: 100%;
  min-height: var(--cap-h);
  padding: 0.35rem 0.5rem;
  text-align: center;
  opacity: 0;
  transform: translateY(0.6rem);
  transition:
    opacity 0.65s var(--ease-smooth) 0.1s,
    transform 0.65s var(--ease-smooth) 0.1s;
}

.gallery__panel.is-active .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__caption-title {
  display: block;
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--color-ink);
}

.gallery__caption-desc {
  display: block;
  color: var(--color-ink-muted);
  font-size: clamp(0.8rem, 2.4vw, 0.92rem);
  line-height: 1.45;
}

.gallery__separator {
  display: none;
}

/* Cụm ảnh nhí: ảnh chính đứng thẳng, 2 ảnh polaroid nhỏ ghim ở hai góc dưới
   (ngay trên phần chú thích để không đè chữ), thò nhẹ ra ngoài mép khung. */
.gallery__panel.gallery__panel--cluster {
  --tilt: 0deg;
  --shift: 0;
}

.gallery__pin {
  position: absolute;
  bottom: calc(var(--cap-h) - 0.6rem);
  z-index: 1;
  width: 31%;
  border: 0;
  padding: 4px 4px 14px;
  background: #fffdf9;
  cursor: zoom-in;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.38),
    0 2px 5px rgba(0, 0, 0, 0.22);
  transform: rotate(var(--pin-tilt));
  transition:
    transform 0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth);
}

.gallery__pin--left {
  --pin-tilt: -6deg;
  left: -4%;
}

.gallery__pin--right {
  --pin-tilt: 5deg;
  right: -4%;
}

.gallery__pin img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery__pin:hover,
.gallery__pin:focus-visible {
  z-index: 2;
  transform: rotate(0deg) scale(1.06);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .gallery__pin--left {
    left: -12%;
  }
  .gallery__pin--right {
    right: -12%;
  }
}

/* ── Video dưới album: cùng khung ảnh in nhưng không nghiêng (dễ bấm điều khiển) ── */
/* Video đứng đầu gallery, cách ảnh đầu tiên bằng khoảng giữa các ảnh */
.gallery__video {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: clamp(1.5rem, calc(4 * var(--vh)), 3rem);
}

.gallery__video-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--frame-pad) var(--frame-pad) 0;
  background: #fffdf9;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.gallery__video video {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--photo-max-w);
  max-height: var(--photo-max-h);
  background: #000;
}

.gallery__video-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 0;
  min-width: 100%;
  min-height: var(--cap-h);
  padding: 0.35rem 0.5rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__slide-btn,
  .gallery__panel.is-active .gallery__slide-btn,
  .gallery__slide-btn:hover {
    transform: none;
  }
  .gallery__pin,
  .gallery__pin:hover {
    transition: none;
  }
  .gallery__caption {
    opacity: 1;
    transform: none;
  }
}

/* ══ Gift ══ */
.gift {
  background: linear-gradient(
    180deg,
    var(--color-paper-deep) 0%,
    var(--color-paper) 100%
  );
  text-align: center;
}

.gift__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 36rem;
  margin: 0 auto;
}

.gift__card {
  border: 2px dashed rgba(212, 175, 55, 0.42);
  padding: 2.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.gift__side-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-gold-muted);
  margin: 0;
  padding: 0.3rem 1rem;
  border: 1px solid rgba(212, 175, 55, 0.36);
}

.gift__qr {
  display: block;
  width: min(11rem, 100%);
  transition: transform 0.3s var(--ease-out);
}
.gift__qr:hover {
  transform: scale(1.03);
}
.gift__qr img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(212, 175, 55, 0.28);
  padding: 0.35rem;
  background: #fff;
}

.gift__copy {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-gold-muted);
  background: transparent;
  border: 1px solid rgba(196, 161, 102, 0.6);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  cursor: pointer;
  transition:
    background 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
.gift__copy:hover,
.gift__copy.is-done {
  background: var(--color-gold);
  color: #fff;
}
.gift__copy:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.gift__pending {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-muted);
  margin: auto 0;
  padding: 2rem 0;
}

.gift__info {
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  line-height: 2.1;
  text-align: center;
}
.gift__info p {
  margin: 0;
}
.gift__info strong {
  color: var(--color-ink);
}

.gift__bank-name {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-gold-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.gift__rsvp {
  margin: clamp(3rem, 8vw, 4.5rem) auto 0;
  padding-top: clamp(2.5rem, 7vw, 3.5rem);
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  max-width: 36rem;
}

.gift__rsvp-kicker {
  margin: 0 0 0.7rem;
  color: var(--color-gold-muted);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gift__rsvp .invite__script-heading {
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.gift__rsvp .invite__stamp {
  margin-bottom: 1.5rem;
}

.gift__rsvp .invite__stamp span {
  color: #fdf8ee;
}

/* ══ RSVP ══ */
.form {
  max-width: 26rem;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(31, 21, 18, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(31, 21, 18, 0.08);
  padding: 1.75rem 1.5rem;
  text-align: left;
}

.form__title {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ir-ink, #1f1512);
  text-align: center;
  margin: 0 0 1.5rem;
}

.form__row {
  margin-bottom: 1.15rem;
}

.form label {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-muted);
  margin-bottom: 0.5rem;
}

.form input:not([type="radio"]):not([type="checkbox"]),
.form textarea,
.form select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d8d8d8;
  border-radius: 0.4rem;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  appearance: none;
}

.form input::placeholder,
.form textarea::placeholder {
  color: #a9a9a9;
}
.form select option {
  background: #fff;
  color: var(--color-ink);
}

.form input:not([type="radio"]):not([type="checkbox"]):focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: #883143;
  box-shadow: 0 0 0 3px rgba(136, 49, 67, 0.12);
}

.form textarea {
  min-height: 6rem;
  resize: vertical;
}
.form .btn--gold {
  width: 100%;
  text-align: center;
  margin-top: 0.75rem;
  padding-block: 0.95rem;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-family: var(--font-body);
}

.form__status {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: #883143;
  display: none;
  text-align: center;
}
.form__status.is-show {
  display: block;
}
/* Ô bẫy bot: ẩn khỏi người dùng, bot tự điền sẽ bị script bỏ qua */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form .btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ══ Footer ══ */
.footer {
  background: var(--color-dark);
  text-align: center;
  padding: 4rem 1.5rem 5.5rem;
  color: var(--color-text-dim);
  border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.footer__monogram {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-style: italic;
  color: var(--color-gold);
  margin-bottom: 1.1rem;
  letter-spacing: 0.2em;
}

.footer__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.footer__date {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.45em;
  color: rgba(212, 175, 55, 0.42);
  margin: 0;
  text-transform: uppercase;
}

/* ══ Audio toggle ══ */
.audio-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(90, 29, 42, 0.92);
  color: var(--color-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  transition:
    transform 0.3s var(--ease-out),
    background 0.3s;
}

.audio-toggle:hover {
  transform: scale(1.08);
  background: rgba(66, 21, 31, 0.96);
}
.audio-toggle:active {
  transform: scale(0.96);
}
.audio-toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.audio-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Đang phát nhạc: viền vàng sáng + hai vòng sóng lan ra, nốt nhạc lắc nhẹ theo nhịp */
.audio-toggle[aria-pressed="true"] {
  border-color: var(--color-gold);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.38),
    0 0 14px rgba(212, 175, 55, 0.45);
}

.audio-toggle::before,
.audio-toggle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  opacity: 0;
  pointer-events: none;
}

.audio-toggle[aria-pressed="true"]::before,
.audio-toggle[aria-pressed="true"]::after {
  animation: audio-ripple 2.4s var(--ease-out) infinite;
}
.audio-toggle[aria-pressed="true"]::after {
  animation-delay: 1.2s;
}

.audio-toggle[aria-pressed="true"] svg {
  animation: audio-note-sway 1.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}

@keyframes audio-ripple {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes audio-note-sway {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }
  50% {
    transform: rotate(8deg) translateY(-1.5px);
  }
}

/* ══ Nút đi nhanh (xếp trên nút nhạc) ══ */
#rsvp,
#gallery,
#gift {
  scroll-margin-top: 1.5rem;
}

.quick-nav {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + 3rem + 0.6rem);
  z-index: 100;
  width: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}

.quick-nav.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.quick-nav__btn {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(90, 29, 42, 0.82);
  color: var(--color-gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  transition:
    transform 0.3s var(--ease-out),
    background 0.3s,
    border-color 0.3s;
}

.quick-nav__btn svg {
  width: 1rem;
  height: 1rem;
}

.quick-nav__btn:hover,
.quick-nav__btn.is-current {
  background: rgba(66, 21, 31, 0.96);
  border-color: var(--color-gold);
}
.quick-nav__btn:hover {
  transform: scale(1.08);
}
.quick-nav__btn:active {
  transform: scale(0.96);
}
.quick-nav__btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* Nhãn chữ hiện bên trái khi rê chuột / focus bàn phím */
.quick-nav__label {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(66, 21, 31, 0.94);
  color: var(--color-gold);
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(0.4rem, -50%);
  transition:
    opacity 0.25s,
    transform 0.25s var(--ease-out);
}

.quick-nav__btn:hover .quick-nav__label,
.quick-nav__btn:focus-visible .quick-nav__label,
.quick-nav__btn.is-flash .quick-nav__label {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (hover: none) {
  .quick-nav__btn:hover {
    transform: none;
  }
  .quick-nav__btn:hover:not(.is-flash) .quick-nav__label {
    opacity: 0;
  }
}

/* ══ Xem ảnh toàn màn hình (PhotoSwipe, js/main.js openViewer) ══ */
.pswp--wedding {
  --pswp-bg: #140a0d;
  --pswp-placeholder-bg: #2a1418;
  --pswp-icon-color: #fff9f2;
  --pswp-icon-color-secondary: #140a0d;
  --pswp-icon-stroke-color: transparent;
  --pswp-icon-stroke-width: 0;
  --pswp-error-text-color: var(--color-text-dim);
  font-family: var(--font-body);
}

/* Nền tối ánh đỏ đô, không đen tuyền. */
.pswp--wedding .pswp__bg {
  background: radial-gradient(
    ellipse at 50% 40%,
    #3a1820 0%,
    #1d0d11 55%,
    #0f0709 100%
  );
}

/* Ảnh trên màn lớn có bóng đổ như tấm ảnh in. */
@media (min-width: 768px) {
  .pswp--wedding .pswp__img {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  }
}

/* Nút chỉ là icon nét mảnh có bóng, không khung nền. */
.pswp--wedding .pswp__icn {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--pswp-icon-color);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
  overflow: visible;
}
/* Nút zoom dùng icon mặc định (tô màu), giữ kiểu fill. */
.pswp--wedding .pswp__button--zoom .pswp__icn {
  fill: var(--pswp-icon-color);
  stroke: none;
}

.pswp--wedding .pswp__button {
  opacity: 0.88;
  transition:
    opacity 0.2s,
    transform 0.25s var(--ease-out);
}
.pswp--wedding .pswp__button:hover,
.pswp--wedding .pswp__button:active {
  opacity: 1;
}
.pswp--wedding .pswp__button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -6px;
  border-radius: 8px;
}
.pswp--wedding .pswp__button--arrow--prev:hover {
  transform: translateX(-3px);
}
.pswp--wedding .pswp__button--arrow--next:hover {
  transform: translateX(3px);
}

/* Thanh trên: vệt tối mờ để icon luôn đọc được trên ảnh sáng. */
.pswp--wedding .pswp__top-bar {
  background: linear-gradient(rgba(10, 4, 6, 0.45), transparent);
  padding-top: env(safe-area-inset-top);
  height: calc(60px + env(safe-area-inset-top));
}

.pswp--wedding .pswp__counter {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--color-text-light);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  opacity: 0.8;
}

/* Chú thích: dải gradient mờ dần ở chân màn hình. */
.pswp__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3.5rem max(1.25rem, env(safe-area-inset-left))
    calc(1.25rem + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--color-text-light);
  background: linear-gradient(
    to top,
    rgba(12, 5, 7, 0.82) 0%,
    rgba(12, 5, 7, 0.55) 45%,
    rgba(12, 5, 7, 0) 100%
  );
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.pswp__caption-title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-gold-light);
}

.pswp__caption-desc {
  max-width: 34rem;
  margin: 0.35rem auto 0;
  font-size: clamp(0.85rem, 2.6vw, 0.95rem);
  line-height: 1.55;
  color: var(--color-text-dim);
  text-wrap: balance;
}

/* Mũi tên hiện cả trên màn cảm ứng (PhotoSwipe mặc định ẩn). */
.pswp--wedding.pswp--touch .pswp__button--arrow {
  visibility: visible;
}
.pswp--wedding .pswp__button--arrow .pswp__icn {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  left: 16px;
}
.pswp--wedding .pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 16px;
}

@media (max-width: 767px) {
  /* Điện thoại: mũi tên nhỏ gọn sát mép, vuốt vẫn là cách chính. */
  .pswp--wedding .pswp__button--arrow {
    width: 52px;
  }
  .pswp--wedding .pswp__button--arrow .pswp__icn {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    left: 6px;
  }
  .pswp--wedding .pswp__button--arrow--next .pswp__icn {
    left: auto;
    right: 6px;
  }
}

@media (min-width: 768px) {
  .pswp__caption {
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
  }
}

/* ══ Ring intro gate — hiệu ứng mở đầu bằng nhẫn cầu hôn ══ */
html.has-ring-gate,
html.has-ring-gate body {
  overflow: hidden;
  height: 100%;
}

.ring-gate {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(196, 161, 102, 0.14) 0%,
      rgba(196, 161, 102, 0) 34%
    ),
    linear-gradient(
      160deg,
      var(--color-dark-soft) 0%,
      var(--color-dark-mid) 100%
    );
  color: var(--color-text-light);
}
.ring-gate[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring-gate::backdrop {
  background: var(--color-dark);
}

.ring-gate__inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.ring-gate__inner.is-leaving {
  opacity: 0;
  transform: scale(1.08);
}

/* Cảnh cầu hôn xuất hiện sau khi nhẫn rời khỏi hộp. */
.ring-gate__proposal {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.ring-gate__hand-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ring-gate__hand-wrap {
  position: absolute;
  top: 50%;
  right: -4%;
  width: clamp(16rem, 58vw, 30rem);
  opacity: 0;
  transform: translate(24%, -50%) rotate(-4deg);
  transition:
    opacity 0.75s var(--ease-out),
    transform 1s var(--ease-out);
}

.ring-gate__hand {
  display: block;
  width: 100%;
  height: auto;
  /* Ảnh gốc đã đủ sáng: chỉ tăng nhẹ tương phản + ấm cho da tươi trên nền đỏ sẫm. */
  filter: contrast(1.04) saturate(1.08)
    drop-shadow(0 20px 32px rgba(43, 20, 28, 0.34));
}

.ring-gate__hand-target {
  position: absolute;
  /* Cùng toạ độ nhẫn trên ảnh ở phần Story; target đi theo ảnh khi responsive. */
  /* Tâm viên kim cương trên proposal-ring.webp (484/1086, 910/1448). */
  left: 44.6%;
  top: 62.8%;
  width: clamp(1.25rem, 4vw, 2rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.ring-gate__proposal-memory {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 2.5rem), 34rem);
  opacity: 0;
  text-align: center;
  transform: translate(-50%, calc(-50% + 3rem));
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.ring-gate__proposal-memory > * {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.ring-gate__proposal-kicker {
  margin: 0;
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
}

.ring-gate__proposal-ornament {
  margin: 0.65rem 0 1rem;
  color: rgba(228, 209, 166, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.55em;
}

/* Hai tấm ảnh in kiểu Polaroid (cùng giấy + bóng với khung gallery), giữ tỉ lệ gốc.
   Hàng ảnh được nới rộng ra gần hết bề ngang màn hình (vượt khung chữ 34rem),
   hai ảnh chồng mép nhau một chút ở giữa để ảnh lớn hơn trên điện thoại. */
.ring-gate__proposal-photos {
  --vh: 1vh;
  --pf-pad: clamp(5px, 1.4vw, 10px);
  --pf-row: min(calc(100vw - 1.5rem), 44rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 calc(50% - var(--pf-row) / 2) 1.15rem;
}
@supports (height: 1svh) {
  .ring-gate__proposal-photos {
    --vh: 1svh;
  }
}

.ring-gate__proposal-frame {
  display: block;
  flex: 0 1 auto;
  padding: var(--pf-pad) var(--pf-pad) clamp(1.3rem, 4.5vw, 2.4rem);
  background: #fffdf9;
  box-shadow:
    0 18px 40px rgba(20, 8, 12, 0.5),
    0 3px 10px rgba(20, 8, 12, 0.3);
}
.ring-gate__proposal-frame + .ring-gate__proposal-frame {
  margin-left: clamp(-1.5rem, -3vw, -0.5rem);
}

.ring-gate__proposal-photos img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--pf-row) / 2 - 2 * var(--pf-pad));
  max-height: calc(40 * var(--vh));
}

.ring-gate__proposal-frame:first-child {
  opacity: 0;
  transform: translateX(-2rem) rotate(-9deg);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.ring-gate__proposal-frame:last-child {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(2rem) rotate(9deg);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.ring-gate__proposal-text {
  margin: 0;
  color: var(--color-text-light);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.25vw, 1.35rem);
  line-height: 1.55;
}

.ring-gate[data-step="hand"] .ring-gate__proposal,
.ring-gate[data-step="proposal"] .ring-gate__proposal {
  opacity: 1;
}

.ring-gate[data-step="hand"] .ring-gate__hand-wrap,
.ring-gate[data-step="proposal"] .ring-gate__hand-wrap {
  opacity: 1;
  transform: translateY(-50%) rotate(-4deg);
}

.ring-gate[data-step="proposal"] .ring-gate__proposal-memory {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.ring-gate[data-step="proposal"] .ring-gate__proposal-memory > * {
  opacity: 1;
  transform: translateY(0);
}

.ring-gate[data-step="proposal"] .ring-gate__proposal-kicker {
  transition-delay: 0.15s;
}
.ring-gate[data-step="proposal"] .ring-gate__proposal-ornament {
  transition-delay: 0.28s;
}
.ring-gate[data-step="proposal"] .ring-gate__proposal-photos {
  transition-delay: 0.4s;
}
.ring-gate[data-step="proposal"] .ring-gate__proposal-frame:first-child {
  opacity: 1;
  transform: rotate(-5deg) translateY(0.35rem);
  transition-delay: 0.55s;
}
.ring-gate[data-step="proposal"] .ring-gate__proposal-frame:last-child {
  opacity: 1;
  transform: rotate(4deg) translateY(-0.25rem);
  transition-delay: 0.68s;
}
.ring-gate[data-step="proposal"] .ring-gate__proposal-text {
  transition-delay: 0.82s;
}

.ring-gate[data-step="proposal"] {
  cursor: pointer;
}

.ring-gate__trigger {
  position: relative;
  width: clamp(8.5rem, min(42vw, 32vh), 13rem);
  aspect-ratio: 560 / 757;
  height: auto;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.ring-gate[data-step="hand"] .ring-gate__trigger,
.ring-gate[data-step="proposal"] .ring-gate__trigger {
  opacity: 0;
  transform: scale(0.86);
}
.ring-gate__trigger:focus-visible {
  outline: none;
}

/* Bóng đổ dưới hộp — thu nhỏ/mờ đi khi hộp nổi lên, tạo cảm giác lơ lửng thật */
/* Đậm ở tâm (bóng tiếp đất) + viền hổ phách ấm lan ra (ánh sáng dội ngược) —
   bóng đen thuần gần như vô hình trên nền tối gần đen, nên cần viền màu ấm để mắt nhận biết được. */
.ring-gate__shadow {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 70%;
  height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(43, 20, 28, 0.92) 0%,
    rgba(196, 161, 102, 0.3) 48%,
    rgba(196, 161, 102, 0) 78%
  );
  filter: blur(3px);
  border-radius: 50%;
  z-index: 0;
  animation: ringShadowPulse 3.4s ease-in-out infinite;
}
.ring-gate[data-step="opening"] .ring-gate__shadow,
.ring-gate[data-step="leaving"] .ring-gate__shadow {
  animation: none;
  opacity: 0.85;
  transform: translateX(-50%) scale(1);
}

@keyframes ringShadowPulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translateX(-50%) scale(0.7);
    opacity: 0.4;
  }
}

/* Nhóm nổi lên chìm xuống — hộp + glow di chuyển cùng nhau, biên độ nhẹ */
.ring-gate__floater {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ringFloat 3.4s ease-in-out infinite;
}
.ring-gate[data-step="opening"] .ring-gate__floater,
.ring-gate[data-step="hand"] .ring-gate__floater,
.ring-gate[data-step="proposal"] .ring-gate__floater,
.ring-gate[data-step="leaving"] .ring-gate__floater {
  animation: none;
}

@keyframes ringFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5rem);
  }
}

/* Hộp chỉ chiếm phần dưới của ảnh (phần trên để trống cho nhẫn bay lên sau),
   nên quầng sáng phải lệch tâm xuống dưới + hẹp lại theo chiều ngang mới
   khớp đúng với hình chiếc hộp thay vì tâm hình học của cả ảnh. */
.ring-gate__glow {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 42%;
  bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.4) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(6px);
  animation: ringGlowPulse 3.4s ease-in-out infinite;
}
@keyframes ringGlowPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.08);
  }
}

.ring-gate[data-step="opening"] .ring-gate__glow,
.ring-gate[data-step="hand"] .ring-gate__glow,
.ring-gate[data-step="proposal"] .ring-gate__glow,
.ring-gate[data-step="leaving"] .ring-gate__glow {
  animation: ringGlowBurst 1.1s var(--ease-out) forwards;
}
@keyframes ringGlowBurst {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
    box-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }
  35% {
    opacity: 1;
    transform: scale(1.6);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.6);
  }
  100% {
    opacity: 0.25;
    transform: scale(2.1);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
  }
}

/* Ảnh hộp nhẫn thật — cả 2 nền trong suốt, xếp chồng tuyệt đối để crossfade khớp vị trí.
   Hộp đóng nằm trên (che hộp mở) lúc "closed", mờ dần lộ hộp mở bên dưới lúc "opening". */
.ring-gate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transition:
    opacity 0.55s var(--ease-out),
    filter 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.ring-gate__photo--closed {
  z-index: 2;
  opacity: 1;
}
.ring-gate[data-step="opening"] .ring-gate__photo--closed,
.ring-gate[data-step="hand"] .ring-gate__photo--closed,
.ring-gate[data-step="proposal"] .ring-gate__photo--closed,
.ring-gate[data-step="leaving"] .ring-gate__photo--closed {
  opacity: 0;
  transform: scale(1.03);
}

.ring-gate__photo--open {
  z-index: 1;
  opacity: 0;
  transform: scale(1.02);
}
.ring-gate[data-step="opening"] .ring-gate__photo--open,
.ring-gate[data-step="hand"] .ring-gate__photo--open,
.ring-gate[data-step="proposal"] .ring-gate__photo--open,
.ring-gate[data-step="leaving"] .ring-gate__photo--open {
  opacity: 1;
  transform: scale(1.06);
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(212, 175, 55, 0.6)) brightness(1.08);
  transition-delay: 0.08s;
}

/* Nhẫn thật bay lên từ trong hộp, dừng lơ lửng phía trên — inset:0 nên translateY(%) tính theo chiều cao floater */
.ring-gate__ring-lift {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 30%;
  opacity: 0;
  transform: translateY(0) scale(0.4);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition:
    transform 0.9s var(--ease-out) 0.35s,
    opacity 0.55s var(--ease-out) 0.35s;
}
.ring-gate[data-step="opening"] .ring-gate__ring-lift,
.ring-gate[data-step="hand"] .ring-gate__ring-lift,
.ring-gate[data-step="proposal"] .ring-gate__ring-lift,
.ring-gate[data-step="leaving"] .ring-gate__ring-lift {
  opacity: 1;
  transform: translateY(-38%) scale(1);
}

.ring-gate__ring {
  display: block;
  width: 62%;
  max-width: 9.5rem;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 22px rgba(212, 175, 55, 0.6));
  animation: ringHover 2.6s ease-in-out infinite;
}
@keyframes ringHover {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-5%) rotate(2deg);
  }
}

/* Ẩn nhanh nhẫn lơ lửng trong hộp ngay khi bản sao "bay" (.ring-gate__fly) tiếp quản,
   ghi đè transition-delay 0.35s mặc định của .ring-gate__ring-lift để tránh thấy 2 nhẫn cùng lúc */
.ring-gate[data-step="hand"] .ring-gate__ring-lift.is-hidden,
.ring-gate[data-step="proposal"] .ring-gate__ring-lift.is-hidden,
.ring-gate[data-step="leaving"] .ring-gate__ring-lift.is-hidden {
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}

/* Nhẫn "bay" tách khỏi hộp, di chuyển tự do bằng toạ độ JS (fixed theo viewport)
   tới đúng vị trí nhẫn trên bàn tay trong cảnh mở đầu. */
.ring-gate__fly {
  position: fixed;
  left: 0;
  top: 0;
  width: 3rem;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  will-change: transform, opacity, width;
}
.ring-gate__fly-glow {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.42) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(5px);
}
.ring-gate__fly img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 14px rgba(212, 175, 55, 0.55));
}

/* Chữ mời + nút bỏ qua neo cố định ở đáy màn hình, tách khỏi vị trí hộp */
.ring-gate__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 6vh, 3rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* Tên khách được mời, điểm nhấn chính của màn mở đầu */
.ring-gate__to {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  transition: opacity 0.35s var(--ease-out);
}
.ring-gate__to-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.ring-gate__to-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 8.5vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-gold-light);
  max-width: 88vw;
  text-wrap: balance;
}

.ring-gate__prompt {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 3.6vw, 1.05rem);
  opacity: 0.8;
  white-space: nowrap;
  color: #fff;
  margin: 0;
  min-height: 1.6em;
  transition: opacity 0.35s var(--ease-out);
}

/* Ẩn prompt khi ảnh reveal đang hiện — tránh đè chữ lên khung ảnh, cũng không còn cần thiết vì user đã tap */
.ring-gate[data-step="hand"] .ring-gate__to,
.ring-gate[data-step="proposal"] .ring-gate__to,
.ring-gate[data-step="leaving"] .ring-gate__to,
.ring-gate[data-step="opening"] .ring-gate__prompt,
.ring-gate[data-step="hand"] .ring-gate__prompt,
.ring-gate[data-step="proposal"] .ring-gate__prompt,
.ring-gate[data-step="leaving"] .ring-gate__prompt {
  opacity: 0;
  pointer-events: none;
}

/* Sparkle burst khi mở hộp */
.ring-gate__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.ring-gate__sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sparkle-size, 5px);
  height: var(--sparkle-size, 5px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-gold-light),
    var(--color-gold) 70%
  );
  animation: sparkleBurst 0.9s var(--ease-out) forwards;
}
@keyframes sparkleBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0.3);
  }
}

/* ══ Responsive ══ */
@media (max-width: 768px) {
  .hero {
    height: 100svh;
    padding: 0 1.25rem 4rem;
  }
  .hero__groom,
  .hero__bride {
    font-size: clamp(3.2rem, 18vw, 5.5rem);
  }
  .hero__groom {
    transform: translateX(clamp(-1.6rem, -5vw, -0.4rem));
  }
  .hero__bride {
    transform: translateX(clamp(0.4rem, 5vw, 1.6rem));
  }
  .hero__ring {
    width: clamp(2.2rem, 9vw, 3.4rem);
  }

  .ring-gate__hand-wrap {
    width: clamp(11rem, 62vw, 15rem);
    top: 30%;
    right: -6%;
  }
  .ring-gate__proposal-memory {
    width: min(calc(100% - 2.5rem), 30rem);
  }

  .invite__families {
    gap: 1.25rem 0.75rem;
  }
  .gift__grid {
    grid-template-columns: 1fr;
    max-width: 22rem;
  }

  .form {
    padding: 1.75rem 1.25rem;
  }
}