:root {
  --ivory: #f4efe3;
  --gold: #a97c2f;
  --maroon: #5c1024;
  --ink: #3d2b1f;
}

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

body {
  font-family: 'Cormorant Garamond', serif;
  background: var(--ivory);
  color: var(--ink);
}
body.locked { overflow: hidden; }

#gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
}

/* fullscreen cover; content pages keep the design's true 9:16 ratio */
main { position: relative; background: var(--ivory); }
/* one damask layer for the whole scroll: per-section backgrounds restart the
   tile at each boundary, which shows as a seam */
main::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100vw, calc(100svh * .5625));
  background: url('img/damask2-tile.webp') top center / 100% auto repeat;
}
.stage {
  position: relative;
  width: min(100vw, calc(100svh * .5625));
  height: 100svh;
  margin-inline: auto;
  overflow: hidden;
}
.page {
  position: relative;
  width: min(100vw, calc(100svh * .5625));
  min-height: 100svh;
  margin-inline: auto;
  overflow: hidden;
}
/* the hero hugs the bottom of the flowers; on short screens it pulls up further
   so the date line is always visible above the fold */
.canvas {
  position: relative;
  aspect-ratio: 9 / 16;
  margin-bottom: min(calc(100svh - 7.5rem - (min(100vw, calc(100svh * .5625)) / .5625)), .75rem);
}
/* the top garland keeps hanging from the page's top edge */
.top-band {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 9 / 16;
  pointer-events: none;
}

.el { position: absolute; user-select: none; pointer-events: none; }

/*
 * All placements measured from the original design DOM at 675x1200:
 * left = x/6.75 %, top = y/12 %, width = w/6.75 %.
 */

/* ---- gate: temple + wayang couple (design page 3) ---- */
.p3-bg { left: 0; top: 0; width: 100%; height: 100%; background: url('img/damask2.webp') center / cover; }

.temple-crop { left: -10.28%; top: 16.87%; width: 120.09%; height: 57.04%; overflow: hidden; }
.temple-crop img { position: absolute; width: 100%; top: -9.25%; opacity: .3; }

.fade-crop { left: 14.84%; top: 0; width: 70.92%; height: 55.9%; overflow: hidden; }
.fade-crop img { position: absolute; width: 112.8%; left: -7.17%; top: 0; transform: scaleY(-1); }

.filigree { left: 6.55%; top: -9.03%; width: 86.89%; }

.w3-back-r  { left: 75.23%;  top: 28.97%; width: 48.25%; }
.w3-front-r { left: 71.45%;  top: 41.33%; width: 41.41%; }
.w3-back-l  { left: -23.35%; top: 28.97%; width: 48.25%; }
.w3-front-l { left: -13.47%; top: 41.33%; width: 41.41%; }

.wayang-m { left: 14.84%; top: 62.57%; width: 42.34%; }
.wayang-f { left: 45.64%; top: 67.24%; width: 29.13%; }

.p3-roses-r { left: 53.04%; top: 83.87%; width: 23.7%;  transform: scaleX(-1); }
.p3-roses-l { left: 24.89%; top: 85.2%;  width: 22.53%; }

.chand2-c { left: 33.11%; top: 73.93%; width: 39.85%; height: 22.91%; overflow: hidden; }
.chand2-c img { position: absolute; width: 114.2%; left: -14.2%; top: 0; transform: scaleX(-1); }

.chand2-tl { left: -1.99%; top: -12.96%; width: 49.04%; height: 25.93%; overflow: hidden; }
.chand2-tl img { position: absolute; width: 105.02%; left: 0; top: 0; transform: scaleX(-1); }

.chand2-tr { left: 60.93%; top: -12.96%; width: 45.1%; height: 25.93%; overflow: hidden; }
.chand2-tr img { position: absolute; width: 114.19%; left: -14.16%; top: 0; transform: scaleX(-1); }

.p3-drops-a-l { left: -13.47%; top: -4.89%; width: 37.23%; }
.p3-drops-b-l { left: 22.59%;  top: -9.32%; width: 33.07%; }
.p3-drops-a-r { left: 75.63%;  top: -4.89%; width: 37.23%; transform: scaleX(-1); }
.p3-drops-b-r { left: 43.67%;  top: -9.32%; width: 33.07%; transform: scaleX(-1); }
.p3-drops-m-r { left: 76.74%;  top: 61.15%; width: 33.07%; }
.p3-drops-m-l { left: -9.87%;  top: 61.15%; width: 33.07%; transform: scaleX(-1); }

/* invitation text over the faint temple */
.gate-text {
  position: absolute;
  inset: 24% 12% auto;
  text-align: center;
  padding: 2.2rem 1.2rem;
  background: radial-gradient(ellipse closest-side, rgba(253, 250, 242, .93) 50%, rgba(253, 250, 242, 0) 100%);
}
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: #7d5a1d;
}
.gate-text .names {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(1.9rem, 9.5vmin, 3rem);
  line-height: 1.25;
  color: var(--maroon);
  margin: .7rem 0 1rem;
}
.names .amp {
  font-size: .72em;
  color: var(--gold);
  margin: 0 .08em;
}
.date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8em;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--ink);
}
.date::before, .date::after {
  content: '';
  height: 1px;
  width: 2.4em;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.date::after { background: linear-gradient(90deg, var(--gold), transparent); }
.to {
  margin-top: 1.7rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #8a7a63;
}
.guest {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--maroon);
  margin-top: .35rem;
  line-height: 1.25;
}
.open {
  margin-top: 1.4rem;
  font: 600 .78rem/1 'Cormorant Garamond', serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory);
  background: linear-gradient(160deg, #7a1830, var(--maroon));
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .8em 1.9em;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .25s, box-shadow .25s;
}
.open:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(92, 16, 36, .35); }

/* ---- page 1: couple photo in the gold oval ---- */
.splash-a { left: -34.18%; top: 37.21%; width: 104.31%; }
.splash-b { left: 23.35%;  top: 31.85%; width: 104.31%; }
.splash-c { left: -4.31%;  top: -15.37%; width: 104.31%; }

.drops-tc-l { left: 10%;     top: -8.48%; width: 40%; transform: scaleX(-1); }
.drops-tc-r { left: 47.67%;  top: -8.48%; width: 40%; }
.drops-tl   { left: -16.73%; top: -8.2%;  width: 50.65%; transform: scaleX(-1); }
.drops-tr   { left: 66.13%;  top: -8.2%;  width: 50.65%; }
.drops-bc-l { left: 26.59%;  top: 74.05%; width: 33.07%; }
.drops-bc-r { left: 43.13%;  top: 74.05%; width: 33.07%; transform: scaleX(-1); }

.wing-back-l  { left: 1.25%;  top: 54.38%; width: 39.36%; transform: rotate(-26deg); }
.wing-back-r  { left: 59.46%; top: 54.35%; width: 39.36%; transform: rotate(26deg); }
.wing-front-l { left: -3.57%; top: 60.66%; width: 36.06%; transform: rotate(-37deg); }
.wing-front-r { left: 66.3%;  top: 60.69%; width: 36.06%; transform: rotate(37deg); }

