/* ============================================================
   Thiệp cưới Đình Thi & Thùy Lam — 18.09.2026
   Màn 1: bìa thiệp (mở ra 2 bên)  •  Màn 2: nội dung thiệp
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --sheet-w: 402px;

  --c-teal:      #2b5e64;
  --c-rose:      #dc7586;   /* hồng cánh sen */
  --c-red:       #cd1111;
  --c-maroon:    #5a121c;
  --c-maroon-d:  #450f18;
  --c-line:      #6c131f;
  --c-cream:     #f4e9e0;
  --c-thumb:     #e8dbdb;

  --f-lobster: 'Lobster', 'Mulish', cursive;
  --f-script:  'Luxurious Script', 'Lavishly Yours', cursive;
  --f-lavish:  'Lavishly Yours', 'Luxurious Script', 'Lobster', cursive;
  --f-calli:   'Cormorant Garamond', 'Lucida Calligraphy', 'Palatino Linotype', serif;
  --f-lemon:   'Lemonada', 'Mulish', system-ui, sans-serif;
  --f-body:    'Mulish', system-ui, -apple-system, sans-serif;

  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-door: cubic-bezier(.72, 0, .18, 1);

  --cover-scale: 1;

  /* Ảnh nhỏ trong album — JS đọc lại 2 biến này để tính bước trượt */
  --thumb: 80px;
  --thumb-gap: 10px;

  /* Độ hiện của hoạ tiết sen nền (page-bg), cố định theo khung nhìn */
  --bg-motif: .1;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--c-cream);
  color:var(--c-maroon);
  font-family:var(--f-body);
  overflow-x:hidden;
}
p,ul,ol,figure,h1,h2,h3{ margin:0; padding:0 }
ul,ol{ list-style:none }
img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit }

body.is-closed{ overflow:hidden; height:100% }
html:has(body.is-closed){ overflow:hidden }

/* Helper: ảnh được crop theo toạ độ Figma */
.crop{ position:relative; overflow:hidden }
.crop > img{ position:absolute; max-width:none; pointer-events:none }

/* ============================================================
   MÀN 2 — THIỆP
   ============================================================ */
.invite{
  position:relative;
  min-height:100vh;
  opacity:0;
  transform:scale(1.05);
  transition:opacity 1.15s var(--ease-out) .35s, transform 1.6s var(--ease-out) .25s;
}
body.is-open .invite{ opacity:1; transform:none }

/* Nền hai bên (thấy trên màn rộng): bản page-bg mờ toả sáng, cố định theo khung nhìn */
.invite__bg{
  position:fixed; inset:0; z-index:0;
  background:var(--c-cream) url('../assets/page-bg.jpg') center/cover no-repeat;
  opacity:.55;
}
@media (min-width:520px){
  .invite__bg{ filter:blur(24px) saturate(1.06); transform:scale(1.12) }
}

.sheet{
  position:relative; z-index:1;
  width:100%; max-width:var(--sheet-w);
  margin-inline:auto;
  padding:32px 12px;
  display:flex; flex-direction:column; gap:12px;
  background:rgba(255,255,255,.7);
}
/* Hoạ tiết sen page-bg: CỐ ĐỊNH theo khung nhìn (không trôi, không lặp),
   giới hạn trong khổ thiệp. z-index:-1 -> nằm trên nền trắng của .sheet
   nhưng dưới toàn bộ nội dung, nên không ảnh hưởng độ đọc của chữ. */
.sheet::before{
  content:'';
  position:fixed; z-index:-1;
  top:0; bottom:0; left:50%;
  width:100%; max-width:var(--sheet-w);
  transform:translateX(-50%);
  background:url('../assets/page-bg.jpg') center/cover no-repeat;
  opacity:var(--bg-motif);
  pointer-events:none;
}
@media (min-width:520px){
  .sheet{ box-shadow:0 0 60px rgba(90,18,28,.18) }
}

.block{
  position:relative;
  width:100%;
  overflow:hidden;
  display:flex; flex-direction:column;
}


