:root {
  --salem: #cf8f87;
  --salem-deep: #975b5d;
  --maroon: #762c3d;
  --maroon-deep: #4f1926;
  --rose-ink: #672c3b;
  --ivory: #fff9f1;
  --sage: #778270;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--rose-ink);
  background: #ead5ca;
  font-family: "Cormorant Garamond", Georgia, serif;
}

body.invitation-locked {
  overflow: hidden;
}

button {
  font: inherit;
}

.cover {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: #f8ede3;
}

.gate {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 34%, rgba(188, 100, 111, .32), transparent 32%),
    linear-gradient(155deg, var(--maroon-deep), #7f3042 52%, #521827);
  filter: blur(0);
  transform: scale(1);
  transform-origin: 50% 42%;
  transition:
    opacity .7s .55s ease,
    transform 1.45s cubic-bezier(.2, .72, .22, 1),
    filter 1.1s .18s ease;
  will-change: opacity, transform, filter;
}

.gate::before {
  position: absolute;
  inset: -4%;
  background: url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover no-repeat;
  content: "";
  filter: grayscale(.25) contrast(1.08);
  mix-blend-mode: soft-light;
  opacity: .34;
  transform: scale(1.06);
  animation: gate-breathe 10s ease-in-out infinite alternate;
  transition: opacity 1s ease, transform 1.45s cubic-bezier(.2, .72, .22, 1);
}

.gate__portal {
  position: absolute;
  z-index: 1;
  inset: clamp(5px, 1.2vw, 12px);
  background: url("assets/images/ceremonial-gateway-v1.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 24px rgba(35, 5, 13, .26));
  opacity: 0;
  transform: scale(1.045) translateY(-.8%);
  animation:
    gateway-in 1.8s .15s cubic-bezier(.2, .75, .25, 1) forwards,
    gateway-breathe 7s 1.95s ease-in-out infinite alternate;
  pointer-events: none;
  transform-origin: 50% 38%;
  transition:
    opacity .72s .35s ease,
    transform 1.45s cubic-bezier(.18, .72, .2, 1),
    filter 1.1s .2s ease;
  will-change: transform;
}

.gate__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(82vw, 390px);
  flex-direction: column;
  align-items: center;
  padding: 56px 28px;
  border: 1px solid rgba(255, 235, 220, .23);
  border-radius: 50% 50% 44% 44% / 25% 25% 14% 14%;
  background: rgba(79, 25, 38, .48);
  box-shadow: 0 24px 70px rgba(46, 8, 18, .3);
  text-align: center;
  backdrop-filter: blur(5px);
  animation: gate-content-in 1.5s cubic-bezier(.2, .75, .25, 1) both;
  transition: opacity .42s ease, transform .62s cubic-bezier(.2, .75, .25, 1), filter .55s ease;
}

.monogram {
  position: relative;
  display: flex;
  width: 82px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border: 1px solid rgba(232, 187, 151, .7);
  border-radius: 50%;
  color: #e8bb97;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: -.08em;
}

.monogram::before,
.monogram::after {
  position: absolute;
  width: 12px;
  height: 12px;
  border: solid #e8bb97;
  content: "";
  opacity: .75;
  transform: rotate(45deg);
}

.monogram::before {
  top: -7px;
  border-width: 1px 0 0 1px;
}

.monogram::after {
  bottom: -7px;
  border-width: 0 1px 1px 0;
}

.monogram i {
  margin: 0 2px;
  font-family: "Parisienne", cursive;
  font-size: 1.15rem;
  font-style: normal;
}

.gate__eyebrow {
  margin: 0 0 10px;
  color: rgba(255, 241, 226, .8);
  font-family: "Italiana", Georgia, serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.gate h2 {
  margin: 0;
  color: #fff5e9;
  font-family: "Parisienne", "Brush Script MT", cursive;
  font-size: clamp(3.2rem, 14vw, 5rem);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 8px 22px rgba(40, 8, 15, .28);
}

.gate h2 span {
  color: #e7b58e;
  font-family: "Cormorant Garamond", serif;
  font-size: .55em;
  font-style: italic;
}

.gate__divider {
  position: relative;
  width: 120px;
  height: 1px;
  margin: 24px 0 22px;
  background: linear-gradient(90deg, transparent, rgba(232, 187, 151, .82), transparent);
}

.gate__divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  aspect-ratio: 1;
  border: 1px solid #e8bb97;
  background: var(--maroon);
  transform: translate(-50%, -50%) rotate(45deg);
}

