:root {
  --cream: #fff9ed;
  --ivory: #fffdf5;
  --lavender: #efe4ff;
  --sage: #8ea57d;
  --sage-dark: #526944;
  --gold: #caa15a;
  --gold-deep: #9b7335;
  --purple: #9d7ac0;
  --ink: #46392e;
  --muted: #77695e;
  --card: rgba(255, 253, 245, 0.86);
  --shadow: 0 26px 68px rgba(95, 64, 30, 0.24);
  --phone: 430px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.desktop-ambient {
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 250, 239, .84), rgba(255, 255, 255, .34)), url('../assets/ornaments/desktop-bg.webp') center/cover no-repeat;
  z-index: -3;
}
.desktop-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.1), rgba(255,249,237,.42) 48%, rgba(255,247,229,.82));
}

.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--cream);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
.opening-screen.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,247,232,.86)),
    url('../assets/ornaments/desktop-bg.webp') center/cover no-repeat;
  transform: scale(1.04);
  filter: saturate(1.08);
}
.opening-card {
  width: min(86vw, 430px);
  text-align: center;
  padding: 38px 22px 32px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,251,241,.7));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 30px 90px rgba(120, 84, 40, .22);
  backdrop-filter: blur(10px);
  transform: translateY(12px);
  animation: openCardEnter 1.25s ease both .3s;
}
.eyebrow {
  margin: 0 0 10px;
  letter-spacing: .28em;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.eyebrow.gold { color: var(--gold-deep); }
.opening-card h1,
.hero-content h2,
.section-heading h2,
.closing-section h2 {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  line-height: .95;
}
.opening-card h1 {
  margin: 4px 0 22px;
  font-size: clamp(50px, 8vw, 88px);
  color: #6d513c;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.opening-card h1 span,
.hero-content h2 span { font-family: 'Cormorant Garamond', serif; font-size: .82em; }
.guest-label { margin: 0; color: var(--muted); font-size: 13px; }
.guest-name { margin: 6px 0 24px; font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 700; }
.open-button,
.soft-button {
  border: 0;
  border-radius: 999px;
  padding: 15px 26px;
  min-width: 220px;
  background: linear-gradient(135deg, #7f9d72, #caa15a 62%, #d8b875);
  color: white;
  box-shadow: 0 12px 30px rgba(119, 87, 45, .24);
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 800;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.open-button span { display: block; }
.open-button small { display: block; margin-top: 4px; letter-spacing: .08em; text-transform: none; font-size: 11px; opacity: .9; }
.open-button:hover,
.soft-button:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(119, 87, 45, .28); filter: brightness(1.04); }
.opening-hint {
  position: absolute;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(90vw, 420px);
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  color: rgba(70,57,46,.68);
  font-size: 12px;
  z-index: 4;
}
.open-ornament { position: absolute; pointer-events: none; z-index: -1; transform-origin: bottom center; will-change: transform; }
.wisteria-open { top: -60px; width: 640px; opacity: .92; animation: hangingSway 8s ease-in-out infinite; z-index: -2; }
.wisteria-open.wisteria-left { left: -110px; }
.wisteria-open.wisteria-right { right: -110px; animation-delay: -2s; }
.tree-curtain { top: 15%; height: 74vh; width: auto; opacity: .85; z-index: 1; filter: drop-shadow(0 16px 18px rgba(70, 73, 41, .16)); transition: transform 2.2s cubic-bezier(.16,.88,.23,1), opacity 2.1s ease; }
.tree-curtain.tree-left { left: -120px; transform: rotate(8deg) scale(1.16); transform-origin: left bottom; animation: treeBreath 6s ease-in-out infinite; }
.tree-curtain.tree-right { right: -100px; transform: rotate(-8deg) scaleX(-1) scale(1.1); transform-origin: right bottom; animation: treeBreathRight 6.4s ease-in-out infinite; }
.pot-open { bottom: -70px; width: 410px; z-index: 2; opacity: .96; filter: drop-shadow(0 20px 24px rgba(95, 64, 30, .18)); transition: transform 2.1s ease, opacity 1.6s ease; }
.pot-open.pot-left { left: -90px; }
.pot-open.pot-right { right: -90px; }
@media (max-width: 768px) {
  .pot-open {
    z-index: -1;
  }
  .tree-curtain
  {
    z-index: -1;
  }
}
.open-gate {
  position: absolute;
  bottom: -520px;
  left: 50%;
  width: min(860px, 108vw);
  transform: translateX(-50%) translateY(0) scale(.98);
  opacity: .1;
  filter: drop-shadow(0 24px 35px rgba(110, 91, 54, .18));
  z-index: 0;
  transition: transform 2.3s cubic-bezier(.16,.84,.22,1), opacity 1.2s ease, bottom 2.3s cubic-bezier(.16,.84,.22,1);
}
.opening-screen.is-opening .opening-card { animation: cardLeaving 1.2s ease both; }
.opening-screen.is-opening .opening-hint { opacity: 0; }
.opening-screen.is-opening .tree-left { transform: translateX(-92vw) rotate(-13deg) scale(1.22); opacity: .1; }
.opening-screen.is-opening .tree-right { transform: translateX(92vw) rotate(13deg) scaleX(-1) scale(1.18); opacity: .1; }
.opening-screen.is-opening .pot-left { transform: translateX(-56vw) translateY(60px) rotate(-7deg); opacity: .2; }
.opening-screen.is-opening .pot-right { transform: translateX(56vw) translateY(60px) rotate(7deg); opacity: .2; }
.opening-screen.is-opening .open-gate { bottom: -12px; transform: translateX(-50%) translateY(-170px) scale(1.08); opacity: 1; }

.site-frame {
  position: relative;
  width: min(100%, var(--phone));
  min-height: 100vh;
  margin-inline: auto;
  overflow: hidden;
  background: #faf2e4;
  box-shadow: 0 0 0 1px rgba(120,90,55,.06), 0 28px 80px rgba(96,66,40,.22);
}
.section {
  position: relative;
  min-height: 100svh;
  padding: 86px 22px 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.88), rgba(255,248,232,.62) 40%, rgba(250,239,218,.96) 100%);
}
.hero-section {
  color: var(--ink);
  text-align: center;
  justify-content: center;
  padding-top: 110px;
  padding-bottom: 124px;
  background: linear-gradient(180deg, #fffaf3, #fdf7ef);
}
.hero-design-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,249,239,.48)),
    url('../assets/ornaments/design-final.webp') center/cover no-repeat;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.12), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,248,236,.18) 48%, rgba(255,247,232,.72) 100%);
}
.hero-content {
  position: relative;
  z-index: 5;
  width: min(100%, 370px);
  padding: 18px 8px;
}
.hero-content-framed {
  padding: 34px 20px 28px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,252,245,.52));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 24px 60px rgba(126, 98, 56, .16);
  backdrop-filter: blur(10px);
}
.hero-content h2 {
  margin: 6px 0 10px;
  font-size: 64px;
  color: #6c5540;
  text-shadow: 0 2px 0 rgba(255,255,255,.75);
}
.hero-date { margin: 0 0 16px; color: #806753; font-weight: 700; }
.hero-guest-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-guest-name {
  margin: 7px 0 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 700;
  color: #705845;
}
.decor { position: absolute; pointer-events: none; z-index: 2; will-change: transform; }

.intro-section { min-height: 78svh; }
.paper-card,
.couple-card,
.event-card,
.form-card,
.timeline article {
  position: relative;
  z-index: 5;
  width: min(100%, 360px);
  border-radius: 34px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.paper-card {
  padding: 38px 26px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.66;
}
.arabic { margin: 0 0 18px; color: var(--sage-dark); font-size: 23px; }
.mini-flower { position: absolute; width: 170px; opacity: .66; pointer-events: none; }
.mini-left { left: -68px; bottom: 70px; transform: rotate(-14deg); }
.mini-right { right: -66px; top: 80px; transform: rotate(18deg); }

.section-heading { position: relative; z-index: 5; text-align: center; margin-bottom: 24px; }
.section-heading h2 { margin: 0; font-size: 56px; color: #67503f; }
.section-bg-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .44; pointer-events: none; }
.couple-section { gap: 16px; }
.couple-card { padding: 18px 18px 28px; text-align: center; overflow: visible; }
.couple-card::before,
.couple-card::after {
  content: '';
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 18px rgba(112, 85, 56, .16));
}
.couple-card::before {
  width: 116px;
  height: 116px;
  left: 34px;
  top: 148px;
  background-image: url('../assets/ornaments/flower-tulip-left.webp');
  transform: rotate(-8deg);
}
.couple-card::after {
  width: 124px;
  height: 124px;
  right: 26px;
  top: 146px;
  background-image: url('../assets/ornaments/flower-magenta-right.webp');
  transform: rotate(8deg);
}
.portrait {
  width: 176px;
  height: 216px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 9px solid rgba(255,255,255,.84);
  box-shadow: 0 16px 32px rgba(85,61,39,.22);
  background: #eee1ce;
}
.portrait.oval { border-radius: 999px 999px 34px 34px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.role { margin: 0 0 6px; color: var(--gold-deep); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; }
.couple-card h3 { margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-size: 32px; color: #6d513c; }
.couple-card p:last-child { margin: 0; line-height: 1.6; color: var(--muted); }
.divider-symbol { font-family: 'Great Vibes', cursive; font-size: 46px; color: var(--gold-deep); }

.story-section { background: linear-gradient(180deg, #fbf4e6, #f6e6f7 55%, #f9f1df); }
.single-flower-left { left: -72px; bottom: 70px; width: 190px; opacity: .7; transform: rotate(-10deg); }
.single-flower-right { right: -70px; top: 78px; width: 170px; opacity: .72; transform: rotate(18deg); }
.timeline { display: grid; gap: 14px; width: min(100%, 360px); z-index: 5; }
.timeline article { padding: 20px; }
.timeline span { display: inline-flex; color: var(--gold-deep); font-weight: 800; letter-spacing: .12em; }
.timeline h3 { margin: 5px 0 8px; font-family: 'Cormorant Garamond', serif; font-size: 27px; }
.timeline p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }

.event-section { gap: 16px; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.96), rgba(255,248,229,.78) 42%, rgba(238,222,243,.8)); }
.gate-soft { top: -20px; width: 104%; opacity: .22; }
.event-card { padding: 25px 22px; }
.event-type { margin: 0 0 8px; font-weight: 800; letter-spacing: .16em; color: var(--sage-dark); text-transform: uppercase; font-size: 12px; }
.event-card h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 34px; }
.date-number { margin: 2px auto; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #fff, #efe2c6); color: var(--gold-deep); font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(203,163,91,.22); }
.event-time { margin: 10px 0 4px; font-weight: 800; }
.event-place { margin: 0; color: var(--muted); line-height: 1.5; }
.soft-button { position: relative; z-index: 5; display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; font-size: 12px; }
.soft-button.outline { background: rgba(255,255,255,.72); color: var(--gold-deep); border: 1px solid rgba(202,161,90,.5); box-shadow: 0 10px 25px rgba(119,87,45,.12); }

.gallery-section { background: linear-gradient(180deg, #f6e6f7, #fff6e9); }
.gallery-grid { position: relative; z-index: 5; width: min(100%, 370px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery-grid button { border: 0; padding: 0; height: 185px; border-radius: 24px; overflow: hidden; background: #eadfd1; box-shadow: 0 16px 30px rgba(98, 67, 40, .18); }
.gallery-grid button:nth-child(3), .gallery-grid button:nth-child(6) { height: 230px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s ease; }
.gallery-grid button:hover img { transform: scale(1.08); }

.rsvp-section, .wishes-section { background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.96), rgba(246,231,249,.74) 46%, rgba(255,247,229,.92)); }
.decor-flower-bottom { bottom: -72px; left: 50%; width: 360px; transform: translateX(-50%); opacity: .5; }
.form-card { padding: 24px; display: grid; gap: 14px; }
.form-card label { display: grid; gap: 8px; color: var(--sage-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.form-card input,
.form-card textarea,
.form-card select {
  width: 100%;
  border: 1px solid rgba(142, 112, 72, .22);
  border-radius: 18px;
  padding: 13px 14px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus { border-color: rgba(202, 161, 90, .75); box-shadow: 0 0 0 4px rgba(202, 161, 90, .13); }
.form-note { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.wish-flower-left { left: -86px; bottom: 120px; width: 180px; opacity: .64; transform: rotate(-10deg); }
.wish-flower-right { right: -78px; top: 82px; width: 168px; opacity: .64; transform: rotate(10deg); }
.wish-list { 
     position: relative;
    z-index: 5;
    margin-top: 16px;
    width: min(100%, 360px);
    display: grid;
    gap: 10px;

    max-height: 520px;
    overflow-y: auto;
    padding-right: 8px;
    scroll-behavior: smooth;

    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0) 100%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0) 100%
    );
}
.wish-item { padding: 15px 16px; border-radius: 22px; background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(96,66,40,.1); }
.wish-item strong { display: block; color: var(--gold-deep); margin-bottom: 4px; }
.wish-item p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.wish-list::-webkit-scrollbar {
    width: 4px;
}

.wish-list::-webkit-scrollbar-track {
    background: transparent;
}

.wish-list::-webkit-scrollbar-thumb {
    background: rgba(180, 160, 132, .45);
    border-radius: 999px;
}

.wish-list::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 160, 132, .8);
}


.closing-section { min-height: 78svh; background: linear-gradient(180deg, #fff8ea, #f3e5f4); }
.closing-section .paper-card { padding-top: 70px; }
.closing-section h2 { font-size: 54px; margin: 14px 0 6px; color: #6d513c; }
.couple-sign { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold-deep); font-weight: 700; }
.closing-wisteria { top: -80px; width: 430px; opacity: .72; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%) translateY(140%);
  width: min(calc(100% - 22px), 404px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 8px;
  border-radius: 26px;
  background: rgba(255, 251, 242, .92);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 16px 42px rgba(80, 56, 34, .2);
  backdrop-filter: blur(14px);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
body.unlocked .bottom-nav { transform: translateX(-50%) translateY(0); }
.bottom-nav a {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 3px;
  border-radius: 18px;
  color: #7a6b5d;
  font-size: 9px;
  font-weight: 800;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}
.bottom-nav a span { font-size: 15px; line-height: 1; }
.bottom-nav a.active { background: linear-gradient(135deg, #7f9d72, #caa15a); color: white; transform: translateY(-2px); }
.music-button {
  position: fixed;
  right: max(16px, calc((100vw - var(--phone)) / 2 + 18px));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 82px);
  z-index: 61;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #7f9d72, #caa15a);
  color: white;
  box-shadow: 0 14px 28px rgba(82, 65, 43, .24);
  transform: translateY(160%);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .2s ease;
}
body.unlocked .music-button { transform: translateY(0); }
.music-button.is-playing { animation: pulseMusic 1.4s ease-in-out infinite; }

.petals-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 120; }
.petal {
  position: absolute;
  top: -40px;
  width: 12px;
  height: 18px;
  border-radius: 70% 10% 70% 10%;
  background: radial-gradient(circle at 30% 30%, #fff5f6, #eeb1d7 72%);
  opacity: .78;
  animation: petalFall linear forwards;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(40, 33, 27, .82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.lightbox.show { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(92vw, 520px); max-height: 84vh; object-fit: contain; border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.34); }
.close-lightbox { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.86); color: var(--ink); font-size: 30px; line-height: 1; }

.reveal { opacity: 0; transform: translateY(42px) scale(.98); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.show { opacity: 1; transform: translateY(0) scale(1); }
.sway-slow { animation: sway 6.6s ease-in-out infinite; transform-origin: bottom center; }
.sway-tree { animation: treeSway 7.8s ease-in-out infinite; transform-origin: bottom center; }
.rise-soft { animation: floatUpDown 6.2s ease-in-out infinite; }
.delay-1 { animation-delay: -1.5s; }
.delay-2 { animation-delay: -3s; }

@keyframes openCardEnter { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: translateY(12px) scale(1); } }
@keyframes cardLeaving { to { opacity: 0; transform: translateY(-36px) scale(.96); filter: blur(2px); } }
@keyframes hangingSway { 0%,100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(2deg) translateY(8px); } }
@keyframes treeBreath { 0%,100% { transform: rotate(8deg) scale(1.16); } 50% { transform: rotate(12deg) scale(1.18) translateX(10px); } }
@keyframes treeBreathRight { 0%,100% { transform: rotate(-8deg) scaleX(-1) scale(1.1); } 50% { transform: rotate(-12deg) scaleX(-1) scale(1.12) translateX(-10px); } }
@keyframes sway { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(3deg) translateY(8px); } }
@keyframes treeSway { 0%,100% { transform: rotate(-2deg) translateX(0); } 50% { transform: rotate(3deg) translateX(10px); } }
@keyframes floatUpDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulseMusic { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0) scale(1.08); } }
@keyframes petalFall {
  0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .78; }
  100% { transform: translate3d(var(--drift), 110vh, 0) rotate(680deg); opacity: 0; }
}

@media (min-width: 900px) {
  body { background: #f8f2df; }
  .site-frame {
    margin-top: 38px;
    margin-bottom: 38px;
    border-radius: 34px;
    min-height: calc(100vh - 76px);
  }
  .opening-card { width: 470px; }
  .hero-design-bg {
    background:
      linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,248,238,.36)),
      url('../assets/ornaments/desktop-bg.webp') center/cover no-repeat;
  }
}

@media (max-width: 640px) {
  .desktop-ambient { background: #fbf2e8; }
  .opening-bg {
    background:
      linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,247,232,.86)),
      url('../assets/ornaments/design-final.webp') center/cover no-repeat;
  }
  .opening-card { width: min(88vw, 340px); padding: 31px 18px 26px; border-radius: 30px; }
  .opening-card h1 { font-size: 52px; }
  .open-button { min-width: 205px; padding: 14px 22px; }
  .wisteria-open { top: -42px; width: 430px; }
  .wisteria-open.wisteria-left { left: -190px; }
  .wisteria-open.wisteria-right { right: -190px; }
  .tree-curtain { height: 60vh; top: 20%; }
  .tree-curtain.tree-left { left: -230px; transform: rotate(7deg) scale(1.04); }
  .tree-curtain.tree-right { right: -225px; transform: rotate(-7deg) scaleX(-1) scale(1.03); }
  .pot-open { width: 250px; bottom: -45px; }
  .pot-open.pot-left { left: -92px; }
  .pot-open.pot-right { right: -92px; }
  .open-gate { width: 460px; bottom: -370px; }
  .opening-screen.is-opening .open-gate { bottom: -10px; transform: translateX(-50%) translateY(-120px) scale(1.05); }

  .site-frame { width: 100%; box-shadow: none; }
  .section { padding-left: 18px; padding-right: 18px; }
  .hero-section { padding-top: 96px; padding-bottom: 116px; }
  .hero-content { width: min(100%, 320px); }
  .hero-content-framed { padding: 30px 18px 24px; border-radius: 28px; }
  .hero-content h2 { font-size: 54px; }
  .hero-guest-name { font-size: 24px; }
  .section-heading h2 { font-size: 49px; }
  .couple-card::before { width: 94px; height: 94px; left: 18px; top: 156px; }
  .couple-card::after { width: 102px; height: 102px; right: 12px; top: 154px; }
  .gallery-grid button { height: 168px; }
  .gallery-grid button:nth-child(3), .gallery-grid button:nth-child(6) { height: 205px; }
  .bottom-nav { width: calc(100% - 16px); bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: repeat(6, 1fr); border-radius: 24px; padding: 7px; }
  .bottom-nav a { font-size: 8.5px; padding: 7px 2px; }
  .music-button { right: 16px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ================================
   FINAL LUXURY REVISION
   - solid buttons
   - photo-front flowers
   - premium animate on scroll
   - four menu items
   ================================ */
:root {
  --solid-button: #8b688e;
  --solid-button-dark: #77577a;
  --solid-button-glow: rgba(139, 104, 142, .32);
}

.open-button,
.soft-button,
.bottom-nav a.active,
.music-button {
  background: var(--solid-button) !important;
  background-image: none !important;
}

.open-button,
.soft-button {
  color: #fff;
  box-shadow:
    0 18px 34px rgba(119, 87, 122, .26),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.open-button:hover,
.soft-button:hover {
  filter: none;
  background: var(--solid-button-dark) !important;
  box-shadow:
    0 22px 42px rgba(119, 87, 122, .32),
    0 0 0 7px rgba(139,104,142,.09),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.soft-button.outline {
  background: rgba(255,255,255,.74) !important;
  color: var(--solid-button-dark);
  border: 1px solid rgba(139,104,142,.42);
}

/* Gate opening now rises until it touches the top of the screen. */
.open-gate {
  top: 100%;
  bottom: auto !important;
  left: 50%;
  width: min(760px, 116vw);
  height: calc(100svh + 24px);
  object-fit: cover;
  object-position: center top;
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 0;
  transition:
    top 2.55s cubic-bezier(.15,.86,.18,1),
    transform 2.55s cubic-bezier(.15,.86,.18,1),
    opacity 1.05s ease;
}
.opening-screen.is-opening .open-gate {
  top: -12px;
  transform: translateX(-50%) translateY(0) scale(1.035);
  opacity: 1;
}
.opening-card { cursor: pointer; }

/* Hero front cover */
.hero-section {
  min-height: 100svh;
  padding-top: 42px;
  padding-bottom: 118px;
  justify-content: flex-end;
  gap: 8px;
  background: #fff8eb;
}
.hero-design-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,250,239,.18) 45%, rgba(255,248,232,.76) 100%),
    url('../assets/ornaments/design-final.webp') center top / cover no-repeat;
}
.hero-section .hero-shade {
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.04), rgba(255,255,255,0) 33%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,248,236,.18) 50%, rgba(255,248,232,.82) 100%);
}
.hero-portrait-wrap {
  position: relative;
  z-index: 6;
  width: min(78vw, 310px);
  height: min(50svh, 450px);
  min-height: 350px;
  margin-top: auto;
  margin-bottom: -4px;
  border-radius: 42px 42px 20px 20px;
  filter: drop-shadow(0 24px 36px rgba(87, 68, 47, .26));
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hero-portrait-wrap::before {
  content: '';
  position: absolute;
  inset: 18px 12px 34px;
  z-index: -1;
  border-radius: 48% 48% 30px 30px;
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.88), rgba(247,228,238,.34) 62%, rgba(255,255,255,0) 76%);
  filter: blur(2px);
}
.hero-portrait-wrap::after {
  content: '';
  position: absolute;
  inset: auto 13% 2px;
  height: 72px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,248,232,0), rgba(255,248,232,.94) 78%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-couple {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 42px 42px 20px 20px;
  border: 7px solid rgba(255,255,255,.78);
  box-shadow:
    0 24px 52px rgba(92,66,42,.20),
    inset 0 0 0 1px rgba(255,255,255,.9);
}
.hero-front-flower {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(101, 77, 54, .16));
}
.hero-front-left {
  width: 188px;
  left: -62px;
  bottom: -32px;
  transform-origin: 80% 100%;
}
.hero-front-right {
  width: 178px;
  right: -54px;
  bottom: -28px;
  transform-origin: 18% 100%;
}
.hero-content-framed {
  width: min(100%, 390px);
  margin-top: 4px;
  padding: 22px 18px 28px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,250,239,.56));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 24px 60px rgba(126, 98, 56, .14);
}
.hero-content h2 {
  margin: 2px 0 8px;
  font-size: clamp(48px, 14vw, 64px);
  color: #775f79;
}
.hero-date { margin-bottom: 8px; }
.hero-guest-name {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 17px;
}