/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:570px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 4px 4px rgba(0,0,0,.15);
}
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(48,6,12,.34) 0%, rgba(48,6,12,0) 38%),
    linear-gradient(0deg, rgba(48,6,12,.22) 0%, rgba(48,6,12,0) 26%);
}
/* Tên dồn sang mép phải để không che mặt cô dâu */
.hero__names{
  position:absolute; right:16px; top:52px;
  display:flex; flex-direction:column; align-items:flex-end;
  font-family:var(--f-script);
  font-size:36px; line-height:42px;
  color:#fff;
  text-align:right;
  text-shadow:0 2px 6px rgba(48,6,12,.75), 0 4px 18px rgba(48,6,12,.5);
  white-space:nowrap;
}
.hero__name{
  opacity:0; transform:translate(26px, 8px);
  transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.is-visible .hero__name--1{ opacity:1; transform:none; transition-delay:.8s }
.is-visible .hero__name--2{ opacity:1; transform:none; transition-delay:1.05s }

.hero__scroll{
  position:absolute; left:50%; bottom:12px;
  width:20px; height:31px; margin-left:-10px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:11px;
  opacity:.75;
}
.hero__scroll i{
  position:absolute; left:50%; top:7px;
  width:3px; height:7px; margin-left:-1.5px;
  border-radius:2px; background:#fff;
  animation:scrollDot 1.7s ease-in-out infinite;
}

/* ---------- Thơ ---------- */
.poem{
  font-family:var(--f-calli);
  font-style:italic;
  font-size:17px; line-height:1.5;
  color:var(--c-maroon-d);
}
.poem p + p{ margin-top:14px }
.poem--center{ text-align:center }
.poem--right{ text-align:right }

.block--poem{
  align-items:center;
  gap:10px;
  padding:16px;
}
.monogram{ width:82px; height:95px; flex:none }
.monogram > img{ width:281.11%; left:-93.71%; height:133.08%; top:-18.85% }

/* ---------- Gia đình ---------- */
.block--family{
  align-items:center;
  gap:26px;
  padding:16px;
  min-height:680px;
  background:url('../assets/family-bg.jpg') center/cover no-repeat;
}
.family__spacer{ height:148px; flex:none }

.countdown{ text-align:center }
.countdown__lead{
  font-family:var(--f-lobster);
  font-size:20px; color:var(--c-rose);
}
.countdown__units{
  display:flex; gap:8px; justify-content:center;
  margin-top:10px;
}
.countdown__units li{
  min-width:52px;
  padding:6px 4px 4px;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  box-shadow:0 2px 8px rgba(90,18,28,.1);
}
.countdown__units b{
  display:block;
  font-family:var(--f-lemon); font-weight:500;
  font-size:19px; line-height:1.1; color:var(--c-rose);
  font-variant-numeric:tabular-nums;
}
.countdown__units small{
  display:block; margin-top:2px;
  font-family:var(--f-body); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-maroon); opacity:.7;
}
.countdown__units b.tick{ animation:tick .45s var(--ease-out) }

.family{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center;
}
.family__side p{
  font-family:var(--f-calli); font-style:italic;
  font-size:16px; line-height:1.6; color:var(--c-maroon);
}
.family__side p + p{ margin-top:8px }
.family__join{
  font-family:var(--f-lobster);
  font-size:16px; color:var(--c-rose);
}

.scenery{ position:relative; width:100%; height:166px; flex:none }
.scenery__cloud,.scenery__hat{ position:absolute }
.scenery__cloud--a{
  left:15.3%; top:0; width:122px; height:71px;
  animation:drift 13s ease-in-out infinite;
}
.scenery__cloud--a > img{ width:280.76%; left:-13.34%; height:364.97%; top:-192.67% }
.scenery__hat{
  left:32.7%; top:0; width:122px; height:122px;
  animation:bob 6.5s ease-in-out infinite;
}
.scenery__hat > img{ width:179.44%; left:-40.94%; height:135.07%; top:-15.91% }
.scenery__cloud--b{
  left:45.7%; top:73px; width:147px; height:70px;
  animation:drift 17s ease-in-out infinite reverse;
}
.scenery__cloud--b > img{ width:160.46%; left:-37.25%; height:250.98%; top:-32.49% }

/* ---------- Ảnh + ca dao ---------- */
.block--verses{ gap:19px; padding:15px; overflow:visible }
.verse{ display:flex; align-items:center; gap:16px }
.verse .poem{
  flex:1; min-width:0;
  /* bằng đúng cỡ chữ nhà trai/nhà gái ở khối .family */
  font-size:16px; line-height:1.6;
  color:var(--c-maroon);
  text-wrap:pretty;
}
.verse .poem p + p{ margin-top:12px }
.verse__photo{
  flex:none;
  width:clamp(132px, 44%, 160px);
  aspect-ratio:2/3;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 26px -12px rgba(90,18,28,.5);
}
.verse__photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.tilt{ transition:transform .8s var(--ease-out) }
.tilt:hover{ transform:translateY(-6px) rotate(-1.2deg) }
.tilt:hover img{ transform:scale(1.07) }