.gate__guest-label,
.gate__guest {
  margin: 0;
}

.gate__guest-label {
  color: rgba(255, 241, 226, .7);
  font-size: .8rem;
  letter-spacing: .04em;
}

.gate__guest {
  margin-top: 5px;
  color: #fff6eb;
  font-size: 1.15rem;
  font-weight: 600;
}

.cover.is-revealed .gate {
  opacity: 0;
  filter: blur(4px);
  transform: scale(1.18);
  pointer-events: none;
}

.cover.is-revealed .gate::before {
  animation: none;
  opacity: .5;
  transform: scale(1.28);
}

.cover.is-revealed .gate__portal {
  animation: none;
  filter: blur(2px) drop-shadow(0 18px 24px rgba(35, 5, 13, .12));
  opacity: 0;
  transform: scale(1.72) translateY(3%);
}

.cover.is-revealed .gate__content {
  animation: none;
  filter: blur(2px);
  opacity: 0;
  transform: translateY(-1.5%) scale(1.06);
}

.scene,
.scene__art,
.scene__wash,
.scene__glow,
.scene__canopy,
.scene__foreground {
  position: absolute;
  inset: 0;
}

.scene {
  z-index: -3;
  overflow: hidden;
}

.scene__art {
  inset: -5%;
  background: url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover no-repeat;
  transform: scale(1.24) translateY(3.5%);
  animation:
    camera-reveal 8s cubic-bezier(.2, .75, .25, 1) forwards,
    breathe 12s ease-in-out 8s infinite alternate;
  will-change: transform;
}

.scene__wash {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, .05), transparent 24%),
    radial-gradient(circle at 50% 38%, rgba(255, 252, 244, .76) 0 9%, rgba(255, 249, 240, .25) 30%, transparent 53%),
    radial-gradient(circle at 50% 115%, rgba(79, 25, 38, .22), transparent 49%),
    linear-gradient(180deg, transparent 63%, rgba(79, 25, 38, .2));
}

.scene__glow {
  z-index: 2;
  inset: 15% 4% 24%;
  background: radial-gradient(ellipse, rgba(255, 250, 238, .75), transparent 64%);
  filter: blur(20px);
  opacity: 0;
  animation: glow-in 2.8s 2.2s ease forwards;
}

.scene__canopy {
  z-index: 3;
  inset: -2%;
  background: url("assets/images/floral-canopy-v2.webp") center top / cover no-repeat;
  opacity: 0;
  transform: translateY(-3%) scale(1.04);
  animation:
    canopy-in 2.2s 1.4s cubic-bezier(.2, .75, .25, 1) forwards,
    canopy-float 7s 3.6s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

.scene__foreground {
  z-index: 4;
  inset: -3%;
  background: url("assets/images/floral-foreground-v2.webp") center bottom / cover no-repeat;
  opacity: 0;
  transform: translateY(6%) scale(1.06);
  animation:
    foreground-in 2.4s 1.8s cubic-bezier(.2, .75, .25, 1) forwards,
    foreground-float 6.5s 4.2s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

.cover::after {
  position: absolute;
  z-index: 5;
  inset: 18px;
  border: 1px solid rgba(118, 44, 61, .42);
  border-radius: 999px 999px 8px 8px;
  content: "";
  opacity: 0;
  transform: scale(.96);
  animation: frame-in 2s 1.8s ease forwards;
  pointer-events: none;
}

.ornament {
  position: absolute;
  z-index: 6;
  top: clamp(30px, 5vh, 54px);
  left: 50%;
  display: flex;
  width: min(58vw, 240px);
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translate(-50%, -18px);
  animation: ornament-in 1.4s 2.6s ease forwards;
}

.ornament span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(118, 44, 61, .72));
}

.ornament span:last-child {
  transform: scaleX(-1);
}

.ornament i {
  width: 8px;
  aspect-ratio: 1;
  border: 1px solid rgba(118, 44, 61, .82);
  transform: rotate(45deg);
}

