/* Jardin — a watercolour garden that blooms around the names. Ivory paper, sage, blush, a touch of gold.
   Phone first: on a computer the invitation is a phone-wide column on soft linen. The watercolours are painted on
   white and multiplied onto the paper, so only the paint shows. */
@font-face {
  font-family: 'Great Vibes';
  src: url('../assets/fonts/great-vibes-latin-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-latin-normal-300-700.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-latin-italic-300-700.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../assets/fonts/amiri-arabic-normal-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../assets/fonts/amiri-arabic-normal-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Aref Ruqaa';
  src: url('../assets/fonts/aref-ruqaa-arabic-normal-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #fbf8f2;
  --paper-2: #f5efe4;
  --sage: #8ba38c;
  --sage-deep: #5d7862;
  --blush: #e7b7ae;
  --blush-deep: #c9877d;
  --gold: #b79a64;
  --ink: #4b4640;
  --col: min(100vw, 480px);
  --bg: var(--paper);
  --btn-bg: var(--sage-deep);
  --btn-ink: #fffaf2;
  --font-text: 'Cormorant', 'Amiri', Georgia, serif;
  --font-text-ar: 'Amiri', 'Cormorant', serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
body {
  background: var(--grain), radial-gradient(120% 90% at 50% 0%, #fbf7f0, #efe7da 80%);
  background-attachment: fixed;
}

/* ——— 1. The envelope ——— */
.env {
  position: fixed;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--col);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--grain), radial-gradient(90% 70% at 50% 40%, #fdfaf4, #f1e9dc);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1.1s ease;
}
.env-sprig {
  position: absolute;
  width: 62%;
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
}
.env-sprig-a {
  top: -4%;
  left: -14%;
  transform: rotate(-24deg);
}
.env-sprig-b {
  bottom: -2%;
  right: -16%;
  width: 70%;
  transform: rotate(14deg);
}
.env-box {
  position: relative;
  width: min(84vw, 360px);
  aspect-ratio: 1.42;
  perspective: 1200px;
  filter: drop-shadow(0 26px 30px rgba(120, 95, 70, 0.22));
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.3, 1);
}
.env-back,
.env-pocket,
.env-flap,
.env-flap-in {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.env-back {
  background: linear-gradient(160deg, #efe5d6, #e6d9c6);
}
.env-pocket {
  z-index: 3;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(0, 0, 0, 0.035) 50%, transparent 50.6%),
    linear-gradient(to top left, transparent 49.6%, rgba(0, 0, 0, 0.035) 50%, transparent 50.6%),
    linear-gradient(170deg, #f8f2e8, #efe5d5);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.35s;
}
.env-flap::before,
.env-flap-in {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  backface-visibility: hidden;
}
.env-flap::before {
  background: linear-gradient(180deg, #f6efe3, #ebdfcc);
}
.env-flap-in {
  background: linear-gradient(0deg, #f3e7e0, #ead8cf);
  transform: rotateX(180deg);
}
.env-card {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  top: 8%;
  height: 84%;
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(183, 154, 100, 0.35);
  transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1) 1s;
}
.env-card-names {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-size: 34px;
  color: var(--sage-deep);
}
html[dir='rtl'] .env-card-names {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 28px;
}
.env-card-date {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.env-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 60%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  display: grid;
  place-items: center;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 35% 30%, #a7bda7, #6f8c73 55%, #55715a);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset 0 -4px 6px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(60, 80, 60, 0.3);
  transition:
    transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1),
    opacity 0.4s ease 0.15s;
}
.env-seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 248, 236, 0.5);
}
.env-seal-letters {
  font-family: 'Great Vibes', cursive;
  font-size: 23px;
  color: #f4f8ee;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.env-hint {
  position: absolute;
  top: calc(50% + min(42vw, 180px) / 1.42 + 34px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--sage-deep);
  animation: breathe 2.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
html[dir='rtl'] .env-hint {
  font-style: normal;
}
@keyframes breathe {
  50% {
    opacity: 0.45;
  }
}
.env.is-open .env-hint {
  opacity: 0;
  animation: none;
}
.env.is-open .env-seal {
  transform: scale(1.25) translateY(-8px);
  opacity: 0;
}
.env.is-open .env-flap {
  transform: rotateX(180deg);
}
.env.is-open .env-flap {
  z-index: 1;
  transition:
    transform 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.35s,
    z-index 0s linear 0.8s;
}
.env.is-open .env-card {
  transform: translateY(-58%);
}
.env.is-open .env-box {
  transform: translateY(16%);
}
.env.is-in {
  opacity: 0;
}
.env.is-gone {
  display: none;
}

/* ——— 2. The garden arch and the names ——— */
.page {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  background: var(--grain), var(--paper);
  box-shadow: 0 0 60px rgba(150, 120, 90, 0.16);
  overflow: hidden;
}
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: grid;
  place-items: center;
}
.hero-wreath {
  position: absolute;
  inset: 3svh 0 0;
  display: grid;
  place-items: start center;
}
.hero-wreath img {
  width: min(100%, 72svh);
  mix-blend-mode: multiply;
  /* It blooms from the bottom of both sides up to the top of the arch. */
  -webkit-mask-image: linear-gradient(to top, #000 var(--grow, 0%), transparent calc(var(--grow, 0%) + 16%));
  mask-image: linear-gradient(to top, #000 var(--grow, 0%), transparent calc(var(--grow, 0%) + 16%));
  transform: scale(var(--s, 0.96));
}
.hero-text {
  position: relative;
  z-index: 2;
  margin-top: -2svh;
  text-align: center;
  color: var(--ink);
}
.hero-kicker {
  margin: 0 0 6px;
  font-size: 19px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.03em;
}
html[dir='rtl'] .hero-kicker {
  font-style: normal;
  font-size: 19px;
}
.hero-names {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  color: var(--sage-deep);
}
html[dir='ltr'] .hero-names {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(58px, 17vw, 82px);
  line-height: 1;
}
html[dir='rtl'] .hero-names {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: clamp(50px, 14vw, 68px);
  line-height: 1.35;
}
.hero-and {
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-size: 0.42em;
  color: var(--blush-deep);
  margin: 2px 0;
}
html[dir='rtl'] .hero-and {
  font-family: 'Aref Ruqaa', serif;
  font-style: normal;
}
.hero-date {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.hero-city {
  margin: 4px 0 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
html[dir='rtl'] .hero-city {
  letter-spacing: 0;
  font-size: 18px;
}
.hero-text > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.4s ease,
    transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-opened] .hero-text > * {
  opacity: 1;
  transform: none;
}
html[data-opened] .hero-kicker {
  transition-delay: 2.2s;
}
html[data-opened] .hero-names {
  transition-delay: 2.5s;
}
html[data-opened] .hero-date,
html[data-opened] .hero-city {
  transition-delay: 2.9s;
}
.petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.petal {
  position: absolute;
  top: -8%;
  width: var(--s);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: drift var(--t) linear var(--delay) infinite;
}
@keyframes drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translate3d(var(--sway), 55svh, 0) rotate(160deg);
  }
  88% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sway) * -0.5), 112svh, 0) rotate(320deg);
  }
}

