html,
body {
  direction: rtl;
  /* Stop iOS Safari's rubber-band bounce from exposing whatever sits behind
     the sticky envelope stage at the scroll edges. */
  overscroll-behavior-y: none;
}

:root {
  --main: #3f6254;
  --secondary: #91a58f;
  --light-accent: #cbd5c5;
  --paper: #f7f1e7;
  --gold: #b79555;
  --ink: #25332d;
  --clay: #9e1824;
  --sage: #91a58f;
  --seal-away: 0;
  --flap-open: 0;
  --inner-face: 0;
  --letter-open: 0;
  --letter-visible: 0;
  --interior-reveal: 0;
}

body {
  font-family: Vazirmatn, sans-serif;
}

.music-control {
  position: fixed;
  z-index: 30;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183, 149, 85, .55);
  border-radius: 50%;
  background: rgba(63, 98, 84, .9);
  box-shadow: 0 8px 24px rgba(37, 51, 45, .2);
  color: var(--paper);
  backdrop-filter: blur(10px);
}

.music-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1;
}

.music-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  display: none;
  height: 18px;
  align-items: end;
  justify-content: center;
  gap: 3px;
  direction: ltr;
}

.music-bars i {
  width: 2px;
  height: 45%;
  background: var(--gold);
  animation: music-wave .8s ease-in-out infinite alternate;
}

.music-bars i:nth-child(2) {
  height: 100%;
  animation-delay: -.35s;
}

.music-bars i:nth-child(3) {
  height: 70%;
  animation-delay: -.6s;
}

.music-control.is-playing .music-icon {
  display: none;
}

.music-control.is-playing .music-bars {
  display: flex;
}

@keyframes music-wave {
  to { height: 25%; }
}

.auth-shell {
  background: radial-gradient(circle at 30% 20%, #f7f1e7 0, transparent 34%),
    linear-gradient(225deg, #91a58f, #cbd5c5 58%, #f7f1e7);
}

.auth-card {
  background: rgba(247, 241, 231, .88);
  border-color: rgba(63, 98, 84, .18);
  box-shadow: 0 30px 80px rgba(37, 51, 45, .16);
}

.monogram i,
.ampersand {
  color: var(--gold);
}

.auth-card .kicker,
.hero .kicker {
  color: var(--main);
}

.muted,
.text-button,
.rsvp > p {
  color: rgba(37, 51, 45, .7);
}

input,
textarea {
  border-color: var(--secondary);
}

input:focus,
textarea:focus {
  border-color: var(--gold);
}

button {
  background: var(--main);
  font-family: Vazirmatn, sans-serif;
}

.text-button {
  background: transparent;
}

.status {
  color: var(--clay);
}

.envelope-scene {
  height: 210vh;
  background: var(--main);
}

.envelope {
  width: max(100vw, 210svh);
  max-width: none;
  flex: 0 0 auto;
  opacity: calc(1 - var(--interior-reveal));
  transform: scale(calc(1 + var(--interior-reveal) * .025));
  transform-origin: center;
}

.envelope-back {
  background: transparent;
}

.envelope-front {
  background: transparent;
}

.flap {
  background: transparent;
}

.envelope > .envelope-back,
.envelope > .envelope-front,
.flap,
.flap-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.envelope > .envelope-back,
.envelope > .envelope-front,
.flap-face {
  display: block;
  object-fit: fill;
}

.envelope > .envelope-back {
  z-index: 1;
}

.envelope > .envelope-front {
  z-index: 4;
}

.flap {
  z-index: 5;
  inset: 16% 0 auto;
  height: 56%;
  clip-path: none;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--flap-open) * 180deg));
}

