/* ══════════════════════════════════════════════════════════════
   کارت دعوت عروسی زهرا و علیرضا — نسخهٔ سینمایی
   انتزاعی · سه‌بعدی · Mobile-First · RTL
   بخش ۱: پایه، پاکت نامه، غنچه‌ها، پیام صدا
   ══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'IranNastaliq';
  src:url('assets/fonts/IranNastaliq.woff2') format('woff2'),
      url('assets/fonts/IranNastaliq.ttf') format('truetype');
  font-display:swap;
}

:root{
  --navy:#22395A;
  --navy-dark:#101827;
  --navy-deep:#0A101B;
  --navy-light:#3C5F91;
  --gold:#C9A24B;
  --gold-soft:#E7CE95;
  --blush:#E9C9C4;
  --blush-2:#D9A8A2;
  --lilac:#B8A9C9;
  --paper:#FDFBF7;
  --paper-2:#F3EDEE;
  --ink:#33383F;
  --ink-2:#8A8A8A;
  --radius:16px;
  --card-w:480px;
  --fa:'Vazirmatn','Vazir','IRANSans',system-ui,sans-serif;
  --en:'Playfair Display','Cormorant Garamond',serif;
  --nas:'IranNastaliq','Noto Nastaliq Urdu',var(--fa);
  --ease:cubic-bezier(.2,.9,.2,1);
  --spring:cubic-bezier(.18,1.3,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  font-family:var(--fa);
  background:var(--navy-deep);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden;height:100%}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}

/* بافت ریز روی کل صفحه — حس کاغذ چاپی */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* نوار پیشرفت اسکرول */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:65;background:rgba(255,255,255,.06)}
.scroll-bar span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--blush),var(--gold-soft));
  box-shadow:0 0 12px rgba(201,162,75,.7);transition:width .12s linear}

/* گلبرگ‌های شناور (canvas) */
.petal-canvas{position:fixed;inset:0;z-index:55;pointer-events:none}

/* ══════════════════════════════════════════
   غنچه → گل شکفته (کاملاً CSS)
   ══════════════════════════════════════════ */
