/*
  Thiệp cưới Anh Khoa & Hồng Hiếu
  Layout: editorial split on porcelain white. Navy ink, a single rose.
  Motion: one hero entrance, then everything else is driven by scroll position
  (words of the invitation light up, album photos unveil, closing photo settles).
*/
:root {
  --bg: #12151d;
  --paper: #1a1e29;
  --ink: #ece9e6;
  --mute: #a3a7b3;
  --line: #343a49;
  --rose: #d493a1;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
  --max: 1120px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
h1, h2, p, dl, dd, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--rose); transform: scaleX(0); transform-origin: left; }

.bar {
  max-width: var(--max); margin-inline: auto; padding: 22px var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 400; color: var(--mute);
}
.mono { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: .06em; }
.kicker { font-size: 15px; color: var(--mute); font-weight: 400; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max); margin-inline: auto; padding: 8px var(--gutter) 80px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 300; line-height: 1;
  font-size: clamp(50px, 14vw, 104px); letter-spacing: -.015em; margin: 16px 0 30px; white-space: nowrap;
}
.ln { display: block; overflow: hidden; padding: .14em 0 .06em; margin-block: -.1em; }
.ln > span { display: block; }
.ln.amp { font-style: italic; font-size: .42em; color: var(--rose); padding-left: .2em; margin-block: -.04em; }
.meta { display: grid; gap: 0; border-top: 1px solid var(--line); }
.meta div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.meta dt { color: var(--mute); font-weight: 400; }
.meta dd { margin: 0; }
.hero-photo { aspect-ratio: 2 / 3; max-height: 780px; overflow: hidden; background: var(--paper); }
.hero-photo img { object-position: 50% 42%; transform: scale(1.12); will-change: transform; }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: end; }
}

/* Entrance, played once on load */
.motion .hero .kicker { animation: rise .9s .1s cubic-bezier(.2,.7,.2,1) both; }
.motion .hero .ln > span { animation: lift 1.15s cubic-bezier(.2,.8,.2,1) both; }
.motion .hero .ln:nth-child(1) > span { animation-delay: .2s; }
.motion .hero .ln:nth-child(2) > span { animation-delay: .38s; }
.motion .hero .ln:nth-child(3) > span { animation-delay: .5s; }
.motion .hero .meta { animation: rise 1s .85s cubic-bezier(.2,.7,.2,1) both; }
.motion .hero-photo { animation: curtain 1.5s .15s cubic-bezier(.7,0,.15,1) both; }
@keyframes lift { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Invitation ---------- */
.invite {
  max-width: var(--max); margin-inline: auto; padding: 96px var(--gutter);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
}
.lead { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.16; text-wrap: balance; }
.lead .w { transition: none; }
.ring { aspect-ratio: 4 / 5; width: min(100%, 340px); overflow: hidden; background: var(--paper); }
.ring img { transform: scale(1.18); will-change: transform; }
@media (min-width: 860px) {
  .invite { grid-template-columns: 1.45fr .55fr; gap: 88px; }
  .ring { justify-self: end; }
}

/* ---------- Details ---------- */
.when { max-width: var(--max); margin-inline: auto; padding: 24px var(--gutter) 104px; display: grid; gap: 56px; }
.row { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding-block: 24px; align-items: baseline; }
.row::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line); transform-origin: left; }
.row:last-child::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); }
.js.motion .row::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.6,0,.2,1); }
.js.motion .row.in::before { transform: scaleX(1); }
.k { font-size: 14px; color: var(--mute); font-weight: 400; }
.big { font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.1; font-weight: 400; display: block; }
.row small { display: block; font-size: 15px; color: var(--mute); margin-top: 8px; font-weight: 300; }
.btn {
  display: inline-block; margin-top: 20px; padding: 13px 24px; border: 1px solid var(--ink);
  text-decoration: none; font-size: 14px; font-weight: 400; transition: background .25s, color .25s;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--bg); outline-offset: 3px; }

.left { min-width: 0; }
.map { margin-top: 28px; height: clamp(220px, 34vw, 300px); background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.7); }