/* ——— 3. The paper ——— */
.card {
  position: relative;
  margin: 40px 30px 0;
  padding: 54px 28px 50px;
  text-align: center;
  background: #fffdf9;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(183, 154, 100, 0.28),
    0 30px 50px -36px rgba(120, 95, 70, 0.4);
}
.card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(183, 154, 100, 0.3);
  pointer-events: none;
}
.corner {
  position: absolute;
  z-index: 0;
  width: 38%;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.corner-tl {
  top: -58px;
  left: -58px;
  transform: rotate(-38deg);
}
.corner-br {
  bottom: -56px;
  right: -52px;
  width: 36%;
  transform: rotate(8deg);
}
.card > p,
.card > .leaf-divider {
  position: relative;
  z-index: 1;
}
.card-intro {
  position: relative;
  margin: 0;
  font-size: 21px;
  line-height: 1.65;
}
html[dir='rtl'] .card-intro {
  line-height: 1.95;
  font-size: 20px;
}
.leaf-divider {
  display: block;
  width: 120px;
  height: 18px;
  margin: 22px auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18'%3E%3Cg fill='none' stroke='%238ba38c' stroke-width='1'%3E%3Cpath d='M2 9h46M72 9h46'/%3E%3C/g%3E%3Cg fill='%238ba38c'%3E%3Cpath d='M60 2c4 3 4 11 0 14-4-3-4-11 0-14z'/%3E%3Cpath d='M50 9c4-4 8-4 10 0-2 4-6 4-10 0z' opacity='.7'/%3E%3Cpath d='M70 9c-4-4-8-4-10 0 2 4 6 4 10 0z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.card-date {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--sage-deep);
}
.card-hour {
  margin: 6px 0 0;
  font-size: 19px;
  font-style: italic;
  color: var(--gold);
}
html[dir='rtl'] .card-hour {
  font-style: normal;
}
.block {
  margin: 0 24px;
  padding: 58px 0 0;
  text-align: center;
}
.block h2 {
  margin: 0 0 22px;
  font-weight: 400;
  color: var(--sage-deep);
}
html[dir='ltr'] .block h2 {
  font-family: 'Great Vibes', cursive;
  font-size: 42px;
  line-height: 1.1;
}
html[dir='rtl'] .block h2 {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
}
.cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cd-cell {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fffdf9;
  box-shadow:
    inset 0 0 0 1px rgba(139, 163, 140, 0.55),
    0 0 0 4px #fffdf9,
    0 0 0 5px rgba(231, 183, 174, 0.55);
}
.cd-num {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--sage-deep);
  font-variant-numeric: tabular-nums;
}
.cd-unit {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
html[dir='ltr'] .cd-unit {
  text-transform: uppercase;
  font-size: 11px;
}
.prog-wrap {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
}
.prog-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(139, 163, 140, 0.7) 8%, rgba(139, 163, 140, 0.7) 92%, transparent);
}
.prog-flower {
  position: absolute;
  left: 50%;
  top: var(--p, 0%);
  width: 34px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  mix-blend-mode: multiply;
}
.prog {
  margin: 0;
  padding: 0;
  list-style: none;
}
.prog-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 16px 0;
}
.prog-time {
  text-align: end;
  font-size: 22px;
  font-weight: 600;
  color: var(--blush-deep);
  font-variant-numeric: tabular-nums;
}
.prog-label {
  text-align: start;
  font-size: 19px;
  line-height: 1.35;
}
.prog-item[data-reveal] {
  transition-delay: calc(var(--i) * 0.12s);
}
.venue-name {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
}
.venue-city {
  margin: 2px 0 20px;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
html[dir='rtl'] .venue-city {
  letter-spacing: 0;
  font-size: 19px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--sage-deep);
  color: #fffaf2;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 24px -16px rgba(60, 80, 62, 0.9);
}
.btn svg {
  width: 19px;
  height: 19px;
}
.swatches {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.swatches i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 10px -6px rgba(0, 0, 0, 0.3);
}
.dress-text {
  margin: 0 auto;
  max-width: 320px;
  font-size: 19px;
  line-height: 1.6;
}
.closing {
  position: relative;
  margin: 50px 24px 0;
  padding: 0 0 70px;
  text-align: center;
}
.closing-sprig {
  width: 150px;
  margin: 0 auto 10px;
  mix-blend-mode: multiply;
  transform: rotate(-8deg);
}
.closing-text {
  text-wrap: balance;
  margin: 0 auto;
  max-width: 330px;
  font-size: 22px;
  font-style: italic;
  line-height: 1.6;
}
html[dir='rtl'] .closing-text {
  font-style: normal;
  font-size: 21px;
  line-height: 1.9;
}
.closing-names {
  margin: 14px 0 0;
  color: var(--sage-deep);
}
html[dir='ltr'] .closing-names {
  font-family: 'Great Vibes', cursive;
  font-size: 44px;
}
html[dir='rtl'] .closing-names {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 30px;
}

@media (min-width: 520px) {
  .inv-controls {
    inset-inline-end: calc(50% - 240px + 16px);
  }
}