:root {
  --col: min(100vw, 480px);
  --vh: 1vh;
  --ivory: #f7f2e8;
  --paper: #f2ebdd;
  --olive: #5c6b45;
  --olive-deep: #424e33;
  --sage: #8e9a74;
  --sage-soft: #c9cfb6;
  --burgundy: #8f4656;
  --rose: #b77b87;
  --ink: #4c5240;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", cursive;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  background: #e3dfd2 url("assets/paper-ivory.jpg") center / 600px;
  -webkit-font-smoothing: antialiased;
}
body.sealed { overflow: hidden; height: 100%; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* gentle idle sway for painted flowers (independent of scroll transforms) */
.sway { animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }

/* ---------- shared type ---------- */
.caps { margin: 0; font-size: .74rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.title {
  margin: 0; font-weight: 400; color: var(--olive);
  font-size: clamp(2.5rem, 11vw, 3rem); line-height: 1.1; letter-spacing: .01em;
}
.sub { margin: .55rem 0 0; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: var(--sage); }
.lead { max-width: 21em; margin: 1.2rem auto 0; font-size: 1.12rem; line-height: 1.6; }
.lead-italic { font-style: italic; color: var(--olive); }
.split .ch { display: inline-block; white-space: pre; }

.btn {
  display: inline-block; margin-top: 1.8rem; padding: .95rem 1.9rem;
  border: 1px solid var(--olive); background: transparent; color: var(--olive);
  font-family: var(--serif); font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; text-decoration: none;
  transition: background .3s, color .3s, transform .2s;
}
.btn:active { transform: scale(.98); }
.btn-fill { background: var(--olive); color: var(--ivory); }
.btn-light { border-color: rgba(247, 242, 232, .7); color: var(--ivory); }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* ---------- petals drifting over the page ---------- */
.petals { position: fixed; top: 0; left: 50%; width: var(--col); height: 100%; translate: -50% 0; pointer-events: none; z-index: 40; }

/* ================= ARABIC CALLIGRAPHY (راشد ورهف) =================
   Two transparent layers used as masks, so they take any colour and the و can animate on its own. */
.calli { position: relative; aspect-ratio: 587 / 702; }
.calli i { position: absolute; inset: 0; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.calli-names { z-index: 1; background: var(--olive-deep); -webkit-mask-image: url("assets/calli-names.png") !important; mask-image: url("assets/calli-names.png") !important; }
.calli-waw { background: var(--burgundy); -webkit-mask-image: url("assets/calli-waw.png") !important; mask-image: url("assets/calli-waw.png") !important; }

/* ================= THE ENVELOPE ================= */
.intro { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.env { position: relative; width: var(--col); height: 100%; perspective: 1600px; pointer-events: auto; }
/* sage card with blind-embossed florals and real folds (tools/envelope.py), stretched to the envelope */
.env-pocket {
  position: absolute; inset: 0; z-index: 2;
  clip-path: polygon(0 0, 50% 49%, 100% 0, 100% 100%, 0 100%);
  background: #76806a url("assets/env-pocket.jpg") 0 0 / 100% 100%;
  will-change: transform;
}
.env-flap-shadow { /* the flap's shadow on the pocket: a static, blurred triangle (cheaper and steadier than drop-shadow) */
  position: absolute; left: -1%; right: -1%; top: 0; height: 52.6%; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(rgba(30, 38, 22, 0) 40%, rgba(30, 38, 22, .42));
  filter: blur(9px);
}
.env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 51%; z-index: 3;
  transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform;
}
.env-flap-face { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env-flap-face.front { background: #7a846d url("assets/env-flap.jpg") 0 0 / 100% 100%; }
.env-flap-face.back { transform: rotateX(180deg); background: #efe6d2 url("assets/env-ivory.jpg") center / 520px; }

/* wax seal with the RR monogram */
.seal {
  position: absolute; z-index: 5; left: 50%; top: 50%; width: 128px; height: 128px; translate: -50% -50%;
  padding: 0; border: 0; background: none; border-radius: 50%;
  filter: drop-shadow(0 2px 2px rgba(40, 44, 30, .4)) drop-shadow(0 8px 14px rgba(30, 36, 22, .32));
  animation: sealBreath 3.4s ease-in-out infinite;
}
.seal img { width: 100%; height: 100%; display: block; }
@keyframes sealBreath { 50% { scale: 1.035; } }
.intro-hint {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(var(--vh) * 4.5 + env(safe-area-inset-bottom));
  margin: 0; text-align: center; color: #f1e6cc; text-shadow: 0 1px 2px rgba(40, 48, 30, .55);
  font-size: .68rem; letter-spacing: .36em; text-transform: uppercase; font-weight: 600;
  animation: hint 2.6s ease-in-out infinite;
}
@keyframes hint { 50% { opacity: .35; } }

/* ================= SITE ================= */
.site { position: relative; width: var(--col); margin: 0 auto; background: var(--ivory) url("assets/paper-ivory.jpg") center / 600px; overflow-x: clip; box-shadow: 0 0 60px rgba(60, 60, 40, .18); }
.sec { position: relative; padding: 96px 24px 90px; text-align: center; }

/* ---------- hero ---------- */
.hero { position: relative; height: calc(var(--vh) * 100); min-height: 620px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { from { scale: 1.04; translate: 0 0; } to { scale: 1.14; translate: -2% -2%; } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(247, 242, 232, .14), rgba(247, 242, 232, 0) 45%, rgba(20, 50, 60, .1)); }
.hero-flora { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(40, 50, 30, .25)); }
.hero-flora-a { width: 46%; left: -20%; top: -6%; rotate: -28deg; transform-origin: 0 0; z-index: 2; }
.hero-card {
  position: absolute; z-index: 1; left: 50%; top: calc(var(--vh) * 7); translate: -50% 0; width: 80%; padding: 7% 8% 8%;
  background: url("assets/card-torn.webp") center / 100% 100% no-repeat;
  text-align: center; color: var(--olive);
  filter: drop-shadow(0 12px 24px rgba(30, 50, 55, .3));
}
.hero-dear { margin: 0; font-family: var(--script); font-size: 1.5rem; line-height: 1.2; color: var(--burgundy); }
.hero-calli { width: 38%; margin: .9rem auto 0; }   /* kept clear of the torn top edge */
.hero-names { margin: .1rem 0 0; font-weight: 500; font-size: .9rem; letter-spacing: .32em; text-transform: uppercase; color: var(--olive); }
.hero-names em { font-family: var(--script); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1.5em; color: var(--burgundy); margin: 0 .1em; }
.hero-invite { margin: .7rem 0 0; font-size: .62rem !important; color: var(--ink); }
.hero-date { margin-top: 1rem; }
.hero-date > .caps { font-size: .66rem; color: var(--ink); }
.hero-day { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; margin-top: .25rem; }
.hero-day span { font-size: .66rem !important; color: var(--ink); padding: .35rem 0; border-top: 1px solid rgba(92, 107, 69, .35); border-bottom: 1px solid rgba(92, 107, 69, .35); }
.hero-day b { font-size: 2.7rem; line-height: 1; font-weight: 400; color: var(--olive); }
.hero-garden { margin: .8rem 0 0; font-family: var(--script); font-size: 1.55rem; line-height: 1.1; color: var(--burgundy); }
.hero-venue { margin: .1rem 0 0; font-size: 1.15rem; line-height: 1.3; }
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(247, 242, 232, .85); color: var(--olive); box-shadow: 0 4px 14px rgba(40, 45, 25, .2);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue svg { width: 22px; height: 22px; }
@keyframes bob { 50% { translate: -50% 5px; } }

/* ---------- countdown ---------- */
.cd-frame {
  position: relative; width: 84%; margin: 46px auto 0; padding: 18px;
  background: url("assets/linen-sage.jpg") center / 160px;
  box-shadow: 0 10px 24px rgba(50, 60, 35, .18);
}
.cd-inner { background: var(--ivory) url("assets/paper-ivory.jpg") center / 600px; padding: 34px 10px 30px; display: grid; gap: 18px; }
.cd-unit b { display: block; font-size: 2.6rem; font-weight: 400; font-style: italic; line-height: 1; color: var(--olive); font-variant-numeric: tabular-nums; }
.cd-unit span { font-size: 1rem; }
.cd-f { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(40, 50, 30, .25)); }
.cd-f1 { width: 42%; left: -16%; top: -10%; rotate: -24deg; }
.cd-f2 { width: 40%; right: -16%; top: -8%; rotate: 30deg; }
.cd-f3 { width: 34%; left: -14%; top: 40%; rotate: 70deg; }
.cd-f4 { width: 30%; right: -12%; top: 44%; rotate: -16deg; }
.cd-f5 { width: 38%; left: -10%; bottom: -10%; rotate: 8deg; }
.cd-f6 { width: 40%; right: -14%; bottom: -12%; rotate: -150deg; }

/* ---------- note ---------- */
.note { padding-bottom: 70px; }
.note-body { margin-top: 1.6rem; }
.note-body p { max-width: 20em; margin: 0 auto 1.2rem; font-size: 1.12rem; }
.signature { margin: .8rem 0 0; font-family: var(--script); font-size: 2rem; color: var(--burgundy); }

/* ---------- painted band between sections ---------- */
.band { position: relative; height: 230px; overflow: hidden; margin-top: -10px; }
.band-img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; object-position: 50% 60%; animation: tide 16s ease-in-out infinite alternate; }
@keyframes tide { from { scale: 1.06; translate: -2% 0; } to { scale: 1.12; translate: 2% -1%; } }
.edge { position: absolute; left: 0; width: 100%; height: 44px; object-fit: cover; object-position: 50% 0; pointer-events: none; z-index: 2; }
.band .edge-top { top: -1px; }
.band .edge-bottom { bottom: -1px; transform: scaleY(-1); }
.edge-flip-top { top: -1px; }

/* ---------- celebration ---------- */
.celebration { background: var(--olive-deep) url("assets/linen-sage.jpg") center / 160px; color: var(--ivory); padding-top: 70px; padding-bottom: 96px; }
.celebration::before { content: ""; position: absolute; inset: 0; background: rgba(48, 58, 37, .78); pointer-events: none; }
.celebration > * { position: relative; }
.celebration .title { color: var(--ivory); }
.celebration .sub { color: var(--sage-soft); }
.ornate { position: relative; width: 92%; margin: 40px auto 0; padding: 62px 26px 58px; }
.ornate-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #ece4cf; }
.ornate-body { position: relative; }
.o-garden { margin: 0 0 .1rem; font-family: var(--script); font-size: 2.3rem; line-height: 1.1; color: #e6c9cf; }
.o-venue { margin: 0; font-size: 1.9rem; }
.o-place { margin-top: .4rem !important; letter-spacing: .18em; color: var(--sage-soft); }
.o-text { max-width: 16em; margin: 1.1rem auto 0; font-size: 1.1rem; line-height: 1.55; }
.o-date { margin: 1.2rem 0 0; font-style: italic; color: var(--sage-soft); }
.o-time { margin: .1rem 0 0; font-size: 1.35rem; }

/* ---------- evening program ---------- */
.evening { padding-top: 110px; }
.evening .edge-flip-top { position: absolute; }
.days { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 34px 0 6px; font-size: 1.35rem; color: var(--sage); }
.days .today {
  display: grid; place-items: center; width: 52px; height: 48px; color: var(--ivory); font-size: 1.4rem;
  background: var(--olive); clip-path: path("M26 46 C10 34 0 25 0 14 C0 6 6 0 13 0 C19 0 23 3 26 8 C29 3 33 0 39 0 C46 0 52 6 52 14 C52 25 42 34 26 46Z");
}
.timeline { position: relative; list-style: none; margin: 30px 0 0; padding: 10px 0; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--sage); transform-origin: top; transform: scaleY(var(--grow, 1)); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 96px; }
.tl-item::before { content: "♥"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: var(--olive); font-size: .8rem; background: var(--ivory); padding: 2px 0; }
.tl-text { padding: 0 18px; text-align: right; }
.tl-text time { display: block; font-size: .78rem; letter-spacing: .2em; color: var(--sage); }
.tl-text b { display: block; font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.tl-icon { justify-self: center; width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(40, 50, 30, .2)); }
.tl-item:nth-child(even) .tl-text { order: 2; text-align: left; }
.tl-item:nth-child(even) .tl-icon { order: 1; }

/* ---------- dress code ---------- */
.dress-art { position: relative; width: 100%; height: 360px; margin: 26px auto 0; }
.arch { position: absolute; pointer-events: none; }
.arch-l { height: 92%; left: 6%; top: 0; rotate: 6deg; transform-origin: 50% 0; }
.arch-r { height: 92%; right: 6%; top: 0; rotate: -6deg; transform-origin: 50% 0; scale: -1 1; }
.arch-c { width: 62%; left: 19%; top: -8%; rotate: 90deg; }
.arch-foot { position: absolute; bottom: -4%; width: 34%; pointer-events: none; }
.arch-foot-l { left: 2%; rotate: 12deg; }
.arch-foot-r { right: 2%; rotate: -10deg; }
.dress .couple-slot { position: absolute; left: 50%; bottom: 2%; height: 78%; aspect-ratio: 230 / 250; translate: -70% 0; }
.couple-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dance { transform-origin: 60px 190px; animation: dance 7s ease-in-out infinite; }
@keyframes dance { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg) translateX(1px); } }
.veil { transform-origin: 46px 40px; animation: veil 4.5s ease-in-out infinite alternate; }
@keyframes veil { from { transform: rotate(-2deg) skewY(-1deg); } to { transform: rotate(4deg) skewY(2deg); } }
.hem { transform-origin: 50px 100px; animation: hem 3.2s ease-in-out infinite alternate; }
@keyframes hem { from { transform: skewX(-2deg); } to { transform: skewX(2.5deg); } }

/* ---------- gift ---------- */
.wreath { position: relative; width: 320px; height: 320px; margin: 28px auto 0; display: grid; place-items: center; }
.wreath-spot { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.wreath-spot img { flex: none; max-width: none; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(40, 50, 30, .22)); }
.wreath-text { position: relative; max-width: 10.5em; margin: 0; font-size: 1.05rem; line-height: 1.55; }

/* ---------- status note (copy button) ---------- */
.form-note { min-height: 1.4em; margin: .9rem 0 0; text-align: center; font-style: italic; color: var(--burgundy); }

/* ---------- closing ---------- */
.closing { position: relative; padding: 70px 24px calc(60px + env(safe-area-inset-bottom)); text-align: center; }
.closing-arch { position: relative; width: 78%; aspect-ratio: .78; margin: 0 auto; }
.closing-img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 6px 6px; box-shadow: 0 14px 30px rgba(40, 50, 30, .25); }
.ca-f { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(40, 50, 30, .25)); }
.ca-f1 { width: 56%; left: -24%; bottom: -8%; transform-origin: 0 100%; }
.ca-f2 { width: 52%; right: -22%; bottom: -6%; transform-origin: 100% 100%; }
.ca-f3 { width: 46%; left: -20%; top: 4%; rotate: -30deg; transform-origin: 0 0; }
.ca-f4 { width: 40%; right: -16%; top: 16%; rotate: 20deg; transform-origin: 100% 0; }
.closing-date { margin: .8rem 0 0; letter-spacing: .14em; }
/* the last word: a warm welcome under the download button */
.welcome { margin: 2.6rem 0 0; }
.welcome-rule { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--sage); }
.welcome-rule i { width: 44px; height: 1px; background: currentColor; opacity: .7; }
.welcome-rule b { font-weight: 400; font-size: .7rem; }
.welcome-script { margin: .9rem 0 0; font-family: var(--script); font-size: 2rem; line-height: 1.2; color: var(--burgundy); }
.welcome-sub { margin: .5rem 0 0; font-size: .66rem !important; color: var(--sage); }

