/* ════════════════════════════════════════════════════════════
   Tika & Herlan — Soft Sky Floral Invitation
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cinzel:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&family=Italianno&family=Pinyon+Script&family=Inter:wght@300;400;500;600&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

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

@font-face {
  font-family: 'Callem';
  src: url('uploads/fonts/Callem.woff2') format('woff2'),
       url('uploads/fonts/Callem.woff') format('woff'),
       url('uploads/fonts/Callem.ttf') format('truetype'),
       url('uploads/fonts/Callem.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Brightwall';
  src: url('uploads/fonts/Brightwall.woff2') format('woff2'),
       url('uploads/fonts/Brightwall.woff') format('woff'),
       url('uploads/fonts/Brightwall.ttf') format('truetype'),
       url('uploads/fonts/Brightwall.otf') format('opentype');
  font-display: swap;
}

:root {
  --font-display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-display-italic: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-callem: 'Callem', 'Great Vibes', 'Allura', cursive;
  --font-brightwall: 'Brightwall', 'Sacramento', 'Tangerine', cursive;
  --font-script: 'Italianno', 'Pinyon Script', cursive;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-roman: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #F8E4E4 0%, #EFCDCD 100%);
  color: #2B5276;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#root { width: 100%; height: 100%; }

.stage {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.bare-phone {
  width: 390px;
  height: 844px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(43,82,118,0.25),
              0 0 0 1px rgba(43,82,118,0.08);
  position: relative;
  background: #FFFFFF;
}

@media (max-width: 480px) {
  .stage { padding: 0; }
  .bare-phone { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

/* ────────────────────────────────────────────────────────────
   Invitation container
   ──────────────────────────────────────────────────────────── */
.invitation {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.invit-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(43,82,118,0.15) transparent;
  z-index: 2;
}
.invit-scroll::-webkit-scrollbar { width: 4px; }
.invit-scroll::-webkit-scrollbar-thumb { background: rgba(43,82,118,0.18); border-radius: 2px; }

.invit-body {
  position: relative;
  width: 100%;
}

/* ────────────────────────────────────────────────────────────
   Reveal animation
   ──────────────────────────────────────────────────────────── */
.sec, .event-card, .person, .wish, .gift-card, .qris-card, .map-card, .cd-cell, .rsvp-form, .rsvp-success, .quote-card {
  opacity: 1;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.invit-scroll[data-animate="1"] .sec,
.invit-scroll[data-animate="1"] .event-card,
.invit-scroll[data-animate="1"] .person,
.invit-scroll[data-animate="1"] .wish,
.invit-scroll[data-animate="1"] .gift-card,
.invit-scroll[data-animate="1"] .qris-card,
.invit-scroll[data-animate="1"] .map-card,
.invit-scroll[data-animate="1"] .cd-cell,
.invit-scroll[data-animate="1"] .rsvp-form,
.invit-scroll[data-animate="1"] .rsvp-success,
.invit-scroll[data-animate="1"] .quote-card {
  opacity: 0;
  transform: translateY(18px);
}
.invit-scroll[data-animate="1"] .in-view {
  opacity: 1;
  transform: none;
  animation-fill-mode: both;
}

/* ────────────────────────────────────────────────────────────
   Section base
   ──────────────────────────────────────────────────────────── */
.sec {
  position: relative;
  padding: 64px 24px;
  text-align: center;
}

.sec-head { margin-bottom: 28px; }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.sec-eyebrow i { width: 22px; height: 1px; }
.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 2px rgba(31,61,92,0.10);
}
.sec-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.sec-title em::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(244,216,138,0.55) 30%, rgba(244,216,138,0.55) 70%, transparent);
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
}

.ar-bismillah {
  font-family: var(--font-arabic);
  font-size: 24px;
  font-weight: 400;
  direction: rtl;
  letter-spacing: 0;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   1 · OPENING — arched panel with floral corners
   ════════════════════════════════════════════════════════════ */
.sec-opening {
  padding: 0;
  background: transparent;
  position: relative;
  min-height: 100%;
}

.arch-panel {
  position: relative;
  margin: 18px 14px 0;
  background: #FFFFFF;
  border-radius: 180px 180px 18px 18px;
  box-shadow: 0 12px 40px rgba(31,61,92,0.14),
              inset 0 0 80px rgba(244,216,138,0.10);
  overflow: visible;
  padding: 0 0 64px;
}

.arch-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(244,216,138,0.12), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
  pointer-events: none;
}