.cal { background: var(--paper); padding: 28px; width: min(100%, 380px); }
.cal h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.grid > span { aspect-ratio: 1; display: grid; place-items: center; color: var(--mute); position: relative; }
.grid .dow { aspect-ratio: auto; font-size: 12px; padding-bottom: 8px; font-weight: 400; }
.grid .on { color: var(--bg); font-weight: 500; z-index: 0; }
.grid .on b { font-weight: 500; position: relative; z-index: 1; }
.grid .on::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rose); z-index: 0; }
.js.motion .cal:not(.in) .on::before { transform: scale(0); }
.js.motion .cal.in .on::before { animation: pop .9s .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (min-width: 860px) { .when { grid-template-columns: 1.3fr .7fr; gap: 88px; align-items: start; } }

/* ---------- Album: plain vertical scroll, staggered layout ---------- */
.album { max-width: var(--max); margin-inline: auto; padding: 88px var(--gutter) 104px; border-top: 1px solid var(--line); }
.album-title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; margin-bottom: 40px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.g { margin: 0; overflow: hidden; background: var(--paper); aspect-ratio: 2 / 3; }
.g.a1 { grid-column: 1 / -1; aspect-ratio: 4 / 3.6; }
@media (max-width: 859px) { .g:nth-child(even):not(.a1) { margin-top: 36px; } }
.g img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.js.motion .g { clip-path: inset(12% 0 0 0); opacity: 0; transition: clip-path 1.1s cubic-bezier(.6,0,.2,1), opacity .6s ease; }
.js.motion .g img { transform: scale(1.18); }
.js.motion .g.in { clip-path: inset(0 0 0 0); opacity: 1; }
.js.motion .g.in img { transform: scale(1); }
@media (min-width: 860px) {
  .gallery { grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .g.a1 { grid-column: 1 / 8; aspect-ratio: 4 / 4.4; }
  .g.a2 { grid-column: 9 / 13; align-self: end; }
  .g.a3 { grid-column: 1 / 5; }
  .g.a4 { grid-column: 5 / 9; margin-top: 90px; }
  .g.a5 { grid-column: 9 / 13; margin-top: 30px; }
  .g.a6 { grid-column: 2 / 7; margin-top: 20px; }
  .g.a7 { grid-column: 7 / 12; margin-top: 110px; }
}

/* ---------- Closing ---------- */
.end { position: relative; min-height: min(92svh, 760px); display: grid; align-items: start; color: #fff; overflow: hidden; }
.end-bg { position: absolute; inset: 0; }
.end-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,14,22,.82), rgba(12,14,22,.05) 55%); }
.end-bg img { object-position: 50% 38%; transform: scale(1.18); will-change: transform; }
.end-in { position: relative; max-width: var(--max); width: 100%; margin-inline: auto; padding: 72px var(--gutter) 40px; }
.end h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 7vw, 76px); line-height: 1.05; margin: 8px 0 14px; }
.end .kicker { color: rgba(255,255,255,.85); }
.end p:last-child { max-width: 44ch; font-size: 15px; color: rgba(255,255,255,.9); font-weight: 300; }

.foot { max-width: var(--max); margin-inline: auto; padding: 28px var(--gutter) 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mute); }

@media (min-width: 860px) {
  .end-in { text-align: right; }
  .end p:last-child { margin-left: auto; }
  .end-bg::after { background: linear-gradient(to left, rgba(12,14,22,.78), rgba(12,14,22,0) 62%); }
}

/* ---------- RSVP ---------- */
.rsvp { border-top: 1px solid var(--line); }
.rsvp-in { max-width: var(--max); margin-inline: auto; padding: 88px var(--gutter) 96px; display: grid; gap: 40px; }
.rsvp-head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; margin: 8px 0 14px; }
.rsvp-sub { color: var(--mute); max-width: 36ch; }
.form { display: grid; gap: 22px; max-width: 520px; }
.fld { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fld > span, .fld legend { font-size: 14px; color: var(--mute); font-weight: 400; padding: 0; }
.form input[type=text], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; transition: border-color .2s;
}
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--rose); }
.form ::placeholder { color: #6b7080; }
.choice { gap: 10px; }
.choice label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color .2s; }
.choice label:has(input:checked) { border-color: var(--rose); }
.choice input { accent-color: var(--rose); width: 18px; height: 18px; margin: 0; }
.choice span { font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.send { justify-self: start; margin-top: 4px; background: var(--rose); border-color: var(--rose); color: var(--bg); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.send:hover, .send:focus-visible { background: var(--ink); border-color: var(--ink); }
.send[disabled] { opacity: .6; cursor: wait; }
.status { min-height: 1.6em; font-size: 15px; margin: 0; }
.status.ok { color: var(--rose); }
.status.err { color: #e59a8f; }
.form.hide-guests #guestsFld { display: none; }
@media (min-width: 860px) { .rsvp-in { grid-template-columns: .8fr 1.2fr; gap: 88px; align-items: start; } }