/* Explicit ornament placement on the hero so every asset feels alive. */
.decor-wisteria-left { top: -86px; left: -190px; width: 500px; opacity: .76; z-index: 4; }
.decor-wisteria-right { top: -82px; right: -192px; width: 500px; opacity: .76; z-index: 4; }
.decor-tree-left { left: -184px; top: 22%; width: 340px; opacity: .42; z-index: 3; transform-origin: left bottom; }
.decor-tree-right { right: -184px; top: 21%; width: 340px; opacity: .42; z-index: 3; transform-origin: right bottom; }
.decor-pot-left { left: -76px; bottom: 178px; width: 200px; opacity: .72; z-index: 5; }
.decor-pot-right { right: -76px; bottom: 176px; width: 200px; opacity: .72; z-index: 5; }

/* Bride & groom card flowers stay in front of the photo, lower-left and lower-right. */
.couple-card::before {
  width: 134px;
  height: 134px;
  left: -18px;
  top: 132px;
  z-index: 8;
  background-image: url('../assets/ornaments/flower-meadow-mix.webp');
}
.couple-card::after {
  width: 126px;
  height: 126px;
  right: -12px;
  top: 138px;
  z-index: 8;
  background-image: url('../assets/ornaments/flower-pink-soft.webp');
}
.portrait { position: relative; z-index: 4; }

