/* =========================================================================
   Mahmoud & Rabia — Wedding Invitation
   Soft, white, floral. Warm-white paper, watercolor blooms, pale sage,
   a fine gold hairline, a light high-contrast serif. Airy and elegant.
   ========================================================================= */
:root {
  --paper:     #fcf9f3;
  --paper-hi:  #fffefa;
  --paper-lo:  #f3ece0;
  --ink:       #4f463b;
  --ink-soft:  #8d8275;
  --sage:      #9aa68c;
  --sage-deep: #76806a;
  --gold:      #b89b63;
  --gold-deep: #927743;
  --blush:     #e7d2cb;
  --cream:     #fbf6ec;
  --line:      rgba(79, 70, 59, 0.16);
  --line-soft: rgba(79, 70, 59, 0.09);

  --display: "Fraunces", Georgia, serif;
  --serif:   "Cormorant Garamond", Georgia, serif;
  --ease:    cubic-bezier(0.6, 0.01, 0.05, 0.99);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { background-color: var(--paper); }   /* never let the canvas show through */

body {
  font-family: var(--serif);
  color: var(--ink);
  font-optical-sizing: auto;
  background-color: var(--paper);   /* flat — a gradient can always band; the florals carry the warmth */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

/* lock the page until the letter is opened — nothing below to scroll to yet */
html.locked, body.locked { overflow: hidden; height: 100%; touch-action: pan-x; overscroll-behavior: none; }

/* whisper of paper grain */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- falling petals ---------- */
.petals { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -6vh; background: var(--blush);
  border-radius: 100% 0 100% 0; opacity: 0; will-change: transform, opacity;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--o, .3); } 92% { opacity: var(--o, .3); }
  100% { transform: translate3d(var(--drift, 30px), 106vh, 0) rotate(220deg); opacity: 0; }
}

/* ---------- floral artwork ---------- */
.floral { position: absolute; pointer-events: none; user-select: none; }

/* ============================================================
   STAGE 1 — the cover
   ============================================================ */
.cover {
  position: relative; z-index: 2;
  min-height: 100svh; display: flex; flex-direction: column;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transform-origin: center 42%;
}
#cover.fade-out { opacity: 0; transform: scale(1.06) translateY(-14px); pointer-events: none; }
.cover-inner {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(9px, 2.4vw, 16px);
  padding: clamp(18px, 4vw, 40px) 26px;
  position: relative;
}
.floral-crown {
  position: static; width: min(88vw, 470px); height: auto;
  margin-bottom: clamp(2px, 1.2vw, 8px); filter: saturate(0.97);
}

.cover-eyebrow {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(11px, 3vw, 13px); letter-spacing: .32em; text-transform: uppercase;
  color: var(--sage-deep); padding-left: .32em;
}
.cover-names, .names {
  font-family: var(--display); font-weight: 300; color: var(--ink);
  line-height: 0.98; letter-spacing: 0.005em;
  display: flex; flex-direction: column; align-items: center;
}
.cover-names { font-size: clamp(48px, 14vw, 86px); }
.cover-names .amp, .names .amp {
  font-weight: 300; font-style: italic; font-size: 0.52em;
  color: var(--gold); margin: 0.02em 0; line-height: 1;
}
.cover-tagline {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(18px, 5vw, 24px); color: var(--ink-soft);
}

/* ---------- the envelope (ivory) ---------- */
.envelope {
  --w: min(76vw, 318px);
  position: relative; width: var(--w); height: calc(var(--w) * 0.66);
  border: none; background: none; cursor: pointer; padding: 0;
  margin-top: clamp(14px, 4vw, 26px);
  -webkit-tap-highlight-color: transparent; perspective: 1200px;
  transition: transform 0.6s var(--ease-soft);
  filter: drop-shadow(0 14px 22px rgba(120, 104, 80, 0.18));
}
.envelope:active { transform: translateY(-1px); }