/* Floral corner clusters — overflow the arch */
.floral-corner {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.fc-tl { top: -34px; left: -60px; transform-origin: top left; opacity: 0.92; }
.fc-tr { top: -34px; right: -60px; opacity: 0.92; }
.fc-bl { bottom: -10px; left: -40px; opacity: 0.95; }
.fc-br { bottom: -10px; right: -40px; opacity: 0.95; }

.arch-inner {
  position: relative;
  z-index: 4;
  padding: 96px 28px 32px;
  text-align: center;
}

.arch-inner .ar-bismillah {
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.op-eyebrow {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

.op-couple-art {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
  position: relative;
  z-index: 2;
}
.couple-art-wrap {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.couple-art-glow {
  position: absolute;
  inset: -10% -8% -4%;
  filter: blur(8px);
  pointer-events: none;
}
.couple-photo {
  position: relative;
  width: 190px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(31,61,92,0.18));
  animation: couple-float 6s ease-in-out infinite alternate;
}
@keyframes couple-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

.op-date {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0 10px;
}
.op-date-day {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
}
.op-date-main {
  display: flex;
  align-items: center;
  gap: 14px;
}
.op-date-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(31,61,92,0.18);
}
.op-date-sep {
  width: 1px;
  height: 44px;
  opacity: 0.6;
}
.op-date-mo {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-align: left;
}

.op-names {
  font-family: var(--font-callem);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  margin: 10px 0 8px;
  text-shadow: 0 2px 6px rgba(31,61,92,0.18), 0 1px 1px rgba(31,61,92,0.1);
  position: relative;
  display: inline-block;
  padding: 0 12px;
  z-index: 1;
}
.op-names::before {
  content: '';
  position: absolute;
  inset: 30% -6px;
  background: linear-gradient(90deg, transparent, rgba(244,216,138,0.55) 30%, rgba(244,216,138,0.55) 70%, transparent);
  z-index: -1;
  filter: blur(6px);
}
.op-names em {
  font-family: var(--font-callem);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72em;
  margin: 0 6px;
  vertical-align: 0.1em;
}

.op-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
}

.op-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 18px;
}
.op-divider i {
  height: 1px;
  width: 50px;
  background: linear-gradient(90deg, transparent, currentColor, transparent) !important;
  opacity: 0.5;
}

.op-guest {
  margin-top: 10px;
  padding: 14px 12px 16px;
  position: relative;
}
.op-guest::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(244,216,138,0.18), transparent);
  border-top: 1px solid rgba(244,216,138,0.55);
  border-bottom: 1px solid rgba(244,216,138,0.55);
  pointer-events: none;
}
.op-guest-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  text-transform: uppercase;
  position: relative;
}
.op-guest-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  position: relative;
}
.op-guest-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(31,61,92,0.12);
  position: relative;
}
.op-guest-place {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  position: relative;
}

