/* ══════════════════════════════════════════════════════════
   THIỆP ĐỎ NHUNG — sân khấu hoàng gia cổ điển
   Mai Trâm & Phú Hiếu
   ══════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  --crimson:#5e0f18; --wine:#3a0a12; --ink-dark:#1a0508; --black:#0a0304;
  --gold:#c9a227; --gold-soft:#e3c882; --gold-dim:#8f7433;
  --cream:#f0e4c8; --cream-dim:#c9b795;
  --serif:'CormorantGaramond',ui-serif,Georgia,serif;
  --script:'GreatVibes',cursive;
  --sans:'BeVietnamPro',ui-sans-serif,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --slow:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--cream);
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.9;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-soft)}

/* ══════════ SÂN KHẤU ══════════ */
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--black)}
/* phông nền hoa khô + nến */
#backdrop{
  position:absolute;inset:0;background:var(--ink-dark) url(img/backdrop.jpg) center/cover no-repeat;
  transform:scale(1.08);transition:transform 9s var(--slow);
}
#stage.open #backdrop{transform:scale(1)}
/* quầng sáng nến */
#stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 42%,rgba(201,162,39,.13),transparent 70%),
             radial-gradient(ellipse 120% 80% at 50% 50%,transparent 40%,rgba(10,3,4,.82) 100%);
}

/* ---- rèm nhung ---- */
.curtain{
  position:absolute;top:-2%;bottom:-2%;width:51%;
  background:var(--crimson) url(img/velvet.jpg) right center/cover no-repeat;
  transition:transform 2.6s var(--slow);will-change:transform;
  box-shadow:0 0 90px 30px rgba(10,3,4,.75);
}
.curtain.l{left:0;transform:translateX(0)}
.curtain.r{right:0;transform:scaleX(-1) translateX(0)}

/* Rèm mở nằm ở container RIÊNG, tầng trên mọi thứ — nếu để trong #stage
   (z-index:0) thì nó tạo stacking context và rèm không bao giờ che được
   khung oval ở #play (z-index:5). */
#openCurtain{position:fixed;inset:0;z-index:15;pointer-events:none}
#openCurtain.open .curtain.l{transform:translateX(-101%)}
#openCurtain.open .curtain.r{transform:scaleX(-1) translateX(-101%)}
/* gờ tối ở mép trong cho rèm có khối */
/* bóng đổ ở mép trong cho hai tấm rèm có khối, không còn nửa đen như trước */
.curtain::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 26%,transparent 88%,rgba(0,0,0,.3));
}

/* ══════════ KHUNG OVAL ══════════ */
#play{position:relative;z-index:5;min-height:100svh;display:grid;place-items:center;padding:24px 16px}
.oval{
  position:relative;width:min(86vw,420px);aspect-ratio:1/1.46;
  display:grid;place-items:center;text-align:center;
  opacity:0;transform:scale(.93);transition:opacity 1.6s var(--ease),transform 1.6s var(--ease);
}
.oval.in{opacity:1;transform:none}
.oval svg.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.oval .inner{
  position:relative;z-index:2;padding:13% 17%;width:100%;
  max-height:100%;overflow:hidden;
}