.env-back, .env-side, .env-front, .env-flap, .letter { position: absolute; inset: 0; }
.env-back { border-radius: 4px; }
/* back panel — the inside of the envelope, where the letter rests */
.env-back { background: linear-gradient(170deg, #f1e8d6 0%, #e7dac3 100%); border: 1px solid var(--line-soft); z-index: 1; }

/* the letter, tucked inside; its TOP is revealed through the open flap (it never slides out) */
.letter {
  left: 5%; right: 5%; top: 4%; height: 92%; border-radius: 3px;
  background: linear-gradient(180deg, #fffdf8, #fbf5ea);
  border: 1px solid var(--line-soft);
  z-index: 2;
  display: grid; place-items: start center; padding-top: 4.5%; overflow: hidden;
}
.letter-inner { text-align: center; opacity: 0; transition: opacity .55s ease .4s; }
.letter-eyebrow {
  display: block; font-family: var(--display); font-size: 8px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 400;
}
.letter-names {
  display: block; margin-top: 5px; font-family: var(--display);
  font-size: clamp(12px, 3.6vw, 15px); color: var(--ink); font-weight: 300; white-space: nowrap;
}

/* the four flaps of the envelope front — they tile the rectangle when closed */
.env-side, .env-front, .env-flap { backface-visibility: hidden; }
.env-left  { z-index: 3; clip-path: polygon(0 0, 50% 50%, 0 100%);       background: linear-gradient(90deg,  #f6ecdb, #efe3cf); }
.env-right { z-index: 3; clip-path: polygon(100% 0, 50% 50%, 100% 100%); background: linear-gradient(270deg, #f3e8d4, #ebdfca); }
.env-front { z-index: 4; clip-path: polygon(0 100%, 50% 50%, 100% 100%); background: linear-gradient(0deg, #f5ebd9, #ecdfca); border-radius: 0 0 4px 4px; }

/* the top flap — closed it seals the envelope; on open it lifts back to reveal the letter */
.env-flap {
  z-index: 5; transform-origin: top center; transform: rotateX(0deg);
  transition: transform 0.95s cubic-bezier(0.62, 0, 0.3, 1), filter 0.95s ease;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: linear-gradient(180deg, #faf4e7 0%, #f1e7d4 100%);
  border-radius: 4px 4px 0 0;
}

/* real sage wax seal (image) */
.seal {
  position: absolute; z-index: 6; top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  width: 26%; height: auto;
  filter: drop-shadow(0 3px 5px rgba(86, 92, 64, 0.30));
}

.open-hint {
  font-family: var(--display); font-size: clamp(13px, 3.6vw, 15px);
  letter-spacing: .38em; text-transform: uppercase; color: var(--sage-deep);
  font-weight: 400; padding-left: .38em; margin-top: clamp(8px, 2.4vw, 14px);
  opacity: 0; animation: hintIn 1.2s var(--ease-soft) 0.6s forwards;
}
@keyframes hintIn { to { opacity: 0.9; } }
.cover-date {
  font-family: var(--serif); font-size: clamp(17px, 4.6vw, 22px); letter-spacing: .14em;
  color: var(--ink-soft); font-weight: 500;
}

/* opening sequence — the flap lifts back, the letter inside is revealed, then the scene zooms away */
.envelope.is-open .env-flap { transform: rotateX(158deg); z-index: 3; filter: brightness(0.95); }
.envelope.is-open .seal     { opacity: 0; transform: translate(-50%, -52%) scale(0.92); transition: opacity .3s ease, transform .3s ease; }
.envelope.is-open .letter-inner { opacity: 1; }
.envelope.is-open ~ .open-hint  { opacity: 0; transition: opacity .4s ease; }

/* ============================================================
   STAGE 2 — the invitation
   ============================================================ */
.invite { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; }
.invite[hidden] { display: none; }   /* keep it truly hidden until the letter opens */
.floral-tl, .floral-br { z-index: -1; }   /* corner florals sit above the sheet but behind the words */
.floral-tl { top: -3%; left: -8%; width: min(44vw, 230px); height: auto; transform: rotate(-4deg); opacity: 0.96; }
.floral-br { bottom: -3%; right: -8%; width: min(44vw, 230px); height: auto; transform: rotate(5deg); opacity: 0.96; }

.invite-inner {
  flex: 1 1 auto; width: min(560px, 100%); margin: 0 auto; align-self: center; text-align: center;
  padding: clamp(70px, 15vh, 130px) 30px clamp(70px, 14vh, 120px);
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2;
}
.block { width: 100%; margin-bottom: clamp(34px, 7vw, 52px); }
.block:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--display); font-size: clamp(11px, 3vw, 13px); letter-spacing: .3em;
  text-transform: uppercase; color: var(--sage-deep); font-weight: 400; padding-left: .3em;
}
.names { font-size: clamp(46px, 15vw, 82px); margin: clamp(16px, 4vw, 24px) 0 clamp(16px, 3.6vw, 22px); }
.vow {
  font-family: var(--serif); font-size: clamp(17px, 4.6vw, 21px); font-style: italic; font-weight: 500;
  color: var(--ink-soft); line-height: 1.6;
}

.ornament { display: flex; justify-content: center; }
.sprig { width: clamp(58px, 15vw, 82px); height: auto; }
.sprig-foot { width: clamp(104px, 28vw, 150px); height: auto; opacity: 0.92; }
.bouquet { width: clamp(230px, 66vw, 360px); height: auto; }

.label {
  font-family: var(--display); font-size: clamp(11px, 3vw, 13px); letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-deep); font-weight: 500;
  margin-bottom: clamp(12px, 3vw, 16px); padding-left: .28em;
}
.line-1 { font-family: var(--display); font-weight: 300; font-size: clamp(23px, 6vw, 30px); color: var(--ink); line-height: 1.3; }
.line-2 { font-family: var(--serif); font-size: clamp(16px, 4.4vw, 19px); color: var(--ink-soft); font-style: italic; margin-top: 5px; }

/* the ceremony time — made prominent (it matters that they're on time) */
.time-big {
  font-family: var(--display); font-weight: 400; color: var(--ink);
  font-size: clamp(34px, 9vw, 48px); letter-spacing: .14em;
  margin-top: clamp(8px, 2vw, 12px);
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 20px);
}
.time-big::before, .time-big::after { content: ""; height: 1px; width: clamp(24px, 7vw, 44px); background: var(--gold); opacity: .55; }
.time-note { font-family: var(--serif); font-style: italic; font-size: clamp(14px, 3.8vw, 16px); color: var(--ink-soft); margin: clamp(8px, 2vw, 12px) auto 0; max-width: 32ch; line-height: 1.5; }

/* secondary action — clearly a button: outlined pill with an icon */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: clamp(16px, 3.6vw, 20px); padding: 11px 22px;
  font-family: var(--display); font-size: clamp(12px, 3.2vw, 13px); letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage-deep); text-decoration: none; font-weight: 500;
  background: rgba(154, 166, 140, 0.10);
  border: 1.5px solid rgba(118, 128, 106, 0.55);
  border-radius: 999px; -webkit-tap-highlight-color: transparent;
}
.btn-line:active { transform: scale(0.97); }
.btn-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.after-text { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 4.4vw, 19px); color: var(--ink-soft); line-height: 1.55; max-width: 32ch; margin: 0 auto; }

.cd-label {
  font-family: var(--display); font-size: clamp(11px, 3vw, 12px); letter-spacing: .34em;
  text-transform: uppercase; color: var(--sage-deep); font-weight: 500;
  margin-bottom: clamp(14px, 3vw, 18px); padding-left: .34em;
}
.cd-grid { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 2vw, 14px); }
.cd-unit { display: inline-flex; flex-direction: column; align-items: center; min-width: clamp(42px, 11vw, 58px); }
.cd-num {
  font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8.5vw, 44px);
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-lab {
  font-family: var(--display); font-size: clamp(9px, 2.4vw, 10px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 9px;
}
.cd-colon {
  font-family: var(--display); font-size: clamp(24px, 6.5vw, 34px); color: var(--gold);
  line-height: 1; opacity: .55; align-self: flex-start;
}
@keyframes cdTick { from { opacity: 0; transform: translateY(-0.3em); } to { opacity: 1; transform: none; } }
.cd-num.tick { animation: cdTick .45s var(--ease-soft); }
@media (prefers-reduced-motion: reduce) { .cd-num.tick { animation: none; } }

.rsvp-block { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 196px; padding: 17px 46px;
  font-family: var(--display); font-size: 15px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 500; color: var(--cream); text-decoration: none; padding-left: calc(46px + .24em);
  background: var(--sage-deep); border-radius: 2px;
  box-shadow: 0 10px 22px -14px rgba(118, 128, 106, 0.9);
  transition: transform .3s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.985); }
.rsvp-by { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 4vw, 17px); color: var(--ink-soft); }

.meta .meta-label {
  display: block; font-family: var(--display); font-size: clamp(11px, 3vw, 13px); letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: clamp(10px, 2.4vw, 14px); padding-left: .28em;
}
.meta-main { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 5.6vw, 27px); color: var(--ink); }
.meta-note { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 4vw, 17px); color: var(--ink-soft); margin: 8px auto 0; max-width: 32ch; line-height: 1.5; }