.oval-fill {
  left: 17%;
  top: 25%;
  width: 66%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #fdfaf2 0%, #f7f0df 55%, #eee2c9 100%);
}
.oval-photo {
  left: 19.3%;
  top: 26.5%;
  width: 61.4%;
  height: 47.5%;
  border-radius: 50%;
  overflow: hidden;
}
.oval-photo img { width: 100%; height: 100%; object-fit: cover; }

/* frame: design crops the top 26px of the crest */
.frame-crop { left: 10%; top: 20.37%; width: 80%; height: 61.45%; overflow: hidden; }
.frame-crop img { position: absolute; width: 100%; top: -3.58%; }

.roses-1 { left: 44.58%; top: 67.77%; width: 43.1%;  transform: scaleY(-1); }
.roses-2 { left: 14.46%; top: 67.82%; width: 42.96%; transform: scale(-1, -1); }
.roses-3 { left: 3.1%;   top: 74.81%; width: 35.7%;  transform: scaleY(-1); }
.roses-4 { left: 61.29%; top: 74.81%; width: 35.7%;  transform: scale(-1, -1); }

/* chandelier: design crops the bottom 45px */
.chand-crop { left: 17.97%; top: -15.37%; width: 64.05%; height: 32.24%; overflow: hidden; }
.chand-crop .chandelier {
  position: absolute;
  width: 100%;
  top: 0;
  transform-origin: 50% 0;
  animation: sway 8s 1.6s ease-in-out infinite;
}

/* ---- entrance build-in (gate on load, pages on scroll) ---- */
.p3 .el, .p3 .gate-text, .p1 .el { opacity: 0; }
.p3 .el { transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .7, .3, 1); }
.p1 .el { transition: opacity 1.3s ease, transform 1.7s cubic-bezier(.2, .7, .3, 1); }
.gate-text { transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }

.temple-crop img { transition: filter 2s ease; filter: blur(6px); }
.p3 .filigree { transform: scale(1.08); }
.p3 .w3-back-l  { transform: translateX(-16%); }
.p3 .w3-back-r  { transform: translateX(16%); }
.p3 .w3-front-l { transform: translateX(-20%); }
.p3 .w3-front-r { transform: translateX(20%); }
.p3 .wayang-m, .p3 .wayang-f { transform: translateY(16%); }
.p3 .chand2-c { transform: translateY(12%); }
.p3 .chand2-tl, .p3 .chand2-tr { transform: translateY(-18%); }
.p3 .p3-drops-a-l, .p3 .p3-drops-b-l { transform: translateY(-16%); }
.p3 .p3-drops-a-r, .p3 .p3-drops-b-r { transform: translateY(-16%) scaleX(-1); }
.p3 .p3-drops-m-r { transform: translateX(12%); }
.p3 .p3-drops-m-l { transform: translateX(-12%) scaleX(-1); }
.p3 .p3-roses-l { transform: translateY(12%); }
.p3 .p3-roses-r { transform: translateY(12%) scaleX(-1); }

.p3.in .el, .p3.in .gate-text, .p1.in .el { opacity: 1; }
.p3.in .temple-crop img { filter: blur(0); }
/* top garland drops first, curtaining the layering that builds beneath it */
.p3.in .chand2-tl, .p3.in .chand2-tr { transform: none; transition-delay: 0s; }
.p3.in .p3-drops-a-l, .p3.in .p3-drops-b-l { transform: none; transition-delay: .05s; }
.p3.in .p3-drops-a-r, .p3.in .p3-drops-b-r { transform: scaleX(-1); transition-delay: .05s; }
.p3.in .temple-crop, .p3.in .fade-crop, .p3.in .p3-bg { transition-delay: .15s; }
.p3.in .filigree { transform: none; transition-delay: .35s; }
.p3.in .w3-back-l, .p3.in .w3-back-r, .p3.in .w3-front-l, .p3.in .w3-front-r { transform: none; transition-delay: .6s; }
.p3.in .p3-drops-m-r { transform: none; transition-delay: .8s; }
.p3.in .p3-drops-m-l { transform: scaleX(-1); transition-delay: .8s; }
.p3.in .wayang-m, .p3.in .wayang-f { transform: none; transition-delay: .95s; }
.p3.in .chand2-c { transform: none; transition-delay: 1.1s; }
.p3.in .p3-roses-l { transform: none; transition-delay: 1.3s; }
.p3.in .p3-roses-r { transform: scaleX(-1); transition-delay: 1.3s; }
.p3.in .gate-text { transform: none; transition-delay: 1.6s; }

/* idle ambience: gate chandeliers sway gently */
.chand2-tl img, .chand2-tr img, .chand2-c img { animation: sway-flip 7s ease-in-out infinite; transform-origin: 50% 0; }
.chand2-tr img { animation-delay: 1.2s; }
.chand2-c img { animation-delay: .6s; }

/* ---- page-1 entrance ---- */
.p1 .oval-fill, .p1 .oval-photo, .p1 .frame-crop { transform: scale(.92); }
/* wings start upright, fully inside the oval's ellipse, then fan out as they emerge */
.p1 .wing-back-l { transform: translate(74%, -64%); }
.p1 .wing-back-r { transform: translate(-74%, -64%); }
.p1 .roses-1 { transform: translateY(10%) scaleY(-1); }
.p1 .roses-2 { transform: translateY(10%) scale(-1, -1); }
.p1.in .splash-a { transition-delay: .1s; }
.p1.in .splash-b { transition-delay: .25s; }
.p1.in .splash-c { transition-delay: .4s; }
.p1.in .oval-fill, .p1.in .oval-photo, .p1.in .frame-crop { transform: scale(1); transition-delay: .2s; transition-duration: 1.2s; }
.p1.in .wing-back-l { transform: rotate(-26deg); transition: opacity 0s linear 1.7s, transform 1.8s cubic-bezier(.2, .7, .3, 1) 1.7s; }
.p1.in .wing-back-r { transform: rotate(26deg); transition: opacity 0s linear 1.7s, transform 1.8s cubic-bezier(.2, .7, .3, 1) 1.7s; }
.p1.in .roses-1 { transform: scaleY(-1); transition-delay: 1s; transition-duration: 1.4s; }
.p1.in .roses-2 { transform: scale(-1, -1); transition-delay: 1s; transition-duration: 1.4s; }
.p1 .chand-crop, .p1 .drops-tc-r, .p1 .drops-tr { transform: translateY(-115%); }
.p1 .drops-tc-l, .p1 .drops-tl { transform: translateY(-115%) scaleX(-1); }
.p1 .drops-bc-l { transform: translateY(10%); }
.p1 .drops-bc-r { transform: translateY(10%) scaleX(-1); }
/* front pair starts fully inside the oval's ellipse so the opacity snap is invisible */
.p1 .wing-front-l { transform: translate(98%, -90%); }
.p1 .wing-front-r { transform: translate(-98%, -90%); }
.p1 .roses-3 { transform: translateY(10%) scaleY(-1); }
.p1 .roses-4 { transform: translateY(10%) scale(-1, -1); }
.p1.in .wing-front-l { transform: rotate(-37deg); transition: opacity 0s linear 1.85s, transform 1.8s cubic-bezier(.2, .7, .3, 1) 1.85s; }
.p1.in .wing-front-r { transform: rotate(37deg); transition: opacity 0s linear 1.85s, transform 1.8s cubic-bezier(.2, .7, .3, 1) 1.85s; }
.p1.in .roses-3 { transform: scaleY(-1); transition-delay: 1.1s; transition-duration: 1.4s; }
.p1.in .roses-4 { transform: scale(-1, -1); transition-delay: 1.1s; transition-duration: 1.4s; }
/* page-1 top garland descends immediately, opacity snapping while still off-canvas (no fade) */
.p1.in .chand-crop, .p1.in .drops-tc-r, .p1.in .drops-tr { transform: none; transition: opacity 0s linear .35s, transform 1.8s cubic-bezier(.2, .7, .3, 1) .35s; }
.p1.in .drops-tc-l, .p1.in .drops-tl { transform: scaleX(-1); transition: opacity 0s linear .35s, transform 1.8s cubic-bezier(.2, .7, .3, 1) .35s; }
.p1.in .drops-bc-l { transform: none; transition-delay: 1.35s; }
.p1.in .drops-bc-r { transform: scaleX(-1); transition-delay: 1.35s; }

