/* =========================================================================
   Undangan Akad — Hanny & Luis
   Palette: sage · ivory · jade, with soft gold accents (Chinese-inspired)
   Fonts:  Bpmf Zihi Kai Std (Kai / body + Chinese) · Monsieur La Doulaise (script)
   ========================================================================= */
:root {
  --sage:        #9fb18c;
  --sage-soft:   #b7c4a6;
  --sage-deep:   #7d9270;
  --jade:        #3f6b52;
  --jade-deep:   #2c4a39;
  --ivory:       #f7f2e6;
  --ivory-2:     #efe6d3;
  --ink:         #333a30;
  --muted:       #6f7663;
  --gold:        #b79b6e;
  --gold-soft:   #cdb68d;

  --phone: 500px;

  --f-display: "Bpmf Zihi Kai Std", serif;
  --f-body:    "Bpmf Zihi Kai Std", serif;
  --f-script:  "Monsieur La Doulaise", cursive;
  --f-cn:      "LXGW WenKai TC", serif;
  --f-xi:      "Noto Sans TC", sans-serif;      /* the 囍 double-happiness glyph */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.bold-display {
  font-family: "Noto Serif", serif !important;
  font-weight: 700 !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--jade-deep);
  overflow: hidden;                 /* page itself never scrolls */
  font-synthesis: none;             /* Kai font is single-weight — no faux bold */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Paper grain over the whole viewport ---------- */
.paper-texture {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("assets/img/texture-web.jpg");
  background-size: cover;
  background-position: center;
}

/* ---------- Stage: desktop = side pane + phone column ---------- */
.stage {
  display: flex;
  height: 100vh;
  height: 100dvh;
}

/* Left decorative pane (desktop only, static) */
.side-pane {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: none;                    /* shown at >= 900px */
}
.side-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.2);
  opacity: 0.1;
  transform: scale(1.05);
}
.side-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(44,74,57,0.35), rgba(44,74,57,0.65)),
    radial-gradient(120% 80% at 30% 20%, rgba(159,177,140,0.25), transparent 60%);
}
.side-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem; color: var(--ivory); text-align: center;
}
.side-mark {
  font-family: var(--f-xi);
  font-size: 5rem; line-height: 1;
  color: var(--gold-soft);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  margin-bottom: 0.5rem;
}
.side-vertical { display: flex; flex-direction: column; gap: 0.5rem; }
.side-names { font-family: var(--f-script); font-size: 4.8rem; line-height: 1; }
.gold-amp { color: var(--gold-soft); }
.side-date { letter-spacing: 0.4em; font-size: 1.25rem; opacity: 0.9; padding-left: 0.4em; margin-top: 2rem }
.side-tag {
  letter-spacing: 0.35em; text-transform: uppercase;
  font-size: 1rem; opacity: 0.75;
  margin-top: -1rem;
}

/* ---------- The invitation column (also the scroll container) ----------
   Fades in once on load (the left pane stays static). */
.invite {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  background: var(--ivory);
  overflow-y: scroll;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  box-shadow: 0 0 60px rgba(0,0,0,0.25);
  animation: inviteIn 2s var(--ease) both;
}
.invite::-webkit-scrollbar { display: none; }
.invite.is-locked { overflow: hidden; }         /* locked until "open" */
.invite.no-snap { scroll-snap-type: none; }     /* while auto-scrolling */
@keyframes inviteIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Screens ---------- */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.75rem;
  scroll-snap-align: start;
}
.screen > .reveal, .cover-frame { width: 100%; max-width: 440px; }

/* =========================================================================
   PAGE-TRANSITION reveal — children fade + rise in sequence as a screen
   scrolls into view (the main transition between pages).
   ========================================================================= */
.reveal > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-visible > * { opacity: 1; transform: none; }
.reveal.is-visible > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal.is-visible > *:nth-child(2)  { transition-delay: 0.07s; }
.reveal.is-visible > *:nth-child(3)  { transition-delay: 0.14s; }
.reveal.is-visible > *:nth-child(4)  { transition-delay: 0.21s; }
.reveal.is-visible > *:nth-child(5)  { transition-delay: 0.28s; }
.reveal.is-visible > *:nth-child(6)  { transition-delay: 0.35s; }
.reveal.is-visible > *:nth-child(7)  { transition-delay: 0.42s; }
.reveal.is-visible > *:nth-child(8)  { transition-delay: 0.49s; }
.reveal.is-visible > *:nth-child(9)  { transition-delay: 0.56s; }
.reveal.is-visible > *:nth-child(10) { transition-delay: 0.63s; }
.reveal.is-visible > *:nth-child(11) { transition-delay: 0.70s; }
.reveal.is-visible > *:nth-child(12) { transition-delay: 0.77s; }