.cover__content {
  position: relative;
  z-index: 4;
  display: flex;
  width: min(82vw, 380px);
  flex-direction: column;
  align-items: center;
  margin-top: -6vh;
  text-align: center;
  text-shadow: 0 1px 18px rgba(255, 249, 238, .92);
}

.eyebrow,
.heritage,
.couple-name span,
.couple-name b,
.continue-invitation {
  opacity: 0;
}

.eyebrow {
  margin: 0 0 18px;
  color: #82585a;
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(.68rem, 2.5vw, .82rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  transform: translateY(12px);
  animation: text-rise 1.2s 3.1s ease forwards;
}

.couple-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: var(--maroon);
  font-family: "Parisienne", "Brush Script MT", cursive;
  width: 100%;
  font-size: clamp(3.3rem, 15vw, 4.85rem);
  font-weight: 400;
  line-height: .86;
}

.couple-name span {
  display: block;
  max-width: 100%;
  padding-inline: .08em;
  white-space: nowrap;
  filter: blur(8px);
  transform: translateY(18px) scale(.94);
  animation: name-in 1.6s 3.65s cubic-bezier(.2, .75, .25, 1) forwards;
}

.couple-name span:last-child {
  animation-delay: 4.35s;
}

.couple-name b {
  position: relative;
  z-index: 2;
  margin: .2em 0 .22em;
  color: var(--maroon-deep);
  font-family: "Cormorant Garamond", serif;
  font-size: .28em;
  font-weight: 400;
  line-height: 1;
  transform: scale(.55) rotate(-12deg);
  animation: ampersand-in 1s 4.05s ease forwards;
}

.heritage {
  margin: 20px 0 0;
  color: var(--maroon-deep);
  font-size: clamp(.76rem, 3vw, .92rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  transform: translateY(8px);
  animation: text-rise 1s 5.1s ease forwards;
}

.heritage i {
  margin: 0 .35em;
  color: var(--salem);
  font-style: normal;
}

.open-invitation {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 232, 214, .58);
  border-radius: 999px;
  color: #fff6eb;
  background: rgba(255, 245, 232, .1);
  box-shadow: 0 8px 24px rgba(43, 7, 16, .18);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transform: translateY(0);
  transition: .3s ease;
}

.open-invitation:hover {
  color: var(--maroon-deep);
  background: rgba(255, 244, 229, .92);
  transform: translateY(-2px);
}

.open-invitation svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.continue-invitation {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 10px 19px;
  border: 1px solid rgba(118, 44, 61, .5);
  border-radius: 999px;
  color: var(--maroon-deep);
  background: rgba(255, 249, 241, .62);
  box-shadow: 0 8px 24px rgba(111, 70, 68, .1);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transform: translateY(12px);
  animation: button-in 1s 5.7s ease forwards;
  transition: .3s ease;
}

.continue-invitation:hover {
  color: var(--ivory);
  background: rgba(118, 44, 61, .94);
  transform: translateY(-2px);
}

.scroll-hint {
  position: absolute;
  z-index: 6;
  bottom: 27px;
  left: 50%;
  margin: 0;
  color: rgba(93, 62, 63, .72);
  font-size: .68rem;
  letter-spacing: .18em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: hint-in 1s 6.3s ease forwards;
}

.petal {
  --drift: 12vw;
  position: absolute;
  z-index: 3;
  top: -8vh;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * .58);
  border-radius: 90% 12% 90% 12%;
  background: linear-gradient(135deg, rgba(232, 154, 151, .8), rgba(255, 224, 207, .5));
  box-shadow: 0 2px 4px rgba(119, 72, 67, .08);
  opacity: 0;
  animation: petal-fall var(--duration) var(--delay) linear infinite;
}

.petal--maroon {
  background: linear-gradient(135deg, rgba(118, 44, 61, .78), rgba(181, 91, 105, .55));
}