.footer { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3.4vw, 20px); }
.footer-note { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 4.6vw, 21px); color: var(--ink); line-height: 1.55; max-width: 30ch; }
.footer-initials { font-family: var(--display); font-size: clamp(26px, 7vw, 34px); letter-spacing: .08em; color: var(--ink); font-weight: 300; }
.footer-initials .amp { color: var(--gold); }
.lang-switch {
  margin-top: clamp(18px, 4vw, 28px);
  font-family: var(--display); font-size: clamp(10px, 2.8vw, 11px); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none; opacity: .7;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 3px;
}

/* reveal on open */
[data-reveal] { opacity: 0; transform: translateY(16px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }

/* ---------- desktop: present it as a centered stationery sheet on a warm canvas ---------- */
@media (min-width: 920px) {
  html, body { background-color: #e3d8bf; }   /* warm linen canvas so the sheet reads as a card */

  .cover { justify-content: center; align-items: center; padding: 50px; }
  .cover-inner {
    flex: 0 0 auto; width: min(560px, 100%);
    background: var(--paper);
    border: 1px solid rgba(184, 155, 99, 0.40);
    border-radius: 2px;
    padding: clamp(40px, 3.4vw, 54px) clamp(48px, 4.4vw, 66px);
    gap: clamp(12px, 1.8vw, 18px);
  }
  .floral-crown { width: min(76%, 350px); }

  .invite { padding: 84px 50px; align-items: center; }
  .invite-inner {
    flex: 0 1 auto; width: min(700px, 100%);
    background: var(--paper);
    border: 1px solid rgba(184, 155, 99, 0.40);
    border-radius: 2px;
    padding: clamp(78px, 6.4vw, 112px) clamp(70px, 7vw, 104px);
  }
  .floral-tl { top: -42px; left: -58px; width: 200px; }
  .floral-br { bottom: -42px; right: -58px; width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .petals { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
}