/* Four menu only */
.bottom-nav {
  grid-template-columns: repeat(4, 1fr) !important;
  width: min(calc(100% - 22px), 372px);
}
.bottom-nav a.active {
  color: #fff;
  box-shadow: 0 10px 22px rgba(139,104,142,.28);
}

/* Premium custom AOS */
.reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 64px, 0) scale(.94);
  filter: blur(16px) saturate(.82);
  transition:
    opacity 1.15s ease var(--reveal-delay),
    transform 1.28s cubic-bezier(.16,.9,.18,1) var(--reveal-delay),
    filter 1.15s ease var(--reveal-delay),
    clip-path 1.3s cubic-bezier(.16,.9,.18,1) var(--reveal-delay);
  will-change: transform, opacity, filter, clip-path;
}
.reveal.show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0) saturate(1);
}
.lux-title {
  clip-path: inset(0 12% 100% 12% round 28px);
  transform: translateY(54px) scale(.96);
}
.lux-title.show { clip-path: inset(-8% -8% -8% -8% round 28px); }
.lux-card {
  transform: translateY(70px) rotateX(10deg) scale(.93);
  transform-origin: center bottom;
}
.lux-card.show { transform: translateY(0) rotateX(0) scale(1); }
.lux-photo {
  transform: translateY(80px) rotateX(13deg) rotateZ(-1.5deg) scale(.9);
  filter: blur(18px) saturate(.82) drop-shadow(0 0 0 rgba(0,0,0,0));
}
.lux-photo.show {
  transform: translateY(0) rotateX(0) rotateZ(0) scale(1);
  filter: blur(0) saturate(1) drop-shadow(0 24px 36px rgba(87, 68, 47, .26));
}
.lux-symbol {
  transform: scale(.5) rotate(-18deg);
  filter: blur(10px);
}
.lux-symbol.show { transform: scale(1) rotate(0); filter: blur(0); }
.lux-button { transform: translateY(34px) scale(.86); }
.lux-button.show { transform: translateY(0) scale(1); }
.paper-card::after,
.event-card::after,
.form-card::after,
.couple-card::after {
  pointer-events: none;
}
.paper-card,
.couple-card,
.event-card,
.form-card,
.timeline article,
.gallery-grid {
  transform-style: preserve-3d;
}
.paper-card::before,
.event-card::before,
.form-card::before,
.timeline article::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.42) 42%, rgba(255,255,255,0) 74%);
  transform: translateX(-140%);
  opacity: 0;
}
.paper-card.show::before,
.event-card.show::before,
.form-card.show::before,
.timeline article.show::before {
  animation: luxeShine 1.55s ease .34s both;
}

