:root {
  --bg: #fcf7f3;
  --bg-cream: #fbf5ea;    /* kem */
  --ink: #2b1519;
  --muted: #7d6468;
  --accent: #8c1c2c;      /* đổi màu chủ đạo ở đây (đỏ đô) */
  --wine: #4a0d19;
  --gold: #d2ac62;
  --radius: 16px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Cuộn tay: mỗi lần kéo sẽ tự nhảy tới đầu phần kế tiếp, không dừng lửng giữa 2 phần */
html { scroll-snap-type: y mandatory; }
html.auto-scroll, html.gliding { scroll-snap-type: none; scroll-behavior: auto; }
body.locked { scroll-snap-type: none; }
.hero, .section { scroll-snap-align: start; }
.footer { scroll-snap-align: end; }
body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; }
[hidden] { display: none !important; }

h1, h2, h3, .names { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.25rem; margin-bottom: .4rem; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .3em; font-size: .72rem;
  color: var(--accent); font-weight: 500; margin-bottom: 1rem;
}
.names span { color: var(--accent); font-style: italic; }

/* Cover */
.cover {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 42%, #6d1728 0%, #4a0d19 68%, #350810 100%);
  color: #fff; transition: opacity 1s ease, visibility 1s;
}
.cover.hide { opacity: 0; visibility: hidden; }
.cover > .eyebrow { color: var(--gold); margin: 0; }
.cover-hint { margin-top: 2.2rem; font-size: .8rem; letter-spacing: .12em; color: #c99aa1; transition: opacity .4s; }
.cover.opening .cover-hint { opacity: 0; transition: opacity .4s; }

/* Phong bì dựng từ ảnh trong image/: thân + nắp tách riêng.
   Khung .envelope = đúng thân phong bì (468x288); nắp mở lên phía trên, thân KHÔNG đổi kích thước/vị trí. */
/* --w = bề ngang phong bì: theo màn hình, nhưng bị giới hạn theo chiều cao để nắp mở + thiệp không tràn */
.env-wrap {
  --w: max(260px, min(88vw, 760px, calc((100svh - 200px) / 1.16)));
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.5));
  margin-top: calc(var(--w) * .54);                /* chừa chỗ cho nắp mở */
}
.envelope {
  position: relative; width: var(--w); aspect-ratio: 468 / 288;
  perspective: 1400px; cursor: pointer;
}
.envelope > * { position: absolute; }
.envelope img { display: block; user-select: none; -webkit-user-drag: none; }
.envelope > img { inset: 0; width: 100%; height: 100%; }

/* Lớp "mở" (lòng phong bì) chỉ hiện khi bắt đầu mở; lúc đóng ảnh phong bì đóng che hết */
.env-back, .env-front { opacity: 0; }
.env-back { z-index: 1; }
.env-front {                       /* cùng ảnh, chỉ lấy phần túi phía trước để che chân tấm thiệp */
  z-index: 3;
  clip-path: polygon(0 0, 2.95% 0, 31.7% 38.3%, 68% 38.3%, 97.05% 0, 100% 0, 100% 100%, 0 100%);
}
.env-close-body { z-index: 4; }

/* Tấm thiệp nằm trong túi: khung cắt ở đáy phong bì nên không thể lòi ra phía dưới */
.env-slot { inset: 0; z-index: 2; clip-path: inset(-400% -50% 5% -50%); pointer-events: none; }
.env-card {
  position: absolute; left: 7%; right: 7%; top: 41.5%; height: 92%; opacity: 0;
  background: #fffaf3; border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(210,172,98,.75);
  --card-ink: #886656;   /* cùng màu nét của họa tiết */
}
.env-card svg { display: block; width: 100%; height: 100%; }
.env-card text { fill: var(--card-ink); }
.env-card .t-name { font: 400 50px "Cormorant Garamond", var(--serif); letter-spacing: 3px; }
.env-card .t-date { font: 500 24px "Cormorant Garamond", var(--serif); letter-spacing: 3.5px; font-variant-numeric: lining-nums; }

/* Nắp: mặt ngoài = ảnh nắp đóng, mặt trong = ảnh nắp mở; xoay quanh mép trên thân phong bì */
.env-flap {
  left: 0; top: 0; width: 100%; height: 84.72%; z-index: 5;
  transform-origin: 50% 0; transform-style: preserve-3d;
}
.env-flap img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.env-flap .in { transform: rotateX(180deg); }