.bloom{
  --s:64px;
  position:relative;display:inline-block;
  width:var(--s);height:var(--s);
  will-change:transform;
}
.bloom.sm{--s:44px}
.bloom.lg{--s:86px}
/* غنچهٔ بسته — پیش از شکفتن دیده می‌شود */
.bloom::before{
  content:'';position:absolute;left:50%;top:50%;
  width:36%;height:48%;margin:-32% 0 0 -18%;
  border-radius:50% 50% 44% 44% / 70% 70% 34% 34%;
  background:linear-gradient(170deg,#F8E0DB 0%,#CC9C97 58%,#8D9E88 100%);
  box-shadow:inset 0 -5px 9px rgba(120,80,80,.28),0 4px 8px rgba(80,60,60,.18);
  transform-origin:50% 100%;z-index:4;
  transition:opacity .55s ease .3s,transform .8s var(--spring) .25s;
}
.bloomed::before,.in .bloom::before{opacity:0;transform:scale(.35) translateY(14%)}
/* غنچه‌های تزئینی روی کارت */
.hero-bloom,.art-bloom-a,.art-bloom-b,.art-bloom-c,.pol-bloom,.foot-bloom{
  position:absolute;pointer-events:none;z-index:2;
}
.bloom .petal{
  position:absolute;left:50%;top:50%;
  width:42%;height:52%;
  margin:-52% 0 0 -21%;
  border-radius:62% 62% 46% 46% / 78% 78% 34% 34%;
  background:linear-gradient(170deg,#FFF6F3 0%,var(--blush) 46%,var(--blush-2) 100%);
  box-shadow:inset 0 -6px 10px rgba(160,110,105,.22),0 4px 8px rgba(90,60,60,.14);
  transform-origin:50% 100%;
  transform:rotate(var(--a)) translateY(38%) scale(.06);
  opacity:0;
  transition:transform 1.05s var(--spring) calc(var(--d) * 1s),opacity .5s ease calc(var(--d) * 1s);
}
.bloom .petal.inner{
  width:32%;height:40%;margin:-40% 0 0 -16%;
  background:linear-gradient(170deg,#FFFDFB,#F0D5D0 60%,#CE9C97);
  z-index:2;
}
.bloom .core{
  position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;
  border-radius:50%;z-index:3;
  background:radial-gradient(circle at 38% 34%,#FBEBC0,var(--gold) 62%,#9C7A32);
  box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 12px rgba(120,90,40,.35);
  transform:scale(0);transition:transform .7s var(--spring) .45s}
.bloom .leaf{
  position:absolute;left:50%;bottom:2%;width:30%;height:34%;
  border-radius:80% 10% 80% 10%;
  background:linear-gradient(160deg,#9FB39A,#6F8570);
  transform-origin:0% 100%;transform:rotate(0) scaleY(.1);opacity:0;
  transition:transform .9s var(--spring) .1s,opacity .5s .1s}
.bloom .leaf.l2{transform-origin:100% 100%;left:auto;right:50%}
.bloom .stem{
  position:absolute;left:50%;top:52%;width:3px;height:0;margin-left:-1.5px;
  background:linear-gradient(180deg,#7E9179,#5F7360);border-radius:2px;
  transition:height .8s var(--ease) .05s}

/* حالت شکفته */
.bloomed .petal,.in .bloom .petal{
  transform:rotate(var(--a)) translateY(-42%) scale(1);opacity:1;
  animation:petalSway 7s ease-in-out infinite alternate;
  animation-delay:calc(1s + var(--d) * 1s);
}
.bloomed .petal.inner,.in .bloom .petal.inner{transform:rotate(var(--a)) translateY(-30%) scale(1)}
.bloomed .core,.in .bloom .core{transform:scale(1)}
.bloomed .leaf,.in .bloom .leaf{opacity:1;transform:rotate(-34deg) scaleY(1)}
.bloomed .leaf.l2,.in .bloom .leaf.l2{transform:rotate(34deg) scaleY(1)}
.bloomed .stem,.in .bloom .stem{height:46%}
@keyframes petalSway{
  from{transform:rotate(var(--a)) translateY(-42%) scale(1)}
  to  {transform:rotate(calc(var(--a) + 4deg)) translateY(-45%) scale(1.03)}
}

/* ══════════════════════════════════════════
   ۱) سکانس پاکت نامه
   ══════════════════════════════════════════ */
.envelope-screen{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,4vh,32px);
  background:radial-gradient(130% 95% at 50% 0%,#3A5C8C 0%,#22395A 40%,#0C1320 100%);
  overflow:hidden;
  transition:opacity 1s ease,transform 1.2s var(--ease),visibility 1s;
}
.envelope-screen.gone{opacity:0;visibility:hidden;transform:scale(1.22)}

.orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.5;pointer-events:none;animation:float 17s ease-in-out infinite}
.orb-a{width:62vw;height:62vw;background:radial-gradient(circle at 35% 35%,#7E9BC8,transparent 68%);top:-16vw;left:-18vw}
.orb-b{width:48vw;height:48vw;background:radial-gradient(circle at 60% 40%,var(--lilac),transparent 66%);bottom:-14vw;right:-13vw;animation-delay:-6s}
.orb-c{width:36vw;height:36vw;background:radial-gradient(circle at 50% 50%,#F3E2D8,transparent 70%);top:54%;left:-11vw;opacity:.3;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-6%,0) scale(1.1)}}

.halo{
  position:absolute;left:50%;top:44%;width:min(120vw,620px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,75,.22),transparent 58%);
  animation:haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

.env-eyebrow{
  position:relative;font-family:var(--en);font-size:12.5px;letter-spacing:.42em;
  color:#E9DCC4;opacity:0;text-transform:uppercase;
  animation:fadeDown 1.4s var(--ease) .3s both;
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px);letter-spacing:.7em}to{opacity:.9;transform:none}}

.env-scene{
  position:relative;perspective:1400px;perspective-origin:50% 42%;
  animation:sceneIn 1.5s var(--spring) both;
}
@keyframes sceneIn{from{opacity:0;transform:translateY(48px) scale(.9)}to{opacity:1;transform:none}}

.envelope{
  position:relative;width:min(78vw,326px);aspect-ratio:1/1.33;
  transform-style:preserve-3d;
  transform:rotateX(9deg) rotateZ(-.6deg);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:rotateX(9deg) rotateZ(-.6deg) translateY(0)}50%{transform:rotateX(6deg) rotateZ(.6deg) translateY(-11px)}}
.envelope.opened{animation:envLift 1.9s var(--ease) forwards}
@keyframes envLift{to{transform:rotateX(2deg) translateY(-4%) scale(1.06)}}

.env-shadow{
  position:absolute;left:8%;right:8%;bottom:-7%;height:16%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%);
  filter:blur(10px);transform:translateZ(-40px);
}
.env-body{
  position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(150deg,#3A5B8C 0%,var(--navy) 46%,#1B3151 100%);
  box-shadow:0 34px 64px -18px rgba(6,14,26,.8),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -24px 42px rgba(0,0,0,.24);
}
.env-body::after{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:url('assets/img/envelope-relief.jpg') center/150% no-repeat;
  opacity:.3;mix-blend-mode:overlay;
}
.env-pocket{
  position:absolute;inset:0;border-radius:12px;overflow:hidden;z-index:3;pointer-events:none;
}
.env-pocket::before{
  content:'';position:absolute;left:0;right:0;bottom:0;top:26%;
  background:linear-gradient(200deg,#27466F,#1C3555 58%,#132540);
  clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.1);
}
.env-pocket::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 42%);
}
/* خط طلایی دور پاکت */
.env-pocket{border:1px solid rgba(201,162,75,.28)}

.env-letter{
  position:absolute;left:7%;right:7%;top:12%;height:74%;
  border-radius:9px;z-index:2;
  background:linear-gradient(170deg,#FFFDFA,#EFE6E8);
  box-shadow:0 14px 28px rgba(10,18,30,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  transform:translateY(4%);
  transition:transform 1.25s var(--ease) .38s,opacity .5s;
}
.env-letter-mono{font-family:var(--en);font-size:32px;letter-spacing:.14em;color:var(--navy)}
.env-letter-rule{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.env-letter-fa{font-size:12px;color:var(--ink-2);letter-spacing:.1em}
.opened .env-letter{transform:translateY(-33%) scale(1.04)}

.env-flap{
  position:absolute;top:0;left:0;right:0;height:62%;z-index:6;
  background:url('assets/img/envelope-relief.jpg') center 26%/128% no-repeat,var(--navy);
  clip-path:polygon(0 0,100% 0,100% 46%,50% 100%,0 46%);
  transform-origin:top center;transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.55,0,.2,1) .16s,filter 1.15s;
  box-shadow:0 14px 22px -14px rgba(0,0,0,.5);
  filter:brightness(1.16) saturate(1.05);
}
.env-flap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.2));
}
.opened .env-flap{transform:rotateX(-176deg) translateZ(1px);filter:brightness(.58)}

.seal{
  position:absolute;z-index:9;width:34%;aspect-ratio:1;
  left:50%;top:62%;transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  filter:drop-shadow(0 6px 10px rgba(10,18,32,.55));
  animation:sealPulse 2.6s ease-in-out infinite;
}
@keyframes sealPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.seal-glow{
  position:absolute;inset:-34%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,162,75,.55),transparent 62%);
  animation:glow 2.6s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}
.seal-ring{
  position:absolute;inset:-18%;border-radius:50%;border:1px solid rgba(231,206,149,.55);
  animation:ringOut 2.8s ease-out infinite;pointer-events:none;
}
@keyframes ringOut{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.seal-half{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform 1.1s var(--ease),opacity 1s}
.opened .seal{animation:none;pointer-events:none}
.opened .seal-glow,.opened .seal-ring{opacity:0}
.opened .seal-left {transform:translate(-64%,112%) rotate(-62deg) scale(.78);opacity:0}
.opened .seal-right{transform:translate( 64%,126%) rotate( 70deg) scale(.78);opacity:0}

/* انفجار گلبرگ هنگام باز شدن */
.burst{position:absolute;inset:0;z-index:8;pointer-events:none}
.burst i{
  position:absolute;left:50%;top:58%;width:12px;height:16px;
  border-radius:60% 60% 44% 44% / 74% 74% 32% 32%;
  background:linear-gradient(170deg,#FFF6F3,var(--blush) 55%,var(--blush-2));
  opacity:0;
}
.opened .burst i{animation:burstOut 1.5s ease-out forwards;animation-delay:var(--bd)}
@keyframes burstOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1) rotate(var(--br))}
}