.butterflies {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.butterflies img {
  position: absolute;
  width: clamp(22px, 7vw, 34px);
  opacity: 0;
  filter: drop-shadow(0 3px 4px rgba(65, 20, 31, .18));
  will-change: transform;
}

.butterflies img:nth-child(1) {
  top: 35%;
  left: -12%;
  animation: butterfly-one 13s 5.5s ease-in-out infinite;
}

.butterflies img:nth-child(2) {
  top: 46%;
  right: -10%;
  width: clamp(17px, 5vw, 27px);
  animation: butterfly-two 15s 8.5s ease-in-out infinite;
}

.butterflies img:nth-child(3) {
  top: 28%;
  left: 18%;
  width: clamp(13px, 4vw, 21px);
  animation: butterfly-three 11s 11s ease-in-out infinite;
}

.invitation {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 72px 24px;
  background:
    linear-gradient(rgba(255, 249, 241, .94), rgba(255, 249, 241, .94)),
    url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover;
}

.invitation__inner {
  width: min(100%, 620px);
  text-align: center;
}

.invitation__kicker {
  margin: 0;
  color: var(--maroon);
  font-family: "Parisienne", cursive;
  font-size: 2rem;
}

.invitation__mark {
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  margin: 28px auto;
  border: 1px solid rgba(118, 44, 61, .5);
  border-radius: 50%;
  font-family: "Italiana", serif;
  font-size: 1.1rem;
  letter-spacing: .12em;
}

.invitation__mark span {
  color: var(--salem);
  font-family: "Parisienne", cursive;
}

.invitation h2 {
  margin: 0 auto 22px;
  color: var(--maroon-deep);
  font-family: "Italiana", serif;
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-weight: 400;
  line-height: 1.45;
}

.invitation p:not(.invitation__kicker) {
  margin: 0 auto;
  max-width: 490px;
  color: #715f59;
  font-size: 1.1rem;
  line-height: 1.75;
}

.invitation__motif {
  width: 120px;
  height: 12px;
  margin: 32px auto 0;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(118, 44, 61, .62) 7px 9px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.content-section {
  position: relative;
  overflow: hidden;
  padding: 82px 24px;
}

.section-heading {
  position: relative;
  z-index: 2;
  width: min(100%, 450px);
  margin: 0 auto 36px;
  text-align: center;
}

.section-kicker {
  margin: 0 0 8px;
  color: var(--maroon);
  font-family: "Parisienne", "Brush Script MT", cursive;
  font-size: 1.65rem;
}

.section-heading h2,
.section-card h2,
.closing h2 {
  margin: 0;
  color: var(--maroon-deep);
  font-family: "Italiana", Georgia, serif;
  font-size: clamp(1.55rem, 6.5vw, 2.3rem);
  font-weight: 400;
  line-height: 1.4;
}

.section-heading > p:last-child {
  margin: 15px auto 0;
  color: #75625d;
  font-size: 1.03rem;
  line-height: 1.65;
}

.verse {
  display: grid;
  min-height: 78vh;
  place-items: center;
  background:
    linear-gradient(rgba(240, 202, 190, .91), rgba(255, 245, 233, .96)),
    url("assets/images/floral-canopy-v2.webp") center top / cover;
}

.verse::before,
.verse::after {
  position: absolute;
  width: 135px;
  aspect-ratio: 1;
  border: 1px solid rgba(118, 44, 61, .14);
  content: "";
  transform: rotate(45deg);
}

.verse::before { top: -72px; left: -72px; }
.verse::after { right: -72px; bottom: -72px; }

.section-card {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
  padding: 50px 27px;
  border: 1px solid rgba(118, 44, 61, .22);
  border-radius: 160px 160px 24px 24px;
  background: rgba(255, 250, 242, .78);
  box-shadow: 0 24px 55px rgba(97, 52, 50, .11);
  text-align: center;
  backdrop-filter: blur(7px);
}

.section-card blockquote {
  margin: 27px auto 17px;
  color: #684f4e;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.8;
}

.section-card cite {
  color: var(--maroon);
  font-family: "Italiana", Georgia, serif;
  font-size: .76rem;
  font-style: normal;
  letter-spacing: .18em;
}

.couple {
  background: #fff8ef;
}

.couple::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(118, 44, 61, .06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(118, 44, 61, .06) 1px, transparent 1px) 0 0 / 34px 34px;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}

.couple-cards {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  width: min(100%, 430px);
  margin: 0 auto;
}

.person-card {
  padding: 28px 24px 30px;
  border: 1px solid rgba(118, 44, 61, .17);
  border-radius: 110px 110px 20px 20px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 18px 44px rgba(90, 53, 48, .09);
  text-align: center;
}

.person-card__portrait {
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto 20px;
  border: 5px solid rgba(255, 248, 238, .84);
  border-radius: 50%;
  color: rgba(255, 247, 235, .9);
  background:
    linear-gradient(rgba(79, 25, 38, .58), rgba(118, 44, 61, .62)),
    url("assets/images/bugis-makassar-maroon-hero-v2.webp") center 35% / cover;
  box-shadow: 0 0 0 1px rgba(118, 44, 61, .25), 0 14px 28px rgba(90, 41, 45, .15);
  font-family: "Italiana", Georgia, serif;
  font-size: 2.2rem;
}

.person-card__role,
.event-card__label {
  margin: 0;
  color: var(--salem-deep);
  font-family: "Italiana", Georgia, serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.person-card h3 {
  margin: 5px 0 11px;
  color: var(--maroon);
  font-family: "Parisienne", "Brush Script MT", cursive;
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1;
}

.pending-copy {
  margin: 0;
  color: #8b7770;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.5;
}

.couple-cards__and {
  position: relative;
  z-index: 2;
  display: grid;
  width: 50px;
  aspect-ratio: 1;
  place-items: center;
  margin: -5px auto;
  border: 1px solid rgba(118, 44, 61, .28);
  border-radius: 50%;
  color: var(--maroon);
  background: #fff8ef;
  font-family: "Parisienne", cursive;
  font-size: 1.7rem;
}

.events {
  background:
    linear-gradient(rgba(79, 25, 38, .93), rgba(79, 25, 38, .96)),
    url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover;
}

.events::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(232, 187, 151, .27);
  border-radius: 180px 180px 18px 18px;
  content: "";
}

.section-heading--light .section-kicker {
  color: #e8bb97;
}

.section-heading--light h2,
.section-heading--light > p:last-child {
  color: #fff5e9;
}

.event-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  width: min(100%, 410px);
  margin: 0 auto;
}