/* ---------- Thông tin lễ ---------- */
.block--event{ gap:10px; padding:10px; text-align:center }
.event__intro{
  font-family:var(--f-lemon); font-weight:380;
  font-size:12px; line-height:22px; color:var(--c-maroon);
  text-wrap:pretty;
}
.event{ display:flex; flex-direction:column; gap:10px }
.script{
  font-family:var(--f-lavish);
  font-size:40px; line-height:1.15;
  color:var(--c-rose);
  padding-inline:10px;
}
.script--right{ text-align:right }
/* Tiêu đề mục — dùng chung font Lemonada với nội dung ngay bên dưới.
   Dùng cho "Tiệc mừng" (.event__label) và "Khung thời gian" (.timeline__title). */
.event__label,
.timeline__title{
  font-family:var(--f-lemon); font-weight:500;
  font-size:24px; line-height:1.3; color:var(--c-rose);
  padding-inline:10px;
}
.timeline__title{ text-align:center }
.script--left{ text-align:left }
.script--center{ text-align:center }
.event__date{
  font-family:var(--f-lemon); font-weight:380;
  font-size:20px; line-height:22px; color:var(--c-rose);
}
.event__time{
  font-family:var(--f-lemon); font-weight:380;
  font-size:14px; line-height:22px; color:var(--c-rose);
}
.event__rule{ font-size:28px; letter-spacing:.1em; opacity:.7 }
.event__venue{
  font-family:var(--f-lemon); font-weight:380;
  font-size:18px; line-height:29px; color:var(--c-rose);
  text-align:center;
}