.arch-bottom-floral {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════
   2 · QUOTE
   ════════════════════════════════════════════════════════════ */
.sec-quote { position: relative; overflow: hidden; padding-top: 28px; padding-bottom: 36px; }
.quote-floral-top, .quote-floral-bot {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
}
.quote-floral-top { top: 6px; left: -10px; }
.quote-floral-bot { bottom: 6px; right: -10px; }

.quote-card {
  position: relative;
  border: 1px solid;
  padding: 44px 28px 32px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(43,82,118,0.07);
  border-radius: 0;
}
.quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 72px;
  line-height: 0.3;
  font-weight: 600;
  margin-top: 8px;
  opacity: 0.6;
}
.quote-arabic {
  font-family: var(--font-arabic);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
  margin: 18px 0 14px;
  text-shadow: 0 1px 2px rgba(31,61,92,0.08);
}
.quote-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  margin: 12px auto 14px;
  max-width: 300px;
}
.quote-ref {
  font-family: var(--font-roman);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.quote-orn {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
}
.quote-orn-tl { top: -6px; left: -6px; }
.quote-orn-tr { top: -6px; right: -6px; transform: scaleX(-1); }
.quote-orn-bl { bottom: -6px; left: -6px; transform: scaleY(-1); }
.quote-orn-br { bottom: -6px; right: -6px; transform: scale(-1,-1); }
.quote-divider {
  width: 60px;
  height: 1px;
  margin: 8px auto 14px;
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════
   3 · COUPLE
   ════════════════════════════════════════════════════════════ */
.couple-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.person {
  width: 100%;
  max-width: 320px;
}
.person-card {
  position: relative;
  padding: 36px 24px 28px;
  border: 1px solid;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(43,82,118,0.08);
}
.person-floral {
  position: absolute;
  pointer-events: none;
}
.person-floral[data-side="left"] { top: -14px; left: -14px; }
.person-floral[data-side="right"] { top: -14px; right: -14px; }

.portrait-wreath {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
}
.pw-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pw-photo {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31,61,92,0.18),
              inset 0 0 0 3px rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
.pw-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.pw-mono {
  font-family: var(--font-script);
  font-size: 78px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(31,61,92,0.12);
}
.person-role {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.person-name {
  font-family: var(--font-brightwall);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  text-shadow: 0 1px 3px rgba(31,61,92,0.12);
}
.person-parents-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.person-parents {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
.person-parents b { font-style: normal; font-weight: 600; }

.couple-amp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -12px 0;
  position: relative;
  z-index: 2;
}
.couple-line { width: 1px; height: 24px; }
.couple-amp {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  font-weight: 500;
  margin: -8px 0;
  box-shadow: 0 4px 12px rgba(43,82,118,0.15);
}

/* ════════════════════════════════════════════════════════════
   4 · EVENTS
   ════════════════════════════════════════════════════════════ */
.event-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.event-card {
  position: relative;
  padding: 28px 22px 24px;
  border: 1px solid;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 6px 20px rgba(43,82,118,0.08);
}
.event-card-corner {
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
}
.event-card-corner.ec-tl { top: -8px; left: -8px; }
.event-card-corner.ec-br { bottom: -8px; right: -8px; }
.event-type {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.event-bigdate { margin-bottom: 18px; }
.event-day-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.event-day {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 4px 0;
  text-shadow: 0 2px 6px rgba(31,61,92,0.15);
}
.event-month {
  font-family: var(--font-roman);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 500;
}
.event-divider {
  height: 1px;
  margin: 14px 0;
  opacity: 0.6;
}
.event-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
  text-align: left;
}
.event-row-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.event-row-label {
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}
.event-row-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.event-row-value b { font-weight: 600; }

.event-grid-single .event-card {
  max-width: 360px;
  margin: 0 auto;
}
.event-subs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-sub-divider {
  height: 1px;
  opacity: 0.55;
  margin: 4px 0 2px;
}
.event-sub-head {
  font-family: var(--font-roman);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
.event-sub .event-row { margin-bottom: 10px; }
.event-sub .event-row:last-child { margin-bottom: 0; }
.event-sub-maps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.event-sub-maps:hover { background: rgba(157,195,224,0.12); }

.map-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ════════════════════════════════════════════════════════════
   COUNTDOWN
   ════════════════════════════════════════════════════════════ */
.sec-countdown {
  position: relative;
  overflow: hidden;
  padding: 48px 24px 38px !important;
}
.cd-orn {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.cd-orn-tl { top: -22px; left: -22px; }
.cd-orn-tr { top: -22px; right: -22px; }
.cd-orn-bl { bottom: -14px; left: -14px; }
.cd-orn-br { bottom: -14px; right: -14px; }

.cd-heart, .cd-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  animation: cd-twinkle 3s ease-in-out infinite;
}
.cd-heart-l   { top: 38px; left: 30px;  animation-delay: 0s; }
.cd-heart-r   { top: 54px; right: 36px; animation-delay: 0.8s; }
.cd-sparkle-1 { top: 24px; right: 64px; animation-delay: 0.4s; }
.cd-sparkle-2 { bottom: 60px; left: 50px; animation-delay: 1.2s; }
@keyframes cd-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.cd-divider-orn {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
  opacity: 0.85;
}
.cd-floral {
  position: absolute;
  pointer-events: none;
  opacity: 0.35;
  top: 20px; left: -20px;
}
.cd-floral-r { top: auto; left: auto; bottom: 20px; right: -20px; }

.sec-countdown .sec-eyebrow { color: #003D7C !important; }
.sec-countdown .sec-eyebrow i { background: rgba(0,61,124,0.6) !important; }
.sec-countdown .sec-title { color: #003D7C !important; }
.sec-countdown .sec-title em { color: #003D7C !important; }

.cd-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cd-cell {
  position: relative;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 16px 6px 12px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.cd-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #003D7C;
  text-shadow: 0 1px 3px rgba(255,255,255,0.4);
}
.cd-lbl {
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 6px;
  color: rgba(0,61,124,0.85);
}
.cd-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  color: #003D7C;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(255,255,255,0.35);
}

/* ════════════════════════════════════════════════════════════
   5 · LOCATION
   ════════════════════════════════════════════════════════════ */
.map-card {
  border: 1px solid;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 8px 24px rgba(43,82,118,0.10);
}
.map-preview {
  height: 170px;
  position: relative;
  border-bottom: 1px solid;
  overflow: hidden;
}
.map-svg { width: 100%; height: 100%; display: block; }
.map-iframe { width: 100%; height: 100%; display: block; border: 0; filter: saturate(0.92) contrast(0.98); }
.map-body { padding: 22px 22px 22px; }
.map-tag {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.map-venue {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(31,61,92,0.10);
}
.map-addr {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 18px;
}
.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-roman);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 100px;
  transition: filter 0.2s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(43,82,118,0.2);
}
.map-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════
   6 · RSVP
   ════════════════════════════════════════════════════════════ */
.rsvp-intro {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rsvp-field > span {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}
.rsvp-field input, .rsvp-field select {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  border: 1px solid;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.rsvp-row { display: flex; gap: 10px; }
.rsvp-half { flex: 1; min-width: 0; }
.rsvp-radio-group { display: flex; flex-direction: column; gap: 8px; }
.rsvp-radio-label {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}
.rsvp-radio-row { display: flex; gap: 8px; }
.rsvp-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  padding: 10px 8px;
  cursor: pointer;
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s var(--ease-out);
}
.rsvp-pill input { display: none; }
.rsvp-pill.on { font-weight: 700; }

.rsvp-submit {
  margin-top: 8px;
  font-family: var(--font-roman);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(43,82,118,0.2);
}
.rsvp-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }

.rsvp-success {
  position: relative;
  border: 1px solid;
  padding: 36px 24px;
  text-align: center;
  overflow: hidden;
}
.rsvp-success-floral {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.rsvp-success-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 8px;
}
.rsvp-success-body {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   7 · WISHES
   ════════════════════════════════════════════════════════════ */
.wish-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}
.wish-form input, .wish-form textarea {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  border: 1px solid;
  padding: 11px 14px;
  outline: none;
  resize: vertical;
  border-radius: 0;
}
.wish-form button {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 12px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(43,82,118,0.2);
}

.wish-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.wish-list::-webkit-scrollbar { width: 4px; }
.wish-list::-webkit-scrollbar-track { background: transparent; }
.wish-list::-webkit-scrollbar-thumb { background: rgba(43,82,118,0.18); border-radius: 2px; }
.wish-list::-webkit-scrollbar-thumb:hover { background: rgba(43,82,118,0.32); }
.wish-list-meta {
  text-align: center;
  font-size: 11px;
  color: rgba(43,82,118,0.55);
  margin-top: 8px;
  letter-spacing: 0.06em;
}
.wish {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid;
  align-items: flex-start;
  box-shadow: 0 3px 10px rgba(43,82,118,0.05);
}
.wish.fresh { animation: fresh-bloom 1.2s var(--ease-out); }
@keyframes fresh-bloom {
  0% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.wish-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}
.wish-body { flex: 1; min-width: 0; }
.wish-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  letter-spacing: 0.02em;
}
.wish-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   8 · GIFT
   ════════════════════════════════════════════════════════════ */
.gift-stack { display: flex; flex-direction: column; gap: 16px; }
.gift-intro {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto 24px;
}
.gift-card {
  position: relative;
  border: 1px solid;
  padding: 22px 22px 20px;
  text-align: left;
  overflow: hidden;
  aspect-ratio: 1.65 / 1;
  box-shadow: 0 10px 28px rgba(43,82,118,0.18);
  border-radius: 14px;
}
.gift-floral {
  position: absolute;
  top: -10px; right: -10px;
  opacity: 0.5;
  pointer-events: none;
}
.gift-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.bank-logo { display: inline-flex; align-items: center; }
.bank-logo svg {
  display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  border-radius: 3px;
}
.gift-bank {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.gift-chip {
  width: 32px; height: 24px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.gift-num {
  font-family: var(--font-roman);
  font-size: 19px;
  letter-spacing: 0.18em;
  margin: 22px 0 18px;
  position: relative;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255,255,255,0.30);
}
.gift-bot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
.gift-label {
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  margin-bottom: 2px;
}
.gift-owner {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.gift-copy {
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid rgba(0,61,124,0.45);
  color: #003D7C;
  background: rgba(255,255,255,0.35);
  border-radius: 100px;
  cursor: pointer;
  transition: filter 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.gift-copy:hover { background: rgba(255,255,255,0.55); }

.qris-card {
  border: 1px solid;
  padding: 26px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(43,82,118,0.10);
}
.qris-label {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.qris-frame {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  padding: 10px;
  border: 2px solid;
  position: relative;
}
.qris-frame::before, .qris-frame::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
}
.qris-frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.qris-frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.qris-svg { width: 100%; height: 100%; display: block; }
.qris-foot {
  font-family: var(--font-roman);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 14px;
}

/* ════════════════════════════════════════════════════════════
   9 · CLOSING
   ════════════════════════════════════════════════════════════ */
.sec-closing {
  position: relative;
  padding: 80px 26px 96px;
  overflow: hidden;
  text-align: center;
}
.closing-floral {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
}
.closing-floral-tl { top: -20px; left: -30px; }
.closing-floral-tr { top: -20px; right: -30px; }
.closing-floral-bl { bottom: -10px; left: -24px; opacity: 0.45; transform: scaleY(-1); }
.closing-floral-br { bottom: -10px; right: -24px; opacity: 0.45; transform: scale(-1,-1); }

.closing-hamdalah {
  font-family: var(--font-arabic);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  opacity: 0.95;
}
.closing-orn {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
  opacity: 0.85;
}
.closing-signature {
  font-family: var(--font-script);
  font-size: 56px;
  line-height: 1;
  margin-top: 20px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.sec-closing .sec-eyebrow,
.closing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.closing-eyebrow i { width: 22px; height: 1px; }
.closing-names {
  font-family: var(--font-callem);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 14px;
  color: #003D7C;
  text-shadow: 0 2px 6px rgba(255,255,255,0.35), 0 1px 2px rgba(255,255,255,0.25);
}
.closing-names em {
  font-family: var(--font-callem);
  font-style: italic;
  font-size: 0.72em;
  margin: 0 6px;
  vertical-align: 0.12em;
}
.closing-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  max-width: 310px;
  margin: 18px auto;
  color: #003D7C;
  text-shadow: 0 1px 3px rgba(255,255,255,0.30);
}
.closing-salam {
  font-family: var(--font-roman);
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 600;
  margin-top: 16px;
  color: #003D7C;
  text-shadow: 0 1px 3px rgba(255,255,255,0.30);
}
.closing-couple {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 22px;
  color: rgba(0,61,124,0.75);
}
.closing-couple b {
  font-style: normal;
  font-weight: 600;
  color: #003D7C;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════
   FAB stack (right side)
   ════════════════════════════════════════════════════════════ */
.fab-stack {
  position: absolute;
  right: 14px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}
.fab, .music-pill {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(43,82,118,0.25);
  transition: transform 0.2s, filter 0.2s;
}
.fab:hover, .music-pill:hover { transform: scale(1.06); filter: brightness(1.08); }
.music-pill { padding: 0; }

/* ════════════════════════════════════════════════════════════
   Bottom nav
   ════════════════════════════════════════════════════════════ */
.bottom-nav {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  border-top: 1px solid;
  border-radius: 18px;
  z-index: 90;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 8px 2px 10px;
  gap: 0;
  box-shadow: 0 -4px 16px rgba(43,82,118,0.08), 0 8px 24px rgba(43,82,118,0.12);
  backdrop-filter: blur(8px);
}
.btn-tab {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  transition: color 0.2s;
  min-width: 0;
}
.btn-tab-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease-out);
}
.btn-tab-icon {
  display: flex;
  width: 20px;
  height: 20px;
}
.btn-tab-icon svg { width: 100%; height: 100%; }
.btn-tab-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.btn-tab.on .btn-tab-icon-wrap {
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════
   QR Modal
   ════════════════════════════════════════════════════════════ */
.qr-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(20, 38, 60, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: fade-in 0.25s var(--ease-out);
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.qr-modal {
  position: relative;
  border: 1px solid;
  padding: 32px 28px;
  text-align: center;
  border-radius: 18px;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  animation: pop-in 0.35s var(--ease-out);
}
@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.qr-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  font-weight: 300;
}
.qr-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
}
.qr-sub {
  font-family: var(--font-body);
  font-size: 12px;
  margin-bottom: 18px;
}
.qr-box {
  display: inline-block;
  padding: 10px;
  border: 2px solid;
  background: #FFFFFF;
  position: relative;
}
.qr-monogram {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', var(--font-serif, Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
  color: #003D7C;
  text-shadow:
    -1.5px -1.5px 0 #FFFFFF,
     1.5px -1.5px 0 #FFFFFF,
    -1.5px  1.5px 0 #FFFFFF,
     1.5px  1.5px 0 #FFFFFF,
    -2px 0 0 #FFFFFF, 2px 0 0 #FFFFFF,
    0 -2px 0 #FFFFFF, 0 2px 0 #FFFFFF;
  pointer-events: none;
  -webkit-text-stroke: 0.5px #FFFFFF;
}
.qr-tap-hint {
  font-size: 11px;
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.qr-foot {
  font-family: var(--font-roman);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 14px;
}


/* ════════════════════════════════════════════════════════════
   Background animations & couple illustration
   ════════════════════════════════════════════════════════════ */

.invit-bg-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.petal-layer { position: absolute; inset: 0; pointer-events: none; }
.petal {
  position: absolute;
  top: -20px;
  filter: drop-shadow(0 1px 1px rgba(31,61,92,0.10));
  will-change: transform;
}
@keyframes petal-fall {
  0%   { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate(var(--sway), 50vh) rotate(calc(var(--rot) * 1.5)); }
  92%  { opacity: 1; }
  100% { transform: translate(calc(var(--sway) * -0.5), 110vh) rotate(calc(var(--rot) * 3)); opacity: 0; }
}

.mote-layer { position: absolute; inset: 0; pointer-events: none; }
.mote {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  will-change: opacity, transform;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.3); }
}

/* Sway floral corners + bottom spray */
.fc-tl { animation: sway-tl 7s ease-in-out infinite alternate; }
.fc-tr { animation: sway-tr 7s ease-in-out infinite alternate; }
.fc-bl { animation: sway-bl 8s ease-in-out infinite alternate; }
.fc-br { animation: sway-br 8s ease-in-out infinite alternate; }
@keyframes sway-tl { 0% { transform: rotate(-1deg) translateY(0); } 100% { transform: rotate(2deg) translateY(4px); } }
@keyframes sway-tr { 0% { transform: rotate(1deg) translateY(0); }  100% { transform: rotate(-2deg) translateY(4px); } }
@keyframes sway-bl { 0% { transform: rotate(-1.5deg); }              100% { transform: rotate(1.5deg); } }
@keyframes sway-br { 0% { transform: rotate(1.5deg); }               100% { transform: rotate(-1.5deg); } }

.arch-bottom-floral { animation: bottom-sway 9s ease-in-out infinite alternate; }
@keyframes bottom-sway {
  0%   { transform: translateX(calc(-50% - 4px)) rotate(-1deg); }
  100% { transform: translateX(calc(-50% + 4px)) rotate(1deg); }
}

/* Couple illustration wrapper */
.couple-art-wrap {
  position: relative;
  display: inline-block;
  animation: couple-bob 4.5s ease-in-out infinite alternate;
}
.couple-art-wrap svg {
  position: relative;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(31,61,92,0.20));
}
.couple-art-glow {
  position: absolute;
  inset: -10% -14% -6% -14%;
  z-index: 1;
  pointer-events: none;
  animation: glow-pulse 5s ease-in-out infinite alternate;
  border-radius: 50%;
}
@keyframes couple-bob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
@keyframes glow-pulse {
  0%   { opacity: 0.55; transform: scale(0.92); }
  100% { opacity: 1;    transform: scale(1.08); }
}

/* Subtle page-background drift */
.invitation::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(45% 35% at 20% 15%, rgba(244,216,138,0.30), transparent 70%),
    radial-gradient(40% 30% at 80% 75%, rgba(184,210,230,0.30), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: bg-drift 18s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(4%, -3%); }
}

/* Sun-yellow glow under names */
.op-names em, .closing-names em {
  position: relative;
  animation: amp-twinkle 4s ease-in-out infinite alternate;
}
@keyframes amp-twinkle {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(244,216,138,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(244,216,138,0.7)); }
}

/* ════════════════════════════════════════════════════════════
   TEXT RANDOM ENTRANCE — pool of keyframes
   ════════════════════════════════════════════════════════════ */
.tx-anim { opacity: 0; animation-fill-mode: both !important; animation-duration: 0.95s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tx-fadeUp     { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: none; } }
@keyframes tx-fadeDown   { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes tx-fadeLeft   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes tx-fadeRight  { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: none; } }
@keyframes tx-zoomIn     { from { opacity: 0; transform: scale(0.85); }       to { opacity: 1; transform: scale(1); } }
@keyframes tx-blurIn     { from { opacity: 0; filter: blur(10px); }           to { opacity: 1; filter: blur(0); } }
@keyframes tx-rotateIn   { from { opacity: 0; transform: rotate(-6deg) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tx-flipIn     { from { opacity: 0; transform: perspective(600px) rotateX(-25deg); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes tx-coverIn    { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }

/* ════════════════════════════════════════════════════════════
   COVER GATE — "Buka Undangan" screen, overlays invitation
   ════════════════════════════════════════════════════════════ */
.cover-gate {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  transition: opacity 0.6s ease, transform 0.65s ease;
  animation: cover-in 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.cover-gate.is-hiding {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
@keyframes cover-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

.cover-arch {
  width: 100%;
  max-width: 360px;
  position: relative;
  z-index: 2;
}
.cover-arch .arch-panel {
  margin: 0;
  padding: 0 0 56px;
}
.cover-arch .arch-inner.cover-inner {
  padding: 78px 22px 18px;
}
.cover-arch .couple-art-wrap.cover-couple-wrap {
  width: 180px;
  height: 180px;
}
.cover-arch .couple-photo.cover-couple-photo {
  width: 180px;
  height: 180px;
}
.cover-arch .op-names.cover-names {
  font-size: 34px;
  margin: 6px 0 4px;
}
.cover-arch .op-tagline {
  margin-bottom: 14px;
}

.cover-guest {
  margin: 6px 0 18px;
}
.cover-guest-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cover-guest-sub {
  font-size: 12px;
  font-style: italic;
  margin-bottom: 4px;
}
.cover-guest-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.cover-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: cover-btn-pulse 2.4s ease-in-out infinite;
}
.cover-open-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cover-open-btn:active { transform: translateY(0); }
@keyframes cover-btn-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}