:root {
  --beige: #E8E0D5;
  --brown: #8B7355;
  --coffee: #3F3025;
  --ivory: #F8F4ED;
  --gold: #B99154;
  --line: rgba(139, 115, 85, 0.25);
  --shadow: 0 24px 60px rgba(63, 48, 37, 0.12);
}

/* Local utility layer keeps the layout identical without depending on a CDN. */
.absolute { position: absolute; }
.relative { position: relative; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.overflow-hidden { overflow: hidden; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.w-full { width: 100%; }
.z-10 { z-index: 10; }
.mx-auto { margin-inline: auto; }
.my-7 { margin-block: 1.75rem; }
.my-9 { margin-block: 2.25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-14 { margin-bottom: 3.5rem; }
.px-5 { padding-inline: 1.25rem; }
.px-6 { padding-inline: 1.5rem; }
.pb-20 { padding-bottom: 5rem; }
.py-24 { padding-block: 6rem; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.bottom-7 { bottom: 1.75rem; }
.min-h-screen { min-height: 100vh; min-height: 100svh; }
.min-h-\[72vh\] { min-height: 72vh; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.font-body { font-family: 'Poppins', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }
.font-semibold { font-weight: 600; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-6xl { font-size: 3.75rem; }
.leading-none { line-height: 1; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-relaxed { line-height: 1.625; }
.tracking-\[0\.18em\] { letter-spacing: .18em; }
.tracking-\[0\.2em\] { letter-spacing: .2em; }
.tracking-\[0\.25em\] { letter-spacing: .25em; }
.tracking-\[0\.3em\] { letter-spacing: .3em; }
.tracking-\[0\.35em\] { letter-spacing: .35em; }
.text-coffee { color: var(--coffee); }
.text-gold { color: var(--gold); }
.text-ivory { color: var(--ivory); }
.text-stone-300 { color: #d6d3d1; }
.text-stone-400 { color: #a8a29e; }
.text-stone-500 { color: #78716c; }
.text-stone-600 { color: #57534e; }
.bg-coffee { background-color: var(--coffee); }
.bg-ivory { background-color: var(--ivory); }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

@media (min-width: 640px) {
  .sm\:pb-28 { padding-bottom: 7rem; }
  .sm\:text-sm { font-size: .875rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-6xl { font-size: 3.75rem; }
  .sm\:text-7xl { font-size: 4.5rem; }
}

@media (min-width: 768px) {
  .md\:text-8xl { font-size: 6rem; }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: none;
}
body.modal-open { overflow: hidden; }
body:not(.invitation-opened) { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

.section-shell { width: min(1120px, calc(100% - 2.5rem)); margin-inline: auto; }
.section-pad { padding: 5.5rem 0; }
.eyebrow { color: var(--brown); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; line-height: 1.7; text-transform: uppercase; }
.section-title { margin: 0.75rem 0 1.25rem; font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 8vw, 4.5rem); font-weight: 500; line-height: 1.08; }
.ampersand { color: var(--gold); font-style: italic; font-weight: 500; }

.opening-screen {
  min-height: 100svh;
  background:
    linear-gradient(rgba(248, 244, 237, 0.89), rgba(248, 244, 237, 0.96)),
    url('assets/couple-background.jpg') center/cover;
  isolation: isolate;
}
.opening-screen::before,
.closing-section::before { content: ''; position: absolute; inset: 1rem; border: 1px solid rgba(185, 145, 84, 0.55); pointer-events: none; }
.opening-screen::after { content: ''; position: absolute; inset: 1.5rem; border: 1px solid rgba(139, 115, 85, 0.15); pointer-events: none; }
.opening-glow { position: absolute; width: 26rem; height: 26rem; border: 1px solid rgba(185, 145, 84, 0.3); border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.22); }
.scroll-note { white-space: nowrap; color: var(--brown); }
.opening-screen h1 { font-size: clamp(3.15rem, 16vw, 5.5rem); line-height: .98; overflow-wrap: anywhere; }
.ornament-line { display: flex; align-items: center; gap: 0.8rem; width: min(220px, 65vw); color: var(--gold); }
.ornament-line::before, .ornament-line::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: 0.65; }
.ornament-line.light { color: var(--gold); }

.primary-btn {
  display: inline-flex; align-items: center; gap: 0.65rem; min-height: 48px; padding: 0.78rem 1.45rem;
  border: 1px solid var(--coffee); border-radius: 999px; background: var(--coffee); color: white;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(63, 48, 37, 0.18); cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease;
}
.primary-btn:hover { transform: translateY(-2px); background: var(--gold); border-color: var(--gold); color: var(--coffee); }
.primary-btn:focus-visible, .modal-close:focus-visible, .music-btn:focus-visible, .lightbox button:focus-visible, .gallery-item:focus-visible { outline: 3px solid rgba(185,145,84,.55); outline-offset: 3px; }

.countdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 650px; margin: 2.5rem auto 0; }
.countdown-item { padding: 1.25rem 0.5rem; border: 1px solid rgba(232,224,213,.2); background: rgba(255,255,255,.04); }
.countdown-item strong { display: block; font-family: 'Playfair Display', serif; font-size: clamp(2.2rem, 10vw, 4rem); font-weight: 500; line-height: 1; color: var(--beige); }
.countdown-item span { display: block; margin-top: .65rem; color: #c9bfb4; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }

.couple-grid { display: grid; gap: 2.25rem; align-items: center; max-width: 900px; margin: auto; }
.couple-card { text-align: center; }
.arch-frame { position: relative; width: min(260px, 72vw); aspect-ratio: 4/5; padding: 7px; border: 1px solid var(--gold); border-radius: 50% 50% 8px 8px; }
.arch-frame::before { content: ''; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--line); border-radius: inherit; z-index: 0; }
.arch-frame img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: calc(50% - 5px) calc(50% - 5px) 3px 3px; object-fit: cover; filter: sepia(.12) contrast(.95); }
.script-mark { margin-top: 1.8rem; color: var(--gold); font-family: 'Playfair Display', serif; font-size: 1rem; font-style: italic; letter-spacing: .14em; }
.couple-symbol { display: none; color: var(--gold); font-size: 4rem; font-style: italic; }

.quran-box { position: relative; padding: 3rem 1.5rem 2.25rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(232,224,213,.42); box-shadow: 0 15px 40px rgba(63,48,37,.06); }
.quran-mark { display: grid; place-items: center; position: absolute; top: -1.1rem; left: 50%; translate: -50%; width: 2.2rem; height: 2.2rem; background: var(--ivory); color: var(--gold); font-size: 1.35rem; }
.paper-section { background-color: var(--beige); background-image: radial-gradient(rgba(63,48,37,.05) .7px, transparent .7px); background-size: 8px 8px; }

.story-timeline { position: relative; margin-top: 3.5rem; }
.story-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 18px; width: 1px; background: var(--brown); opacity: .35; }
.story-item { position: relative; padding: 0 0 3.25rem 3.5rem; }
.story-item:last-child { padding-bottom: 0; }
.story-dot { position: absolute; left: 9px; top: .35rem; width: 19px; height: 19px; border: 5px solid var(--beige); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.story-date { color: var(--brown); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.story-item h3 { margin: .4rem 0 .65rem; font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 500; }
.story-item p { color: #62574e; line-height: 1.75; }

.event-grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
.event-card { position: relative; padding: 2.4rem 1.4rem; overflow: hidden; border: 1px solid rgba(232,224,213,.25); background: rgba(255,255,255,.045); text-align: center; }
.event-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(185,145,84,.25); pointer-events: none; }
.event-icon { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--gold); }
.event-card h3 { font-family: 'Playfair Display', serif; font-size: 2.1rem; font-weight: 500; }
.event-date { margin: 1.25rem 0; color: #ddd2c4; line-height: 1.8; }
.event-place { font-weight: 500; color: white; }
.map-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.5rem; padding: .7rem 1.2rem; border: 1px solid var(--gold); border-radius: 999px; color: var(--beige); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, color .25s; }
.map-btn:hover { background: var(--gold); color: var(--coffee); }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 3rem; }
.gallery-item { position: relative; min-height: 210px; padding: 0; overflow: hidden; border: 0; background: var(--beige); cursor: zoom-in; }
.gallery-item:nth-child(3n + 1) { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .6s ease, filter .4s ease; }
.gallery-item::after { content: 'Lihat'; display: grid; place-items: center; position: absolute; inset: 0; background: rgba(63,48,37,.35); color: white; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.gallery-item:hover img { transform: scale(1.045); filter: sepia(.15); }
.gallery-item:hover::after { opacity: 1; }

.gift-section { background: linear-gradient(145deg, #eee7dc, #f8f4ed 60%); }
.gift-emblem { display: grid; place-items: center; width: 7rem; height: 8.5rem; margin-bottom: 2rem; border: 1px solid var(--gold); border-radius: 50% 50% 10px 10px; font-family: 'Playfair Display', serif; font-size: 1.9rem; }
.gift-emblem span { color: var(--gold); padding-inline: .2rem; }

.wishes-layout { display: grid; gap: 1.25rem; margin-top: 3rem; }
.form-card, .wishes-panel { padding: 1.4rem; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.field-group { margin-bottom: 1rem; }
.field-group label { display: block; margin-bottom: .45rem; color: var(--coffee); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.field-group input, .field-group textarea, .field-group select { width: 100%; min-height: 48px; padding: .82rem .9rem; border: 1px solid #d9d0c4; border-radius: .35rem; outline: 0; background: #fcfaf6; color: var(--coffee); transition: border-color .2s, box-shadow .2s; }
.field-group textarea { resize: vertical; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,145,84,.13); }
.form-status { min-height: 1.25rem; margin-top: .75rem; color: var(--brown); font-size: .8rem; text-align: center; }
.wishes-panel { min-height: 360px; }
.wish-count { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .6rem; border-radius: 999px; background: var(--beige); color: var(--coffee); font-size: .75rem; }
.wishes-list { max-height: 460px; padding-right: .35rem; overflow-y: auto; }
.wish-item {
  position: relative;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: .75rem;
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(239,232,221,.82));
  box-shadow: 0 8px 20px rgba(60,52,47,.07), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(120,151,153,.12);
  transform: perspective(800px) translateZ(0);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-position .5s ease;
  isolation: isolate;
}
.wish-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 20%, rgba(255,255,255,.46) 42%, transparent 62%),
    repeating-linear-gradient(174deg, transparent 0 22px, rgba(255,255,255,.13) 23px, transparent 25px 42px);
  background-size: 220% 100%, 180% 160%;
  background-position: 140% 0, 0 0;
  opacity: .35;
  pointer-events: none;
}
.wish-item::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: calc(.75rem - 1px);
  background: transparent;
  opacity: .45;
  pointer-events: none;
}
.wish-item > * { position: relative; z-index: 3; }
.wish-item:last-child { border-bottom-color: rgba(255,255,255,.88); }
.wish-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.wish-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 600; }
.attendance-badge { flex: none; padding: .25rem .55rem; border-radius: 999px; background: #eee7dc; color: var(--brown); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.wish-message { color: #62574e; font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.wish-time { margin-top: .5rem; color: #9b8d82; font-size: .68rem; }
.empty-wishes { display: grid; place-items: center; min-height: 250px; color: #8d8177; font-size: .9rem; text-align: center; }

.closing-section { background: linear-gradient(rgba(48,35,27,.92), rgba(48,35,27,.96)), url('assets/couple-background.jpg') center/cover; }

.music-btn { display: flex; align-items: center; justify-content: center; gap: 3px; position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: var(--coffee); color: white; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; }
.music-note { font-size: 1.05rem; }
.music-bars { display: flex; align-items: center; gap: 2px; height: 16px; }
.music-bars i { display: block; width: 2px; height: 5px; background: var(--gold); animation: music-bar .7s ease-in-out infinite alternate; }
.music-bars i:nth-child(2) { height: 12px; animation-delay: -.25s; }
.music-bars i:nth-child(3) { height: 8px; animation-delay: -.45s; }
.music-btn.is-paused .music-bars i { animation-play-state: paused; height: 3px; }

.popup { display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; padding: 1rem; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.popup.is-open { visibility: visible; opacity: 1; }
.popup-backdrop { position: absolute; inset: 0; background: rgba(25,18,14,.74); backdrop-filter: blur(5px); }
.popup-card { position: relative; z-index: 1; width: min(520px, 100%); max-height: 88vh; padding: 2rem 1.25rem 1.35rem; overflow-y: auto; border-radius: .8rem; background: var(--ivory); box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: translateY(15px) scale(.98); transition: transform .25s; }
.popup.is-open .popup-card { transform: none; }
.modal-close { position: absolute; top: .7rem; right: .8rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--coffee); font-size: 1.8rem; cursor: pointer; }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line); background: white; }
.account-number { margin: .15rem 0; font-size: 1.08rem; font-weight: 600; letter-spacing: .06em; }
.copy-btn { flex: none; min-height: 38px; padding: .5rem .8rem; border: 1px solid var(--brown); border-radius: 999px; background: transparent; color: var(--brown); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.qris-card, .address-card { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--line); background: white; text-align: center; }
.qris-placeholder { display: grid; place-items: center; width: 150px; aspect-ratio: 1; margin: auto; border: 10px solid white; outline: 1px solid var(--line); color: var(--coffee); background: repeating-conic-gradient(#3f3025 0 25%, transparent 0 50%) 0/18px 18px; }
.qris-placeholder span, .qris-placeholder small { padding: .2rem .35rem; background: white; }
.qris-placeholder small { margin-top: -2.2rem; font-size: .55rem; }

.lightbox { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 70; padding: 4rem 3.5rem; visibility: hidden; opacity: 0; background: rgba(20,14,10,.94); transition: opacity .25s, visibility .25s; }
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox figure { max-width: min(1000px, 100%); max-height: 82vh; margin: 0; text-align: center; }
.lightbox img { max-height: 76vh; margin: auto; object-fit: contain; box-shadow: 0 20px 70px rgba(0,0,0,.4); }
.lightbox figcaption { margin-top: .75rem; color: #d6cabb; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.lightbox-close, .lightbox-nav { position: absolute; border: 0; background: transparent; color: white; cursor: pointer; }
.lightbox-close { top: 1rem; right: 1rem; width: 48px; height: 48px; font-size: 2.5rem; }
.lightbox-nav { top: 50%; translate: 0 -50%; width: 48px; height: 70px; font-size: 3rem; }
.lightbox-nav.prev { left: .25rem; }
.lightbox-nav.next { right: .25rem; }

[data-aos="fade-up"] { opacity: 1; transform: none; }
.aos-enabled [data-aos="fade-up"] { transform: translate3d(0, 22px, 0); opacity: 0; transition: transform .65s ease, opacity .65s ease; }
.aos-enabled [data-aos="fade-up"].aos-animate { transform: translate3d(0, 0, 0); opacity: 1; }

@keyframes music-bar { from { transform: scaleY(.5); } to { transform: scaleY(1.25); } }

@media (max-width: 639px) {
  .section-shell { width: min(100% - 2rem, 1120px); }
  .section-pad { padding: 4.5rem 0; }
  .opening-screen { padding-inline: 1.5rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .opening-screen::before { inset: .65rem; }
  .opening-screen::after { inset: 1rem; }
  .opening-glow { width: min(22rem, 88vw); height: min(22rem, 88vw); }
  .opening-screen h1 { max-width: 20rem; margin-inline: auto; }
  .opening-screen .eyebrow { margin-bottom: 1.25rem; }
  .scroll-note { bottom: max(1.2rem, env(safe-area-inset-bottom)); font-size: .65rem; }
  .primary-btn { min-height: 50px; padding-inline: 1.25rem; }
  .countdown-grid { gap: .6rem; }
  .countdown-item { padding-block: 1rem; }
  .countdown-item strong { font-size: clamp(2rem, 12vw, 3rem); }
  .couple-grid { gap: 3.5rem; }
  .couple-card + .couple-card { margin-top: .25rem; }
  .quran-box { border-radius: .75rem; }
  .story-timeline { margin-top: 2.75rem; }
  .story-item { padding-left: 3rem; }
  .event-grid, .gallery-grid, .wishes-layout { margin-top: 2.4rem; }
  .event-card { padding: 2.25rem 1.15rem; }
  .map-btn { justify-content: center; width: min(100%, 240px); min-height: 48px; }
  .gallery-grid { gap: .5rem; }
  .gallery-item { min-height: 170px; }
  .form-card, .wishes-panel { padding: 1.15rem; border-radius: .5rem; }
  .field-group input, .field-group textarea, .field-group select { font-size: 1rem; }
  .wishes-panel { min-height: 300px; }
  .wish-meta { align-items: flex-start; }
  .attendance-badge { max-width: 45%; text-align: center; white-space: normal; }
  .music-btn { right: max(.85rem, env(safe-area-inset-right)); bottom: max(.85rem, env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  .popup { align-items: end; padding: 0; }
  .popup-card { width: 100%; max-height: 92svh; padding: 2rem 1rem max(1.25rem, env(safe-area-inset-bottom)); border-radius: 1.25rem 1.25rem 0 0; }
  .account-card { align-items: flex-start; }
  .account-number { font-size: 1rem; overflow-wrap: anywhere; }
  .copy-btn { min-width: 68px; min-height: 44px; }
  .lightbox { padding: 4rem 2.4rem 3rem; }
  .lightbox img { max-height: 72svh; }
  .lightbox-nav { width: 42px; }
  .lightbox-nav.prev { left: 0; }
  .lightbox-nav.next { right: 0; }
  .closing-section { min-height: 72svh; padding-inline: 1.5rem; }
}

@media (max-width: 480px) {
  .hero-card { width: calc(100% - 1.2rem); padding: 2.9rem 1rem 2.15rem; }
  .opening-screen h1 { font-size: clamp(2.7rem, 15vw, 3.6rem); }
  .section-pad { padding: 4.2rem 0; }
}

@media (max-width: 360px) {
  .opening-screen h1 { font-size: 2.85rem; }
  .section-title { font-size: 2.25rem; }
  .eyebrow { letter-spacing: .18em; }
  .countdown-item span { letter-spacing: .12em; }
  .gallery-item { min-height: 150px; }
  .account-card { display: grid; }
  .copy-btn { width: 100%; }
}

@media (min-width: 640px) {
  .section-pad { padding: 7rem 0; }
  .countdown-grid { grid-template-columns: repeat(4, 1fr); }
  .quran-box { padding: 3.5rem 3rem 2.6rem; }
  .event-card { padding: 3rem 2rem; }
  .gallery-grid { gap: 1rem; }
  .gallery-item { min-height: 280px; }
  .form-card, .wishes-panel { padding: 2rem; }
  .popup-card { padding: 2.5rem; }
}

@media (min-width: 768px) {
  .couple-grid { grid-template-columns: 1fr auto 1fr; }
  .couple-symbol { display: block; }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-item:nth-child(3n + 1) { grid-row: auto; }
  .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-row: span 2; }
  .wishes-layout { grid-template-columns: .95fr 1.05fr; gap: 1.5rem; align-items: start; }
  .story-timeline::before { left: 50%; }
  .story-item { width: 50%; padding: 0 3rem 3.5rem 0; text-align: right; }
  .story-item:nth-child(even) { margin-left: 50%; padding: 0 0 3.5rem 3rem; text-align: left; }
  .story-dot { left: auto; right: -10px; }
  .story-item:nth-child(even) .story-dot { left: -9px; right: auto; }
}

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

/* Video-reference direction: a slim invitation card floating over a fixed portrait stage. */
:root {
  --beige: #d8d1c7;
  --brown: #8a776b;
  --coffee: #514a46;
  --ivory: #fbfaf7;
  --gold: #9d8575;
  --line: rgba(91, 79, 72, .16);
  --shadow: 0 24px 70px rgba(41, 37, 34, .22);
}

body {
  min-height: 100%;
  background:
    linear-gradient(rgba(228, 229, 228, .8), rgba(205, 204, 200, .9)),
    url('assets/couple-background.jpg') center/cover fixed;
  color: var(--coffee);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(245,245,243,.08), rgba(255,255,255,.62) 38%, rgba(255,255,255,.62) 62%, rgba(245,245,243,.08));
  pointer-events: none;
}

.portrait-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stage-portrait {
  position: absolute;
  bottom: 0;
  width: min(36vw, 500px);
  height: 88svh;
  object-fit: cover;
  object-position: center;
  opacity: .72;
  filter: grayscale(.35) sepia(.08) saturate(.75) contrast(.88);
  -webkit-mask-image: linear-gradient(to top, #000 76%, transparent 100%);
  mask-image: linear-gradient(to top, #000 76%, transparent 100%);
}
.stage-bride { left: max(-9vw, calc(50% - 500px)); border-radius: 48% 48% 0 0; }
.stage-groom { right: max(-9vw, calc(50% - 500px)); border-radius: 48% 48% 0 0; }

main {
  position: relative;
  z-index: 1;
  width: min(84vw, 380px);
  margin-inline: auto;
  padding: 1rem 0 3rem;
}

main > section {
  position: relative;
  width: 100%;
  margin: 0 auto 1rem;
  border-radius: 1.15rem;
  box-shadow: 0 15px 45px rgba(50, 45, 42, .14);
}

.section-shell { width: min(100% - 2rem, 1120px); }
.section-pad { padding: 4.75rem 0; }
.section-title { font-size: clamp(2.15rem, 10vw, 3.25rem); }
.eyebrow { font-size: .7rem; letter-spacing: .2em; }

.opening-screen {
  min-height: calc(100svh - 2rem);
  margin-bottom: 1rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(rgba(90, 88, 86, .34), rgba(83, 79, 76, .46)),
    url('assets/couple-background.jpg') center/cover;
  box-shadow: var(--shadow);
}
.opening-screen::before { inset: .65rem; border-color: rgba(255,255,255,.35); border-radius: .85rem; }
.opening-screen::after { display: none; }
.opening-glow { display: none; }
.hero-monogram {
  position: absolute;
  top: 2rem;
  left: 50%;
  translate: -50%;
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  letter-spacing: -.16em;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.hero-monogram span { color: rgba(255,255,255,.7); font-size: .7em; }
.hero-card {
  width: calc(100% - 3rem);
  padding: 3.4rem 1.25rem 2.5rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 1.1rem;
  background: rgba(55, 53, 52, .26);
  color: white;
  box-shadow: 0 22px 55px rgba(31, 29, 28, .22);
  backdrop-filter: blur(2px);
}
.opening-screen .eyebrow, .opening-screen #guestName, .opening-screen h1 { color: white; text-shadow: 0 2px 18px rgba(0,0,0,.2); }
.opening-screen .hero-card > p:not(.eyebrow) { color: rgba(255,255,255,.84) !important; }
.opening-screen h1 { max-width: none; font-size: clamp(2.55rem, 13vw, 4rem); }
.opening-screen .ornament-line { color: rgba(255,255,255,.7); }
.opening-screen .primary-btn { border-color: rgba(255,255,255,.75); background: rgba(74,68,64,.38); color: white; box-shadow: none; }
.opening-screen .primary-btn:hover { background: white; color: var(--coffee); }
.scroll-note { color: rgba(255,255,255,.85); }

#countdownSection, #events, #closing {
  background: #c8c0b5 !important;
  color: var(--coffee) !important;
}
#countdownSection .text-ivory, #events .text-ivory, #closing .text-ivory { color: var(--coffee) !important; }
#countdownSection .text-stone-300, #closing .text-stone-300 { color: #645b56 !important; }
#countdownSection .text-gold, #events .text-gold, #closing .text-gold { color: #765f52 !important; }
.countdown-grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.countdown-item { padding: 1rem .2rem; border-color: rgba(255,255,255,.55); border-radius: .65rem; background: rgba(255,255,255,.28); }
.countdown-item strong { color: var(--coffee); font-size: clamp(1.6rem, 9vw, 2.35rem); }
.countdown-item span { color: #6e645e; font-size: .58rem; letter-spacing: .1em; }

#couple, #gallery, #wishes { background: #fbfaf7 !important; }
.couple-grid { display: grid; grid-template-columns: 1fr; gap: 3.75rem; }
.couple-symbol { display: none; }
.couple-card { padding: 0 .5rem; }
.arch-frame { width: min(230px, 76%); border-radius: 45% 45% .85rem .85rem; border-color: #b7a89c; }
.arch-frame img { border-radius: calc(45% - 5px) calc(45% - 5px) .55rem .55rem; }
.quran-box { border: 0; background: rgba(255,255,255,.78); box-shadow: none; }
main > section:has(.quran-box) { background: #d8d1c7; padding-top: 2rem !important; }
.paper-section, .gift-section { background-color: #d8d1c7; background-image: radial-gradient(rgba(63,48,37,.045) .7px, transparent .7px); }

.event-grid { grid-template-columns: 1fr; gap: .9rem; }
.event-card { padding: 2.25rem 1.25rem; border-color: rgba(255,255,255,.65); border-radius: .85rem; background: rgba(255,255,255,.72); color: var(--coffee); }
.event-card::before { display: none; }
.event-card .event-date { color: #655b55; }
.event-card .event-place { color: var(--coffee); }
.event-card .event-icon { color: #8b7669; }
.map-btn { border-color: #967f72; background: #967f72; color: white; }

.gallery-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
.gallery-item { min-height: 180px; border-radius: .75rem; }
.gallery-item:first-child { grid-column: 1 / -1; min-height: 340px; }
.gallery-item:nth-child(3n + 1), .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-row: auto; }

.gift-emblem { width: 6rem; height: 7.2rem; background: rgba(255,255,255,.35); }
.form-card, .wishes-panel { border: 0; border-radius: .85rem; box-shadow: 0 10px 28px rgba(60,52,47,.08); }
.wishes-layout { grid-template-columns: 1fr; }
.field-group input, .field-group textarea, .field-group select { border-radius: .65rem; background: #f5f2ed; }

.closing-section {
  min-height: 70svh;
  background: linear-gradient(rgba(200,192,181,.82),rgba(200,192,181,.94)), url('assets/couple-background.jpg') center/cover !important;
}
.closing-section::before { border-color: rgba(255,255,255,.42); border-radius: .85rem; }
.closing-section .ornament-line { color: #806b5f; }
.closing-section .text-stone-400 { color: #746a64 !important; }

.music-btn { right: max(calc((100vw - min(90vw, 430px))/2 + .75rem), .75rem); bottom: max(.85rem, env(safe-area-inset-bottom)); width: 46px; height: 46px; background: rgba(92,81,74,.9); backdrop-filter: blur(7px); }
.popup-card { background: #f6f3ee; }

@media (max-width: 639px) {
  main { width: min(84vw, 380px); padding-top: .6rem; }
  main > section { margin-bottom: .75rem; }
  .section-shell { width: calc(100% - 1.65rem); }
  .section-pad { padding: 4rem 0; }
  .opening-screen { min-height: calc(100svh - 1.2rem); }
  .opening-screen::before { inset: .5rem; }
  .hero-card { width: calc(100% - 2rem); padding-inline: 1rem; }
  .opening-screen h1 { font-size: clamp(2.35rem, 13vw, 3.3rem); }
  .stage-portrait { width: 48vw; height: 84svh; opacity: .65; }
  .stage-bride { left: -25vw; }
  .stage-groom { right: -25vw; }
  .countdown-grid { grid-template-columns: repeat(4, 1fr); }
  .event-card { padding-inline: 1rem; }
  .gallery-item:first-child { min-height: 300px; }
  .music-btn { right: 1.1rem; }
}

@media (min-width: 768px) {
  .couple-grid, .event-grid, .wishes-layout { grid-template-columns: 1fr; }
  .story-timeline::before { left: 18px; }
  .story-item, .story-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 3.25rem 3.5rem; text-align: left; }
  .story-dot, .story-item:nth-child(even) .story-dot { left: 9px; right: auto; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

body {
  background:
    linear-gradient(rgba(64, 54, 48, .35), rgba(50, 42, 37, .55)),
    url('assets/couple-background.jpg') center / cover fixed;
}

body::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(31, 28, 27, .3), rgba(255, 255, 255, .1) 36%, rgba(255, 255, 255, .1) 64%, rgba(31, 28, 27, .3)),
    linear-gradient(to bottom, transparent 38%, rgba(54, 45, 40, .16));
}

.portrait-stage { display: none; }
main { z-index: 2; }

.opening-screen {
  background:
    linear-gradient(rgba(44, 40, 38, .14), rgba(35, 32, 30, .38)),
    url('assets/couple-background.jpg') center 42% / cover no-repeat;
}

.closing-section {
  background:
    linear-gradient(rgba(74, 68, 64, .58), rgba(57, 53, 50, .78)),
    url('assets/couple-background.jpg') center 66% / cover no-repeat !important;
}

/* One centered wish card per scroll step, with the supplied Drive image. */
#wishes .section-shell { width: min(100% - 1.5rem, 400px); }
.wishes-panel { padding: 1rem; overflow: hidden; background: rgba(251, 250, 247, .9); backdrop-filter: blur(14px); }
.wishes-list {
  height: min(62svh, 480px);
  max-height: none;
  padding: 112px .25rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-block: 112px;
  scrollbar-width: thin;
  scrollbar-color: rgba(105, 91, 83, .4) transparent;
}

.wish-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - .5rem);
  min-height: 235px;
  margin: 0 auto 1rem;
  padding: 1.4rem;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  color: white;
  border-color: rgba(255,255,255,.55);
  background:
    linear-gradient(145deg, rgba(31, 27, 25, .32), rgba(35, 29, 26, .68)),
    url('assets/gallery-01.jpg') center / cover no-repeat,
    url('assets/couple-background.jpg') center / cover no-repeat;
  box-shadow: 0 18px 40px rgba(42, 35, 31, .2), inset 0 1px 0 rgba(255,255,255,.58);
  opacity: .46;
  transform: perspective(900px) translateY(0) scale(.88) rotateX(3deg);
  filter: saturate(.72);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.75,.25,1), filter .4s ease, box-shadow .4s ease;
}

.wish-item.is-current {
  opacity: 1;
  filter: saturate(1);
  transform: perspective(900px) scale(1);
  box-shadow: 0 24px 55px rgba(42, 35, 31, .32), inset 0 1px 0 rgba(255,255,255,.7);
}

.wish-item::before {
  z-index: 1;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.32) 43%, transparent 66%);
}
.wish-item::after { z-index: 1; }
.wish-item > * { z-index: 3; }
.wish-name, .wish-message { color: white; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.wish-time { color: rgba(255,255,255,.76); }
.attendance-badge { background: rgba(255,255,255,.85); color: #554940; }

@media (prefers-reduced-motion: reduce) {
  .wish-item { transition: none; }
}

/* Shared photographic surface for every content card. */
:root { --shared-card-photo: url('assets/gallery-01.jpg'); }

main > section:not(.opening-screen):not(.closing-section),
.hero-card,
.countdown-item,
.couple-card,
.quran-box,
.story-item,
.event-card,
.gift-emblem,
.form-card,
.wishes-panel,
.popup-card,
.account-card,
.qris-card,
.address-card {
  background-image:
    linear-gradient(145deg, rgba(251,250,247,.91), rgba(232,225,216,.88)),
    var(--shared-card-photo) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(10px);
}

.couple-card,
.story-item {
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: .9rem;
  box-shadow: 0 14px 34px rgba(38,31,28,.13);
}

.wish-item {
  background-image:
    linear-gradient(145deg, rgba(31,27,25,.34), rgba(35,29,26,.7)),
    var(--shared-card-photo) !important;
}

.arch-frame img { object-position: center; }
[data-person="groom"] .arch-frame img { object-position: 28% center; }
[data-person="bride"] .arch-frame img { object-position: 42% center; }

.brand-credit {
  margin-top: 2.25rem;
  color: rgba(255,255,255,.9);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  letter-spacing: .08em;
}

.brand-credit span {
  display: block;
  margin-top: .3rem;
  color: rgba(255,255,255,.68);
  font-family: 'Poppins', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Refined typography and hand-drawn line icons */
.font-display,
.section-title,
.event-card h3,
.story-item h3,
.wish-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif !important;
}

.button-icon,
.music-note {
  display: inline-grid;
  place-items: center;
}

.button-icon svg { width: 1.1rem; height: 1.1rem; }
.music-note svg { width: 1.2rem; height: 1.2rem; }
.button-icon svg,
.music-note svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reference-inspired oval portrait cover using only the couple's local photos. */
.opening-screen {
  flex-direction: column;
  gap: .7rem;
  padding-block: 3.8rem 4.1rem;
}

.opening-portrait {
  position: relative;
  z-index: 10;
  width: min(64%, 238px);
  aspect-ratio: .78;
  margin: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(185,145,84,.94);
  border-radius: 49% 49% 46% 46%;
  background: rgba(249,245,237,.78);
  box-shadow: 0 18px 42px rgba(31,23,19,.3), 0 0 0 5px rgba(255,255,255,.18);
}

.opening-portrait::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: inherit;
  pointer-events: none;
}

.opening-portrait img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.92) contrast(.98);
}

.opening-screen .hero-card {
  width: min(82%, 285px);
  margin: 0 auto;
  padding: .85rem 1rem .95rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(255,252,246,.9), rgba(241,231,216,.82)) !important;
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 16px 34px rgba(25,16,12,.2);
  backdrop-filter: blur(12px);
  filter: none;
}

.opening-screen .hero-card .eyebrow { margin-bottom: .28rem !important; color: #714b31; font-size: .52rem; letter-spacing: .2em; text-shadow: none; }
.opening-screen .hero-card h1 { margin-bottom: .2rem !important; color: #53341f; font-size: clamp(1.5rem, 7vw, 1.95rem); line-height: .95; white-space: nowrap; text-shadow: none; }
.opening-screen .hero-card .ornament-line { width: min(110px, 52%); margin-block: .38rem !important; color: #a27c4d; }
.opening-screen .hero-card > p:not(.eyebrow) { color: #695548 !important; font-size: .62rem !important; text-shadow: none; }
.opening-screen .hero-card #guestName { margin-bottom: .5rem !important; color: #53341f; font-size: clamp(.92rem, 4vw, 1.15rem); text-shadow: none; }
.opening-screen .hero-card .primary-btn { display: inline-flex; min-height: 36px; padding: .48rem .8rem; border-color: #57321f; background: #57321f; color: #fffaf2; font-size: .56rem; }
.opening-screen .hero-card .primary-btn:hover { background: #b58b53; color: white; }

.opening-screen .hero-card::before,
.opening-screen .hero-card::after {
  content: '❦';
  position: absolute;
  top: 23%;
  color: rgba(151,107,67,.55);
  font-family: Georgia, serif;
  font-size: 1.45rem;
}
.opening-screen .hero-card::before { left: 1.15rem; transform: rotate(-90deg); }
.opening-screen .hero-card::after { right: 1.15rem; transform: rotate(90deg); }

/* Arch and oval treatment for the invitation's content cards. */
.countdown-item {
  border-radius: 999px 999px 1rem 1rem / 2.2rem 2.2rem 1rem 1rem !important;
}

.couple-card,
.quran-box,
.story-item,
.event-card,
.form-card,
.wishes-panel,
.popup-card,
.account-card,
.qris-card,
.address-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 48% 48% 1.1rem 1.1rem / 3.25rem 3.25rem 1.1rem 1.1rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 15px 34px rgba(47,36,31,.16) !important;
}

.couple-card,
.quran-box,
.event-card,
.form-card,
.wishes-panel { padding-top: 2.8rem; }

.story-item { padding-top: 2.25rem; }
.quran-box { overflow: visible; }
.account-card,
.qris-card,
.address-card { padding-top: 1.8rem; }

/* Scroll-driven Javanese cinematic interlude. */
.cinematic-section {
  height: 100svh;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cinematic-stage {
  --journey-scale: .92;
  --journey-image-scale: 1.06;
  position: relative;
  top: 0;
  height: 100svh;
  overflow: hidden;
  border-radius: 1.15rem;
  isolation: isolate;
  background:
    linear-gradient(rgba(54,42,35,.38), rgba(44,32,27,.7)),
    url('assets/joglo.jpg') center / cover;
}

.cinematic-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 72%, transparent 0 22%, rgba(34,25,20,.52) 74%),
    linear-gradient(to bottom, rgba(233,216,190,.12), rgba(41,30,25,.72));
}

.forest-haze {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .82;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(247,232,207,.36), transparent 34%),
    repeating-linear-gradient(105deg, transparent 0 42px, rgba(255,244,220,.035) 44px, transparent 49px 90px);
  animation: forest-breathe 7s ease-in-out infinite alternate;
}

.gunungan-portal {
  position: absolute;
  top: 9%;
  left: 50%;
  z-index: 3;
  width: 84%;
  height: 68%;
  overflow: hidden;
  clip-path: polygon(50% 0, 78% 13%, 95% 38%, 100% 62%, 83% 82%, 50% 100%, 17% 82%, 0 62%, 5% 38%, 22% 13%);
  background: #2f1e19;
  box-shadow: 0 30px 70px rgba(20,12,9,.58);
  transform: translateX(-50%) scale(var(--journey-scale));
  transform-origin: center 58%;
  transition: transform .15s linear;
}

.gunungan-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
  filter: sepia(1) saturate(.62) brightness(.58) contrast(1.22);
  mix-blend-mode: screen;
}

.portal-window {
  position: absolute;
  inset: 4%;
  overflow: hidden;
  clip-path: inherit;
  background: #49342a;
}

.portal-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(87,61,47,.2), rgba(39,27,22,.7));
  box-shadow: inset 0 0 70px rgba(25,15,11,.72);
}

.portal-window video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.72) saturate(.68) contrast(1.02);
  transform: scale(var(--journey-image-scale));
  transition: transform .15s linear;
}

.cinematic-copy {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 8.5%;
  z-index: 8;
  color: white;
  text-align: center;
  text-shadow: 0 3px 20px rgba(0,0,0,.7);
  transition: opacity .6s, transform .6s;
}
.cinematic-copy h2 { margin-top: .35rem; font-family: 'Cormorant Garamond', serif; font-size: 2.55rem; font-weight: 600; }
.cinematic-stage.phase-birds .cinematic-copy { opacity: 0; transform: translateY(20px); }

.bird-flock,
.butterfly-flock { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.bird-flock img {
  position: absolute;
  left: 50%;
  top: 44%;
  width: clamp(24px, 8vw, 46px);
  opacity: 0;
  filter: brightness(0) invert(1) drop-shadow(0 4px 7px rgba(35,25,20,.32));
}
.cinematic-stage.phase-birds .bird-flock img { animation: bird-flight 3s cubic-bezier(.16,.58,.26,1) forwards; }
.bird-flock img:nth-child(1) { --bird-x: -185px; --bird-y: -330px; --bird-r: -16deg; animation-delay: 0s !important; }
.bird-flock img:nth-child(2) { --bird-x: 145px; --bird-y: -280px; --bird-r: 12deg; animation-delay: .12s !important; }
.bird-flock img:nth-child(3) { --bird-x: -105px; --bird-y: -245px; --bird-r: -8deg; animation-delay: .22s !important; }
.bird-flock img:nth-child(4) { --bird-x: 190px; --bird-y: -190px; --bird-r: 18deg; animation-delay: .34s !important; }
.bird-flock img:nth-child(5) { --bird-x: -210px; --bird-y: -150px; --bird-r: -20deg; animation-delay: .42s !important; }
.bird-flock img:nth-child(6) { --bird-x: 95px; --bird-y: -350px; --bird-r: 8deg; animation-delay: .5s !important; }
.bird-flock img:nth-child(7) { --bird-x: -145px; --bird-y: -200px; --bird-r: -14deg; animation-delay: .62s !important; }
.bird-flock img:nth-child(8) { --bird-x: 220px; --bird-y: -315px; --bird-r: 22deg; animation-delay: .7s !important; }
.bird-flock img:nth-child(9) { --bird-x: -65px; --bird-y: -390px; --bird-r: -5deg; animation-delay: .82s !important; }
.bird-flock img:nth-child(10) { --bird-x: 65px; --bird-y: -230px; --bird-r: 5deg; animation-delay: .92s !important; }
.bird-flock img:nth-child(11) { --bird-x: -235px; --bird-y: -275px; --bird-r: -22deg; animation-delay: 1.02s !important; }
.bird-flock img:nth-child(12) { --bird-x: 165px; --bird-y: -380px; --bird-r: 15deg; animation-delay: 1.12s !important; }

.wedding-arch {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(74%, 310px);
  aspect-ratio: .76;
  padding: 2rem 1.2rem;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50% 50% 42% 42%;
  background: rgba(65,45,36,.34);
  color: white;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
  box-shadow: 0 22px 60px rgba(27,17,13,.35), inset 0 0 0 7px rgba(255,255,255,.08);
  backdrop-filter: blur(5px);
  opacity: 0;
  transform: translate(-50%, -44%) scale(.72);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.18,.72,.23,1);
}
.cinematic-stage.phase-arch .wedding-arch { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wedding-arch p { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; }
.wedding-arch h2 { margin: .75rem 0; font-family: 'Cormorant Garamond', serif; font-size: 2.55rem; line-height: .9; }
.wedding-arch h2 span { color: #d9b88c; font-style: italic; }
.wedding-arch time { font-size: .74rem; letter-spacing: .2em; }
.wedding-arch small { margin-top: .75rem; font-size: .56rem; letter-spacing: .08em; }

.butterfly-flock { opacity: 0; transition: opacity .8s .3s; }
.cinematic-stage.phase-arch .butterfly-flock { opacity: 1; }
.butterfly-flock img {
  position: absolute;
  width: 28px;
  filter: sepia(1) saturate(.62) brightness(.82) drop-shadow(0 3px 4px rgba(35,22,16,.28));
  animation: butterfly-float 5.8s ease-in-out infinite alternate;
}
.butterfly-flock img:nth-child(1) { left: 9%; top: 24%; animation-delay: -.4s; }
.butterfly-flock img:nth-child(2) { left: 77%; top: 19%; width: 20px; animation-delay: -2.1s; }
.butterfly-flock img:nth-child(3) { left: 16%; top: 61%; width: 21px; animation-delay: -3.7s; }
.butterfly-flock img:nth-child(4) { left: 81%; top: 68%; width: 31px; animation-delay: -1.3s; }
.butterfly-flock img:nth-child(5) { left: 5%; top: 78%; width: 18px; animation-delay: -4.2s; }
.butterfly-flock img:nth-child(6) { left: 70%; top: 40%; width: 23px; animation-delay: -2.8s; }
.butterfly-flock img:nth-child(7) { left: 24%; top: 15%; width: 17px; animation-delay: -5s; }
.butterfly-flock img:nth-child(8) { left: 89%; top: 48%; width: 19px; animation-delay: -.9s; }
.butterfly-flock img:nth-child(9) { left: 28%; top: 83%; width: 25px; animation-delay: -3.2s; }

.cinematic-scroll-note {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 10;
  translate: -50%;
  color: rgba(255,255,255,.68);
  font-size: .57rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Compact wishes so the shared couple photograph remains visible. */
.wishes-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 210px;
  padding: 25px 0;
  scroll-padding-block: 25px;
  perspective: 900px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.wish-item {
  flex: 0 0 160px;
  width: min(82%, 270px);
  min-height: 0;
  margin: 0 auto 1rem;
  padding: .85rem .95rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 1.45rem;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.54), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,.26), rgba(28,22,20,.38)),
    var(--shared-card-photo) !important;
  background-position: center, center, center !important;
  background-size: cover !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.72),
    inset 0 -14px 24px rgba(28,20,18,.18),
    0 18px 36px rgba(34,27,24,.24);
  backdrop-filter: blur(12px) saturate(1.18);
  opacity: 0;
  visibility: hidden;
  transform: perspective(900px) translateY(16px) scale(.82) rotateX(8deg);
  transition: opacity .32s ease, visibility .32s ease, transform .45s cubic-bezier(.2,.75,.25,1), box-shadow .4s ease;
}
.wish-item.is-current {
  opacity: 1;
  visibility: visible;
  filter: saturate(1.05);
  transform: perspective(900px) translateY(0) scale(1) rotateX(0);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.8),
    inset 0 -18px 28px rgba(23,17,15,.2),
    0 24px 46px rgba(39,30,27,.3);
}
.wish-item::before {
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.48) 38%, rgba(255,255,255,.08) 57%, transparent 75%);
  opacity: .65;
}
.wish-item::after {
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 1.15rem;
  background: radial-gradient(ellipse at 50% -15%, rgba(255,255,255,.3), transparent 60%);
  opacity: 1;
}
.wish-message {
  display: -webkit-box;
  overflow: hidden;
  font-size: .72rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.wish-name { font-size: .92rem; }
.wish-time { margin-top: .28rem; font-size: .54rem; }
.wish-meta { margin-bottom: .35rem; }
.attendance-badge { padding: .18rem .4rem; font-size: .52rem; }

.brand-credit {
  margin-top: 2.25rem;
  color: rgba(255,255,255,.52);
  font-family: 'Poppins', sans-serif;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand-credit a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 3px; }

@keyframes forest-breathe {
  from { opacity: .66; transform: scale(1); }
  to { opacity: .9; transform: scale(1.04); }
}
@keyframes bird-flight {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.25) rotate(var(--bird-r)); }
  16% { opacity: .96; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bird-x)), var(--bird-y)) scale(1.9) rotate(var(--bird-r)); }
}
@keyframes butterfly-float {
  0% { transform: translate3d(-8px, 8px, 0) rotate(-12deg) scale(.82); }
  45% { transform: translate3d(9px, -14px, 0) rotate(10deg) scale(1); }
  100% { transform: translate3d(-3px, -25px, 0) rotate(-6deg) scale(.9); }
}

@media (max-width: 380px) {
  .opening-screen { gap: .5rem; padding-block: 3.25rem 3.8rem; }
  .opening-portrait { width: 62%; }
  .opening-screen .hero-card { width: 84%; padding: .72rem .72rem .8rem; }
  .wedding-arch h2 { font-size: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .forest-haze,
  .bird-flock img,
  .butterfly-flock img { animation: none !important; }
  .cinematic-stage.phase-birds .bird-flock img { opacity: .65; }
}