.seal {
  left: 50%; top: 72%; z-index: 6; width: calc(var(--w) * .16); aspect-ratio: 1;
  translate: -50% -50%;
  border: 0; cursor: pointer; font: 600 calc(var(--w) * .046) var(--serif); color: #7a5a1c;
  display: grid; place-items: center; letter-spacing: .02em;
  border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%;
  background: radial-gradient(circle at 35% 30%, #f2d68e, #d2ac62 55%, #a97f34);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,236,180,.35), inset 0 -3px 6px rgba(120,80,10,.45);
  animation: pulse 2.2s ease-in-out infinite;
  transition: opacity .3s, scale .3s;
}
.seal::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid rgba(122,90,28,.55); }
.seal:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes pulse { 50% { scale: 1.07; } }
.cover > .eyebrow { position: absolute; top: 6vh; left: 0; right: 0; font: 400 clamp(1.8rem, 5vw, 3rem) var(--serif); text-transform: none; letter-spacing: .12em; transition: opacity .4s; }
.cover.opening > .eyebrow { opacity: 0; }

/* Trạng thái mở (tổng ~3s): dấu sáp mờ -> nắp lật lên -> thiệp trượt ra khỏi túi */
.cover.opening .seal { animation: none; opacity: 0; scale: 1.2; pointer-events: none; }
.cover.opening .envelope { cursor: default; }
.env-back, .env-front { transition: opacity .25s ease .2s; }
.cover.opening .env-back, .cover.opening .env-front { opacity: 1; }
.env-close-body { transition: opacity .25s ease .2s; }
.cover.opening .env-close-body { opacity: 0; }
.env-flap { transition: transform 1s cubic-bezier(.45,0,.25,1) .35s, z-index 0s .85s; }
.cover.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.env-card { transition: top 1.2s cubic-bezier(.35,.8,.3,1) 1.4s, opacity .01s 1.3s; }
.cover.opening .env-card { top: -50%; opacity: 1; }

/* Nhạc */
.music-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--gold); font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.music-btn.playing { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Nút tự cuộn: tròn, đặt đối xứng với nút nhạc; sáng lên khi đang tự cuộn */
.scroll-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--gold); font-size: 1.3rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: background .25s, color .25s;
}
.scroll-btn[hidden] { display: none; }
.scroll-btn.on { background: var(--gold); color: var(--wine); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }

/* Layout */
.hero, .section, .footer { padding: 88px 20px; text-align: center; }
.section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.section > * { width: 100%; }
.section > *, .hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Nền các phần xen kẽ đỏ đậm ↔ kem: hero (đậm) → thiệp mời (kem) → sự kiện (đậm) → Our Story (kem) → album (đậm) → lưu bút (kem) → footer (đậm) */
.section.cream { background: var(--bg-cream); }
.section.deep { background: radial-gradient(ellipse at 50% 40%, #6d1728, #350810); color: #f3dfe1; }
.section.deep .eyebrow { color: var(--gold); }
.section.deep h2 { color: #fff; }
.section.deep .card { color: var(--ink); }   /* thẻ trắng trên nền đậm giữ chữ tối */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; color: #fff;
  background: radial-gradient(ellipse at 50% 40%, #6d1728, #350810);      /* nền mặc định khi không có ảnh */
}
/* Ảnh nền (chỉ bật khi ảnh tải được): giữ nguyên ảnh, chỉ giảm độ đậm (opacity) cho lộ nền đỏ đô bên dưới */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s;
  background: var(--hero-img) center/cover;
}
.hero.has-bg::before { opacity: .55; }      /* chỉnh độ đậm ảnh nền ở đây (0–1) */
.hero .eyebrow, .hero .names .amp { color: var(--gold); }
.hero .n-groom, .hero .n-bride { color: #fff; font-style: normal; }
.hero .names, .hero .date { text-shadow: 0 2px 18px rgba(30,4,10,.55); }

/* Tên cô dâu chú rể: từ hai cạnh trượt vào giữa, rồi dấu & hiện ra */
.hero .n-groom, .hero .n-bride, .hero .amp { display: inline-block; opacity: 0; }
.hero .n-groom { transform: translateX(-70vw); }
.hero .n-bride { transform: translateX(70vw); }
.hero .amp { transform: scale(.3); }
.hero.in .n-groom, .hero.in .n-bride {
  opacity: 1; transform: none; transition: opacity 1.2s ease .3s, transform 1.9s cubic-bezier(.16,.8,.2,1) .3s;
}
.hero.in .amp { opacity: 1; transform: none; transition: opacity .9s ease 1.7s, transform 1.1s cubic-bezier(.3,1.5,.5,1) 1.7s; }
.hero .eyebrow, .hero .date, .hero .countdown { opacity: 0; transform: translateY(14px); }
.hero.in .eyebrow  { opacity: 1; transform: none; transition: opacity 1s ease .1s, transform 1s ease .1s; }
.hero.in .date     { opacity: 1; transform: none; transition: opacity 1s ease 2s,   transform 1s ease 2s; }
.hero.in .countdown{ opacity: 1; transform: none; transition: opacity 1s ease 2.3s, transform 1s ease 2.3s; }
.names.big { font-size: clamp(3rem, 13vw, 6.5rem); }
.date { letter-spacing: .4em; margin: 1.2rem 0 2rem; color: #ecd2d5; }

.countdown { display: flex; gap: 14px; justify-content: center; }
.countdown div {
  min-width: 70px; padding: 14px 8px; border-radius: var(--radius);
  background: rgba(255,255,255,.08); border: 1px solid rgba(210,172,98,.55);
  backdrop-filter: blur(4px);
}
.countdown b { display: block; font: 400 1.8rem var(--serif); color: var(--gold); }
.countdown small { color: #e3c6ca; font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; }

/* Phần thiệp mời (mẫu thiệp giấy: 2 nhà, câu mời, tên chữ thảo, hôn lễ, hoa cuối trang).
   Cỡ chữ gốc (font-size của .invite) tăng theo bề ngang màn hình; các dòng dùng em nên co giãn cùng nhau. */
.section.invite {     /* .section.invite: đủ mạnh để thắng padding của .section trong @media */
  --coral: #d9505a; --text: #4a3f40;
  font-size: clamp(.95rem, min(.88rem + .3vw, 1.9svh), 1.3rem);   /* theo cả bề ngang lẫn chiều cao để vừa một màn hình */
  --fh: min(calc(min(100vw, 1000px) * .43), 22svh);            /* chiều cao dải hoa: theo tỉ lệ ảnh, nhưng không quá 22% chiều cao màn hình */
  position: relative; overflow: hidden; color: var(--text); background: var(--bg-cream);
  padding-top: 40px; padding-bottom: calc(var(--fh) + 16px);   /* chừa chỗ cho dải hoa */
}
.invite > * { max-width: min(1080px, 92%); flex-shrink: 0; }
.invite .pre, .invite p { line-height: 1.6; }
.families { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: center; margin-bottom: 1.4em; }
.fam-title { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: .9em; margin-bottom: .3em; }
.family .pre { font-size: .95em; }
.family p.addr { font-size: .8em; margin-top: .4em; opacity: .85; }
.family p.addr:empty { display: none; }
.invite-lead { text-transform: uppercase; letter-spacing: .08em; font-size: .95em; margin-bottom: 1.2em; }
.invite .script { font-family: "Great Vibes", cursive; font-weight: 400; color: var(--coral); line-height: 1.1; }
.person { display: flex; flex-direction: column; align-items: center; margin-bottom: .9em; }   /* tên trên, thứ bậc ở dòng dưới */
.person .script { font-size: clamp(1.7rem, 7.4vw, 3.4rem); margin: 0; white-space: nowrap; }
.person .role { font-size: .95em; margin-top: .1em; }
.person .role:empty { display: none; }
.cer-label { text-transform: uppercase; letter-spacing: .12em; font-size: .95em; margin: 1em auto .2em; }
.venue { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-bottom: .4em; }
.venue i { flex: 0 1 5em; height: 1px; background: var(--coral); }
.venue .script { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.when { text-transform: uppercase; letter-spacing: .06em; font-size: 1.1em; }
.lunar { font-size: .95em; margin-top: .3em; }
.invite .flowers {                   /* dải hoa: ảnh lặp ngang, cao đúng --fh */
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--fh); max-width: none; margin: 0;
  background: url("../image/flower.png") repeat-x 50% 100% / auto 100%;
  transform-origin: 50% 100%; pointer-events: none; user-select: none;
}
@media (max-width: 719px) { .section.invite { font-size: .85rem; } }   /* điện thoại: chữ gọn hơn để 2 cột nhà không bị xuống dòng nhiều */
@media (min-width: 720px) {
  .person .script { font-size: clamp(3rem, min(4.6vw, 7svh), 5.6rem); }
  .venue .script  { font-size: clamp(2.4rem, min(3.4vw, 5.4svh), 4rem); }
  .families { gap: 40px; }
}

/* Hiệu ứng: từng dòng hiện lên lần lượt; hoa mọc từ đáy lên. Chạy lại mỗi lần vào section */
.invite > *:not(.flowers) { opacity: 0; transform: translateY(18px); }
.invite .flowers { opacity: 0; transform: translateY(60%) scaleY(.2); clip-path: inset(100% 0 0 0); }
.invite.in > *:not(.flowers) { opacity: 1; transform: none; transition: opacity 1s ease var(--d, 0s), transform 1s ease var(--d, 0s); }
.invite.in .flowers {
  opacity: 1; transform: none; clip-path: inset(0);
  transition: opacity .8s ease .3s, transform 3.2s cubic-bezier(.22,.7,.25,1) .3s, clip-path 3.2s cubic-bezier(.22,.7,.25,1) .3s;
}
.invite.in > *:nth-child(1) { --d: .2s; } .invite.in > *:nth-child(2) { --d: .5s; } .invite.in > *:nth-child(3) { --d: .8s; }
.invite.in > *:nth-child(4) { --d: 1.1s; } .invite.in > *:nth-child(5) { --d: 1.4s; } .invite.in > *:nth-child(6) { --d: 1.6s; }
.invite.in > *:nth-child(7) { --d: 1.8s; } .invite.in > *:nth-child(8) { --d: 2s; }
.invite.in > *:nth-child(9) { --d: 2.2s; }
.invite .families .family { opacity: 1; transform: none; }   /* 2 nhà hiện cùng khối .families */

.lead { font-size: 1.1rem; color: var(--muted); }
.couple { display: grid; gap: 32px; margin-top: 2.5rem; }
.couple p { color: var(--muted); }

.cards { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; }
.card { background: #fff; border-radius: var(--radius); padding: 28px 22px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.card .time { color: var(--accent); font-weight: 500; margin-bottom: .6rem; }
.link { display: inline-block; margin-top: .8rem; color: var(--ink); font-weight: 500; }

/* Our Story: 2 ảnh (vòm) + tên + đoạn văn */
.story-pair { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 32px); max-width: 640px !important; }
.story-pair figure { flex: 0 1 240px; min-width: 0; }
.story-pair img {
  display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 999px 999px 14px 14px;
  border: 4px solid #fff; box-shadow: 0 8px 26px rgba(74,13,25,.2); background: linear-gradient(135deg, #e6dfd3, #d8cfbf);
}
.story-pair figcaption { margin-top: .8rem; font-family: var(--serif); font-size: clamp(1rem, 3.6vw, 1.3rem); color: var(--accent); }
.story-heart { color: var(--gold); font-size: 1.4rem; }
.story-text { max-width: 620px !important; margin-top: 1.6rem !important; color: var(--muted); line-height: 1.8; }
.section.story { overflow: hidden; }
.story-pair img { border-color: #fff; box-shadow: 0 10px 30px rgba(74,13,25,.25); }

/* Ảnh + tên bay vào theo quỹ đạo cong (chú rể từ trái, cô dâu từ phải: vòng lên cao rồi hạ xuống vị trí); mỗi lần vào section chạy lại */
.story.in .story-pair figure:first-child { animation: storyArcL 2.2s cubic-bezier(.3,.6,.3,1) .2s both; }
.story.in .story-pair figure:last-child  { animation: storyArcR 2.2s cubic-bezier(.3,.6,.3,1) .2s both; }
.story.in .story-heart { animation: storyPop 1s cubic-bezier(.3,1.6,.5,1) 2s both; }
.story.in .story-text  { animation: storyUp 1.2s ease 2.3s both; }
@keyframes storyArcL {
  0%   { opacity: 0; transform: translate(-90vw, 55svh) rotate(-18deg) scale(.6); }
  45%  { opacity: 1; transform: translate(-30vw, -14svh) rotate(-8deg) scale(.95); }
  75%  { transform: translate(-6vw, 3svh) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes storyArcR {
  0%   { opacity: 0; transform: translate(90vw, 55svh) rotate(18deg) scale(.6); }
  45%  { opacity: 1; transform: translate(30vw, -14svh) rotate(8deg) scale(.95); }
  75%  { transform: translate(6vw, 3svh) rotate(-2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes storyPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes storyUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-height: 760px) { .story-pair img { max-height: 34svh; width: auto; margin: 0 auto; } }

/* Album: flipbook A4 dọc, gói gọn trong đúng 1 màn hình */
[hidden] { display: none !important; }
.section.album { height: 100svh; min-height: 0; padding: 20px 12px 12px; overflow: hidden; }
.album h2 { font-size: clamp(1.3rem, 4.2svh, 2rem); }
.album .eyebrow { margin-bottom: .4rem; }
.album > .album-stage { flex: 1 1 0; min-height: 0; max-width: 1100px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.album-book { position: relative; flex: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.album-nav { display: flex; align-items: center; justify-content: center; gap: 16px; height: 40px; color: #e3c6ca; font-size: .85rem; }
.album-nav button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); background: transparent;
  color: var(--gold); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.album-nav button:disabled { opacity: .3; cursor: default; }
.fb-root { position: absolute; inset: 0; }
.fb-sheet { position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.fb-sheet.fb-cover { box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.fb-strips { position: absolute; inset: 0; transform-style: preserve-3d; }
.fb-strip { position: absolute; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.fb-face, .fb-sface {
  position: absolute; top: 0; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #fbf6ee; background-repeat: no-repeat;
}
.fb-face { left: 0; width: 100%; }
.fb-back { transform: rotateY(180deg); }
.fb-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.fb-stack {
  position: absolute; top: 0; z-index: 0;
  background: repeating-linear-gradient(90deg, #f7f1e6 0 1.5px, #c9bfae 1.5px 2px);
  box-shadow: 0 22px 40px -14px rgba(60,20,25,.6);
}
.fb-spine.fb-spine-s { width: 14px; background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,0)); }
.fb-cast { position: absolute; top: 0; pointer-events: none; }
.fb-spine { position: absolute; top: 0; width: 32px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.3) 50%, transparent); }

/* Lời chúc */
.wish-form { display: grid; gap: 12px; text-align: left; }
.wish-form input, .wish-form textarea {
  font: inherit; padding: .85rem 1rem; border: 1px solid #ddd5c8; border-radius: 12px; background: #fff; width: 100%;
}
.wish-form input:focus, .wish-form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.wish-form .btn { justify-self: center; }
.trap { position: absolute; left: -9999px; }
.status { text-align: center; min-height: 1.4em; color: var(--muted); font-size: .9rem; }

.wish-list { list-style: none; margin-top: 2rem !important; display: grid; gap: 12px; text-align: left; }
.wish-list li { background: #fff; padding: 16px 18px; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.wish-list b { font-weight: 500; }
.wish-list time { display: block; color: var(--muted); font-size: .75rem; margin-top: 4px; }
.wish-list p { white-space: pre-wrap; word-break: break-word; }

.footer { background: var(--wine); color: #e3c6ca; padding: 56px 20px; }
.names.small { font-size: 1.6rem; color: #fff; margin-top: .4rem; }
.footer .names span { color: var(--gold); }

/* Hiệu ứng cuộn */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 720px) {
  .couple, .cards { grid-template-columns: 1fr 1fr; }
  .section, .hero { padding: 120px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .n-groom, .hero .n-bride, .hero .amp, .hero .eyebrow, .hero .date, .hero .countdown { opacity: 1; transform: none; transition: none !important; }
  .invite > *, .invite .flowers { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .music-btn.playing, .seal, .scroll-btn.on, .story.in .story-pair figure, .story.in .story-heart, .story.in .story-text { animation: none; }
  .env-flap, .env-card, .env-back, .env-front, .env-close-body { transition-duration: .01s; transition-delay: 0s; }
}

.pre { white-space: pre-line; }