/* Shared Chinese accent label */
.cn-label {
  font-family: var(--f-cn);
  font-size: 1.05rem; letter-spacing: 0.35em;
  color: var(--gold); padding-left: 0.35em;
  margin-bottom: 0.3rem;
}

/* =========================================================================
   SCREEN 0 — COVER
   ========================================================================= */
.cover { overflow: hidden; color: var(--ink); }
.cover-bg {
  position: absolute; inset: 0;
  background: 
    url("assets/img/painting3.png") no-repeat center/cover;
  transform: scale(1.2);
}
.cover-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(126,146,112,0.86), rgba(93,112,80,0.92)),
    radial-gradient(90% 60% at 50% 30%, rgba(247,242,230,0.25), transparent 70%);
}
.cover-frame {
  position: relative; z-index: 2;
  padding: 2.6rem 1.6rem;
  border: 1px solid rgba(247,242,230,0.55);
  outline: 1px solid rgba(247,242,230,0.35);
  outline-offset: 6px;
  color: var(--ivory);
}
.monogram {
  display: inline-block;
  font-family: var(--f-xi);
  font-size: 3.8rem; line-height: 1;
  color: var(--gold-soft);
}
.eyebrow {
  margin-top: 1rem;
  font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase;
  opacity: 0.85;
}
.names-script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(3.8rem, 18vw, 5.2rem);
  line-height: 1; margin: 0.5rem 0 0.3rem;
}
.rule {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  opacity: 0.85; margin: 0.5rem 0 1.1rem;
}
.rule span { height: 1px; width: 34px; background: currentColor; opacity: 0.6; }
.cover-date { letter-spacing: 0.34em; font-size: 1rem; }
.cover-cn {
  font-family: var(--f-cn);
  margin-top: 0.9rem;
  font-size: 1.1rem; letter-spacing: 0.25em;
  color: var(--gold-soft); padding-left: 0.25em;
}

.to-block { margin: 2rem 0 1.6rem; }
.to-label { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.8; }
.to-name {
  font-family: var(--f-display);
  font-size: 1.6rem; margin-top: 0.35rem;
}

.open-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.9rem;
  border: none; border-radius: 999px;
  background: var(--ivory); color: var(--jade);
  font-family: var(--f-body); font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
.open-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.34); }

/* =========================================================================
   SCREEN 1 — FORMAL INVITATION
   ========================================================================= */
.invitation { background: var(--ivory); }
.bismillah {
  font-family: var(--f-display);
  font-size: 1.5rem; color: var(--jade);
  direction: rtl;
}
.bismillah-cn {
  font-family: var(--f-cn);
  font-size: 1rem; letter-spacing: 0.12em;
  color: var(--sage-deep); margin-bottom: 1.1rem;
}
.salam {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.05rem; color: var(--sage-deep); margin-bottom: 1.2rem;
}
.lead { color: var(--muted); line-height: 1.5; font-size: 0.95rem; }

.moon {
  width: 210px; height: 210px; margin: 2rem auto;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 8px var(--ivory), 0 0 0 9px rgba(183,155,110,0.4),
              0 18px 40px rgba(0,0,0,0.18);
  margin-bottom: 4rem; 
}
.moon img { width: 100%; height: 100%; object-fit: cover; display: block;}

.couple-container {
  margin-top: 1.8rem;
}
.couple-name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}
.couple-and {
  font-family: var(--f-script);
  font-size: 2.2rem;
  color: var(--gold);
  margin: 0.1rem 0;
  line-height: 1;
}

.invited-cn {
  font-family: var(--f-cn);
  font-size: 1.15rem; letter-spacing: 0.3em;
  color: var(--gold); padding-left: 0.3em; margin-bottom: 0.3rem;
}
.invited-tag {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-deep);
}
.big-date {
  font-family: var(--f-display);
  font-weight: bold;
  font-size: clamp(2.6rem, 13vw, 3.6rem); letter-spacing: 0.12em;
  color: var(--ink); margin: 0.2rem 0; white-space: nowrap;
}
.date-long { color: var(--muted); letter-spacing: 0.14em; margin-bottom: 1.8rem; }

.countdown { display: flex; justify-content: center; gap: 0.6rem; }
.cd-box {
  min-width: 62px; padding: 0.7rem 0.4rem;
  background: var(--ivory-2);
  border: 1px solid rgba(183,155,110,0.35);
  border-radius: 10px;
}
.cd-num {
  display: block; font-family: var(--f-display);
  font-size: 1.7rem; line-height: 1; color: var(--jade);
}
.cd-lab {
  display: block; margin-top: 0.35rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}

/* =========================================================================
   SCREEN 2 — LOCATION + DRESSCODE
   ========================================================================= */