@keyframes luxeShine {
  0% { transform: translateX(-140%); opacity: 0; }
  20% { opacity: .88; }
  100% { transform: translateX(140%); opacity: 0; }
}

@media (max-width: 640px) {
  .hero-section { padding-top: 34px; padding-bottom: 110px; gap: 0; }
  .hero-portrait-wrap {
    width: min(76vw, 300px);
    height: min(49svh, 420px);
    min-height: 330px;
  }
  .hero-front-left { width: 152px; left: -46px; bottom: -24px; }
  .hero-front-right { width: 148px; right: -43px; bottom: -22px; }
  .hero-content-framed { width: min(100%, 342px); padding: 20px 16px 26px; border-radius: 30px; }
  .hero-content h2 { font-size: 51px; }
  .hero-guest-name { font-size: 14px; }
  .decor-wisteria-left { top: -58px; left: -210px; width: 430px; }
  .decor-wisteria-right { top: -54px; right: -210px; width: 430px; }
  .decor-tree-left { left: -230px; width: 330px; opacity: .34; }
  .decor-tree-right { right: -230px; width: 330px; opacity: .34; }
  .decor-pot-left { left: -94px; bottom: 160px; width: 176px; }
  .decor-pot-right { right: -94px; bottom: 160px; width: 176px; }
  .open-gate { width: 110vw; height: calc(100svh + 20px); }
  .opening-screen.is-opening .open-gate { top: -10px; transform: translateX(-50%) scale(1.05); }
  .bottom-nav { grid-template-columns: repeat(4, 1fr) !important; width: calc(100% - 16px); }
  .bottom-nav a { font-size: 9px; }
  .couple-card::before { width: 118px; height: 118px; left: -18px; top: 134px; }
  .couple-card::after { width: 112px; height: 112px; right: -13px; top: 139px; }
}
.sparkle-layer { z-index: 121; }
.sparkle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #f7d98c 45%, rgba(247,217,140,0) 72%);
  box-shadow: 0 0 18px rgba(247,217,140,.8);
  animation: sparkleBurst 1.75s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes sparkleBurst {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--spark-x), var(--spark-y), 0) scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ================================
   USER REVISION 2
   - photo slightly lower
   - couple name/date visible above photo
   - add Send Your Gift after RSVP
   - compact 5-menu navigation
   ================================ */