/* ---- các màn chữ trong khung ---- */
.scene{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  padding:13% 17%;opacity:0;visibility:hidden;
  transition:opacity 1.15s var(--ease),transform 1.15s var(--ease),visibility 1.15s;
  transform:translateY(14px);
}
.scene.on{opacity:1;visibility:visible;transform:none}
.scene > *{margin:0}
.replay{position:absolute;bottom:10%;left:calc(50% - 22px);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--gold-soft);cursor:pointer}
.replay svg{width:24px;height:16px;fill:currentColor}
.replay:focus-visible{outline:1px solid currentColor;outline-offset:2px;border-radius:50%}
.replay:disabled{visibility:hidden}
@media(prefers-reduced-motion:reduce){.replay{display:none}}
.hourglass{position:absolute;bottom:12%;left:calc(50% - 9px);width:18px;height:27px;color:var(--gold-soft);fill:currentColor;pointer-events:none}
.hourglass-frame{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.scene.on .hourglass{animation:hourglassTurn var(--scene-hold) linear forwards}
@keyframes hourglassTurn{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.hourglass{display:none}}
.stream-char{opacity:0}
.scene.on .stream-char{animation:streamChar .42s var(--ease) forwards;animation-delay:var(--stream-delay)}
@keyframes streamChar{from{opacity:0;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

.lbl{
  font-family:var(--sans);font-weight:300;font-size:9px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);padding-left:.42em;
}
.ttl{font-family:var(--serif);font-size:clamp(13px,3.4vw,16px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft)}
.names{font-family:var(--script);font-size:clamp(34px,10vw,50px);line-height:1.12;color:var(--cream)}
.amp{font-family:var(--serif);font-style:italic;font-size:.44em;color:var(--gold);display:block;margin:2px 0}
.dt{font-family:var(--serif);font-size:clamp(14px,3.6vw,17px);letter-spacing:.28em;color:var(--cream-dim)}
.sm{font-family:var(--serif);font-size:clamp(12.5px,3.2vw,15px);line-height:1.85;color:var(--cream-dim)}
.sm b{font-weight:400;color:var(--cream);letter-spacing:.04em}
.scene-place{width:100%;font-family:var(--serif);color:var(--cream-dim);text-align:center;overflow-wrap:normal}
.scene-place b{display:block;font-size:clamp(12px,3vw,14px);font-weight:400;line-height:1.4;letter-spacing:.03em;color:var(--cream)}
.scene-place span{display:block;margin-top:3px;font-size:clamp(11px,2.8vw,13px);line-height:1.45;text-wrap:balance}
.gap{height:clamp(10px,3vw,18px)}
.hr{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:clamp(9px,2.4vw,14px) auto}

/* màn kính mời — tách vai vế và tên để đọc rõ, không thành một khối chữ */
.guest-scene{gap:clamp(10px,2.7vw,16px)}
.guest-ornament{display:flex;align-items:center;width:min(42vw,170px);color:var(--gold-dim)}
.guest-ornament::before,.guest-ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor)}
.guest-ornament::after{transform:scaleX(-1)}
.guest-ornament span{width:7px;height:7px;margin:0 10px;border:1px solid var(--gold);transform:rotate(45deg)}
.guest-card{width:100%;padding:clamp(12px,3.5vw,20px) 8px;border-block:1px solid rgba(201,162,39,.32)}
.guest-role{font-family:var(--serif);font-size:clamp(17px,4.5vw,22px);line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);padding-left:.18em}
.guest-name{margin-top:3px!important;font-family:var(--script);font-size:clamp(38px,11vw,58px);line-height:1.15;color:var(--cream);text-wrap:balance}
body[data-universal="true"] .guest-name{margin:0!important}
.guest-note{font-family:var(--serif);font-size:clamp(11.5px,3vw,14px);font-style:italic;line-height:1.6;color:var(--cream-dim);text-wrap:balance}

/* monogram */
.mono{display:block;width:clamp(145px,42vw,210px);height:auto;margin:0 auto;position:relative;left:7px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}

/* ---- gợi ý cuộn ---- */
#cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim);
  text-align:center;pointer-events:none;animation:cueBlink 1.8s ease-in-out infinite;
}
#cue span{display:block;width:10px;height:10px;margin:8px auto 0;border-right:1px solid var(--gold-soft);
  border-bottom:1px solid var(--gold-soft);animation:cueArrow 1.8s ease-in-out infinite}
@keyframes cueBlink{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes cueArrow{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}}

/* ══════════ PHẦN CUỘN ══════════ */
#scroll{position:relative;z-index:4;background:linear-gradient(180deg,transparent,var(--ink-dark) 9%,var(--ink-dark) 91%,transparent)}
.sec{max-width:640px;margin:0 auto;padding:clamp(62px,11vw,110px) 22px;text-align:center;position:relative}
.eyebrow{font-family:var(--sans);font-weight:300;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;padding-left:.42em}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(23px,5.4vw,32px);margin:0;color:var(--cream);letter-spacing:.02em}
p{margin:0 0 1.05em}
.lead{color:var(--cream-dim);max-width:46ch;margin-inline:auto;font-size:14.5px}
.hotel-place{ text-align:center }
.hotel-logo{width:clamp(92px,25vw,125px);height:auto;margin:0 auto 12px}

/* thẻ viền vàng */
.panel{
  border:1px solid rgba(201,162,39,.26);background:rgba(58,10,18,.42) url(img/damask.jpg) center/420px repeat;background-blend-mode:overlay;
  padding:clamp(24px,6vw,42px);position:relative;
  backdrop-filter:blur(2px);
}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gold-dim)}
.panel::before{top:8px;left:8px;border-right:0;border-bottom:0}
.panel::after{bottom:8px;right:8px;border-left:0;border-top:0}

