/* Original 720 × 1280 composition; lettering is now editable HTML text. */
/* fonts.css embeds the local fonts, including for direct file:// opening. */
:root {
  color-scheme: light;
  background: #281014;
  font-family: Georgia, 'Times New Roman', serif;
  color: #643c40;
}
* { box-sizing: border-box; }
html, body, #root { width: 100%; min-height: 100%; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body, #root { display: grid; place-items: center; min-height: 100svh; }
button { font: inherit; }
p, h1, h2 { margin: 0; font-weight: 400; }
.stage {
  position: relative;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25svh);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #e6e4de;
  isolation: isolate;
  contain: layout paint;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.composition { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; direction: ltr; }
.paper { position: absolute; inset: 0; background: url('assets/artwork/paper.webp') center / 720px 1280px no-repeat; }
/* The supplied paper contains a butterfly and one faint letter. These exact
   patches from the original project conceal them beneath the moving DOM layers. */
.paper-patch {
  position: absolute; left: 140px; top: 80px; width: 440px; height: 360px;
  background: url('assets/artwork/paper.webp') -140px -700px / 720px 1280px no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent), linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent), linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-composite: intersect;
}
.paper-detail-patch {
  position: absolute; left: 410px; top: 510px; width: 100px; height: 70px;
  background: url('assets/artwork/blank-detail.webp') center / 100px 70px no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.background-photo {
  position: absolute; inset: 0; z-index: 1; width: 720px; height: 1280px;
  object-fit: cover; pointer-events: none;
}
.opening-shade {
  position: absolute; inset: 0; z-index: 4; background: #291c1626;
  box-shadow: inset 0 160px 110px #302b20b3; opacity: 1; pointer-events: none;
}
.scene { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; text-align: center; }
.scene.is-active, .scene.is-entering, .scene.is-exiting { visibility: visible; }
.lettering { position: absolute; opacity: 0; max-width: none; }
.scene.is-active .lettering, .scene.is-entering .lettering {
  animation: text-in calc(var(--page-duration) - var(--page-delay)) ease var(--page-delay) both;
}
.scene.is-exiting .lettering { animation: text-out var(--page-delay) ease both; }
@keyframes text-in {
  from { opacity: 0; filter: blur(3.8px); transform: translateY(5px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes text-out {
  from { opacity: 1; filter: blur(0); transform: translateY(0); }
  to { opacity: 0; filter: blur(5px); transform: translateY(-4px); }
}
.welcome-lines { 
  left: 60px; 
  top: 540px; 
  width: 600px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px; 
}
.welcome-line { 
  position: relative; 
  width: 100%; 
  text-align: center; 
  font-size: 32px; 
  line-height: 1.3; 
  font-weight: 700; /* بولد شدن متن */
  word-wrap: break-word; /* رفتن به خط بعد در صورت نیاز */
}
.welcome-line-0 { font-size: 32px; }
.welcome-line-1 { font-size: 40px; letter-spacing: 0.5px; }
.welcome-line-2 { font-size: 30px; }
.marriage { left: 90px; top: 510px; width: 540px; font-size: 31px; line-height: 46px; letter-spacing: 4px; }
.marriage span { display: block; }
.names { left: 45px; top: 640px; width: 610px; height: 345px; font-family: 'Invitation Script', cursive; color: #82736a; }
.names span { position: absolute; display: block; white-space: nowrap; line-height: 1.2; }
.first-name { left: 22px; top: -4px; width: 530px; text-align: left; font-size: 152px; }
.second-name { right: 2px; top: 177px; width: 530px; text-align: right; font-size: 152px; }
.names .name-joiner { right: 62px; top: 76px; font-size: 168px; color: #ab8b86; }
.save-the-date { left: 100px; top: 425px; width: 520px; height: 375px; color: #713b49; font-family: 'Invitation Script', cursive; }
.save-the-date span { display: block; line-height: .96; font-size: 134px; }
.save-the-date .save-line-1 { font-size: 115px; }
.event-date { left: 45px; top: 865px; width: 630px; line-height: 75px; font-size: 34px; text-transform: uppercase; }
.venue { left: 60px; top: 1020px; width: 600px; font-size: 23px; line-height: 34px; }
.event-time { font-size: 21px; }
.kindly { 
  left: 65px; 
  top: 430px; /* بالا بردن کادر برای جلوگیری از برخورد با عناصر پایین */
  width: 590px; 
  height: auto; /* از حالت ثابت خارج شود تا ارتفاع بر اساس محتوا تنظیم شود */
  line-height: 1.2; 
  font-size: 85px; /* کمی کوچک‌تر کردن سایز فونت اسکریپت برای جا شدن متن‌های طولانی */
  font-family: 'Invitation Script', cursive; 
}
.rsvp { 
  left: 50px; 
  top: 560px; /* تنظیم موقعیت خط دوم */
  width: 620px; 
  line-height: 1.3; 
  font-size: 38px; /* تنظیم سایز برای خوانایی بهتر */
  letter-spacing: 2px; 
}
[data-language="es"] .rsvp { 
  font-size: 38px;           /* هم‌اندازه با نسخه انگلیسی */
  font-weight: 600;          /* ضخامت و بولد بودن مشابه انگلیسی */
  line-height: 1.3;          /* فاصله خطوط مشابه انگلیسی */
  top: 570px;                /* تنظیم موقعیت دقیق با توجه به سایز جدید */
  letter-spacing: 2px;       /* فاصله بین حروف مشابه انگلیسی */
}
[data-language="en"] .rsvp { 
  font-size: 38px;           /* هم‌اندازه با نسخه انگلیسی */
  font-weight: 600;          /* ضخامت و بولد بودن مشابه انگلیسی */
  line-height: 1.3;          /* فاصله خطوط مشابه انگلیسی */
  top: 570px;                /* تنظیم موقعیت دقیق با توجه به سایز جدید */
  letter-spacing: 2px;       /* فاصله بین حروف مشابه انگلیسی */
}
.reply-by { 
  left: 50px; 
  top: 680px; /* جابجایی تاریخ ثبت‌نام به پایین‌تر */
  width: 620px; 
  line-height: 65px; 
  font-size: 25px; 
  text-transform: uppercase; 
}
.contact { 
  left: 70px; 
  top: 770px; /* جابجایی اطلاعات تماس به پایین‌تر */
  width: 580px; 
  font-size: 27px; 
  line-height: 39px; 
}
.website { left: 45px; top: 1125px; width: 630px; font-size: 23px; line-height: 50px; letter-spacing: 2px; text-transform: uppercase; overflow-wrap: anywhere; }
[data-language="en"] .welcome-line-0 { font-size: 30px; }
[data-language="en"] .welcome-line-1 { font-size: 55px; letter-spacing: 0; }
[data-language="en"] .welcome-line-2 { font-size: 30px; }
[data-language="es"] .kindly {
  font-size: 55px; /* کوچک‌تر کردن فونت اسکریپت تا در کادر جا بشود */
  line-height: 1.1;
  top: 410px;
}

[data-language="es"] .reply-by {
  top: 710px; /* جابه‌جایی تاریخ ثبت‌نام به پایین‌تر */
}
[data-language="es"] .contact {
  top: 800px; /* جابه‌جایی اطلاعات تماس به پایین‌تر */
}

[data-language="en"] .welcome-line-0 { font-size: 30px; }
[data-language="en"] .welcome-line-1 { font-size: 55px; letter-spacing: 0; }
[data-language="en"] .welcome-line-2 { font-size: 30px; }

[data-language="fa"] .scene { 
  font-family: 'Invitation Persian', 'Tahoma', 'Vazirmatn', sans-serif; 
  direction: rtl;}
[data-language="fa"] .welcome-lines {
  top: 530px;
  gap: 20px;
}
[data-language="fa"] .welcome-line { 
  font-family: 'Invitation Persian', 'Tahoma', 'Vazirmatn', sans-serif;
  font-weight: 700; /* بولد شدن متن فارسی */
  line-line: 1.5;
}
[data-language="fa"] .welcome-line-0 { font-size: 40px; }
[data-language="fa"] .welcome-line-1 { font-size: 60px; letter-spacing: 0; }
[data-language="fa"] .welcome-line-2 { font-size: 40px; }
[data-language="fa"] .marriage { font-size: 44px; line-height: 50px; letter-spacing: 0; }
[data-language="fa"] .names, [data-language="fa"] .save-the-date, [data-language="fa"] .kindly { font-family: 'Invitation Persian', 'Times New Roman', serif; }
[data-language="fa"] .first-name, [data-language="fa"] .second-name { font-size: 120px; text-align: center; width: 100%; left: 0; right: 0; }
[data-language="fa"] .names .name-joiner { font-size: 90px; width: 100%; left: 0; right: 0; top: 104px; }
[data-language="fa"] .save-the-date { left: 45px; top: 440px; width: 630px; }
[data-language="fa"] .save-the-date span { font-size: 77px; line-height: 1.35; }
[data-language="fa"] .save-the-date .save-line-2 { font-size: 66px; }
[data-language="fa"] .event-date { font-size: 43px; }
[data-language="fa"] .venue { font-size: 33px; line-height: 43px; }
[data-language="fa"] .event-time { font-size: 29px; }
[data-language="fa"] .kindly { font-size: 93px; }
[data-language="fa"] .rsvp { font-size: 47px; letter-spacing: 0; padding-left: 0; }button
[data-language="fa"] .reply-by { font-size: 35px; }
[data-language="fa"] .contact { font-size: 37px; line-height: 45px; }
[data-language="fa"] .website { font-family: Georgia, 'Times New Roman', serif; }
.butterfly {
  position: absolute; left: 160px; top: 100px; width: 400px; height: 310px;
  z-index: 2; perspective: 950px; transform-origin: 200px 140px;
  will-change: transform, opacity; filter: drop-shadow(9px 22px 10px #392d206b);
}
.wing { position: absolute; top: 0; width: 200px; height: 310px; overflow: hidden; backface-visibility: hidden; will-change: transform; }
.wing img, .butterfly-body img { position: absolute; top: 0; width: 400px; height: 310px; max-width: none; }
.wing-left { left: 0; transform-origin: 200px 140px; }
.wing-left img { left: 0; }
.wing-right { left: 200px; transform-origin: 0 140px; }
.wing-right img { left: -200px; }
.wing-left { clip-path: path('M 198 139 C 156 95 88 45 47 36 C 34 33 30 40 32 52 C 39 70 47 97 52 119 C 56 136 66 147 94 149 C 83 159 78 173 82 188 L 87 199 L 83 204 L 91 212 L 90 218 L 101 222 L 107 231 L 119 232 L 129 240 L 138 242 L 144 239 L 154 247 L 163 240 C 180 215 187 182 198 145 Z'); }
.wing-right { clip-path: path('M 7 137 C 42 97 92 54 151 41 C 169 36 175 40 175 51 C 174 70 158 88 154 109 C 153 132 144 150 110 151 C 119 162 125 170 125 183 L 119 198 L 122 205 L 113 215 L 113 221 L 100 224 L 96 233 L 81 236 L 75 243 L 66 242 L 55 251 L 44 247 C 30 219 17 177 7 145 Z'); }
.butterfly-body {
  position: absolute; left: 150px; top: 0; width: 100px; height: 235px; overflow: hidden;
  clip-path: path('M 13 42 C 27 55 41 92 46 115 L 49 116 C 46 91 30 54 17 42 Z M 84 42 C 70 56 56 90 52 115 L 55 117 C 60 87 74 58 87 43 Z M 45 112 C 40 118 46 126 46 130 L 44 142 L 45 162 L 47 176 L 46 190 L 48 213 L 54 218 L 60 174 L 58 146 L 61 132 L 55 120 L 60 114 L 56 110 Z');
}
.butterfly-body img { left: -150px; }
[data-phase="opening"] .wing-left, [data-phase="closing"] .wing-left { animation: left-wing 3s ease-in-out infinite; }
[data-phase="opening"] .wing-right, [data-phase="closing"] .wing-right { animation: right-wing 3s ease-in-out infinite; }
[data-phase="open"] .wing-left, [data-phase="turning"] .wing-left { animation: left-wing 7s ease-in-out infinite; }
[data-phase="open"] .wing-right, [data-phase="turning"] .wing-right { animation: right-wing 7s ease-in-out infinite; }
@keyframes left-wing { 0%, 100% { transform: rotateY(0deg); } 43% { transform: rotateY(-54deg) skewY(7deg); } 60% { transform: rotateY(-12deg); } }
@keyframes right-wing { 0%, 100% { transform: rotateY(0deg); } 43% { transform: rotateY(56deg) skewY(-7deg); } 60% { transform: rotateY(12deg); } }
.envelope { position: absolute; inset: 0; z-index: 5; perspective: 1600px; pointer-events: none; }
.flap { position: absolute; inset: 0; background: url('assets/artwork/envelope.webp') 0 0 / 720px 1280px no-repeat; backface-visibility: hidden; will-change: transform; }
.flap-detail { position: absolute; inset: 0; background: url('assets/artwork/envelope-opened.webp') 0 0 / 720px 1280px no-repeat; opacity: 0; }
.flap-top { clip-path: polygon(0 0, 100% 0, 50% 46.05%); transform-origin: 50% 0; }
.flap-bottom { clip-path: polygon(0 100%, 50% 54%, 100% 100%); transform-origin: 50% 100%; background-image: url('assets/artwork/envelope-opened.webp'); }
.flap-left { clip-path: polygon(0 0, 50% 46%, 48.5% 48.5%, 49% 51.5%, 50% 53.3%, 0 100%); transform-origin: 0 50%; }
.flap-right { clip-path: polygon(100% 0, 51.2% 45.7%, 49.5% 48%, 49.8% 51.6%, 100% 100%); transform-origin: 100% 50%; }
.flap-right .flap-detail { background-position: right top; }
.closed-cover { position: absolute; inset: 0; display: block; width: 720px; height: 1280px; }
.advance-button {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; padding: 0;
  border: 0; background: transparent; cursor: pointer; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.advance-button:focus-visible { outline: 2px solid #d7c69f; outline-offset: -3px; }
.advance-button[aria-disabled="true"] { cursor: default; }
.language-switcher {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 7;
  display: flex; gap: 3px;
}
.language-switcher button {
  min-height: 32px; padding: 3px 8px; border: 1px solid #c5b2aa80; border-radius: 2px;
  background: #ece7dfd9; color: #60323a; font: 12px/1.5 Georgia, 'Times New Roman', serif;
  cursor: pointer;
}
/* کانتینر اصلی - فوق‌العاده ظریف و شیشه‌ای */
.language-switcher {
  display: inline-flex;
  gap: 3px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 3px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* استایل دکمه‌ها - کوچک و مینیمال */
.language-switcher button {
  border: none;
  background: transparent;
  color: #60323a;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0.65;
}

/* افکت هوور لطیف */
.language-switcher button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}

/* دکمه زبان فارسی */
.language-switcher button[lang="fa"] {
  font-family: 'Invitation Persian', 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 0;
  padding: 2px 8px;
}

/* دکمه فعال (انتخاب‌شده) */
.language-switcher button[aria-pressed="true"] {
  background: rgba(96, 50, 58, 0.85);
  color: #f6f0e5;
  opacity: 1;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(96, 50, 58, 0.2);
}

/* فوکوس کیبورد */
.language-switcher button:focus-visible {
  outline: 1.5px solid #d7c69f;
  outline-offset: 1px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
audio { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wing { animation: none !important; }
  .scene .lettering { animation: none !important; }
  .scene.is-active .lettering, .scene.is-entering .lettering { opacity: 1; }
  .scene.is-exiting { visibility: hidden; }
}