.hero-section {
  justify-content: flex-start !important;
  padding-top: 76px !important;
  padding-bottom: 112px !important;
  gap: 9px !important;
}
.hero-title-block {
  position: relative;
  z-index: 8;
  width: min(100%, 390px);
  text-align: center;
  padding: 0 12px;
  filter: drop-shadow(0 3px 8px rgba(255,255,255,.7));
}
.hero-title-block h2 {
  margin: 0 0 3px;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  line-height: .92;
  font-size: clamp(47px, 13vw, 63px);
  color: #775f79;
  text-shadow: 0 2px 0 rgba(255,255,255,.82), 0 12px 28px rgba(110,84,116,.13);
}
.hero-title-block h2 span {
  font-family: 'Cormorant Garamond', serif;
  font-size: .78em;
}
.hero-title-block .eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .24em;
}
.hero-title-block .hero-date {
  margin: 0;
  color: #806753;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-portrait-wrap {
  margin-top: 16px !important;
  margin-bottom: 4px !important;
  width: min(76vw, 306px) !important;
  height: min(43svh, 398px) !important;
  min-height: 292px !important;
}
.hero-couple { object-position: center 16% !important; }
.hero-content-framed {
  width: min(100%, 352px) !important;
  margin-top: 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.hero-content-framed .hero-guest-label {
  display: none;
}
.hero-content-framed .hero-guest-name {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6e5e50;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
}
.gift-section {
  min-height: 100svh;
  text-align: center;
  color: #fff7e8;
  background:
    radial-gradient(circle at 50% 20%, rgba(202,161,90,.17), rgba(65,35,22,.04) 34%, rgba(44,25,18,.92) 72%),
    linear-gradient(180deg, #3b2117 0%, #2a1812 68%, #f8ecd7 100%);
}
.gift-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(202,161,90,.45) 1px, transparent 1.5px);
  background-size: 32px 32px;
  opacity: .2;
}
.gift-section .section-heading h2 {
  color: #fff4df;
  text-shadow: 0 16px 36px rgba(0,0,0,.26);
}
.gift-section .eyebrow.gold { color: #d6b16a; }
.gift-card {
  position: relative;
  z-index: 5;
  width: min(100%, 360px);
  padding: 26px 18px 24px;
  border-radius: 30px;
  background: rgba(255, 249, 236, .10);
  border: 1px solid rgba(214, 177, 106, .38);
  box-shadow: 0 28px 72px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transform-style: preserve-3d;
}
.gift-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 74%);
  transform: translateX(-140%);
  opacity: 0;
}
.gift-card.show::before { animation: luxeShine 1.55s ease .34s both; }
.gift-intro {
  margin: 0 auto 18px;
  max-width: 290px;
  color: rgba(255,247,232,.88);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}