/* ---------- Bản đồ ---------- */
.map{
  position:relative; display:block;
  height:140px; overflow:hidden;
  border-radius:12px;
  background:#eae2e2;
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(90,18,28,.08);
}
.map__grid{
  position:absolute; inset:0;
  background:
    /* hai "con đường" chéo */
    linear-gradient(72deg, transparent 46%, #f3ecec 46% 52%, transparent 52%),
    linear-gradient(-18deg, transparent 62%, #f3ecec 62% 67%, transparent 67%),
    /* lưới ô phố */
    linear-gradient(#e2d8d8 1px, transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg, #e2d8d8 1px, transparent 1px) 0 0/36px 100%,
    linear-gradient(160deg, #f0e7e4, #e7dcda);
}
.map__pin{
  position:absolute; left:50%; top:44%;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--c-red);
  box-shadow:0 0 0 0 rgba(205,17,17,.45);
  animation:pinPulse 2.4s ease-out infinite;
}
.map__text{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 12px;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  background:linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.5));
}
.map__text b{
  font-family:var(--f-lemon); font-weight:500;
  font-size:12px; color:var(--c-maroon);
}
.map__text i{
  font-style:normal;
  font-family:var(--f-body); font-size:11px; font-weight:700;
  color:var(--c-rose); white-space:nowrap;
  transition:transform .4s var(--ease-out);
}
.map:hover .map__text i{ transform:translateX(4px) }

/* ---------- Khung thời gian ---------- */
.block--timeline{ gap:10px; padding:10px }
.timeline{ display:flex; flex-direction:column }
.timeline__row{
  display:flex; align-items:center; gap:16px;
  padding-inline:10px;
}
.timeline__time,.timeline__what{
  font-family:var(--f-lemon); font-weight:380;
  font-size:14px; line-height:22px; color:var(--c-rose);
}
.timeline__time{ width:46px; flex:none }
.timeline__what{ flex:1 }
.timeline__mark{
  flex:none;
  width:26px; height:102px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.timeline__mark i{
  width:1px; height:40px; border-radius:1px;
  background:var(--c-line);
  transform:scaleY(0); transform-origin:center;
  transition:transform .8s var(--ease-out);
}
.timeline__mark b{
  width:6px; height:6px; border-radius:50%;
  background:var(--c-line);
  transform:scale(0);
  transition:transform .6s var(--ease-out) .25s;
}
.timeline__row:first-child .timeline__mark i:first-child{ opacity:0 }
.timeline__row:last-child .timeline__mark i:last-child{ opacity:0 }
.is-visible .timeline__mark i{ transform:scaleY(1) }
.is-visible .timeline__mark b{ transform:scale(1) }
.timeline__row:nth-child(2) .timeline__mark i,
.timeline__row:nth-child(2) .timeline__mark b{ transition-delay:.18s }
.timeline__row:nth-child(3) .timeline__mark i,
.timeline__row:nth-child(3) .timeline__mark b{ transition-delay:.36s }

/* Khối video/tranh (vị trí ảnh GIF trong thiết kế) — chạy lặp liên tục */
.clip{
  position:relative;
  width:100%; aspect-ratio:1280/720;
  border-radius:20px; overflow:hidden;
  background:#f7efe9;
  box-shadow:inset 0 0 0 1px rgba(205,17,17,.1), 0 10px 24px -16px rgba(90,18,28,.45);
}
.clip__video,
.clip__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Tranh nằm dưới video: hiện khi chưa có file video, và luôn "thở" nhẹ cho sinh động */
.clip__poster{
  z-index:0;
  animation:clipBreathe 24s ease-in-out infinite alternate;
}
.clip__video{
  z-index:1;
  opacity:0;
  transition:opacity .6s ease;
}
.clip.has-video .clip__video{ opacity:1 }
.clip.has-video .clip__poster{ animation:none }
.clip__glow{
  position:absolute; inset:-30%; z-index:2;
  background:radial-gradient(closest-side, rgba(255,255,255,.6), transparent 70%);
  animation:sweep 11s ease-in-out infinite;
  pointer-events:none;
}
.clip.has-video .clip__glow{ display:none }

/* ---------- Dress code ---------- */
.dress{
  font-family:var(--f-lemon); font-weight:380;
  font-size:12px; line-height:22px; color:var(--c-maroon);
  text-align:center;
}
.swatches{
  display:flex; justify-content:center; gap:64px; align-items:flex-start;
  padding-inline:14px; margin-top:4px;
}
.swatches li{ display:flex; flex-direction:column; align-items:center; gap:10px }
.swatches span{
  width:40px; height:40px; border-radius:4px;
  background:var(--sw);
  box-shadow:0 4px 12px -4px rgba(90,18,28,.45), inset 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.swatches li:hover span{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 10px 18px -6px rgba(90,18,28,.5), inset 0 0 0 1px rgba(255,255,255,.7);
}
.swatches em{
  font-style:normal;
  font-family:var(--f-lemon); font-weight:380;
  font-size:12px; line-height:22px; color:var(--c-maroon);
}

/* ---------- Album ---------- */
.block--gallery{ padding:10px }
.gallery{ display:flex; align-items:stretch; gap:10px }

/* Dải ảnh nhỏ: khung cố định, dải bên trong trượt theo ảnh đang xem */
.gallery__rail{
  flex:none;
  width:var(--thumb);
  position:relative;
  overflow:hidden;
  border-radius:8px;
}
.gallery__rail::before,
.gallery__rail::after{
  content:'';
  position:absolute; left:0; right:0; height:28px; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.gallery__rail::before{ top:0 }
.gallery__rail::after{ bottom:0; transform:rotate(180deg) }

.gallery__track{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; gap:var(--thumb-gap);
  transition:transform .6s var(--ease-out);
  will-change:transform;
}
.gallery__track button{
  display:block;
  width:100%; height:var(--thumb); padding:0;
  border:0; border-radius:8px; overflow:hidden;
  background:var(--c-thumb);
  cursor:pointer;
  opacity:.68;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.gallery__track img{ width:100%; height:100%; object-fit:cover }
.gallery__track button:hover{ opacity:.92 }
.gallery__track button.is-active{
  opacity:1;
  box-shadow:0 0 0 2px var(--c-rose), 0 6px 14px -6px rgba(90,18,28,.5);
}

.gallery__main{
  flex:1; min-width:0;
  aspect-ratio:933/1400;
  padding:0; border:0;
  border-radius:16px; overflow:hidden;
  position:relative;
  background:var(--c-thumb);
  cursor:zoom-in;
  box-shadow:0 12px 30px -16px rgba(90,18,28,.55);
}
.gallery__main img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .45s ease, transform 1.1s var(--ease-out);
}
.gallery__main.is-swapping img{ opacity:0; transform:scale(1.05) }

.gallery__badge{
  position:absolute; right:8px; top:8px;
  padding:3px 8px;
  border-radius:20px;
  background:rgba(48,6,12,.45);
  backdrop-filter:blur(4px);
  font-family:var(--f-body); font-size:11px; font-weight:600;
  color:#fff; letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.gallery__badge b{ font-weight:800 }

/* Vạch đếm 3 giây của chế độ tự chạy */
.gallery__timer{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.28);
}
.gallery__timer i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--c-rose), #fff);
}
.gallery.is-playing .gallery__timer i{
  animation:galleryTimer 3s linear forwards;
}
.gallery:not(.is-playing) .gallery__timer{ opacity:0 }

/* ---------- Xem ảnh phóng lớn ---------- */
.lb{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,8,13,.96);
  backdrop-filter:blur(8px);            /* xoá hẳn phần nội dung mờ phía sau */
  opacity:0;
  transition:opacity .35s ease;
}
.lb[hidden]{ display:none }
.lb.is-open{ opacity:1 }

.lb__stage{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:56px 16px 64px;
  touch-action:pan-y;
}
.lb__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  opacity:0; transform:scale(.965);
  transition:opacity .4s ease, transform .5s var(--ease-out);
}
.lb.is-ready .lb__img{ opacity:1; transform:none }