/* ---------- bank sheet ---------- */
.sheet {
  width: min(100vw, 480px); max-width: 100vw; margin: auto auto 0; padding: 30px 24px calc(28px + env(safe-area-inset-bottom));
  border: 0; border-radius: 22px 22px 0 0; background: var(--ivory) url("assets/paper-ivory.jpg") center / 600px; color: var(--ink);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
.sheet[open] { animation: sheetUp .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet::backdrop { background: rgba(40, 45, 30, .45); backdrop-filter: blur(3px); }
.sheet h3 { margin: 0; font-weight: 400; font-size: 2rem; color: var(--olive); text-align: center; }
.sheet-sub { margin: .2rem 0 1.4rem; text-align: center; font-style: italic; color: var(--sage); }
.sheet-close { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border: 0; background: none; font-size: 1.8rem; color: var(--sage); }
.bank { margin: 0; }
.bank div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: .9rem 0; border-top: 1px solid rgba(92, 107, 69, .2); }
.bank dt { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage); }
.bank dd { margin: .15rem 0 0; font-size: 1.05rem; word-break: break-all; }
.bank button {
  position: relative; overflow: hidden; flex: none; min-width: 7.4em; padding: .5rem .8rem;
  border: 1px solid var(--olive); background: none; color: var(--olive);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
}
/* copied: olive ink sweeps in from the left, "Copy" lifts away and "Copied" rises in, then it all eases back */
.bank button::before {
  content: ""; position: absolute; inset: 0; background: var(--olive);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.bank button span { position: relative; display: block; transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, color .35s ease; }
.bank button .cp-b { position: absolute; left: 0; right: 0; top: 50%; color: var(--ivory); opacity: 0; transform: translateY(60%); }
.bank button.copied::before { transform: scaleX(1); }
.bank button.copied .cp-a { opacity: 0; transform: translateY(-110%); }
.bank button.copied .cp-b { opacity: 1; transform: translateY(-50%); transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .bank button::before, .bank button span { transition: none; } }

/* no animation library / reduced motion: show everything */
.static .rv, .static .bloom, .static .ch, .static .tl-item { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sway, .band-img, .attire-bow, .hero-bg img, .scroll-cue, .intro-hint, .dance, .veil, .hem, .seal { animation: none !important; }
}

/* ---------- dress code: attire cards ---------- */
.attire { display: grid; gap: 16px; margin-top: 34px; }
.attire-card { padding: 26px 18px 24px; background: rgba(255, 253, 248, .55); border: 1px solid rgba(92, 107, 69, .22); box-shadow: 0 10px 26px rgba(60, 60, 40, .08); }
.attire-art { display: block; width: min(64%, 210px); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 8px 12px rgba(30, 30, 30, .28)); }
.attire-bow { transform-origin: 100px 52px; animation: bowtie 3.6s ease-in-out infinite; }
@keyframes bowtie { 50% { transform: rotate(-4deg) scale(1.04); } }
.attire-k { margin: 6px 0 0; color: var(--sage); }
.attire-t { margin: .3rem 0 0; font-size: 1.45rem; line-height: 1.25; color: var(--olive); }
.closing-calli { width: 44.5%; margin: 26px auto 0; }
.closing .closing-names { margin: .2rem 0 0; font-size: .95rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--olive); }
.closing .closing-names em { font-family: var(--script); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 1.5em; color: var(--burgundy); }