.bank-card {
  width: min(100%, 252px);
  margin: 0 auto 16px;
  padding: 17px 16px;
  border-radius: 18px;
  color: #fff4df;
  background: rgba(255, 248, 236, .13);
  border: 1px solid rgba(214, 177, 106, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.bank-card span,
.bank-card small { display: block; }
.bank-card span {
  margin-bottom: 3px;
  color: #d6b16a;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 900;
}
.bank-card strong {
  display: block;
  font-size: 18px;
  letter-spacing: .04em;
}
.bank-card small {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,247,232,.78);
}
.gift-copy {
  min-width: 190px;
  background: #b64b3b !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.gift-copy:hover { background: #a63e31 !important; }
.gift-section .form-note {
  margin-top: 11px;
  color: rgba(255,247,232,.72);
}
.gift-flower-left {
  left: -84px;
  bottom: 58px;
  width: 220px;
  opacity: .72;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}
.gift-flower-right {
  right: -94px;
  top: 92px;
  width: 190px;
  opacity: .72;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}
.bottom-nav {
  grid-template-columns: repeat(5, 1fr) !important;
  width: min(calc(100% - 18px), 392px) !important;
}
.bottom-nav a { font-size: 8.5px; }

@media (max-width: 640px) {
  .hero-section {
    padding-top: 72px !important;
    padding-bottom: 106px !important;
    gap: 7px !important;
  }
  .hero-title-block h2 { font-size: 48px; }
  .hero-title-block .eyebrow { font-size: 9px; }
  .hero-title-block .hero-date { font-size: 10.5px; }
  .hero-portrait-wrap {
    margin-top: 14px !important;
    width: min(74vw, 296px) !important;
    height: min(41svh, 382px) !important;
    min-height: 286px !important;
  }
  .hero-content-framed { width: min(100%, 330px) !important; }
  .hero-content-framed .hero-guest-name { font-size: 12.5px; }
  .hero-front-left { width: 146px !important; left: -43px !important; bottom: -22px !important; }
  .hero-front-right { width: 142px !important; right: -40px !important; bottom: -20px !important; }
  .bottom-nav {
    grid-template-columns: repeat(5, 1fr) !important;
    width: calc(100% - 14px) !important;
    padding: 6px !important;
  }
  .bottom-nav a {
    font-size: 8px !important;
    padding: 7px 1px !important;
    border-radius: 16px !important;
  }
  .bottom-nav a span { font-size: 14px !important; }
  .gift-card { width: min(100%, 332px); padding: 24px 16px; }
  .gift-flower-left { width: 184px; left: -84px; bottom: 60px; }
  .gift-flower-right { width: 164px; right: -86px; top: 78px; }
}

/* ================================
   USER REVISION 3
   - nama & tanggal dibuat terlihat jelas di cover utama
   - bunga depan foto diperkecil
   - judul setiap section dibuat lebih tampak
   ================================ */
.hero-section {
  padding-top: max(54px, calc(env(safe-area-inset-top) + 34px)) !important;
}
.hero-title-block {
  display: block !important;
  opacity: 1;
  visibility: visible;
  margin: 0 auto 4px !important;
  padding: 10px 14px 8px !important;
  border-radius: 26px;
  background: rgba(255, 253, 245, .48);
  border: 1px solid rgba(255,255,255,.50);
  backdrop-filter: blur(5px);
  box-shadow: 0 14px 34px rgba(120, 94, 64, .10);
}
.hero-title-block h2 {
  color: #6d4f73 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.86), 0 12px 28px rgba(116, 83, 123, .16) !important;
}
.hero-title-block .hero-date {
  color: #7d5c46 !important;
}
.hero-date-caption {
  position: relative;
  z-index: 9;
  width: min(100%, 330px);
  text-align: center;
  margin: 6px auto 2px;
  padding: 0 12px;
  filter: drop-shadow(0 4px 10px rgba(255,255,255,.80));
}
.hero-date-caption h3 {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-size: 42px;
  font-weight: 400;
  line-height: .94;
  color: #73547a;
  text-shadow: 0 2px 0 rgba(255,255,255,.86), 0 12px 22px rgba(102, 76, 108, .12);
}
.hero-date-caption p {
  margin: 6px 0 0;
  color: #7c604b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-front-left {
  width: 132px !important;
  left: -34px !important;
  bottom: -18px !important;
}
.hero-front-right {
  width: 126px !important;
  right: -30px !important;
  bottom: -16px !important;
}
.couple-card::before {
  width: 106px !important;
  height: 106px !important;
  left: -12px !important;
  top: 150px !important;
}
.couple-card::after {
  width: 102px !important;
  height: 102px !important;
  right: -8px !important;
  top: 154px !important;
}
.section:not(.hero-section) {
  justify-content: flex-start !important;
  padding-top: 72px !important;
}
.section-heading {
  width: min(100%, 360px);
  margin: 0 auto 24px !important;
  padding: 12px 14px 10px;
  border-radius: 28px;
  background: rgba(255, 253, 245, .62);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 16px 44px rgba(101, 73, 47, .12);
  backdrop-filter: blur(6px);
}
.section-heading .eyebrow {
  margin-bottom: 5px;
}
.section-heading h2 {
  font-size: 52px !important;
  line-height: .96 !important;
}
.gift-section .section-heading {
  background: rgba(255, 249, 236, .08);
  border-color: rgba(214,177,106,.28);
  box-shadow: 0 20px 48px rgba(0,0,0,.16);
}
.gallery-section .section-heading,
.rsvp-section .section-heading,
.wishes-section .section-heading {
  position: relative;
  z-index: 10;
}
.gallery-grid,
.form-card,
.gift-card,
.wish-list,
.event-card,
.couple-card,
.paper-card {
  z-index: 6;
}

@media (max-width: 640px) {
  .hero-section {
    padding-top: max(42px, calc(env(safe-area-inset-top) + 24px)) !important;
    gap: 5px !important;
  }
  .hero-title-block {
    width: min(100%, 330px) !important;
    padding: 8px 12px 6px !important;
    margin-bottom: 2px !important;
  }
  .hero-title-block h2 { font-size: 42px !important; }
  .hero-title-block .hero-date { font-size: 9.5px !important; }
  .hero-portrait-wrap {
    margin-top: 10px !important;
    width: min(73vw, 286px) !important;
    height: min(38svh, 348px) !important;
    min-height: 260px !important;
  }
  .hero-date-caption {
    margin-top: 4px !important;
    width: min(100%, 310px);
  }
  .hero-date-caption h3 { font-size: 35px; }
  .hero-date-caption p { font-size: 9.6px; }
  .hero-content-framed { margin-top: 4px !important; }
  .hero-content-framed .hero-guest-name { font-size: 11.7px !important; line-height: 1.46 !important; }
  .hero-front-left { width: 105px !important; left: -25px !important; bottom: -13px !important; }
  .hero-front-right { width: 100px !important; right: -22px !important; bottom: -11px !important; }
  .couple-card::before { width: 92px !important; height: 92px !important; left: -10px !important; top: 150px !important; }
  .couple-card::after { width: 88px !important; height: 88px !important; right: -8px !important; top: 154px !important; }
  .section:not(.hero-section) { padding-top: 64px !important; }
  .section-heading {
    width: min(100%, 330px);
    margin-bottom: 20px !important;
    padding: 10px 12px 9px;
  }
  .section-heading h2 { font-size: 45px !important; }
  .section-heading .eyebrow { font-size: 9px; }
}

/* ================================
   USER REVISION 4 - FIX JUDUL HILANG
   Penyebab: class .lux-title menunggu .show dari IntersectionObserver.
   Pada beberapa browser / file lokal, heading sudah lewat area observer sehingga tetap ter-clip.
   Heading penting dibuat selalu visible, sedangkan card/foto tetap memakai animate-on-scroll.
   ================================ */
.hero-title-block,
.hero-title-block.reveal,
.hero-date-caption,
.hero-date-caption.reveal,
.section-heading,
.section-heading.reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0,0,0) scale(1) !important;
  filter: none !important;
  clip-path: inset(-12% -12% -12% -12% round 32px) !important;
  will-change: auto !important;
}