/* ---- gate exit: text lifts, the set strikes itself ---- */
.p3.out .gate-text { opacity: 0; transform: translateY(-16px); transition: opacity .7s ease, transform .7s ease; }
.p3.out .p3-bg { opacity: 0; transition: opacity 1.5s ease .15s; }
.p3.out .temple-crop, .p3.out .fade-crop { opacity: 0; transition: opacity 1.6s ease .2s; }
.p3.out .temple-crop img { filter: blur(5px); transition: filter 1.6s ease .2s; }
.p3.out .filigree { opacity: 0; transform: scale(1.5); transition: opacity 2.1s ease .3s, transform 2.4s cubic-bezier(.5, 0, .8, .4) .3s; }
/* wings slide fully off without fading */
.p3.out .w3-back-l { transform: translateX(-135%) rotate(-5deg); transition: transform 2.4s cubic-bezier(.45, 0, .75, .5) .2s; }
.p3.out .w3-back-r { transform: translateX(135%) rotate(5deg); transition: transform 2.4s cubic-bezier(.45, 0, .75, .5) .2s; }
/* wayang couple walks off stage: linear glide, rocking layered on top */
.p3.out .wayang-m {
  translate: -170% 0;
  transition: translate 2.6s linear .15s;
  animation: rock 2.6s ease-in-out .15s forwards;
  transform-origin: 50% 88%;
}
.p3.out .wayang-f {
  translate: 205% 0;
  transition: translate 2.6s linear .15s;
  animation: rock 2.6s ease-in-out .15s forwards;
  transform-origin: 50% 88%;
}
/* top garland lifts fully off (no fade) while page-1's garland descends — reads as a swap */
.p3.out .chand2-tl, .p3.out .chand2-tr { transform: translateY(-115%); transition: transform 1.5s cubic-bezier(.5, 0, .8, .5) .1s; }

.p3.out .p3-drops-a-l, .p3.out .p3-drops-b-l { transform: translateY(-115%); transition: transform 1.5s cubic-bezier(.5, 0, .8, .5) .15s; }
.p3.out .p3-drops-a-r, .p3.out .p3-drops-b-r { transform: translateY(-115%) scaleX(-1); transition: transform 1.5s cubic-bezier(.5, 0, .8, .5) .15s; }
.p3.out .p3-drops-m-r { opacity: 0; transform: translateX(30%); transition: opacity 1.8s ease .35s, transform 2s cubic-bezier(.5, 0, .8, .4) .35s; }
.p3.out .p3-drops-m-l { opacity: 0; transform: translateX(-30%) scaleX(-1); transition: opacity 1.8s ease .35s, transform 2s cubic-bezier(.5, 0, .8, .4) .35s; }
.p3.out .chand2-c { opacity: 0; transform: translateY(26%); transition: opacity 1.8s ease .3s, transform 2s cubic-bezier(.5, 0, .8, .4) .3s; }
.p3.out .w3-front-l { transform: translateX(-140%) rotate(-6deg); transition: transform 2.4s cubic-bezier(.45, 0, .75, .5) .35s; }
.p3.out .w3-front-r { transform: translateX(140%) rotate(6deg); transition: transform 2.4s cubic-bezier(.45, 0, .75, .5) .35s; }
.p3.out .p3-roses-l { opacity: 0; transform: translateY(24%); transition: opacity 1.8s ease .35s, transform 2s cubic-bezier(.5, 0, .8, .4) .35s; }
.p3.out .p3-roses-r { opacity: 0; transform: translateY(24%) scaleX(-1); transition: opacity 1.8s ease .35s, transform 2s cubic-bezier(.5, 0, .8, .4) .35s; }

/* hero text: names, date, countdown, calendar — compact, within the first screen */
.hero {
  position: relative;
  text-align: center;
  padding: 1rem 1.2rem 1.7rem;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(253, 250, 242, .72) 45%, rgba(253, 250, 242, 0) 88%);
}
/* on shorter screens the hero overlaps the roses, so the halo strengthens for legibility */
@media (min-aspect-ratio: 12/25) {
  .hero {
    background: radial-gradient(ellipse 78% 95% at 50% 42%, rgba(253, 250, 242, .94) 55%, rgba(253, 250, 242, 0) 100%);
  }
}
.hero-names {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 8.5vmin, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  margin: .45rem 0 .8rem;
}
.hero-names .amp {
  font-family: 'Pinyon Script', cursive;
  font-size: .78em;
  color: #a8546a;
  margin: 0 .14em;
}
.hero .date { color: #6b5b46; font-size: .84rem; }
.countdown {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.1rem;
}
.tile {
  width: 3.9rem;
  padding: .55rem 0 .45rem;
  border: 1px solid rgba(169, 124, 47, .35);
  background: rgba(253, 250, 242, .55);
}
.tile b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--maroon);
  margin-bottom: .3rem;
}
.tile span {
  font-size: .53rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: #8a7a63;
}
.ghost-btn {
  display: inline-block;
  margin-top: 1.15rem;
  padding: .8em 1.6em;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid #6b5b46;
  background: rgba(253, 250, 242, .55);
  transition: background .3s, box-shadow .3s;
}
.ghost-btn:hover { background: #fdfaf2; box-shadow: 0 4px 14px rgba(61, 43, 31, .15); }

/* the hero sheet rises from below after the composition has had its moment */
.p1 .hero {
  opacity: 0;
  transform: translateY(55%);
  transition: transform 1.25s cubic-bezier(.2, .7, .3, 1) 2.6s, opacity .9s ease 2.6s;
}
.p1.in .hero { opacity: 1; transform: none; }

/* ---- compact sections (quote, etc.) ---- */
/* The column clips once, on .frame, not once per section. Section-level
   overflow made every overhanging ornament stop dead at the boundary — roses
   cresting a panel, drops spilling past a corner, wings reaching off the edge
   were all guillotined. */
.frame {
  position: relative;
  width: min(100vw, calc(100svh * .5625));
  margin-inline: auto;
  overflow: clip;
}

.sec {
  position: relative;
  width: 100%;
  padding: 3.4rem 1.6rem 3.8rem;
  text-align: center;
}
.sec-quote .greeting {
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--maroon);
  margin-bottom: 2.9rem;
}
.qcard {
  position: relative;
  margin: 0 auto;
  max-width: 30rem;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
  padding: 2.6rem 1.6rem 2rem;
}
.qroses {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 9.5rem;
}
.qoriginal {
  font-family: 'Amiri', 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  line-height: 2.1;
  color: var(--ink);
}
.qtrans {
  margin-top: 1.5rem;
  font-style: italic;
  font-size: .95rem;
  line-height: 1.85;
  color: #6b5b46;
}
.qsource {
  margin-top: 1.5rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: #7d5a1d;
}