.flap-face {
  inset: -28.571% 0 auto;
  height: 178.571%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.flap-outer {
  opacity: calc(1 - var(--inner-face));
}

.flap-inner {
  transform: none;
  opacity: var(--inner-face);
}

.envelope-letter {
  left: 8%;
  bottom: 8%;
  width: 84%;
  height: 76%;
  opacity: var(--letter-visible);
  transform: translateY(calc(18% - var(--letter-open) * 96%));
}

.letter-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(-180% 0 8% 0);
  pointer-events: none;
}

.envelope.is-open .letter-stage {
  z-index: 3;
}

.envelope.is-open .flap {
  z-index: 1;
}

.letter-address {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 8%;
  text-align: center;
}

.letter-address p {
  margin: 0;
  color: var(--main);
  font-size: clamp(10px, 2vw, 14px);
  letter-spacing: .08em;
}

.letter-address strong {
  color: var(--ink);
  font-family: Lalezar, Vazirmatn, sans-serif;
  font-size: clamp(28px, 7vw, 58px);
  font-weight: 400;
  line-height: 1.15;
}

.envelope-letter {
  border-color: rgba(183, 149, 85, .35);
}

.soft-copy i {
  background: var(--main);
}

.botanical-divider {
  color: var(--gold);
}

.details {
  background: var(--main);
  color: var(--paper);
}

.details .section-label {
  color: var(--gold);
}

.detail-grid > div {
  border-color: rgba(203, 213, 197, .46);
}

.detail-grid span,
.detail-grid p,
.dress b {
  color: var(--light-accent);
}

.detail-grid a {
  color: var(--paper);
  text-decoration-color: var(--gold);
}

.choices span {
  border-color: var(--secondary);
}

.choices input:checked + span {
  background: var(--clay);
  border-color: var(--clay);
}

.rsvp .status {
  color: var(--main);
}

footer {
  background: var(--light-accent);
}

/* The invitation continues as the revealed interior of the envelope. */
.letter {
  background: var(--main);
  color: var(--paper);
}

.letter::before {
  opacity: .32;
}

.guest-dedication {
  margin: 0 0 42px;
  color: var(--light-accent);
  font-size: 12px;
  letter-spacing: .06em;
}

.guest-dedication strong {
  display: block;
  margin-top: 12px;
  color: var(--gold);
  font-family: Lalezar, Vazirmatn, sans-serif;
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 400;
  line-height: 1.2;
}

.hero .kicker {
  color: var(--light-accent);
}

.invitation-copy {
  color: var(--paper);
}

.details {
  background: var(--ink);
}

.rsvp > p {
  color: var(--light-accent);
}

.rsvp input,
.rsvp textarea {
  color: var(--paper);
}

.rsvp textarea::placeholder {
  color: rgba(247, 241, 231, .52);
}

.rsvp .choices span {
  color: var(--paper);
}

.rsvp .status {
  color: var(--light-accent);
}

.rsvp button {
  background: var(--gold);
  color: var(--ink);
}

footer {
  background: var(--ink);
  color: var(--paper);
}

.monogram,
h1,
h2,
h3,
.seal,
.envelope-letter,
.letter-preview strong,
.invitation-copy,
footer p,
footer strong {
  font-family: Lalezar, Vazirmatn, sans-serif;
}

.kicker,
.section-label,
.soft-copy,
.letter-preview p,
.dress,
label,
button {
  letter-spacing: .04em;
  text-transform: none;
}

.auth-card h1 {
  line-height: 1.18;
}

.hero h1 {
  line-height: 1.08;
}

.detail-grid h3,
.rsvp h2 {
  line-height: 1.3;
}

input[dir="ltr"] {
  text-align: center;
}

.detail-grid {
  text-align: right;
}

.seal {
  width: 112px;
  height: 112px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  top: 68%;
  z-index: 6;
  opacity: calc(1 - var(--seal-away));
  transform: translate(-50%, -50%) scale(calc(1 - var(--seal-away) * .3));
  filter: blur(calc(var(--seal-away) * 5px));
  pointer-events: none;
}

.seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(76, 20, 14, .36));
}