.event-card {
  padding: 28px 23px;
  border: 1px solid rgba(255, 236, 216, .35);
  border-radius: 20px;
  background: rgba(255, 248, 237, .95);
  box-shadow: 0 18px 42px rgba(35, 4, 13, .2);
  text-align: center;
}

.event-card__icon {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto 17px;
  border: 1px solid rgba(118, 44, 61, .22);
  border-radius: 50%;
  color: var(--maroon);
}

.event-card__icon svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.event-card h3 {
  margin: 9px 0 8px;
  color: var(--maroon-deep);
  font-family: "Italiana", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 400;
}

.gallery {
  background: linear-gradient(180deg, #f6dcd3, #fff7ee);
}

.gallery-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 145px 145px;
  gap: 10px;
  width: min(100%, 430px);
  margin: 0 auto;
}

.gallery-placeholder {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(118, 44, 61, .18);
  border-radius: 16px;
  color: rgba(255, 246, 233, .72);
  background:
    linear-gradient(rgba(79, 25, 38, .46), rgba(118, 44, 61, .35)),
    url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover;
  font-family: "Italiana", Georgia, serif;
  font-size: 2rem;
}

.gallery-placeholder--tall {
  grid-row: 1 / span 2;
}

.gallery-note {
  margin: 18px 0 0;
  color: #8a706a;
  font-size: .86rem;
  font-style: italic;
  text-align: center;
}

.closing {
  display: grid;
  min-height: 90vh;
  place-items: center;
  color: #fff5e9;
  background:
    linear-gradient(rgba(79, 25, 38, .83), rgba(79, 25, 38, .94)),
    url("assets/images/bugis-makassar-maroon-hero-v2.webp") center / cover;
}

.closing__inner {
  width: min(100%, 430px);
  padding: 45px 26px;
  border: 1px solid rgba(255, 235, 217, .28);
  border-radius: 160px 160px 22px 22px;
  background: rgba(79, 25, 38, .38);
  text-align: center;
  backdrop-filter: blur(6px);
}

.closing__monogram {
  display: grid;
  width: 78px;
  aspect-ratio: 1;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(232, 187, 151, .7);
  border-radius: 50%;
  color: #e8bb97;
  font-family: "Italiana", Georgia, serif;
}

.closing__monogram span {
  font-family: "Parisienne", cursive;
}

