@font-face { font-family: "Great Vibes Local"; src: url('./assets/fonts/great-vibes-latin-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: "Libre Baskerville Local"; src: url('./assets/fonts/libre-baskerville-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: block; }
@font-face { font-family: "Libre Baskerville Local"; src: url('./assets/fonts/libre-baskerville-latin-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: block; }
:root { color-scheme: light; background: #f8f7f1; }
* { box-sizing: border-box; }
html { background: #f8f7f1; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #f8f7f1; }
/* One continuous canvas; mirrored texture edges meet without a hard seam. */
.story { display: grid; grid-template-columns: 1fr; position: relative; isolation: isolate; width: min(100%, 56.25svh); margin-inline: auto; background: #fbfaf6; box-shadow: 0 0 76px rgba(60,55,39,.1); overflow: hidden; }
.story-background { grid-column: 1; grid-row: 1 / 7; opacity: 0.2; z-index: -1; display: grid; grid-template-rows: repeat(5, var(--scene-height)) 1fr; pointer-events: none; overflow: hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.story-background > div { background: url('./assets/wood.webp') center / 100% 100% no-repeat; transform: scaleY(1.02); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.story-background > div:nth-child(even) { transform: scaleY(-1.02); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.scene { grid-column: 1; position: relative; width: 100%; aspect-ratio: 1080 / 1920; overflow: visible; }
.scene:nth-of-type(1) { grid-row: 1; }
.scene:nth-of-type(2) { grid-row: 2; }
.scene:nth-of-type(3) { grid-row: 3; }
.scene:nth-of-type(4) { grid-row: 4; }
.scene:nth-of-type(5) { grid-row: 5; }
.scene:nth-of-type(6) { grid-row: 6; }
.stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: top left; transform: scale(var(--stage-scale,.5)); overflow: visible; }
.layer { position: absolute; inset: 0; display: block; width: 1080px; height: 1920px; pointer-events: none; user-select: none; }
.artwork,.table,.food { z-index: 1; object-fit: contain; }
.food { z-index: 2; }
.patch { z-index: 3; inset: auto; object-fit: cover; }
.patch--one { left: 360px; top: 730px; width: 360px; height: 390px; }
.patch--five { left: 330px; top: 90px; width: 420px; height: 430px; }
.copy,.event { position: absolute; z-index: 5; margin: 0; color: #315640; user-select: text; -webkit-user-select: text; }
.script,.name,.cover-title,.event h2 { font-family: "Great Vibes Local",cursive; font-weight: 400; }
.serif,.event p,.event strong,.event small { font-family: "Libre Baskerville Local",serif; font-style: italic; }
.cover-title {
  top: 205px; left: 90px; width: 900px; text-align: center;
  font-family: "Great Vibes Local",cursive; font-size: 115px; line-height: .98;
  transform: rotate(-2.5deg) translateZ(0);
  text-shadow: 0 0 12px rgba(255,255,250,1), 0 0 25px rgba(255,255,250,1), 0 0 45px rgba(255,255,245,.9), 0 0 80px rgba(255,255,240,.85), 0 0 120px rgba(251,250,246,.8), 0 6px 12px rgba(35,67,45,.4);
  animation: cover-title-glow 3.5s ease-in-out infinite;
}
.cover-title span { display: block; }
.cover-title span+span { margin-top: 18px; }
.cover-date { top: 1780px; left: 200px; width: 680px; text-align: center; font-size: 42px; line-height: 1.2; }
.wedding-title { top: 330px; left: 115px; width: 850px; text-align: center; color: #9b4d52; font-size: 102px; line-height: 1; }
.name { width: 880px; text-align: center; font-size: 84px; line-height: 1; }
.name--adya { top: 615px; left: 100px; }
.name--dona { top: 1045px; left: 100px; }
.orange { color: #ee832f; }
.parent { width: 880px; text-align: center; font-size: 34px; line-height: 1.5; }
.parent--adya { top: 745px; left: 100px; }
.parent--dona { top: 1173px; left: 100px; }
.ampersand { z-index: 2; top: 715px; left: 250px; width: 580px; text-align: center; color: #8f78c6; opacity: .28; font: 400 430px/1 "Great Vibes Local",cursive; }
.event { color: #fffdf5; text-align: center; font-family: "Libre Baskerville Local",serif; text-shadow: 0 2px 7px rgba(45,74,35,.18); }
.event h2 { margin: 0 0 8px; font-size: 130px; line-height: 1; }
.event p,.event strong,.event small { display: block; margin: 0; color: inherit; }
.event p,.event strong { font-size: 35px; line-height: 1.2; }
.event small { margin-top: 9px; font-size: 25px; line-height: 1.2; }
.event--akad { top: 300px; left: 320px; width: 560px; text-align: right; }
.event--akad h2 { text-align: left; padding-left: 60px; }
.event--resepsi { top: 745px; left: 100px; width: 440px; text-align: right; }
.event--resepsi h2 { text-align: left; }
.event--lokasi { top: 1148px; left: 460px; width: 600px; text-align: left; }
.event--lokasi h2 { font-size: 140px; padding-left: 60px; }
.event--lokasi strong { font-size: 35px; }
.event--lokasi p { margin-top: 10px; font-size: 29px; line-height: 1.4; }
.story-copy { top: 650px; left: 235px; width: 610px; text-align: center; font-size: 44px; line-height: 1.23; }
.story-copy p,.closing-copy p { margin: 0 0 38px; }
.closing-copy { top: 600px; left: 210px; width: 660px; text-align: center; font-size: 42px; line-height: 1.18; }
.closing-copy p { margin-bottom: 42px; }
.credit { top: 1413px; left: 250px; width: 580px; text-align: center; font: italic 15px/1.3 "Libre Baskerville Local",serif; color: #6b7959; }
.reveal { opacity: 0; filter: blur(5px); transform: translate3d(0,28px,0); transition: opacity .85s ease,transform 1.05s cubic-bezier(.16,.8,.22,1),filter .85s ease; will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; filter: blur(0); transform: translate3d(0,0,0); }
.reveal--1.is-visible { transition-delay: .15s; }
.reveal--2.is-visible { transition-delay: .34s; }
.reveal--3.is-visible { transition-delay: .56s; }
@media (min-width:740px) {
  body {
    background: #111310;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  }
  .story {
    box-sizing: content-box;
    height: 90vh;
    width: calc(90vh * 0.5625);
    margin: 0;
    border: 12px solid #1a1a1a;
    border-radius: 20px;
    box-shadow: 0 0 0 2px #2a2a2a, 0 25px 50px rgba(0,0,0,0.5);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: #fbfaf6;
  }
  .story::-webkit-scrollbar { width: 4px; }
  .story::-webkit-scrollbar-track { background: transparent; }
  .story::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
  .scene { background: transparent; }
}
@media (prefers-reduced-motion:reduce) { .reveal { transition:none!important; opacity:1!important; filter:none!important; clip-path:none!important; } .reveal { transform:none!important; } }
@media (max-width: 739px) { .story { box-shadow: none; } }/* White-backed animation blends into the shared wooden canvas. */
.motion-art { z-index: 1; object-fit: contain; mix-blend-mode: normal; visibility: hidden; }
.scene .stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: url('./assets/wood-lines.webp?v=3') center / 100% 100% no-repeat;
  opacity: 1; pointer-events: none;
}
.scene:nth-of-type(even) .stage::after { transform: scaleY(-1); }
.scene.has-motion .motion-art { visibility: visible; }
.scene.has-motion .artwork, .scene.has-motion .table, .scene.has-motion .food { visibility: hidden; }

.ampersand.reveal.is-visible { opacity: .28; }
@media (prefers-reduced-motion: reduce) { .scene .ampersand.reveal { opacity: .28!important; } }

/* The first video already includes its monogram; avoid covering moving cats. */
.scene.has-motion .patch--one { visibility: hidden; }

.map-link { display: inline-flex; align-items: center; justify-content: center; width: 490px; height: 150px; margin-top: 22px; padding: 0 38px 0 118px; border: 0; color: #fff7d8; background: transparent url('./assets/google-maps-button.webp') center / 143% auto no-repeat; font: 700 29px/1.1 "Libre Baskerville Local",serif; text-align: center; text-decoration: none; text-shadow: 0 2px 4px rgba(28,55,35,.68); cursor: pointer; filter: drop-shadow(0 10px 7px rgba(38,62,39,.43)); animation: map-button-pulse 2.5s ease-in-out infinite; transform-origin: center; -webkit-tap-highlight-color: transparent; }
.map-link span { white-space: nowrap; }
.map-link:hover { filter: brightness(1.09) drop-shadow(0 12px 9px rgba(38,62,39,.5)) drop-shadow(0 0 9px rgba(255,242,196,.7)); animation-play-state: paused; transform: scale(1.035); }
.map-link:active { filter: brightness(.94) drop-shadow(0 5px 4px rgba(38,62,39,.38)); animation-play-state: paused; transform: translateY(4px) scale(.99); }
.map-link:focus-visible { outline: 3px solid #9b4d52; outline-offset: 4px; }
@keyframes map-button-pulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 9px 7px rgba(38,62,39,.4)); }
  50% { transform: scale(1.025); filter: brightness(1.07) drop-shadow(0 13px 10px rgba(38,62,39,.5)) drop-shadow(0 0 8px rgba(255,242,196,.62)); }
}
@media (prefers-reduced-motion: reduce) { .map-link { animation: none; } }
.rsvp-submit:focus-visible { outline: 2px solid #315640; outline-offset: 4px; }
.rsvp-scene { height: var(--scene-height); padding: 0; color: #315640; overflow: hidden; }
.rsvp-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; pointer-events: none; }
.rsvp-content { position: absolute; z-index: 2; top: 0; left: 0; width: 1080px; height: 1920px; display: flex; flex-direction: column; padding: 150px 140px 100px; box-sizing: border-box; overflow: visible; transform: scale(var(--stage-scale,.5)); transform-origin: top left; }
.rsvp-content h2 { margin: 0 0 90px; font: 400 142px/1.02 "Great Vibes Local",cursive; text-align: center; flex-shrink: 0; }
.rsvp-content h2 span { display: block; }
#rsvp-form { flex-shrink: 0; }
.form-field { margin-bottom: 50px; }
.form-field[hidden] { display: none; }
.form-field label { display: block; margin-bottom: 22px; font: 38px/1.3 "Libre Baskerville Local",serif; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 116px; padding: 22px 38px; border: 3px solid #829b66; border-radius: 18px; background: rgba(255,255,250,.94); color: #315640; font: 34px/1.3 "Libre Baskerville Local",serif; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.form-field textarea { resize: vertical; min-height: 145px; padding: 26px 38px; }
.form-field input:not([type="radio"]):focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: #315640; box-shadow: 0 0 0 3px rgba(130,155,102,0.25); }
.radio-group { display: flex; gap: 30px; }
.form-field label.radio-label { margin: 0; flex: 1; cursor: pointer; font-family: "Libre Baskerville Local",serif; }
.radio-label input { position: absolute; opacity: 0; pointer-events: none; }
.radio-label span { display: flex; align-items: center; justify-content: center; min-height: 142px; height: auto; padding: 18px 24px; border: 3px solid #829b66; border-radius: 18px; background: rgba(255,255,250,.94); color: #315640; font-size: 36px; line-height: 1.25; text-align: center; transition: all 0.2s; }
.radio-label input:checked + span { background: #6b8851; color: #fffdf5; border-color: #6b8851; font-weight: 500; }
.radio-label input:focus-visible + span { outline: 2px solid #315640; outline-offset: 2px; }
.rsvp-submit { display: block; width: 82%; min-height: 145px; margin: 36px auto 0; padding: 25px 45px; border: 0; border-radius: 80px; background: transparent url('./assets/rsvp_green_button_blank.webp') center / cover no-repeat; color: #fffdf5; font: 700 38px/1.3 "Libre Baskerville Local",serif; white-space: nowrap; text-shadow: 0 3px 5px rgba(27,54,35,.55); cursor: pointer; }
.rsvp-submit:disabled { opacity: .65; cursor: wait; }
#rsvp-status { font: 27px/1.5 "Libre Baskerville Local",serif; margin: 18px 0 0; text-align: center; }
#rsvp-status:empty { display: none; }
#rsvp-status[data-error="true"] { color: #8b3038; }
.rsvp-scene.has-motion > img.rsvp-background { visibility: hidden; }
.rsvp-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: url('./assets/wood-lines.webp?v=3') center / 100% 100% no-repeat;
  pointer-events: none;
}

.favorites-link { align-self: center; display: flex; align-items: center; justify-content: center; width: 610px; min-height: 175px; margin-top: 85px; padding: 20px 72px 20px 130px; border: 0; color: #647255; background: transparent url('./assets/favorit_kami_button_blank.webp') center / 118% auto no-repeat; font-family: "Libre Baskerville Local",serif; text-align: center; text-decoration: none; filter: drop-shadow(0 12px 11px rgba(51,72,48,.3)); animation: favorites-button-pulse 2.6s ease-in-out infinite; transform-origin: center; }
.favorites-link__copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.favorites-link__title { font-size: 36px; font-weight: 700; font-style: normal; line-height: 1.2; }
.favorites-link__sub { font-size: 28px; font-weight: 400; font-style: italic; line-height: 1.2; }
.favorites-link:hover { filter: brightness(1.05) drop-shadow(0 10px 9px rgba(51,72,48,.4)) drop-shadow(0 0 8px rgba(255,248,218,.8)); animation-play-state: paused; transform: scale(1.035); }
.favorites-link:active { filter: brightness(.96) drop-shadow(0 4px 4px rgba(51,72,48,.28)); animation-play-state: paused; transform: translateY(2px) scale(.99); }
.favorites-link:focus-visible { outline: 2px solid #315640; outline-offset: 4px; }
@keyframes favorites-button-pulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 7px 6px rgba(51,72,48,.27)); }
  50% { transform: scale(1.025); filter: brightness(1.04) drop-shadow(0 10px 9px rgba(51,72,48,.38)) drop-shadow(0 0 7px rgba(255,248,218,.72)); }
}
@media (prefers-reduced-motion: reduce) { .favorites-link { animation: none; } }
.rsvp-content.has-guest-count { padding-top: 110px; }
.rsvp-content.has-guest-count .favorites-link { margin-top: 30px; }

/* ── Scroll lock while overlay is shown ── */
body.no-scroll { overflow: hidden; }
@media (min-width:740px) { body.no-scroll .story { overflow: hidden; } }

/* ── Opening Overlay ── */
.opening-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #f8f7f1;
  transition: opacity .75s cubic-bezier(.4,0,.2,1), visibility .75s ease;
  overflow: hidden;
  will-change: opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.opening-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 0;
}
.opening-overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('./assets/wood-lines.webp?v=3') center / 100% 100% no-repeat;
  pointer-events: none;
}
.opening-content {
  position: absolute; z-index: 1; top: 0; left: 0;
  width: 1080px; height: 1920px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 140px; box-sizing: border-box;
  transform: scale(var(--stage-scale,.5)) translateZ(0); transform-origin: top left;
  will-change: transform;
}
.opening-label {
  margin: 0 0 44px; font: italic 44px/1.4 "Libre Baskerville Local",serif;
  color: #315640; letter-spacing: 1px;
}
.opening-kepada {
  margin: 0 0 10px; font: italic 36px/1.4 "Libre Baskerville Local",serif;
  color: #4a6b3e;
}
.opening-guest {
  margin: 0 0 10px; font: 400 84px/1.1 "Great Vibes Local",cursive;
  max-width: 800px; color: #315640; overflow-wrap: anywhere;
}
.opening-ditempat {
  margin: 0 0 70px; font: italic 36px/1.4 "Libre Baskerville Local",serif;
  color: #4a6b3e;
}
.open-invitation-btn {
  display: flex; align-items: center; justify-content: center;
  width: 520px; min-height: 145px; padding: 25px 40px;
  border: 0; border-radius: 80px;
  background: transparent url('./assets/buka_undangan_button_blank.webp') center / 115% auto no-repeat;
  color: #fffdf5; font: 700 36px/1.3 "Libre Baskerville Local",serif;
  letter-spacing: .5px; cursor: pointer;
  text-shadow: 0 4px 8px rgba(27,54,35,.5);
  filter: drop-shadow(0 16px 22px rgba(49,86,64,.35));
  transition: transform .25s ease, filter .25s ease;
  animation: open-btn-pulse 2.4s ease-in-out 2.2s infinite;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transform: translateZ(0);
}
.open-invitation-btn:hover { transform: scale(1.05); filter: brightness(1.08) drop-shadow(0 20px 28px rgba(49,86,64,.4)) drop-shadow(0 0 16px rgba(255,248,218,.5)); animation-play-state: paused; }
.open-invitation-btn:active { transform: scale(.96) translateY(4px); filter: brightness(.95) drop-shadow(0 8px 10px rgba(49,86,64,.3)); animation-play-state: paused; }

@keyframes open-btn-pulse {
  0%,100% { transform: scale(1) translateZ(0); }
  50% { transform: scale(1.03) translateZ(0); }
}

/* Staggered reveal animations */
.opening-reveal {
  opacity: 0; transform: translateY(50px) translateZ(0);
  animation: opening-text-in .9s cubic-bezier(.16,.8,.22,1) forwards;
  will-change: opacity, transform;
}
.opening-reveal--1 { animation-delay: .4s; }
.opening-reveal--2 { animation-delay: .9s; }
.opening-reveal--3 { animation-delay: 1.3s; }
.opening-reveal--4 { animation-delay: 1.7s; }
.opening-reveal--5 { animation-delay: 2.1s; }

@keyframes opening-text-in {
  from { opacity: 0; transform: translateY(50px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0) translateZ(0); }
}

@keyframes cover-title-glow {
  0%, 100% {
    text-shadow: 
      0 0 12px rgba(255,255,250,1), 0 0 25px rgba(255,255,250,1), 
      0 0 45px rgba(255,255,245,.9), 0 0 80px rgba(255,255,240,.85), 
      0 0 120px rgba(251,250,246,.8), 0 6px 12px rgba(35,67,45,.4);
  }
  50% {
    text-shadow: 
      0 0 18px rgba(255,255,250,1), 0 0 35px rgba(255,255,250,1), 
      0 0 65px rgba(255,255,245,1), 0 0 100px rgba(255,255,240,1), 
      0 0 150px rgba(251,250,246,.95), 0 8px 16px rgba(35,67,45,.5);
  }
}

.cover-title {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .opening-overlay { transition: none; }
  .opening-reveal { animation: none; opacity: 1; transform: none; filter: none; }
  .open-invitation-btn { animation: none; filter: drop-shadow(0 16px 22px rgba(49,86,64,.35)); }
  .cover-title { animation: none; }
}
@media (min-width:740px) {
  .opening-overlay {
    inset: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(90vh * 0.5625);
    height: 90vh;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
  }
  .opening-overlay.is-hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -50%);
  }
}

/* ── Music Toggle ── */
.music-control {
  position: fixed; z-index: 9998; right: 4px; bottom: 4px;
  width: 80px; height: 80px; pointer-events: none;
  display: grid; place-items: center;
}
.music-toggle {
  position: relative; z-index: 1;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(130,155,102,.35); border-radius: 50%;
  background: rgba(255,255,250,.9);
  color: #315640; cursor: pointer;
  box-shadow: 0 2px 10px rgba(49,86,64,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.music-toggle:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(49,86,64,.2); background: rgba(255,255,250,.95); }
.music-toggle:active { transform: scale(.94); }
.music-icon { width: 16px; height: 16px; }
.music-icon--off { display: none; }
.music-toggle.is-muted .music-icon--on { display: none; }
.music-toggle.is-muted .music-icon--off { display: block; }
.music-credit-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; color: #315640;
  filter: drop-shadow(0 1px 2px rgba(255,255,250,.95));
  animation: music-credit-spin 24s linear infinite;
}
.music-credit-ring text {
  fill: currentColor; font: 700 6.7px "Libre Baskerville Local",serif;
  letter-spacing: .45px; text-transform: uppercase;
}
@keyframes music-credit-spin { to { transform: rotate(360deg); } }

@media (min-width:740px) {
  .music-control {
    right: calc(50vw - 90vh * 0.28125 - 1px);
    bottom: calc(5vh + 7px);
  }
  .music-toggle { width: 38px; height: 38px; }
  .music-icon { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .music-credit-ring { animation: none; } }