.lb__btn{
  position:absolute;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  line-height:1;
  transition:background .3s ease, transform .3s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.lb__btn:hover{ background:rgba(255,255,255,.24) }
.lb__btn:active{ transform:scale(.92) }
.lb__btn--close{
  top:12px; right:12px;
  width:40px; height:40px;
  font-size:26px;
}
.lb__btn--prev,
.lb__btn--next{
  top:50%; margin-top:-24px;
  width:48px; height:48px;
  font-size:34px;
  padding-bottom:4px;
}
.lb__btn--prev{ left:10px }
.lb__btn--next{ right:10px }

.lb__count{
  position:absolute; left:0; right:0; bottom:20px;
  text-align:center;
  font-family:var(--f-body); font-size:13px;
  color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}
.lb__count b{ color:#fff; font-weight:700 }

body.lb-open{ overflow:hidden }

/* ---------- Lời cảm ơn ---------- */
.block--thanks{ align-items:center; gap:10px; padding:10px }
.thanks p{
  font-family:var(--f-body);
  font-size:14px; line-height:24px; color:var(--c-maroon);
}
.thanks p + p{ margin-top:20px }
.thanks__sign{
  margin-top:8px;
  font-family:var(--f-body); font-weight:700;
  font-size:16px; line-height:22px; color:var(--c-rose);
  text-align:center;
}
/* Khung sát vào chữ lồng — cùng tỉ lệ cắt với .monogram ở khối thơ mở đầu */
.thanks__logo{ position:relative; width:104px; height:120px; overflow:hidden }
.thanks__logo > img{ width:281.11%; left:-93.71%; height:133.08%; top:-18.85% }
.shine::after{
  content:'';
  position:absolute; top:0; bottom:0; left:-60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  animation:shine 4.5s ease-in-out 1.2s infinite;
}

/* ============================================================
   Hiệu ứng xuất hiện khi cuộn
   ============================================================ */
.reveal{
  opacity:0;
  transition:opacity 1s var(--ease-out), transform 1.15s var(--ease-out);
  will-change:opacity, transform;
}
.reveal[data-reveal="up"]{ transform:translateY(34px) }
.reveal[data-reveal="fade"]{ transform:scale(.975) }
.reveal[data-reveal="left"]{ transform:translateX(-34px) }
.reveal[data-reveal="right"]{ transform:translateX(34px) }
.reveal.is-visible{ opacity:1; transform:none }

.stagger > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);
}
.is-visible .stagger > *,
.stagger.is-visible > *{ opacity:1; transform:none }
.stagger > *:nth-child(1){ transition-delay:.10s }
.stagger > *:nth-child(2){ transition-delay:.22s }
.stagger > *:nth-child(3){ transition-delay:.34s }
.stagger > *:nth-child(4){ transition-delay:.46s }
.stagger > *:nth-child(5){ transition-delay:.58s }
.stagger > *:nth-child(6){ transition-delay:.70s }

/* ============================================================
   MÀN 1 — BÌA THIỆP  (bản Figma mới: nền sen + phong thư)
   Khung gốc 402×874 — mọi toạ độ dưới đây lấy đúng từ Figma,
   cả khung nội dung lẫn ảnh nền cùng phóng theo --cover-scale
   nên luôn khớp nhau trên mọi kích thước màn hình.
   ============================================================ */