/* scroll reveal for compact sections */
.sec .greeting, .sec .qcard, .sec-invited > *,
.sec-events .eyebrow, .sec-events .script-title, .ev, .ev-crest { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.sec.in .greeting, .sec.in .qcard, .sec-invited.in > *,
.sec-events.in .eyebrow, .sec-events.in .script-title, .sec-events.in .ev, .sec-events.in .ev-crest { opacity: 1; transform: none; }
.sec-rundown .eyebrow, .sec-rundown .sec-title, .rd-crown, .rd-tail { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.sec-rundown.in .eyebrow, .sec-rundown.in .sec-title, .sec-rundown.in .rd-crown, .sec-rundown.in .rd-tail { opacity: 1; transform: none; }
.rd::before { transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.2, .7, .3, 1) .2s; }
.sec-rundown.in .rd::before { transform: scaleY(1); }
.rd-row { opacity: 0; translate: -14px 0; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .3, 1); transition-delay: calc(.35s + var(--i) * .09s); }
.sec-rundown.in .rd-row { opacity: 1; translate: 0 0; }
.sec-dress .eyebrow, .sec-dress .script-title, .dc-note, .dc-colors,
.sec-story > * { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.sec-dress.in .eyebrow, .sec-dress.in .script-title, .sec-dress.in .dc-note, .sec-dress.in .dc-colors,
.sec-story.in > * { opacity: 1; transform: none; }
.sec-dress.in .dc-colors { transition-delay: .3s; }
.dc-rose-l, .dc-rose-r { opacity: 0; translate: 0 -16%; transition: opacity 1s ease .2s, translate 1.1s cubic-bezier(.2, .7, .3, 1) .2s; }
.sec-dress.in .dc-rose-l, .sec-dress.in .dc-rose-r { opacity: 1; translate: 0 0; }
.st-item { transition-delay: calc(var(--i, 0) * .1s); }
.sec-gallery .eyebrow, .sec-gallery .sec-title, .gal-strip { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.sec-gallery.in .eyebrow, .sec-gallery.in .sec-title, .sec-gallery.in .gal-strip { opacity: 1; transform: none; }
.sec-gallery.in .gal-strip { transition-delay: .45s; }
.gh-crown, .gh-photo { opacity: 0; transform: scale(.96); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .3, 1); }
.sec-gallery.in .gh-crown, .sec-gallery.in .gh-photo { opacity: 1; transform: none; }
.gh-gun-l, .gh-way-l, .gh-rose-l { opacity: 0; translate: -18% 0; transition: opacity .9s ease .25s, translate 1.2s cubic-bezier(.2, .7, .3, 1) .25s; }
.gh-gun-r, .gh-way-r, .gh-rose-r { opacity: 0; translate: 18% 0; transition: opacity .9s ease .25s, translate 1.2s cubic-bezier(.2, .7, .3, 1) .25s; }
.sec-gallery.in .gh-gun-l, .sec-gallery.in .gh-way-l, .sec-gallery.in .gh-rose-l,
.sec-gallery.in .gh-gun-r, .sec-gallery.in .gh-way-r, .sec-gallery.in .gh-rose-r { opacity: 1; translate: 0 0; }
.sec-events.in .ev { transition-delay: .3s; }
.sec-share .eyebrow, .sec-share .sec-title, .sec-share .sh-card, .sec-share .sh-crest,
.sec-guestcard .gc-pass, .sec-footer .ft-content > *:not(.ft-temple) { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.sec-share.in .eyebrow, .sec-share.in .sec-title, .sec-share.in .sh-card, .sec-share.in .sh-crest,
.sec-guestcard.in .gc-pass, .sec-footer.in .ft-content > *:not(.ft-temple) { opacity: 1; transform: none; }
.sec-share.in .sh-card:first-child { transition-delay: .2s; }
.sec-share.in .sh-crest { transition-delay: .35s; }
.sec-share.in .sh-card:last-child { transition-delay: .5s; }
.sec-share .p3-drops-a-l, .sec-share .p3-drops-a-r {
  transition: translate 1.2s cubic-bezier(.2, .7, .3, 1) .12s;
}
.sec-share .p3-drops-a-l { translate: -100% 0; }
.sec-share .p3-drops-a-r { translate: 100% 0; }
.sec-share.in .p3-drops-a-l, .sec-share.in .p3-drops-a-r { translate: 0 0; }
.sec.in .qcard, .sec-invited.in .invited { transition-delay: .25s; }
.sec-invited.in .invited-crest { transition-delay: .4s; }


/* ---- mempelai: janur-arched oval medallions ---- */
.sec-mempelai { padding: 0; }
.sec-mempelai .chand2-tl, .sec-mempelai .chand2-tr { top: -3.6%; }
.sec-mempelai .p3-drops-a-l, .sec-mempelai .p3-drops-a-r { top: -.5%; }
.mlead { height: 24vw; max-height: 138px; }

.mblock { position: relative; aspect-ratio: 9 / 28.5; }
.mtemple { left: 10%; bottom: -1%; width: 80%; opacity: .13; }
.mglow {
  left: 0;
  right: 0;
  height: 26%;
  background: radial-gradient(ellipse 58% 56% at 50% 44%, rgba(255, 253, 248, .95), rgba(255, 253, 248, 0) 70%);
}
.mwy { width: 26%; opacity: .09; filter: sepia(.6); }
.mwy-l { left: -9%; }
.mwy-r { left: 83%; transform: scaleX(-1); }
.mjanur-l { left: -16%; width: 52%; }
.mjanur-r { left: 64%; width: 52%; transform: scaleX(-1); }

.med { left: 28.5%; width: 43%; }
.mframe { position: relative; display: block; width: 100%; }
.mphoto { position: absolute; inset: 9.5% 12%; border-radius: 50%; overflow: hidden; }
.mphoto img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.94); }
.mphoto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(92, 16, 36, .28);
}
.mcrown { left: 34%; width: 32%; }
.mswag { left: 41.5%; width: 17%; mask-image: linear-gradient(#000 48%, transparent 80%); }

/* ivory cartouche: the damask underneath eats the text's contrast */
.mtext {
  position: absolute;
  left: 8.5%;
  right: 8.5%;
  text-align: center;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
  padding: 1.7rem 1rem 1.4rem;
}
.mtext::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 124, 47, .22);
  pointer-events: none;
}
.mtext .eyebrow { font-size: .6rem; letter-spacing: .34em; color: #8a6420; }
.pname { margin-top: .5rem; font-size: 1.18rem; line-height: 1.3; font-weight: 600; color: var(--maroon); }
.pnative { font-family: 'Amiri', 'Cormorant Garamond', serif; margin-top: .28rem; font-size: 1.02rem; color: #7d5a1d; }
.prule {
  position: relative;
  width: 46%;
  height: 1px;
  margin: .8rem auto;
  background: linear-gradient(90deg, transparent, rgba(169, 124, 47, .7), transparent);
}
.prule::after {
  content: '\2727';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: .6rem;
  color: var(--gold);
  background: #fdfaf2;
  padding: 0 .35rem;
}
.pfamily { font-size: .78rem; line-height: 1.7; color: #5a4a36; }
.pig {
  display: inline-block;
  margin-top: .75rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6d4d13;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 124, 47, .5);
  padding-bottom: .18rem;
}

.mamp {
  position: absolute;
  left: 0;
  right: 0;
  top: 47.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  font-family: 'Pinyon Script', cursive;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
}
.mamp::before, .mamp::after {
  content: '';
  width: 14vw;
  max-width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 124, 47, .7));
}
.mamp::after { transform: scaleX(-1); }
.mamp-rl { left: -7%; top: 47.5%; width: 28%; }
.mamp-rr { left: 79%; top: 47.5%; width: 28%; transform: scaleX(-1); }
.mcrest { left: 37%; top: 50.2%; width: 26%; }