.closing .section-kicker {
  color: #e8bb97;
}

.closing h2 {
  color: #fff5e9;
}

.closing__inner > p:not(.section-kicker, .closing__names) {
  margin: 18px auto 0;
  color: rgba(255, 245, 233, .8);
  font-size: 1.05rem;
  line-height: 1.7;
}

.closing__names {
  margin: 26px 0 0;
  color: #fff5e9;
  font-family: "Parisienne", cursive;
  font-size: 2.7rem;
}

.closing .invitation__motif {
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(232, 187, 151, .75) 7px 9px);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .75, .25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scene__art,
.scene__glow,
.scene__canopy,
.scene__foreground,
.cover::after,
.ornament,
.eyebrow,
.couple-name span,
.couple-name b,
.heritage,
.continue-invitation,
.scroll-hint,
.petal,
.butterflies img {
  animation-play-state: paused;
}

.cover.is-revealed .scene__art,
.cover.is-revealed .scene__glow,
.cover.is-revealed .scene__canopy,
.cover.is-revealed .scene__foreground,
.cover.is-revealed::after,
.cover.is-revealed .ornament,
.cover.is-revealed .eyebrow,
.cover.is-revealed .couple-name span,
.cover.is-revealed .couple-name b,
.cover.is-revealed .heritage,
.cover.is-revealed .continue-invitation,
.cover.is-revealed .scroll-hint,
.cover.is-revealed .petal,
.cover.is-revealed .butterflies img {
  animation-play-state: running;
}

@keyframes gate-content-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gate-breathe {
  to { transform: scale(1.1) translateY(-.6%); }
}

@keyframes gateway-in {
  to { opacity: .88; transform: scale(1) translateY(0); }
}

@keyframes gateway-breathe {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.012) translateY(-.25%); }
}

@keyframes canopy-in {
  to { opacity: .82; transform: translateY(0) scale(1); }
}

@keyframes canopy-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-.5%, -.55%, 0) scale(1.025); }
}

@keyframes foreground-in {
  to { opacity: .88; transform: translateY(0) scale(1); }
}

@keyframes foreground-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(.6%, .45%, 0) scale(1.035); }
}

@keyframes butterfly-one {
  0% { opacity: 0; transform: translate3d(0, 8vh, 0) rotate(-12deg) scale(.8); }
  10%, 82% { opacity: .9; }
  35% { transform: translate3d(38vw, -5vh, 0) rotate(9deg) scale(1); }
  62% { transform: translate3d(67vw, 4vh, 0) rotate(-8deg) scale(.92); }
  100% { opacity: 0; transform: translate3d(118vw, -10vh, 0) rotate(14deg) scale(.78); }
}

@keyframes butterfly-two {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scaleX(-1) rotate(-8deg); }
  12%, 80% { opacity: .75; }
  44% { transform: translate3d(-48vw, -8vh, 0) scaleX(-1) rotate(12deg); }
  100% { opacity: 0; transform: translate3d(-112vw, 6vh, 0) scaleX(-1) rotate(-15deg); }
}

@keyframes butterfly-three {
  0%, 15% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg) scale(.7); }
  28%, 72% { opacity: .58; }
  48% { transform: translate3d(18vw, -6vh, 0) rotate(10deg) scale(.86); }
  100% { opacity: 0; transform: translate3d(43vw, 2vh, 0) rotate(-12deg) scale(.65); }
}

@keyframes camera-reveal {
  0% { transform: scale(1.24) translateY(3.5%); }
  20% { transform: scale(1.105) translateY(1%); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes breathe {
  to { transform: scale(1.035) translate3d(-.4%, -.35%, 0); }
}

@keyframes glow-in {
  to { opacity: 1; }
}

@keyframes frame-in {
  to { opacity: 1; transform: scale(1); }
}

@keyframes ornament-in {
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes text-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes name-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes ampersand-in {
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes button-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hint-in {
  to { opacity: 1; }
}

@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0); }
  12% { opacity: .7; }
  85% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--drift), 112vh, 0) rotate(520deg); }
}

@media (min-width: 720px) {
  body {
    background: #d4b5aa;
  }

  main {
    width: min(100%, 540px);
    margin: 0 auto;
    box-shadow: 0 0 70px rgba(86, 49, 47, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .petals { display: none; }
}