.hero-title-block *,
.hero-date-caption *,
.section-heading * {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-title-block {
  position: relative !important;
  z-index: 40 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  background: rgba(255,253,245,.66) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 18px 42px rgba(120,94,64,.13) !important;
  backdrop-filter: blur(6px) !important;
}

.hero-title-block h2 {
  color: #73547a !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.92), 0 12px 28px rgba(116,83,123,.18) !important;
}

.hero-title-block .hero-date,
.hero-date-caption p {
  color: #7d6048 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.86) !important;
}

.hero-date-caption {
  position: relative !important;
  z-index: 38 !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  padding: 7px 12px 5px !important;
  border-radius: 24px !important;
  background: rgba(255,253,245,.52) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow: 0 12px 30px rgba(120,94,64,.10) !important;
  backdrop-filter: blur(4px) !important;
}

.section-heading {
  position: relative !important;
  z-index: 50 !important;
  background: rgba(255,253,245,.78) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow: 0 18px 48px rgba(101,73,47,.16) !important;
}

.gift-section .section-heading {
  background: rgba(44,26,18,.78) !important;
  border-color: rgba(214,177,106,.36) !important;
}

@media (max-width: 640px) {
  .hero-title-block {
    width: min(100%, 326px) !important;
    padding: 8px 12px 7px !important;
    margin-bottom: 8px !important;
  }
  .hero-title-block h2 { font-size: 36px !important; line-height: .95 !important; }
  .hero-title-block .eyebrow { font-size: 8.4px !important; letter-spacing: .22em !important; }
  .hero-title-block .hero-date { font-size: 9px !important; }
  .hero-date-caption {
    width: min(100%, 302px) !important;
    margin-top: 7px !important;
    padding: 6px 10px 5px !important;
  }
  .hero-date-caption h3 { font-size: 30px !important; }
  .hero-date-caption p { font-size: 8.8px !important; }
  .section-heading {
    width: min(100%, 318px) !important;
    padding: 11px 12px 9px !important;
  }
  .section-heading h2 { font-size: 38px !important; }
}


/* ================================
   USER REVISION 5
   - Nama & tanggal pada home hanya tampil satu kali.
   - Send Your Gift kembali ke warna tema garden lavender/cream.
   - Judul section memakai animate-on-scroll lagi, tidak lagi dipaksa tampil statis.
   ================================ */
.hero-date-caption,
.hero-date-caption.reveal {
  display: none !important;
}

.hero-title-block {
  margin-bottom: 16px !important;
}

.hero-portrait-wrap {
  margin-top: 0 !important;
}

.gift-section {
  color: #5f5044 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,250,239,.76) 35%, rgba(244,235,252,.78) 68%, rgba(255,248,236,.96) 100%),
    url('../assets/ornaments/design-final.webp') center/cover no-repeat !important;
}

.gift-section::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.76), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,247,232,.58)) !important;
  opacity: 1 !important;
}