/* sự kiện */
.d{font-family:var(--serif);font-size:clamp(46px,12vw,72px);line-height:.95;color:var(--cream)}
.m{font-family:var(--serif);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)}
.h{font-family:var(--serif);font-size:clamp(18px,4.4vw,23px);letter-spacing:.2em;margin-top:10px;color:var(--cream)}
.lunar{font-size:11px;font-style:italic;color:var(--cream-dim);opacity:.8;letter-spacing:.08em}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,3vw,20px)}
.fr{position:relative;border-radius:999px 999px 4px 4px;overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 0 0 1px rgba(201,162,39,.32),0 18px 40px -20px #000}
.fr img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.fr.wide{border-radius:4px;aspect-ratio:auto}
.fr.wide img{display:block;height:auto}
.cap{font-family:var(--script);font-size:clamp(21px,5.4vw,30px);color:var(--cream);margin-top:10px}
.cap small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1px}

/* nút */
.btn{display:inline-block;margin-top:20px;padding:12px 28px;border:1px solid var(--gold-dim);
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;color:var(--gold-soft);
  background:none;cursor:pointer;transition:.5s var(--ease);font-family:var(--sans);font-weight:300}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-dark)}
.btn--solid{background:var(--gold);border-color:var(--gold);color:var(--ink-dark);font-weight:400}
.btn--solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}

/* QR mừng cưới */
.qr{width:min(58vw,190px);aspect-ratio:1;margin:0 auto 14px;border:1px solid rgba(201,162,39,.3);
  background:var(--cream);display:grid;place-items:center;padding:8px}
.qr img{display:block;width:100%;height:100%;object-fit:contain}
.acc{font-family:var(--serif);font-size:17px;letter-spacing:.09em;color:var(--cream);
  border-bottom:1px dashed var(--gold-dim);cursor:pointer;display:inline-block}

/* RSVP */
.form{display:grid;gap:15px;max-width:420px;margin:0 auto;text-align:left}
label{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
input,select,textarea{width:100%;padding:11px 2px;border:0;border-bottom:1px solid rgba(201,162,39,.3);
  background:none;font-family:var(--serif);font-size:16px;color:var(--cream);transition:border-color .4s var(--ease)}
textarea{resize:vertical;min-height:58px;line-height:1.7}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--gold)}
select{appearance:none;cursor:pointer}
select option{background:var(--wine);color:var(--cream)}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice input{display:none}
.choice label{flex:1;min-width:104px;text-align:center;padding:11px 6px;border:1px solid rgba(201,162,39,.28);
  cursor:pointer;font-family:var(--serif);font-size:14px;letter-spacing:.04em;color:var(--cream-dim);
  text-transform:none;margin:0;transition:.4s var(--ease)}
.choice input:checked+label{background:var(--gold);color:var(--ink-dark);border-color:var(--gold)}
#msg{margin-top:16px;font-size:13px;min-height:1.4em}
#msg.ok{color:var(--gold-soft)}#msg.err{color:#e08a7a}

/* ══════════ MÀN ĐÓNG RÈM ══════════ */
#finale{position:relative;z-index:5;height:100svh;display:grid;place-items:center;text-align:center}
#closeCurtain{position:fixed;inset:0;z-index:20;pointer-events:none}
#closeCurtain .curtain{transform:translateX(-101%);transition:transform 2.4s var(--slow)}
#closeCurtain .curtain.r{transform:scaleX(-1) translateX(-101%)}
#closeCurtain.shut .curtain.l{transform:translateX(0)}
#closeCurtain.shut .curtain.r{transform:scaleX(-1) translateX(0)}

/* ══════════ HIỆN DẦN ══════════ */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
[data-rv].in{opacity:1;transform:none}
[data-rv="l"]{transform:translateX(-56px);filter:blur(3px)}
[data-rv="r"]{transform:translateX(56px);filter:blur(3px)}
[data-rv="l"].in,[data-rv="r"].in{transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1!important;transform:none!important;filter:none!important}
  .curtain{transform:translateX(-101%)!important}
  .curtain.r{transform:scaleX(-1) translateX(-101%)!important}
  .stream-char{opacity:1!important}
}

/* chữ trong oval không bao giờ tràn qua đường viền */
.scene > *{max-width:100%;overflow-wrap:anywhere}
.scene .names{max-width:100%}