.cover{
  position:fixed; inset:0; z-index:50;
  overflow:hidden;
  cursor:pointer;
  background:#f7ecdd;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.cover:focus-visible{ outline:3px solid var(--c-rose); outline-offset:-6px }

/* Trên màn rộng: dải nền sen co về giữa như một tấm thiệp đặt trên nền kem */
@media (min-width:520px){
  .cover::after{
    content:'';
    position:absolute; left:50%; top:0; bottom:0;
    width:calc(488px * var(--cover-scale));
    transform:translateX(-50%);
    box-shadow:0 0 70px rgba(122,74,58,.26);
    pointer-events:none;
    transition:opacity .5s ease;
  }
  body.is-open .cover::after{ opacity:0 }
}

.cover__door{
  position:absolute; top:0; bottom:0;
  overflow:hidden;
  transition:transform 1.7s var(--ease-door);
  will-change:transform;
}
/* Mỗi cánh chứa một bản nền rộng đúng 100vw, neo theo mép khung nhìn
   -> hai nửa khớp tuyệt đối; cánh trái rộng thêm 1px để không hở đường chỉ */
.cover__door::before{
  content:'';
  position:absolute; top:0; bottom:0;
  width:100vw;
  background-color:#f7ecdd;
  background-image:
    radial-gradient(115% 56% at 50% 50%,
      rgba(253,248,240,.82) 0%, rgba(253,248,240,.55) 58%, rgba(253,248,240,.3) 100%),
    url('../assets/cover-lotus-bg.jpg');
  background-position:center center, center center;
  background-size:auto, auto calc(874px * var(--cover-scale));
  background-repeat:no-repeat, no-repeat;
}
.cover__door--l{ left:0; width:calc(50% + 1px) }
.cover__door--l::before{ left:0 }
.cover__door--l::after{
  content:'';
  position:absolute; top:0; bottom:0; right:0; width:16px;
  background:linear-gradient(90deg, transparent, rgba(122,74,58,.08));
}
.cover__door--r{ left:50%; width:50% }
.cover__door--r::before{ right:0 }
.cover__door--r::after{
  content:'';
  position:absolute; top:0; bottom:0; left:0; width:16px;
  background:linear-gradient(270deg, transparent, rgba(122,74,58,.08));
}

.cover__card{
  position:absolute; left:50%; top:50%;
  width:402px; height:874px;
  padding:16px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transform:translate(-50%,-50%) scale(var(--cover-scale));
  transition:opacity .7s ease, transform 1.1s var(--ease-out), filter .7s ease;
}
.cover__card > *{ flex:none }
/* Chừa chỗ cho khung sen vẽ sẵn trên ảnh nền */
.cover__top{ width:100%; height:201px }

.cover__invite{
  font-family:var(--f-lemon); font-weight:380;
  font-size:14px; line-height:24px; text-align:center;
  color:var(--c-maroon-d);
  opacity:0; transform:translateY(-10px);
  animation:riseIn 1s var(--ease-out) .2s forwards;
}
.cover__names{
  font-family:var(--f-lobster);
  font-size:32px; line-height:1.25; white-space:nowrap;
  color:var(--c-rose);
  text-shadow:0 2px 12px rgba(220,117,134,.3);
  opacity:0; transform:translateY(-12px);
  animation:riseIn 1.05s var(--ease-out) .38s forwards;
}

/* ---------- Phong thư + mây + nón ---------- */
.cover__env{
  position:relative;
  width:332px; height:234px;
  /* chỉnh màu chung cho cả thân thư lẫn nắp thư — phải giống hệt nhau */
  --env-tone:saturate(1.05) contrast(1.03);
}

.cover__envShell{
  position:absolute; inset:0;
  perspective:820px;
  opacity:0; transform:translateY(24px) scale(.93);
  animation:envIn 1s var(--ease-out) .55s forwards,
            envRock 5.6s ease-in-out 1.7s infinite;
}
.cover__envImg{
  position:absolute; inset:0;
  width:100%; height:100%;
  filter:var(--env-tone)
         drop-shadow(0 2px 3px rgba(122,74,58,.28))
         drop-shadow(0 18px 30px rgba(122,74,58,.42));
}

/* Bóng của nắp thư in xuống thân thư khi nắp bật lên */
.cover__shade{
  position:absolute; inset:0;
  clip-path:polygon(-3% 3.2%, 103% -0.4%, 50% 68%);
  background:linear-gradient(180deg, rgba(92,58,44,.5), rgba(92,58,44,.14) 48%, rgba(92,58,44,0) 80%);
  opacity:0; transition:opacity .5s ease .2s;
  pointer-events:none;
}
/* Nắp thư: cắt đúng hình tam giác của nắp trên ảnh, lật quanh mép trên */
.cover__flap{
  position:absolute; inset:0;
  background:url('../assets/cover-envelope.jpg') 0 0 / 100% 100% no-repeat;
  clip-path:polygon(-3% 3.2%, 103% -0.4%, 50% 68%);
  transform-origin:50% 0;
  transform:rotateX(0deg);
  transition:transform 1.05s cubic-bezier(.55,.05,.2,1);
  will-change:transform;
  pointer-events:none;
  filter:var(--env-tone);
}
/* Vầng sáng ấm toả ra từ miệng thư khi mở */
.cover__bloom{
  position:absolute; left:50%; top:64%;
  width:264px; height:152px; margin:-76px 0 0 -132px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,222,.92), rgba(255,226,190,.4) 42%, rgba(255,226,190,0) 72%);
  opacity:0; transform:scale(.6);
  transition:opacity .6s ease, transform .9s var(--ease-out);
  pointer-events:none;
}
/* Quầng sáng trên con dấu sáp (dấu thật đã vẽ sẵn trong ảnh) */
.cover__seal{
  position:absolute; left:49.8%; top:71.6%;
  width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,232,178,.9), rgba(255,208,130,.35) 45%, rgba(255,208,130,0) 70%);
  opacity:0;
  animation:sealGlow 3.4s ease-in-out 2.2s infinite;
  pointer-events:none;
}
/* Mây trôi — bọc ngoài lo phần hiện ra, ảnh bên trong lo phần trôi */
.cover__cloud{
  position:absolute;
  opacity:0; transform:translateY(10px);
  animation:riseIn .9s var(--ease-out) .95s forwards;
  pointer-events:none;
}
.cover__cloud img{ width:100%; height:100%; filter:drop-shadow(0 3px 7px rgba(122,74,58,.16)) }
.cover__cloud--a{ left:232px;  top:189px;   width:145.5px; height:70.4px }
.cover__cloud--b{ left:7.4px;  top:157px;   width:80.7px;  height:45.9px }
.cover__cloud--a img{ animation:cloudA 12s ease-in-out 1.9s infinite }
.cover__cloud--b img{ animation:cloudB 9.5s ease-in-out 2.2s infinite }