.gift-section .section-heading {
  background: rgba(255,253,245,.82) !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: 0 20px 54px rgba(117,84,49,.14) !important;
}

.gift-section .section-heading h2 {
  color: #73547a !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 14px 26px rgba(116,83,123,.13) !important;
}

.gift-section .eyebrow.gold {
  color: #9b7335 !important;
}

.gift-card {
  background: rgba(255,253,245,.86) !important;
  color: #655447 !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 28px 72px rgba(117,84,49,.18), inset 0 1px 0 rgba(255,255,255,.75) !important;
  backdrop-filter: blur(10px) !important;
}

.gift-intro {
  color: #6e5e50 !important;
}

.bank-card {
  color: #5f5044 !important;
  background: linear-gradient(180deg, rgba(255,249,239,.94), rgba(244,235,252,.78)) !important;
  border-color: rgba(157,122,192,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 14px 28px rgba(105,78,118,.10) !important;
}

.bank-card span {
  color: #9b7335 !important;
}

.bank-card small {
  color: #76675a !important;
}

.gift-copy {
  background: #95649e !important;
  box-shadow: 0 16px 32px rgba(125,87,137,.24), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.gift-copy:hover {
  background: #83578d !important;
}

.gift-section .form-note {
  color: #76675a !important;
}

.gift-flower-left,
.gift-flower-right {
  opacity: .66 !important;
  filter: drop-shadow(0 16px 22px rgba(117,84,49,.16)) !important;
}

/* Section title AOS: judul kembali masuk dengan animasi mewah saat discroll. */
.section-heading.reveal:not(.show) {
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(0, 48px, 0) scale(.92) !important;
  filter: blur(14px) saturate(.82) !important;
  clip-path: inset(0 18% 100% 18% round 30px) !important;
  will-change: transform, opacity, filter, clip-path !important;
}

.section-heading.reveal.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: blur(0) saturate(1) !important;
  clip-path: inset(-12% -12% -12% -12% round 32px) !important;
  transition:
    opacity 1.05s ease var(--reveal-delay),
    transform 1.18s cubic-bezier(.16,.9,.18,1) var(--reveal-delay),
    filter 1.05s ease var(--reveal-delay),
    clip-path 1.18s cubic-bezier(.16,.9,.18,1) var(--reveal-delay) !important;
}

@media (max-width: 640px) {
  .hero-title-block {
    margin-bottom: 16px !important;
  }
  .hero-portrait-wrap {
    margin-top: 0 !important;
  }
  .gift-card {
    width: min(100%, 330px) !important;
  }
}