.datetime {
  position: relative;
  isolation: isolate;
  background: var(--ivory-2);
  overflow: hidden;
}
.datetime::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: 
    linear-gradient(rgba(239, 230, 211, 0.75), rgba(239, 230, 211, 0.93)),
    url("assets/img/painting1.png") no-repeat center/cover;
  transform: scale(1.2);
  pointer-events: none;
}
.location { background: var(--ivory); }
.dresscode {
  position: relative;
  isolation: isolate;
  background: var(--ivory-2);
  overflow: hidden;
}
.dresscode::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: 
    linear-gradient(rgba(239, 230, 211, 0.75), rgba(239, 230, 211, 0.93)),
    url("assets/img/painting2.png") no-repeat center/cover;
  transform: scale(1.2);
  pointer-events: none;
}
.mini-mark { font-family: var(--f-xi); font-size: 2.4rem; color: var(--gold); display: block; }
.section-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 7vw, 2.3rem); color: var(--ink);
  margin: 0.2rem 0 4rem;
}
.event-when { color: var(--muted); letter-spacing: 0.08em; margin-bottom: 1.4rem; }

.map-link {
  display: block;
  text-decoration: none;
  margin-bottom: 1.3rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.map-container {
  position: relative;
  width: 100%;
  height: 170px;
  background: var(--ivory-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  transition: filter 0.2s ease-out;
}
.map-link:hover .map-iframe {
  filter: brightness(0.9);
}
.map-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 74, 57, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.map-overlay span {
  color: var(--ivory);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--jade);
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-out;
  transform: translateY(10px);
}
.map-link:hover .map-overlay {
  opacity: 1;
}
.map-link:hover .map-overlay span {
  transform: translateY(0);
}

.venue-name { font-family: var(--f-display); font-size: 1.4rem; font-weight: bold;}
.venue-address { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 1.3rem; }

.btn {
  display: inline-block; padding: 0.7rem 2rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.76rem;
  text-decoration: none; border-radius: 999px;
  transition: background 0.1s ease-out, color 0.1s ease-out;
}
.btn.ghost { border: 1px solid var(--jade); color: var(--jade); }
.btn.ghost:hover { background: var(--jade); color: var(--ivory); }
.btn.ghost[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.divider-leaf { margin: 2.4rem 0; color: var(--gold); font-size: 1.1rem; letter-spacing: 0.5em; }

.dress-grid {
  display: flex; justify-content: center; gap: 2.5rem;
}
.dress-item { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.swatches { display: flex; gap: 0.4rem; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ivory-2), 0 0 0 5px rgba(183,155,110,0.5);
}
.dress-name { font-family: var(--f-display); font-size: 1.3rem; }
.dress-note {
  color: var(--muted); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Reminder note */
.note {
  margin-top: 2.6rem; padding: 1.4rem 1.3rem;
  border: 1px solid rgba(183,155,110,0.4);
  border-radius: 14px;
  background: rgba(247,242,230,0.5);
}
.note .cn-label { margin-bottom: 0.5rem; }
.note-text {
  color: var(--muted); font-size: 0.9rem;
  line-height: 1.75; font-style: italic;
}

/* =========================================================================
   SCREEN 3 — THANK YOU
   ========================================================================= */
.thanks {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ivory);
  background: linear-gradient(180deg, var(--jade), var(--jade-deep));
}
.thanks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: 
    radial-gradient(120% 80% at 50% 15%, rgba(159,177,140,0.28), transparent 60%),
    linear-gradient(180deg, rgba(44, 74, 57, 0.85), rgba(24, 44, 33, 0.92)),
    url("assets/img/painting4.png") no-repeat center/cover;
  transform: scale(1.15);
  pointer-events: none;
}
.thanks-content { position: relative; z-index: 2; max-width: 400px; }
.thanks-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 2.8rem); margin: 0.6rem 0 0.2rem;
}
.thanks-cn {
  font-family: var(--f-cn);
  font-size: 1.15rem; letter-spacing: 0.3em;
  color: var(--gold-soft); padding-left: 0.3em; margin-bottom: 1rem;
}
.thanks-lead { line-height: 1.8; font-size: 0.95rem; opacity: 0.92; }
.salam.light { color: var(--gold-soft); margin: 1.6rem 0 0.4rem; }
.names-script.light {
  font-family: var(--f-script); font-weight: 400;
  font-size: clamp(2.2rem, 8.5vw, 2.9rem);
}

/* =========================================================================
   MUSIC TOGGLE
   ========================================================================= */
.music-toggle {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--jade); color: var(--ivory);
  font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  display: none; place-items: center;
  transition: background 0.1s ease-out;
}
body.is-opened .music-toggle { display: grid; }
.music-toggle.playing { background: var(--jade-deep); }

/* =========================================================================
   DESKTOP LAYOUT
   ========================================================================= */
@media (min-width: 900px) {
  .side-pane { display: block; }
  .invite {
    width: var(--phone);
    flex: 0 0 var(--phone);
    margin: 0;
  }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .invite { animation: none; scroll-behavior: auto; }
  .reveal > * { opacity: 1; transform: none; transition: none; }
}