.bud-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,5vw,30px);position:relative;z-index:2}
.bud-row .bloom{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}

.tap-hint{
  position:relative;color:#EBE2CE;font-size:13.5px;letter-spacing:.05em;opacity:.92;
  animation:hint 2.4s ease-in-out infinite;
}
@keyframes hint{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.tap-hint.gone{opacity:0;transition:opacity .4s}

/* ══════════════════════════════════════════
   ۲) پیام «صدای گوشی را زیاد کنید»
   ══════════════════════════════════════════ */
.sound-modal{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:22px;
  background:rgba(10,16,27,.72);backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s;
}
.sound-modal.show{opacity:1;visibility:visible}
.sound-card{
  width:100%;max-width:340px;padding:30px 22px 22px;text-align:center;
  border-radius:22px;border:1px solid rgba(231,206,149,.35);
  background:linear-gradient(168deg,rgba(253,251,247,.97),rgba(240,233,234,.94));
  box-shadow:0 40px 70px -28px rgba(0,0,0,.8),inset 0 1px 0 #fff;
  transform:translateY(26px) scale(.94);opacity:0;
  transition:transform .8s var(--spring) .1s,opacity .6s .1s;
}
.sound-modal.show .sound-card{transform:none;opacity:1}
.sound-ico{
  position:relative;display:grid;place-items:center;
  width:66px;height:66px;margin:0 auto 16px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FBEBC0,var(--gold) 66%,#9C7A32);
  box-shadow:0 14px 26px -12px rgba(150,110,40,.75),inset 0 1px 0 rgba(255,255,255,.7);
}
.sound-ico svg{width:26px;height:26px;fill:#fff;transform:translateX(-2px)}
.sound-ico .wave{
  position:absolute;border:2px solid rgba(201,162,75,.55);border-radius:50%;
  width:100%;height:100%;animation:soundWave 2.2s ease-out infinite;
}
.sound-ico .w2{animation-delay:.5s}
.sound-ico .w3{animation-delay:1s}
@keyframes soundWave{0%{transform:scale(.85);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.sound-title{font-size:17px;font-weight:700;color:var(--ink)}
.sound-text{margin-top:10px;font-size:13px;line-height:2.2;color:var(--ink-2)}
.sound-actions{margin-top:20px;display:grid;gap:8px;justify-items:center}
.btn.plain{color:var(--ink-2);font-size:12.5px;text-decoration:underline;text-underline-offset:4px;padding:6px 10px}

/* ══════════════════════════════════════════
   دکمهٔ موسیقی + توست
   ══════════════════════════════════════════ */
.music-btn{
  position:fixed;z-index:62;bottom:16px;left:16px;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(253,251,247,.92);
  box-shadow:0 14px 24px -12px rgba(0,0,0,.75),inset 0 1px 0 #fff;
  backdrop-filter:blur(6px);border:1px solid rgba(201,162,75,.4);
}
.eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.eq i{width:3px;height:6px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--navy))}
.music-btn.playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.music-btn.playing .eq i:nth-child(2){animation-delay:.15s}
.music-btn.playing .eq i:nth-child(3){animation-delay:.3s}
.music-btn.playing .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{from{height:5px}to{height:17px}}
.mute-line{position:absolute;width:26px;height:2px;background:#B84A4A;border-radius:2px;transform:rotate(-45deg);transition:opacity .25s}
.music-btn.playing .mute-line{opacity:0}

.toast{
  position:fixed;z-index:90;bottom:22px;left:50%;transform:translate(-50%,26px);
  padding:11px 20px;border-radius:999px;font-size:12.5px;
  background:rgba(16,24,39,.94);color:#F4EFE6;border:1px solid rgba(201,162,75,.4);
  box-shadow:0 18px 30px -16px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility .35s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════════
   بخش ۲: کارت دعوت
   ══════════════════════════════════════════════════════════════ */
.card-screen{
  min-height:100vh;padding:clamp(0px,3vw,34px) 0;
  display:flex;justify-content:center;align-items:flex-start;
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(201,162,75,.16),transparent 70%),
    radial-gradient(95% 60% at 50% 0%,#33547E 0%,#1E3552 45%,#0B111C 100%);
  opacity:0;visibility:hidden;transition:opacity 1s ease .1s;
  perspective:1600px;
}
.card-screen.show{opacity:1;visibility:visible}

.card{
  width:100%;max-width:var(--card-w);
  background:linear-gradient(178deg,var(--paper) 0%,var(--paper-2) 100%);
  border-radius:clamp(0px,3vw,22px);
  overflow:hidden;position:relative;
  box-shadow:0 46px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.5) inset;
  transform:translateY(34px) rotateX(5deg);opacity:0;
  transition:transform 1.25s var(--ease),opacity 1.1s;
}
.card-screen.show .card{transform:none;opacity:1}

.ornament{position:absolute;pointer-events:none;filter:saturate(.92);will-change:transform}

/* ─── انیمیشن ظاهر شدن بخش‌ها ─── */
.reveal{opacity:0;transition:opacity .95s ease,transform 1.05s var(--ease),filter .95s ease}
.reveal[data-anim="up"]    {transform:translateY(40px) scale(.985)}
.reveal[data-anim="scale"] {transform:scale(1.06)}
.reveal[data-anim="blur"]  {transform:translateY(22px);filter:blur(9px)}
.reveal[data-anim="right"] {transform:translateX(46px) rotate(1.5deg)}
.reveal[data-anim="left"]  {transform:translateX(-46px) rotate(-1.5deg)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ─── ۱) هدر ─── */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-media{overflow:hidden}
.hero-img{
  width:100%;filter:grayscale(1) contrast(1.06) brightness(.9);
  transform:scale(1.14);transition:transform 2.6s var(--ease);
}
.hero.in .hero-img{animation:kenBurns 18s ease-in-out infinite alternate;transform:none}
@keyframes kenBurns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2%,-2%,0)}}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 50% at 50% 8%,rgba(14,22,36,.68),transparent 66%),
    linear-gradient(180deg,rgba(12,19,32,.6) 0%,transparent 40%);
}
.hero-fade{position:absolute;left:0;right:0;bottom:-1px;height:24%;background:linear-gradient(180deg,transparent,var(--paper))}
.hero-orn{width:31%;bottom:15%;left:1%;transform:rotate(-24deg);opacity:.95;filter:brightness(1.14) drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.hero-bloom{--s:58px;top:9%;right:6%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.hero-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:8%;gap:6px;text-align:center}
.eyebrow{
  font-family:var(--en);font-size:12.5px;letter-spacing:.34em;color:#F0E7D6;text-transform:uppercase;
  opacity:0;transform:translateY(-10px);transition:opacity 1s .35s,transform 1s .35s}
.hero.in .eyebrow{opacity:.92;transform:none}
.couple-en{
  font-family:var(--en);font-weight:700;color:#fff;
  font-size:clamp(33px,10vw,45px);line-height:1.08;
  text-shadow:0 3px 0 rgba(255,255,255,.26),0 16px 34px rgba(0,0,0,.6);
}
.couple-en .w,.couple-en .amp{display:inline-block;opacity:0;transform:translateY(24px) rotateX(40deg)}
.hero.in .couple-en > :nth-child(1){animation:wordUp 1.1s var(--spring) .55s forwards}
.hero.in .couple-en > :nth-child(2){animation:wordUp 1.1s var(--spring) .75s forwards}
.hero.in .couple-en > :nth-child(3){animation:wordUp 1.1s var(--spring) .9s forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
.couple-en .amp{font-weight:400;font-style:italic;opacity:.85;color:var(--gold-soft)}
.hair-rule{
  display:block;width:0;height:1px;margin:6px auto 2px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  transition:width 1.4s var(--ease) 1.1s}
.hero.in .hair-rule{width:58%}
.couple-lat{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:#EFE7DA;letter-spacing:.18em;
  opacity:0;transition:opacity 1.1s 1.25s}
.hero.in .couple-lat{opacity:.95}
.hero-date{margin-top:4px;font-size:12.5px;color:#F2ECE2;letter-spacing:.08em;opacity:0;transition:opacity 1.1s 1.45s}
.hero.in .hero-date{opacity:.94}
.scroll-cue{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:20px;height:32px;border:1px solid rgba(255,255,255,.5);border-radius:12px}
.scroll-cue i{position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold-soft);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ─── ۲) نام دعوت‌شونده ─── */
.guest{padding:28px 22px 4px}
.guest-box{
  position:relative;border-radius:18px;padding:28px 20px 24px;text-align:center;
  background:linear-gradient(160deg,#FCF9FA,#ECE4E8);
  box-shadow:0 18px 34px -18px rgba(34,57,90,.55),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.05);
  transition:transform .5s var(--ease);
}
.corner{position:absolute;width:22px;height:22px;border:1px solid var(--gold);opacity:0;transition:opacity .7s .5s}
.in .corner{opacity:.75}
.c-tl{top:10px;right:10px;border-left:0;border-bottom:0}
.c-tr{top:10px;left:10px;border-right:0;border-bottom:0}
.c-bl{bottom:10px;right:10px;border-left:0;border-top:0}
.c-br{bottom:10px;left:10px;border-right:0;border-top:0}
.guest-icon{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#fff,#F0E8EB);
  box-shadow:0 8px 16px -8px rgba(34,57,90,.6),inset 0 1px 0 #fff;
}
.guest-icon svg{width:16px;height:16px;fill:var(--gold);animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}42%{transform:scale(1.18)}60%{transform:scale(1.02)}}
.guest-name{font-size:17.5px;font-weight:700;color:var(--ink)}
.guest-sub{margin-top:8px;font-size:12.5px;color:var(--ink-2);line-height:2}

/* ─── ۳) متن نستعلیق ─── */
.poem{padding:34px 24px 20px;text-align:center}
.nastaliq{font-family:var(--nas);color:#4A4A4A;line-height:2.6;font-size:16px}
.nastaliq.big{margin-top:12px;font-size:clamp(19px,5.6vw,23px);line-height:2.9;color:#333}
.poem .line{opacity:0;filter:blur(6px);transform:translateY(14px);transition:opacity 1.1s,filter 1.1s,transform 1.1s}
.poem.in .line:nth-of-type(1){transition-delay:.15s}
.poem.in .line:nth-of-type(2){transition-delay:.5s}
.poem.in .line{opacity:1;filter:none;transform:none}
.divider-rose{position:relative;width:140px;margin:12px auto;display:block;
  opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .9s .3s,transform 1.1s var(--spring) .3s}
.poem.in .divider-rose{opacity:1;transform:none}

/* ─── ۴) تصاویر هنری ─── */
.art-section{position:relative;padding:22px 18px;isolation:isolate}
.art-hold{
  width:76%;position:relative;z-index:1;margin:0 6% 0 auto;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.5s var(--ease) .15s;
}
.art-hold.right{margin:0 auto 0 5%;clip-path:inset(0 100% 0 0)}
.in .art-hold{clip-path:inset(0 0 0 0)}
.mask-1{-webkit-mask-image:url('assets/img/brush-mask-1.png');mask-image:url('assets/img/brush-mask-1.png')}
.mask-2{-webkit-mask-image:url('assets/img/brush-mask-2.png');mask-image:url('assets/img/brush-mask-2.png')}
.mask-photo{-webkit-mask-image:url('assets/img/brush-mask-photo.png');mask-image:url('assets/img/brush-mask-photo.png')}
.art-img{width:100%;filter:grayscale(1) contrast(1.06);transform:scale(1.1);transition:transform 2s var(--ease) .2s}
.in .art-img{transform:scale(1)}
.art-img.photo{filter:saturate(.98) contrast(1.03)}
.art-hold::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 62%);
  transform:translateX(-120%);
}
.in .art-hold::after{animation:sweep 1.6s ease-out 1.1s}
@keyframes sweep{to{transform:translateX(120%)}}
.ink{
  position:absolute;z-index:0;
  background:linear-gradient(155deg,#DCCCC7 0%,#C6D0DD 55%,#E8D5D0 100%);
  opacity:0;filter:blur(1px);
  -webkit-mask-image:url('assets/img/brush-mask-3.png');mask-image:url('assets/img/brush-mask-3.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity 1.4s .3s,transform 1.6s var(--ease) .3s;
}
.ink-1{top:10%;bottom:14%;left:4%;right:40%;transform:rotate(-14deg) scale(.9)}
.ink-2{top:10%;bottom:14%;right:4%;left:40%;transform:scaleX(-1) rotate(-14deg) scale(.9)}
.in .ink-1{opacity:.6;transform:rotate(-7deg) scale(1)}
.in .ink-2{opacity:.6;transform:scaleX(-1) rotate(-7deg) scale(1)}
.art-orn-a{width:26%;bottom:2%;left:5%;transform:rotate(-16deg)}
.art-orn-b{width:23%;bottom:4%;left:5%;transform:rotate(196deg)}
.art-bloom-a{--s:54px;top:6%;left:8%}
.art-bloom-b{top:52%;left:2%}
.art-bloom-c{--s:52px;top:8%;right:6%}

/* ─── ۵) نام‌های فارسی ─── */
.names{padding:16px 22px 24px;text-align:center}
.name-fa{
  font-size:clamp(24px,7.4vw,30px);font-weight:700;color:#2E2E2E;
  text-shadow:0 1px 0 #fff,0 2px 4px rgba(34,57,90,.16);
  opacity:0;transform:translateY(18px);transition:opacity .9s,transform 1s var(--ease);
}
.names.in .name-fa:nth-of-type(1){transition-delay:.1s}
.names.in .name-fa:nth-of-type(2){transition-delay:.55s}
.names.in .name-fa{opacity:1;transform:none}
.name-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0}
.dv-line{height:1px;width:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width 1.2s var(--ease) .3s}
.names.in .dv-line{width:32%}
.dv-bloom{--s:46px;flex:0 0 auto}

/* ─── ۶) شمارش معکوس ─── */
.countdown-wrap{padding:12px 22px 10px;text-align:center}
.cd-cap{font-size:12px;color:var(--ink-2);letter-spacing:.14em;margin-bottom:10px}
.countdown{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;align-items:center;
  border-radius:18px;padding:16px 8px;
  background:linear-gradient(165deg,#2E4767,#1F334C 55%,#16243A);
  box-shadow:0 24px 38px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 8px rgba(0,0,0,.4);
  border:1px solid rgba(201,162,75,.3);
}
.cd-cell{text-align:center;color:#F7F3EA;perspective:300px}
.cd-cell b{display:block;font-size:clamp(20px,6vw,26px);font-weight:600;letter-spacing:.04em;
  text-shadow:0 2px 5px rgba(0,0,0,.5);color:var(--gold-soft)}
.cd-cell b.flip{animation:flipDigit .55s var(--ease)}
@keyframes flipDigit{0%{transform:rotateX(0);opacity:1}45%{transform:rotateX(-90deg);opacity:.25}100%{transform:rotateX(0);opacity:1}}
.cd-cell span{display:block;margin-top:5px;font-size:10.5px;opacity:.7}
.cd-sep{height:34px;background:linear-gradient(180deg,transparent,rgba(231,206,149,.35),transparent)}

/* ─── ۷) مراسم ─── */
.ceremony{position:relative;padding:74px 22px 24px;text-align:center}
.section-title{
  font-size:clamp(21px,6.4vw,26px);font-weight:700;color:#333;
  text-shadow:0 1px 0 #fff,0 3px 7px rgba(34,57,90,.18);
}
.section-title::after{
  content:'';display:block;width:0;height:1px;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width 1.1s var(--ease) .35s;
}
.in .section-title::after{width:46%}
.fly-lane{position:absolute;top:6px;left:0;right:0;height:78px;overflow:hidden}
.butterflies{position:absolute;width:52%;top:6px;left:50%;transform:translateX(-50%)}
.ceremony.in .butterflies{animation:flutter 9s ease-in-out infinite alternate}
@keyframes flutter{
  0%{transform:translate(-70%,6px) rotate(-4deg) scale(.94)}
  50%{transform:translate(-50%,-4px) rotate(2deg) scale(1)}
  100%{transform:translate(-28%,8px) rotate(5deg) scale(.97)}
}
.detail-box{
  position:relative;margin-top:22px;padding:8px 16px;border-radius:14px;
  border:1px solid rgba(34,57,90,.2);
  background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(243,237,238,.74));
  box-shadow:0 20px 32px -22px rgba(34,57,90,.6),inset 0 1px 0 #fff;
}
.detail-row{
  display:flex;justify-content:space-between;gap:12px;padding:12px 2px;font-size:13px;
  border-bottom:1px dashed rgba(34,57,90,.16);
  opacity:0;transform:translateX(18px);
  transition:opacity .7s,transform .8s var(--ease);
  transition-delay:calc(.25s + var(--i) * .13s);
}
.in .detail-row{opacity:1;transform:none}
.detail-row:last-child{border-bottom:0}
.dl{color:var(--ink-2);white-space:nowrap}
.dv{color:var(--ink);font-weight:600;text-align:left}
.cal-btn{margin-top:18px}

/* ─── ۸) پولاروید ─── */
.polaroid-wrap{position:relative;padding:14px 22px 32px;display:grid;place-items:center}
.polaroid{
  position:relative;width:62%;padding:11px 11px 34px;background:#fff;border-radius:4px;
  transform:rotate(-3deg);overflow:hidden;
  box-shadow:0 26px 38px -18px rgba(34,57,90,.6),0 2px 0 rgba(0,0,0,.05);
}
.polaroid img{filter:grayscale(1) contrast(1.04)}
.polaroid .shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 64%);
  transform:translateX(-120%);
}
.in .polaroid .shine{animation:sweep 1.8s ease-out .9s}
.polaroid figcaption{margin-top:11px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:#8A8A8A;letter-spacing:.16em}
.pol-orn{width:29%;top:-1%;right:6%;transform:rotate(26deg)}
.pol-bloom{bottom:14%;left:6%}

/* ─── ۹) RSVP ─── */
.rsvp{padding:8px 24px 26px;text-align:center}
.rsvp-text{margin-top:14px;font-size:13px;line-height:2.3;color:var(--ink-2)}
.rsvp-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{
  position:relative;display:inline-block;padding:12px 22px;border-radius:999px;
  font-size:13px;font-weight:600;text-decoration:none;overflow:hidden;
  transition:transform .25s,box-shadow .25s,background .25s;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{color:#4A4A4A;border:1px solid rgba(34,57,90,.3);background:rgba(255,255,255,.65);box-shadow:0 8px 16px -12px rgba(0,0,0,.5)}
.btn.solid{
  color:#fff;background:linear-gradient(165deg,#2E4767,#182b45);
  box-shadow:0 16px 26px -14px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.solid::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%);
  transform:translateX(-130%);animation:btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ─── ۱۰) نقشه ─── */
.map-wrap{padding:6px 22px 26px;text-align:center}
.map-frame{
  position:relative;margin-top:18px;border-radius:16px;overflow:hidden;height:230px;
  border:1px solid rgba(34,57,90,.2);background:#E9E4DE;
  box-shadow:0 24px 36px -22px rgba(34,57,90,.7);
}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.02);position:relative;z-index:1}
.map-skeleton,.map-fallback{position:absolute;inset:0;display:grid;place-items:center;gap:8px;align-content:center;
  background:linear-gradient(160deg,#EFEAE3,#DFE4E9);color:var(--ink-2);font-size:12.5px;text-align:center;padding:16px}
.map-skeleton{z-index:2}
.map-skeleton.hide,.map-fallback{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.map-fallback.show{opacity:1;visibility:visible;z-index:3}
.sk-pin,.fb-pin{
  width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(160deg,#D06B62,#A63F38);box-shadow:0 6px 10px -4px rgba(0,0,0,.5);
  animation:pinDrop 1.8s ease-in-out infinite;
}
@keyframes pinDrop{0%,100%{transform:rotate(-45deg) translateY(0)}50%{transform:rotate(-45deg) translateY(-7px)}}
.fb-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(34,57,90,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(34,57,90,.12) 1px,transparent 1px);
  background-size:26px 26px}
.fb-text{position:relative;line-height:2}
.venue{margin-top:16px;font-size:15px;font-weight:700;color:var(--ink)}
.venue-addr{margin:6px 0 16px;font-size:12.5px;color:var(--ink-2);line-height:2}
.map-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* ─── ۱۱) فوتر ─── */
.foot{position:relative;padding:26px 22px 34px;text-align:center;border-top:1px solid rgba(34,57,90,.1)}
.foot-orn{width:25%;bottom:8%;left:5%;transform:rotate(-8deg);opacity:.65}
.foot-bloom{bottom:16%;right:7%;opacity:.9}
.foot-mono{font-family:var(--en);font-size:18px;letter-spacing:.22em;color:var(--navy)}
.foot-credit{margin-top:8px;font-size:11px;color:var(--ink-2)}
.foot-credit span{color:var(--gold)}

/* ─── نمایش در عرض‌های بزرگ‌تر ─── */
@media (min-width:600px){
  .card{border-radius:22px}
  .guest{padding:34px 34px 6px}
  .countdown-wrap{padding:16px 34px 12px}
  .names,.ceremony,.poem,.rsvp,.map-wrap{padding-left:34px;padding-right:34px}
  .map-frame{height:280px}
  .art-hold{width:70%}
  .cd-cell b{font-size:28px}
}

/* ─── احترام به تنظیم «کاهش حرکت» ─── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none;filter:none}
  .art-hold{clip-path:none}
  .bloom .petal{opacity:1;transform:rotate(var(--a)) translateY(-42%) scale(1)}
  .bloom .core{transform:scale(1)}
  .petal-canvas{display:none}
}

/* ══════════════════════════════════════════════════════════════
   بخش ۳: فونت شیک اسم‌ها + افکت‌های تکمیلی + نقشهٔ جایگزین
   ══════════════════════════════════════════════════════════════ */
:root{
  --script:'Great Vibes',cursive;
  --en:'Cinzel','Playfair Display',serif;
}

/* ─── اسم لاتین با فونت خطاطی شیک ─── */
.couple-en{
  font-family:var(--script);font-weight:400;
  direction:ltr;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:0 .16em;max-width:100%;padding:0 8px;
  font-size:clamp(38px,12.5vw,58px);line-height:1.3;letter-spacing:.01em;
  text-shadow:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));
}
.couple-en .w{color:#FFF9EE}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .couple-en .w{
    background:linear-gradient(100deg,#FFFFFF 0%,#FFF7E6 30%,#E4C88C 46%,#FFFFFF 60%,#F6E7C6 100%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.couple-en .amp{
  font-family:var(--en);font-style:normal;font-size:.44em;font-weight:400;
  color:var(--gold-soft);-webkit-text-fill-color:var(--gold-soft);
  transform:translateY(-.18em);
}
.hero.in .couple-en > .w:nth-child(1){animation:wordUp 1.1s var(--spring) .5s forwards,shimmer 7s linear 1.5s infinite}
.hero.in .couple-en > .w:nth-child(3){animation:wordUp 1.1s var(--spring) .85s forwards,shimmer 7s linear 1.9s infinite}
/* اطمینان: اگر انیمیشن اجرا نشد، اسم‌ها حتماً دیده شوند */
.hero.ready .couple-en > *{opacity:1!important;transform:none!important}
@keyframes shimmer{from{background-position:190% 0}to{background-position:-90% 0}}

.eyebrow{font-family:var(--en);font-size:11.5px;letter-spacing:.4em}
.couple-lat{font-family:var(--en);font-style:normal;font-size:12px;letter-spacing:.3em;color:#F0E7D6}
.env-eyebrow{font-family:var(--script);font-size:26px;letter-spacing:.06em;text-transform:none}
.env-letter-mono{font-family:var(--en);font-size:26px;letter-spacing:.2em}
.foot-mono{font-family:var(--script);font-size:30px;letter-spacing:.02em;color:var(--navy);line-height:1.5}
.foot-year{font-family:var(--en);font-size:12px;letter-spacing:.35em;color:var(--gold);margin-top:2px}
.polaroid figcaption{font-family:var(--script);font-size:18px;letter-spacing:.05em;color:#7C7C7C}

/* ─── جرقه‌های طلایی ─── */
.spark-canvas{position:fixed;inset:0;z-index:56;pointer-events:none;mix-blend-mode:screen}

/* ─── گلبرگ‌هایی که با لمس صفحه می‌پاشند ─── */
.tap-fx{position:fixed;inset:0;z-index:57;pointer-events:none;overflow:hidden}
.tap-fx i{
  position:absolute;width:11px;height:14px;
  border-radius:60% 60% 44% 44% / 74% 74% 32% 32%;
  background:linear-gradient(170deg,#FFF7F4,var(--blush) 55%,var(--blush-2));
  animation:tapOut .95s ease-out forwards;
}
@keyframes tapOut{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(var(--tr))}
}

/* ─── پردهٔ نوری هنگام باز شدن پاکت ─── */
.iris{
  position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:12;
  background:radial-gradient(circle,rgba(255,247,230,.95) 0%,rgba(231,206,149,.5) 40%,transparent 70%);
}
.envelope-screen.opening .iris{animation:irisOut 1.5s ease-out .35s forwards}
@keyframes irisOut{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(140);opacity:0}}

/* ─── درخشش روی درب پاکت + حلقهٔ دوم مُهر ─── */
.flap-sheen{
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transform:translateX(-130%);animation:flapSheen 5s ease-in-out infinite;
}
@keyframes flapSheen{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.seal-ring.r2{animation-delay:1.4s}

/* ─── پرتوهای نور روی هدر ─── */
.hero-rays{
  position:absolute;inset:-30% -10%;pointer-events:none;opacity:.16;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.85) 6deg,transparent 14deg,
             transparent 40deg,rgba(255,255,255,.6) 47deg,transparent 56deg,
             transparent 120deg,rgba(255,255,255,.7) 128deg,transparent 138deg,transparent 360deg);
  animation:rays 34s linear infinite;
}
@keyframes rays{to{transform:rotate(360deg)}}

/* ─── هالهٔ متحرک پشت کارت ─── */
html{overflow-x:hidden}
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;filter:blur(60px);
  background:
    radial-gradient(38% 30% at 22% 18%,rgba(201,162,75,.5),transparent 70%),
    radial-gradient(34% 28% at 80% 30%,rgba(184,169,201,.45),transparent 70%),
    radial-gradient(40% 34% at 50% 82%,rgba(233,201,196,.4),transparent 72%);
  background-size:150% 150%,150% 150%,150% 150%;
  background-position:0% 0%,100% 0%,50% 100%;
  animation:auroraMove 26s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  from{background-position:0% 0%,100% 0%,50% 100%}
  to  {background-position:30% 22%,70% 30%,35% 70%}
}
.card{position:relative;z-index:1}

/* ─── ظاهر شدن تصویر مثل چاپ عکس (تار → شفاف) ─── */
.art-img.develop{filter:grayscale(1) contrast(1.06) blur(13px)}
.in .art-img.develop{filter:grayscale(1) contrast(1.06) blur(0);transition:filter 1.7s ease .25s,transform 2s var(--ease) .2s}
.art-img.photo.develop{filter:saturate(.98) contrast(1.03) blur(13px)}
.in .art-img.photo.develop{filter:saturate(.98) contrast(1.03) blur(0)}

/* ─── خط‌های طلایی که دور کادر مراسم کشیده می‌شوند ─── */
.frame-line{position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform 1.2s var(--ease) .35s}
.fl-t{top:0}
.fl-b{bottom:0}
.in .frame-line{transform:scaleX(1)}

/* ─── درخشش ثانیه‌شمار ─── */
.cd-cell.sec b{animation:secGlow 1s ease-in-out infinite}
@keyframes secGlow{0%,100%{text-shadow:0 2px 5px rgba(0,0,0,.5)}50%{text-shadow:0 0 14px rgba(231,206,149,.9),0 2px 5px rgba(0,0,0,.5)}}

/* ─── موج دکمهٔ موسیقی ─── */
.music-btn .ripple{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,162,75,.6);opacity:0}
.music-btn.playing .ripple{animation:ripple 2.2s ease-out infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* ─── کارت شمارهٔ تماس ─── */
.phone-card{
  position:relative;margin:18px auto 4px;max-width:290px;padding:18px 16px 14px;
  border-radius:18px;border:1px solid rgba(201,162,75,.4);
  background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(243,237,238,.8));
  box-shadow:0 20px 32px -22px rgba(34,57,90,.6),inset 0 1px 0 #fff;
}
.phone-ico{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#FBEBC0,var(--gold) 70%);
  box-shadow:0 8px 16px -8px rgba(150,110,40,.8),inset 0 1px 0 rgba(255,255,255,.8);
}
.phone-ico svg{width:16px;height:16px;fill:#fff}
.phone-num{
  display:block;font-family:var(--en);font-size:20px;letter-spacing:.06em;
  color:var(--navy);text-decoration:none;direction:ltr;
}
.phone-num:active{color:var(--gold)}
.phone-hint{display:block;margin-top:8px;font-size:11px;color:var(--ink-2)}

/* ─── نقشهٔ جایگزین با کاشی‌های OpenStreetMap ─── */
.map-osm{
  position:absolute;inset:0;z-index:2;display:none;overflow:hidden;text-decoration:none;
  background:#E8E3DC;
}
.map-osm.show{display:block}
.osm-tiles{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;
  grid-template-columns:repeat(3,256px);grid-template-rows:repeat(3,256px);filter:saturate(.85) contrast(1.03)}
.osm-tiles img{width:256px;height:256px;display:block}
.osm-pin{
  position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-24px 0 0 -10px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:linear-gradient(160deg,#E0776C,#A63F38);
  box-shadow:0 8px 12px -4px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.75);
  animation:pinDrop 1.9s ease-in-out infinite;
}
.osm-tag{
  position:absolute;left:50%;top:50%;transform:translate(-50%,18px);
  padding:5px 12px;border-radius:999px;font-size:11.5px;white-space:nowrap;
  background:rgba(16,24,39,.88);color:#F6EFE2;border:1px solid rgba(201,162,75,.5);
}
.map-osm::after{
  content:'OpenStreetMap';position:absolute;bottom:4px;left:6px;
  font-size:9px;color:#5C5C5C;background:rgba(255,255,255,.7);padding:1px 5px;border-radius:4px;
}

@media (min-width:600px){
  .couple-en{font-size:clamp(46px,7vw,62px)}
  .phone-card{max-width:320px}
}

/* ─── اصلاح لایه‌بندی هدر: متن همیشه روی تزئینات ─── */
.hero-text{z-index:4}
.hero-fade{z-index:3}
.hero-orn{z-index:1}
.hero-bloom{--s:50px;top:auto;bottom:19%;right:3%;z-index:1}
.hero-rays{z-index:0}