.g1 .mglow { top: 1.5%; }
.g1 .mjanur-l, .g1 .mjanur-r { top: .8%; }
.g1 .mwy { top: 7%; }
.g1 .med { top: 5%; }
.g1 .mcrown { top: 2.6%; }
.g1 .mswag { top: 22%; }
.g1 .mtext { top: 29.5%; }

.g2 .mglow { top: 56%; }
.g2 .mjanur-l, .g2 .mjanur-r { top: 55%; }
.g2 .mwy { top: 61%; }
.g2 .med { top: 58.5%; }
.g2 .mcrown { top: 56.2%; }
.g2 .mswag { top: 76%; }
.g2 .mtext { top: 82.5%; }

.mfoot { position: relative; height: 30vw; max-height: 170px; }
.mfoot img { position: absolute; left: 33%; top: 20%; width: 34%; }

/* mempelai reveal */
.sec-mempelai .chand2-tl, .sec-mempelai .chand2-tr,
.sec-mempelai .p3-drops-a-l, .sec-mempelai .p3-drops-a-r {
  opacity: 0;
  translate: 0 -14%;
  transition: opacity .9s ease, translate 1.2s cubic-bezier(.2, .7, .3, 1);
}
.sec-mempelai.in .chand2-tl, .sec-mempelai.in .chand2-tr,
.sec-mempelai.in .p3-drops-a-l, .sec-mempelai.in .p3-drops-a-r { opacity: 1; translate: 0 0; }
.mamp, .mamp-rl, .mamp-rr, .mcrest, .mfoot img { opacity: 0; transition: opacity 1s ease .3s; }
.mblock.in .mamp, .mblock.in .mamp-rl, .mblock.in .mamp-rr, .mblock.in .mcrest, .sec-mempelai.in .mfoot img { opacity: 1; }
.mblock .med, .mblock .mglow {
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .3, 1);
}
.mblock .mjanur-l, .mblock .mjanur-r {
  opacity: 0;
  translate: 0 -8%;
  transition: opacity 1s ease .2s, translate 1.2s cubic-bezier(.2, .7, .3, 1) .2s;
}
.mblock .mcrown, .mblock .mswag { opacity: 0; transition: opacity 1s ease .45s; }
.mblock .mtext { opacity: 0; transform: translateY(24px); transition: opacity 1s ease .55s, transform 1s ease .55s; }
.mblock.in .med, .mblock.in .mglow { opacity: 1; transform: none; }
.mblock.in .mjanur-l, .mblock.in .mjanur-r { opacity: 1; translate: 0 0; }
.mblock.in .mcrown, .mblock.in .mswag { opacity: 1; }
.mblock.in .mtext { opacity: 1; transform: none; }

/* ---- turut mengundang ---- */
.sec-title {
  margin-top: .55rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--maroon);
}
.invited {
  position: relative;
  list-style: none;
  margin: 1.9rem auto 0;
  max-width: 30rem;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
}
.invited::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 124, 47, .22);
  pointer-events: none;
}
.invited li {
  padding: 1rem 1.4rem;
  font-size: .92rem;
  line-height: 1.5;
  color: #4a3c2c;
}
.invited li + li { border-top: 1px solid rgba(169, 124, 47, .28); }
.invited-crest { display: block; width: 44%; margin: 1.5rem auto 0; }