/* Nón lá xoay chậm + nhấp nhô */
.cover__hat{
  position:absolute; left:-22.8px; top:181.3px;
  width:75.1px; height:74.8px;
  opacity:0; transform:translateY(10px);
  animation:riseIn .9s var(--ease-out) 1.1s forwards;
  pointer-events:none;
}
.cover__hat img{
  width:100%; height:100%;
  filter:drop-shadow(0 5px 10px rgba(122,74,58,.3));
  animation:hatSpin 30s linear 1.9s infinite;
}

/* ---------- Dòng "ẤN ĐỂ MỞ THIỆP" nhấp nháy ---------- */
.cover__hint{
  font-family:var(--f-lemon); font-weight:380;
  font-size:14px; letter-spacing:.06em;
  color:var(--c-rose);
  opacity:0;
  animation:hintIn .9s var(--ease-out) 1.35s forwards,
            hintBlink 1.5s ease-in-out 2.3s infinite;
}

/* ---------- Trạng thái: đang bẻ niêm phong, nắp thư bật lên ---------- */
.cover.is-breaking .cover__seal{ animation:sealBurst .7s var(--ease-out) forwards }
.cover.is-breaking .cover__flap{ transform:rotateX(-86deg) }
.cover.is-breaking .cover__shade{ opacity:1 }
.cover.is-breaking .cover__bloom{ opacity:1; transform:scale(1.25); transition-delay:.35s }
.cover.is-breaking .cover__hint{ animation:none; opacity:0; transition:opacity .3s }

/* ---------- Trạng thái: mở ra 2 bên ---------- */
body.is-open .cover{ pointer-events:none }
body.is-open .cover__card{
  opacity:0;
  transform:translate(-50%,-50%) scale(calc(var(--cover-scale) * 1.16));
  filter:blur(7px);
  transition-delay:0s;
}
body.is-open .cover__door--l{ transform:translateX(-101%) }
body.is-open .cover__door--r{ transform:translateX(101%) }
body.is-done .cover{ visibility:hidden }

/* ============================================================
   Nút nhạc nền
   ============================================================ */
.music{
  position:fixed; right:14px; bottom:16px; z-index:80;
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.86);
  box-shadow:0 6px 18px -6px rgba(43,94,100,.55), inset 0 0 0 1px rgba(43,94,100,.18);
  backdrop-filter:blur(6px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease-out), background .3s ease, opacity .3s ease;
}
.music[hidden]{ display:none }
.music:hover{ transform:scale(1.07) }
.music:active{ transform:scale(.94) }

/* 4 vạch cân bằng, nhảy khi đang phát */
.music__bars{
  display:flex; align-items:flex-end; gap:3px;
  height:17px;
}
.music__bars i{
  width:3px; border-radius:2px;
  background:var(--c-teal);
  height:5px;
  transform-origin:bottom;
}
.music.is-on .music__bars i{ animation:eq .9s ease-in-out infinite }
.music.is-on .music__bars i:nth-child(1){ animation-delay:0s;    height:17px }
.music.is-on .music__bars i:nth-child(2){ animation-delay:.18s;  height:11px }
.music.is-on .music__bars i:nth-child(3){ animation-delay:.36s;  height:17px }
.music.is-on .music__bars i:nth-child(4){ animation-delay:.54s;  height:8px  }

/* Gạch chéo khi tắt */
.music__slash{
  position:absolute;
  width:26px; height:2px; border-radius:2px;
  background:var(--c-rose);
  transform:rotate(-45deg) scaleX(0);
  transform-origin:center;
  transition:transform .32s var(--ease-out);
}
.music:not(.is-on) .music__slash{ transform:rotate(-45deg) scaleX(1) }
.music:not(.is-on) .music__bars i{ opacity:.4 }