@media (max-width: 650px) {
  .seal {
    width: 88px;
    height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-bars i {
    animation: none;
  }
}

/* Full-screen double gatefold invitation */
:root {
  --inner-fold: 0;
  --outer-fold: 0;
  --content-reveal: 0;
}

.gatefold-scene {
  position: relative;
  height: 270vh;
  background: var(--paper);
}

.gatefold-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  perspective: 1800px;
  background: var(--paper);
}

.gatefold-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: var(--paper);
  color: var(--ink);
  transform-style: preserve-3d;
}

.gatefold-card::before,
.fold-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.fold-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh max(7vw, 28px);
  text-align: center;
  background: radial-gradient(circle at center, #fffaf1 0, var(--paper) 64%, var(--light-accent) 145%);
  border: clamp(8px, 1.4vw, 20px) solid var(--paper);
  outline: 1px solid rgba(183, 149, 85, .72);
  outline-offset: clamp(-18px, -1.2vw, -10px);
}

.fold-content .guest-dedication {
  margin-bottom: clamp(24px, 5vh, 48px);
  color: var(--main);
}

.fold-content .kicker {
  color: var(--main);
}

.fold-content h1 {
  margin: clamp(18px, 4vh, 36px) 0 4px;
  color: var(--ink);
  font-size: clamp(55px, 12vw, 138px);
  line-height: .9;
}

.fold-content .ampersand {
  margin: 4px 0;
  color: var(--gold);
  font: 34px Lalezar, Vazirmatn, sans-serif;
}

.fold-content h2 {
  max-width: 760px;
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(22px, 4vw, 44px);
  line-height: 1.35;
}

.fold-panel {
  position: absolute;
  top: 0;
  z-index: 5;
  width: 25.02%;
  height: 100%;
  overflow: hidden;
  border-block: 1px solid var(--gold);
  background: linear-gradient(115deg, #547565 0, var(--main) 52%, #345247 100%);
  box-shadow: inset 0 0 50px rgba(37, 51, 45, .28), 0 0 18px rgba(37, 51, 45, .16);
  backface-visibility: visible;
  transform-style: preserve-3d;
  will-change: transform;
}

.fold-left-outer {
  left: 0;
  border-inline-end: 1px solid rgba(183, 149, 85, .7);
  transform-origin: left center;
  transform: rotateY(calc(var(--outer-fold) * -104deg));
}

.fold-left-inner {
  left: 25%;
  border-inline: 1px solid rgba(183, 149, 85, .7);
  transform-origin: left center;
  transform: rotateY(calc(var(--inner-fold) * -108deg));
}

.fold-right-inner {
  right: 25%;
  border-inline: 1px solid rgba(183, 149, 85, .7);
  transform-origin: right center;
  transform: rotateY(calc(var(--inner-fold) * 108deg));
}

.fold-right-outer {
  right: 0;
  border-inline-start: 1px solid rgba(183, 149, 85, .7);
  transform-origin: right center;
  transform: rotateY(calc(var(--outer-fold) * 104deg));
}

.fold-seal {
  top: 50%;
  left: 50%;
  z-index: 8;
}

.letter {
  background: var(--paper);
  color: var(--ink);
}

.letter::before {
  opacity: 1;
}

.botanical-divider {
  padding-top: 16vh;
}

.invitation-copy {
  color: var(--ink);
}

.rsvp > p {
  color: rgba(37, 51, 45, .68);
}

.rsvp input,
.rsvp textarea,
.rsvp .choices span {
  color: var(--ink);
}

.rsvp textarea::placeholder {
  color: rgba(37, 51, 45, .45);
}

.rsvp .status {
  color: var(--main);
}

@media (max-width: 650px) {
  .fold-content {
    padding-inline: 22px;
  }

  .fold-content h1 {
    font-size: clamp(48px, 18vw, 82px);
  }

  .fold-content h2 {
    font-size: clamp(20px, 6vw, 30px);
  }
}