/* ---- rangkaian acara ---- */
.sec-events { padding-top: 0; }
.sec-events .chand2-tl, .sec-events .chand2-tr { top: -3.6%; }
.sec-events .p3-drops-a-l, .sec-events .p3-drops-a-r { top: -.5%; }
.ev-lead { height: 42vw; max-height: 230px; }
.script-title {
  margin-top: .3rem;
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.15;
  color: var(--maroon);
}
.ev {
  position: relative;
  max-width: 30rem;
  margin: 5.2rem auto 0;
  padding: 2.7rem 1.5rem 2.3rem;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
}
.ev::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 124, 47, .22);
  pointer-events: none;
}
.ev-roses { position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%); width: 9.5rem; }
.ev-drops-l { position: absolute; left: -8%; bottom: -6%; width: 26%; }
.ev-drops-r { position: absolute; right: -8%; bottom: -6%; width: 26%; transform: scaleX(-1); }
.ev-name { font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: var(--maroon); }
.ev-native { margin-top: .25rem; font-family: 'Amiri', 'Cormorant Garamond', serif; font-size: 1.05rem; color: #7d5a1d; }
.ev-date { font-size: 1rem; font-weight: 600; color: #4a3c2c; }
.ev-time { margin-top: .25rem; font-size: 1.05rem; letter-spacing: .06em; color: #8a6420; }
.ev-venue { margin-top: 1.2rem; font-size: 1rem; font-weight: 600; color: var(--maroon); }
.ev-address { margin-top: .3rem; font-size: .85rem; line-height: 1.65; color: #6b5b46; }
.ev-map {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .72rem 1.7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  background: linear-gradient(160deg, #7a1830, var(--maroon));
  border: 1px solid rgba(169, 124, 47, .6);
  transition: transform .25s, box-shadow .25s;
}
.ev-map:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(92, 16, 36, .35); }
.ev-crest { display: block; width: 40%; margin: 3.4rem auto 0; }

/* ---- susunan acara: open timeline on a gold spine ---- */
.sec-rundown { position: relative; isolation: isolate; }
.rd-fil {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .4;
  z-index: -3;
}
.rd-temple { left: 8%; top: 12%; width: 84%; opacity: .1; z-index: -2; }
.rd-glow {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 58% 15% at 50% 15%, rgba(253, 250, 242, .96), rgba(253, 250, 242, 0) 76%),
    radial-gradient(ellipse 70% 44% at 50% 58%, rgba(253, 250, 242, .94), rgba(253, 250, 242, 0) 76%);
}
.rd {
  position: relative;
  max-width: 27rem;
  margin: 3.4rem auto 0;
  padding-bottom: 5.5rem;
  text-align: left;
}
.rd::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5.6rem;
  width: 1px;
  background: linear-gradient(rgba(169, 124, 47, 0), rgba(169, 124, 47, .6) 7%, rgba(169, 124, 47, .6) 93%, rgba(169, 124, 47, 0));
}
.rd-crown { position: absolute; left: 5.6rem; top: 0; translate: -50% -62%; width: 7.5rem; }
.rd-tail { position: absolute; left: 5.6rem; bottom: 0; translate: -50% 40%; width: 6rem; }
.rd-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem 2rem 1fr;
  align-items: start;
  padding: 1rem 0;
}
.rd-row + .rd-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 124, 47, 0), rgba(169, 124, 47, .3) 22%, rgba(169, 124, 47, .3) 78%, rgba(169, 124, 47, 0));
}
.rd-time { font-size: .95rem; letter-spacing: .05em; color: #8a6420; }
.rd-dot {
  justify-self: center;
  margin-top: .34rem;
  width: .48rem;
  height: .48rem;
  rotate: 45deg;
  border: 1px solid var(--gold);
  background: #fdfaf2;
}
.rd-desc { font-size: .93rem; line-height: 1.5; color: #4a3c2c; }

/* ---- dress code ---- */
.sec-dress { position: relative; isolation: isolate; }
.dc-glow {
  left: 0;
  right: 0;
  top: 8%;
  bottom: 8%;
  z-index: -1;
  background: radial-gradient(ellipse 64% 52% at 50% 50%, rgba(253, 250, 242, .92), rgba(253, 250, 242, 0) 74%);
}
.dc-rose-l { position: absolute; left: -9%; top: 6%; width: 30%; }
.dc-rose-r { position: absolute; right: -9%; top: 6%; width: 30%; transform: scaleX(-1); }
.dc-note {
  max-width: 22rem;
  margin: .9rem auto 0;
  font-size: .88rem;
  line-height: 1.7;
  color: #5a4a36;
}
.dc-colors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  list-style: none;
  margin-top: 2rem;
}
.dc-colors span {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(169, 124, 47, .3);
  outline-offset: 3px;
  box-shadow: inset 0 2px 6px rgba(61, 43, 31, .25);
}

/* ---- kisah kami ---- */
.st-item {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 1.1rem;
  align-items: center;
  max-width: 28rem;
  margin: 2.4rem auto 0;
  text-align: left;
}
.st-flip { direction: rtl; }
.st-flip > * { direction: ltr; }
.st-flip .st-text { text-align: right; }
/* height is stated, not derived: as a grid item an aspect-ratio box gets
   stretched to the row, and the child's height:100% has no definite parent
   height to resolve against — either one turns the ring into an oval */
.st-photo {
  width: 7.4rem;
  height: 7.4rem;
  padding: .3rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(169, 124, 47, .28);
  outline-offset: 3px;
}
.st-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: sepia(.14) saturate(.94);
}
.st-year {
  font-family: 'Pinyon Script', cursive;
  font-size: 1.7rem;
  line-height: 1;
  color: #8a6420;
}
.st-title { margin-top: .25rem; font-size: 1.12rem; font-weight: 600; color: var(--maroon); }
.st-body { margin-top: .45rem; font-size: .84rem; line-height: 1.65; color: #5a4a36; }
.st-div {
  width: 42%;
  height: 1px;
  margin: 2.4rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(169, 124, 47, .45), transparent);
}

/* ---- galeri (design page 4) ---- */
.gal-hero { position: relative; aspect-ratio: 9 / 13.2; max-width: 26rem; margin: 2.2rem auto 0; overflow: hidden; }
.gh-inner { position: absolute; inset: 0 0 auto 0; aspect-ratio: 9 / 16; }
.gh-inner > * { position: absolute; }
/* the gold crown is a Canva graphic, absent from the exported elements, so the
   whole top band is cut from the page render and keyed off its ivory ground */
.gh-crown { left: 0; top: 0; width: 100%; }
.gh-gun-l { left: -3.5%; top: 33.9%; width: 34%; }
.gh-gun-r { right: -3.5%; top: 33.9%; width: 34%; transform: scaleX(-1); }
.gh-way-l { left: -5.5%; top: 43.7%; width: 36.5%; }
.gh-way-r { right: 1%; top: 45.5%; width: 28%; }
.gh-photo {
  left: 20%;
  right: 20%;
  top: 25.3%;
  bottom: 25.5%;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(169, 124, 47, .55);
  box-shadow: 0 6px 20px rgba(74, 60, 44, .12);
}
/* every shot is stacked in the frame; only .is-on is opaque, so the hero
   cycles through the same images the strip below it lists */
.gh-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.12) saturate(.95);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.gh-photo img.is-on { opacity: 1; }
.gh-rose-l { left: -2.2%; bottom: 19%; width: 32.2%; transform: rotate(180deg); }
.gh-rose-r { right: -2.2%; bottom: 19%; width: 32.2%; transform: scaleY(-1); }
.gal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  list-style: none;
  max-width: 26rem;
  margin: 1.8rem auto 0;
}
.gal-strip li { flex: 1 1 4.6rem; }
.gal-strip img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(169, 124, 47, .55);
  filter: sepia(.12) saturate(.95);
}

/* ---- saksikan & bagikan ---- */
.sec-share {
  position: relative;
  padding: 5rem 1.5rem;
  text-align: center;
}
.sec-share .p3-drops-a-l, .sec-share .p3-drops-a-r { top: -.5%; }
.sh-container {
  max-width: 30rem;
  margin: 3.5rem auto 0;
}
.sh-card {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.7rem 1.5rem 2.3rem;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
  box-shadow: 0 10px 30px rgba(74, 60, 44, .06);
}
.sh-card + .sh-card {
  margin-top: 5.2rem;
}
.sh-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 124, 47, .22);
  pointer-events: none;
}
.sh-roses {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 9.5rem;
}
.sh-drops-l {
  position: absolute;
  left: -8%;
  bottom: -6%;
  width: 26%;
}
.sh-drops-r {
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: 26%;
  transform: scaleX(-1);
}
.sh-cat {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a6420;
}
.sh-title {
  margin-top: .6rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--maroon);
}
.sh-desc {
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #6b5b46;
}
.sh-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .72rem 1.7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  background: linear-gradient(160deg, #7a1830, var(--maroon));
  border: 1px solid rgba(169, 124, 47, .6);
  transition: transform .25s, box-shadow .25s;
}
.sh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(92, 16, 36, .35);
}
.sh-crest {
  display: block;
  width: 40%;
  margin: 3.4rem auto;
}