/* ============================================================
   Lớp phủ: cánh hoa bay + thanh tiến trình
   ============================================================ */
.petals{
  position:fixed; inset:0; z-index:60;
  width:100%; height:100%;
  pointer-events:none;
}
.progress{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:3px;
  background:rgba(90,18,28,.08);
  opacity:0; transition:opacity .5s ease;
}
body.is-open .progress{ opacity:1 }
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--c-rose), var(--c-red));
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:1 }
  50%    { transform:translateY(12px); opacity:.25 }
}
@keyframes drift{
  0%,100%{ transform:translateX(0) }
  50%    { transform:translateX(14px) }
}
@keyframes floatX{
  0%,100%{ transform:translateX(0) translateY(0) }
  50%    { transform:translateX(18px) translateY(-6px) }
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%    { transform:translateY(-7px) rotate(1.6deg) }
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes eq{
  0%,100%{ transform:scaleY(.35) }
  50%    { transform:scaleY(1) }
}
@keyframes galleryTimer{
  from{ width:0 }
  to  { width:100% }
}
@keyframes clipBreathe{
  from{ transform:scale(1.02) }
  to  { transform:scale(1.09) }
}
@keyframes sweep{
  0%,100%{ transform:translate(-22%,-8%) scale(.9); opacity:.55 }
  50%    { transform:translate(20%,10%) scale(1.15); opacity:.9 }
}
@keyframes shine{
  0%     { left:-60% }
  55%,100%{ left:130% }
}
@keyframes riseIn{ to{ opacity:1; transform:none } }
@keyframes envIn{
  0%  { opacity:0; transform:translateY(24px) scale(.93) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}
@keyframes envRock{
  0%,100%{ transform:translateY(0)    rotate(0deg) }
  25%    { transform:translateY(-3px) rotate(1.6deg) }
  50%    { transform:translateY(0)    rotate(0deg) }
  75%    { transform:translateY(-3px) rotate(-1.6deg) }
}
@keyframes cloudA{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%    { transform:translate(-14px,-7px) scale(1.035) }
}
@keyframes cloudB{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%    { transform:translate(12px,5px) scale(.97) }
}
@keyframes hatSpin{
  0%  { transform:translateY(0)    rotate(0deg) }
  25% { transform:translateY(-5px) rotate(90deg) }
  50% { transform:translateY(0)    rotate(180deg) }
  75% { transform:translateY(5px)  rotate(270deg) }
  100%{ transform:translateY(0)    rotate(360deg) }
}
@keyframes sealGlow{
  0%,100%{ opacity:.14; transform:scale(.9) }
  50%    { opacity:.6;  transform:scale(1.14) }
}
@keyframes sealBurst{
  0%  { opacity:.8; transform:scale(.9) }
  40% { opacity:1;  transform:scale(1.8) }
  100%{ opacity:0;  transform:scale(3.1) }
}
@keyframes hintBlink{
  0%,100%{ opacity:1;   transform:scale(1);    text-shadow:0 0 0 rgba(220,117,134,0) }
  50%    { opacity:.22; transform:scale(1.05); text-shadow:0 0 16px rgba(220,117,134,.6) }
}
@keyframes hintIn{ to{ opacity:1 } }
@keyframes pinPulse{
  0%  { box-shadow:0 0 0 0 rgba(205,17,17,.45) }
  70% { box-shadow:0 0 0 16px rgba(205,17,17,0) }
  100%{ box-shadow:0 0 0 0 rgba(205,17,17,0) }
}
@keyframes tick{
  0%  { transform:translateY(-6px); opacity:.25 }
  100%{ transform:translateY(0); opacity:1 }
}

/* ============================================================
   Màn hình nhỏ / giảm chuyển động
   ============================================================ */
@media (max-width:380px){
  :root{ --thumb:66px }
  .hero{ height:520px }
  .hero__names{ font-size:31px; line-height:36px }
  .script{ font-size:34px }
  .event__venue{ font-size:16px; line-height:26px }
}

@media (min-width:520px){
  /* Trên máy tính: nút điều hướng ảnh phóng lớn to hơn, tách xa ảnh */
  .lb__stage{ padding:72px 88px }
  .lb__btn--prev{ left:24px }
  .lb__btn--next{ right:24px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
  .stagger > *{ opacity:1; transform:none }
  .cover__invite,.cover__names,.cover__hint,
  .cover__cloud,.cover__hat,.cover__envShell{ opacity:1; transform:none }
  .cover__seal,.cover__bloom{ display:none }
  .petals{ display:none }
}