/* floating music disc */
#disc {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 20;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, #7a1830, var(--maroon));
  color: var(--ivory);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(61, 43, 31, .3);
}

/* ---- kartu tamu digital ---- */
.sec-guestcard {
  position: relative;
  padding: 5rem 1.5rem;
  text-align: center;
}
.gc-pass {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3rem 1.8rem 2.6rem;
  background: #3c0916;
  border: 1px solid rgba(212, 172, 92, .65);
  box-shadow: 0 16px 40px rgba(42, 6, 15, .25);
  color: var(--ivory);
}
.gc-pass::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212, 172, 92, .3);
  pointer-events: none;
}
.gc-crown {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 9.5rem;
}
.gc-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #d4ac5c;
}
.gc-name {
  margin-top: .8rem;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f9f3e6;
}
.gc-code {
  margin-top: .3rem;
  font-size: .85rem;
  letter-spacing: .18em;
  color: rgba(212, 172, 92, .85);
}
.gc-vip {
  display: inline-block;
  margin-top: .6rem;
  padding: .25rem .75rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .18em;
  background: rgba(212, 172, 92, .2);
  border: 1px solid rgba(212, 172, 92, .6);
  border-radius: 20px;
  color: #f7ebcf;
}
.gc-qr-frame {
  position: relative;
  width: 11.5rem;
  height: 11.5rem;
  margin: 1.6rem auto;
  padding: .75rem;
  background: #fffdf8;
  border: 2px solid rgba(169, 124, 47, .55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.gc-qr {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gc-note {
  position: relative;
  z-index: 2;
  max-width: 78%;
  margin: 0 auto;
  font-size: .82rem;
  line-height: 1.65;
  color: rgba(249, 243, 230, .85);
}
.gc-drops-l {
  position: absolute;
  left: -11%;
  bottom: -6%;
  width: 22%;
  pointer-events: none;
}
.gc-drops-r {
  position: absolute;
  right: -11%;
  bottom: -6%;
  width: 22%;
  transform: scaleX(-1);
  pointer-events: none;
}

/* ---- pesan penutup & footer ---- */
.sec-footer {
  position: relative;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
  background: transparent;
}
.ft-content {
  position: relative;
  max-width: 28rem;
  margin: 0 auto;
}
.ft-temple {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  opacity: .25;
  pointer-events: none;
}
.ft-crest {
  display: block;
  width: 7.5rem;
  margin: 0 auto 2.2rem;
}
.ft-message {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.85;
  color: #4a3c2c;
}
.ft-eyebrow {
  margin-top: 3.2rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a6420;
}
.ft-script-names {
  margin-top: .4rem;
  font-family: 'Pinyon Script', cursive;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--maroon);
}
.ft-families {
  margin-top: 1.2rem;
  font-size: .88rem;
  line-height: 1.75;
  color: #6b5b46;
}
.ft-hashtag {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .35rem 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 600;
  color: #8a6420;
  background: rgba(253, 250, 242, .8);
  border: 1px solid rgba(169, 124, 47, .4);
}
.ft-divider {
  width: 40%;
  height: 1px;
  margin: 3rem auto 2.2rem;
  background: linear-gradient(90deg, transparent, rgba(169, 124, 47, .5), transparent);
}
.ft-credit {
  font-size: .72rem;
  line-height: 1.7;
  color: #8a6420;
}
.ft-brand-title {
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ft-brand-sub {
  margin-top: .2rem;
  opacity: .8;
}

/* ---- static footer navigation bar ---- */
.ft-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(169, 124, 47, .3);
}
.nav-item {
  color: #8a6420;
  text-decoration: none;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .2s, transform .2s;
}
.nav-item:hover {
  color: var(--maroon);
  transform: translateY(-1px);
}
#disc.spinning { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes sway { 50% { transform: rotate(1.6deg); } }
@keyframes sway-flip {
  0%, 100% { transform: scaleX(-1) rotate(-1.1deg); }
  50% { transform: scaleX(-1) rotate(1.1deg); }
}
@keyframes rock {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -4deg; }
  35% { rotate: 3.5deg; }
  55% { rotate: -4deg; }
  75% { rotate: 3.5deg; }
  90% { rotate: -3deg; }
}

@media (prefers-reduced-motion: reduce) {
  .p3 .el, .p3 .gate-text, .p1 .el, .p1 .hero,
  .sec .greeting, .sec .qcard, .sec-invited > *,
  .sec-events .el, .sec-events .eyebrow, .sec-events .script-title, .ev, .ev-crest,
  .sec-rundown .el, .sec-rundown .eyebrow, .sec-rundown .sec-title, .rd-crown, .rd-tail, .rd-row,
  .sec-dress .eyebrow, .sec-dress .script-title, .dc-note, .dc-colors,
  .dc-rose-l, .dc-rose-r, .sec-story > *,
  .sec-gallery .eyebrow, .sec-gallery .sec-title, .gal-strip, .gh-inner > *,
  .sec-share .eyebrow, .sec-share .sec-title, .sec-share .sh-card, .sec-share .sh-crest,
  .sec-guestcard .gc-pass, .sec-footer .ft-content > *:not(.ft-temple),
  .sec-mempelai .el, .mamp, .mcrest, .mfoot img,
  .mblock .mtext { opacity: 1; transition: none !important; transform: none; translate: none; }
  .sec-mempelai .p3-drops-a-r, .sec-events .p3-drops-a-r, .ev-drops-r, .sh-drops-r, .gc-drops-r, .dc-rose-r,
  .gh-gun-r, .mamp-rr, .mjanur-r, .mwy-r { transform: scaleX(-1); }
  .gh-rose-l { transform: rotate(180deg); }
  .gh-rose-r { transform: scaleY(-1); }
  /* the hero still cycles, it just cuts instead of crossfading — it must not
     join the opacity:1 group above or every stacked shot would show at once */
  .gh-photo img { transition: none !important; }
  .mblock .mwy-l, .mblock .mwy-r { opacity: .09; }
  .mblock .mtemple { opacity: .13; }
  .rd::before { transform: none; }
  .rd-row { translate: none; }
  .p1, .stage.p3 { transform: none; transition: none; }
  .temple-crop img { filter: none; transition: none; }
  .p3 .p3-drops-a-r, .p3 .p3-drops-b-r, .p3 .p3-drops-m-l, .p3 .p3-roses-r,
  .p3.in .p3-drops-a-r, .p3.in .p3-drops-b-r, .p3.in .p3-drops-m-l, .p3.in .p3-roses-r { transform: scaleX(-1); }
  .p1 .roses-1, .p1.in .roses-1, .p1 .roses-3 { transform: scaleY(-1); }
  .p1 .roses-2, .p1.in .roses-2, .p1 .roses-4 { transform: scale(-1, -1); }
  .p1 .drops-tc-l, .p1 .drops-tl, .p1 .drops-bc-r { transform: scaleX(-1); }
  .p1 .wing-back-l, .p1.in .wing-back-l { transform: rotate(-26deg); }
  .p1 .wing-back-r, .p1.in .wing-back-r { transform: rotate(26deg); }
  .p1 .wing-front-l { transform: rotate(-37deg); }
  .p1 .wing-front-r { transform: rotate(37deg); }
  .chand-crop .chandelier, .chand2-tl img, .chand2-tr img, .chand2-c img,
  .p3.out .wayang-m, .p3.out .wayang-f { animation: none; }
  .p3.out .wayang-m, .p3.out .wayang-f { translate: none; }
  .chand2-tl img, .chand2-tr img, .chand2-c img { transform: scaleX(-1); }
}

/* ============================================================
   Amplop digital, wishlist, RSVP, ucapan
   Panels reuse the .sh-card language: warm ivory over the damask, a gold
   hairline, a second inset hairline, roses cresting the top edge and drops
   spilling past the bottom corners.
   ============================================================ */
.gf-intro, .fm-note {
  max-width: 24rem;
  margin: 1rem auto 2.6rem;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.75;
  color: rgba(61, 43, 31, .82);
}

.gf-card, .fm-card {
  position: relative;
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.9rem 1.6rem 2.4rem;
  background: rgba(253, 250, 242, .9);
  border: 1px solid rgba(169, 124, 47, .5);
  box-shadow: 0 10px 30px rgba(74, 60, 44, .06);
}

.gf-card::before, .fm-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 124, 47, .22);
  pointer-events: none;
}

.gf-card + .gf-card { margin-top: 5rem; }

.gf-roses {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 9.5rem;
}

.gf-drops-l, .gf-drops-r {
  position: absolute;
  bottom: -6%;
  width: 26%;
  pointer-events: none;
}

.gf-drops-l { left: -8%; }
.gf-drops-r { right: -8%; transform: scaleX(-1); }

.gf-bank {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a6420;
}

.gf-number {
  margin-top: .5rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--maroon);
}

.gf-name { letter-spacing: .02em; }

.gf-holder {
  font-size: .95rem;
  color: rgba(61, 43, 31, .78);
}

.gf-address {
  margin: .6rem 0 .4rem;
  font-size: .98rem;
  line-height: 1.65;
  color: rgba(61, 43, 31, .9);
}

/* the pair hangs from the bottom edge of the last card in the section above,
   not across its face — .sec-share's 5rem bottom padding is that gap */
.sec-gift .chand2-tl, .sec-gift .chand2-tr { top: -5rem; }

.gf-fil {
  top: 1%;
  left: 50%;
  translate: -50% 0;
  width: 62%;
  opacity: .16;
}

.gf-crest, .rg-crest, .wi-crest {
  position: relative;
  display: block;
  width: 6.4rem;
  margin: 3.2rem auto 0;
  opacity: .85;
}

/* ---- wishlist ---- */
.rg-temple {
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 88%;
  opacity: .14;
}

.rg-janur-l, .rg-janur-r { top: 9%; width: 17%; opacity: .5; }
.rg-janur-l { left: -2%; }
.rg-janur-r { right: -2%; transform: scaleX(-1); }

.rg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  max-width: 28rem;
  margin: 2.4rem auto 0;
  list-style: none;
}

.rg-item {
  position: relative;
  padding: .9rem;
  background: rgba(253, 250, 242, .92);
  border: 1px solid rgba(169, 124, 47, .45);
  box-shadow: 0 8px 22px rgba(74, 60, 44, .07);
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(.2s + var(--i) * .1s);
}

.sec-registry.in .rg-item { opacity: 1; translate: 0 0; }

.rg-photo {
  aspect-ratio: 1;
  margin-bottom: .7rem;
  overflow: hidden;
  border: 1px solid rgba(169, 124, 47, .3);
}

.rg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rg-name {
  font-size: .96rem;
  line-height: 1.45;
  color: var(--maroon);
}

.rg-link {
  display: inline-block;
  margin-top: .45rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a6420;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 124, 47, .55);
}

/* ---- forms ---- */
.rv-wing-l, .rv-wing-r { top: 4%; width: 30%; opacity: .5; }
.rv-wing-l { left: -4%; }
.rv-wing-r { right: -4%; }

.wi-gunungan {
  bottom: 2%;
  left: 50%;
  translate: -50% 0;
  width: 34%;
  opacity: .12;
}

.fm-card { text-align: left; margin-top: 1.4rem; }

.fm-fld { display: block; margin-bottom: 1.1rem; }

.fm-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a6420;
}

.fm-fld input, .fm-fld select, .fm-fld textarea {
  width: 100%;
  padding: .7rem .8rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 253, 248, .95);
  border: 1px solid rgba(169, 124, 47, .45);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.fm-fld textarea { resize: vertical; }

.fm-fld input:focus, .fm-fld select:focus, .fm-fld textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(169, 124, 47, .15);
}

.fm-card .sh-btn {
  width: 100%;
  text-align: center;
  border: 1px solid rgba(169, 124, 47, .6);
  cursor: pointer;
  font-family: inherit;
}

.fm-card .sh-btn:disabled { opacity: .55; cursor: default; transform: none; }

.fm-msg {
  margin-top: .85rem;
  font-size: .92rem;
  font-style: italic;
  text-align: center;
  color: #8a6420;
}

.fm-msg.is-error { color: #a3312f; }

.fm-closed {
  max-width: 24rem;
  margin: 1.4rem auto 0;
  padding: 1.1rem;
  font-style: italic;
  color: var(--maroon);
  border: 1px solid rgba(169, 124, 47, .45);
  background: rgba(253, 250, 242, .8);
}

/* ---- ucapan ---- */
.wi-list {
  max-width: 30rem;
  margin: 2.4rem auto 0;
  list-style: none;
  text-align: left;
}

.wi {
  position: relative;
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  background: rgba(253, 250, 242, .82);
  border-left: 2px solid rgba(169, 124, 47, .6);
}

.wi-name {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a6420;
  margin-bottom: .3rem;
}

.wi-msg {
  font-size: .97rem;
  line-height: 1.65;
  color: rgba(61, 43, 31, .88);
}

/* reveal, matching the other sections */
.sec-gift .eyebrow, .sec-gift .script-title, .sec-gift .gf-card,
.sec-registry .eyebrow, .sec-registry .sec-title,
.sec-rsvp .eyebrow, .sec-rsvp .script-title, .sec-rsvp .fm-card,
.sec-wishes .eyebrow, .sec-wishes .script-title, .sec-wishes .fm-card, .wi-list {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease, transform 1s ease;
}

.sec-gift.in .eyebrow, .sec-gift.in .script-title, .sec-gift.in .gf-card,
.sec-registry.in .eyebrow, .sec-registry.in .sec-title,
.sec-rsvp.in .eyebrow, .sec-rsvp.in .script-title, .sec-rsvp.in .fm-card,
.sec-wishes.in .eyebrow, .sec-wishes.in .script-title, .sec-wishes.in .fm-card, .sec-wishes.in .wi-list {
  opacity: 1;
  transform: none;
}