/* کارت عروسی دیجیتال — استایل مشترک دو مدل (پاکت آتشین / درهای طلایی) */
:root{
  --ink:#46392a; --ink-soft:#55452e; --muted:#857357; --muted2:#6e5c40;
  --gold:#8a6420; --gold2:#a3762e; --gold3:#b08a3e; --gold-line:#c9b98f;
  --bg-outer:#ddd5c2; --bg-card:#f3edde; --bg-alt1:#ede6d4; --bg-alt2:#e2d7bd;
  --bg-alt3:#eae2cf; --panel:rgba(255,252,244,.6);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-outer);font-family:'Vazirmatn',Tahoma,sans-serif}
a{color:var(--gold)}
a:hover{color:var(--gold3)}
::-webkit-scrollbar{width:0;height:0}

@keyframes sealPulse{0%,100%{box-shadow:0 0 26px rgba(255,120,40,.65),0 0 70px rgba(255,90,20,.3)}50%{box-shadow:0 0 44px rgba(255,150,60,.85),0 0 100px rgba(255,100,25,.5)}}
@keyframes flicker{0%,100%{opacity:.55}25%{opacity:.9}55%{opacity:.65}80%{opacity:1}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{0%{transform:translate(-3%,-2%) scale(1)}100%{transform:translate(3%,2%) scale(1.06)}}
@keyframes spinSlow{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}

[data-reveal]{transition:opacity 1s ease, transform 1.1s cubic-bezier(.19,.7,.22,1)}
[data-reveal="up"]{opacity:0;transform:translateY(26px)}
[data-reveal="zoom"]{opacity:0;transform:scale(.9)}
[data-reveal="on"]{opacity:1;transform:none}

.mj-page{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:44px 20px;background:var(--bg-outer);overflow:hidden}
.mj-glow1{position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(60% 50% at 30% 20%, rgba(246,238,220,.9), transparent 70%);animation:drift 16s ease-in-out infinite alternate}
.mj-glow2{position:absolute;inset:-10%;pointer-events:none;background:radial-gradient(50% 45% at 75% 75%, rgba(176,138,62,.16), transparent 70%);animation:drift 22s ease-in-out infinite alternate-reverse}

.mj-card{position:relative;width:420px;max-width:94vw;height:min(880px, 92vh);border-radius:34px;overflow:hidden;border:1px solid var(--gold-line);box-shadow:0 30px 70px rgba(90,70,40,.35)}
.mj-scroll{position:absolute;inset:0;overflow-y:auto;color:var(--ink);z-index:1;background:var(--bg-card)}

.mj-hero{padding:70px 28px 40px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;background:radial-gradient(130% 90% at 50% 0%, #efe3c9 0%, #f6f1e5 62%)}
.mj-eyebrow{font-size:11px;letter-spacing:6px;color:var(--gold)}
.mj-title{margin:0;font-family:'Noto Nastaliq Urdu',serif;font-weight:700;font-size:44px;line-height:2.3;background:linear-gradient(100deg,var(--gold),#d1a552 40%,var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
.mj-poem{margin:0;font-family:'Noto Nastaliq Urdu',serif;font-size:15px;line-height:2.6;color:var(--muted2)}
.mj-sep{display:flex;align-items:center;gap:12px;width:70%}
.mj-sep i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold2))}
.mj-sep i.rev{background:linear-gradient(90deg,var(--gold2),transparent)}
.mj-sep b{width:8px;height:8px;background:var(--gold2);animation:spinSlow 24s linear infinite;display:block}
.mj-date-box{border:1px solid var(--gold2);border-radius:14px;padding:5px;background:rgba(255,252,244,.6)}
.mj-date-box>div{border:1px solid rgba(163,118,46,.45);border-radius:10px;padding:12px 26px;display:flex;flex-direction:column;gap:4px}
.mj-date-box .d{font-size:17px;font-weight:700;color:#6d5427}
.mj-date-box .t{font-size:13px;color:var(--muted)}

.mj-section{padding:32px 28px 34px}
.mj-section-title{display:flex;align-items:center;gap:14px;justify-content:center}
.mj-section-title span{font-family:'Noto Nastaliq Urdu',serif;font-size:18px;color:var(--gold);line-height:2.2}
.mj-section-title i{width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--gold2))}
.mj-section-title i.rev{background:linear-gradient(90deg,var(--gold2),transparent)}

.mj-countdown-wrap{padding:30px 28px 36px;display:flex;flex-direction:column;gap:18px;align-items:center;background:var(--bg-alt1)}
.mj-countdown{display:flex;gap:12px;direction:ltr}
.mj-count-unit{display:flex;flex-direction:column;align-items:center;gap:8px}
.mj-count-ring{width:80px;height:80px;border-radius:50%;padding:4px}
.mj-count-ring>div{width:100%;height:100%;border-radius:50%;background:#fdfaf1;border:1px solid rgba(163,118,46,.35);display:flex;align-items:center;justify-content:center}
.mj-count-ring>div>div{font-size:23px;font-weight:700;color:var(--gold);line-height:1.1}
.mj-count-ring.sec>div>div{color:#c2540f}
.mj-count-label{display:flex;align-items:center;gap:6px}
.mj-count-label i{width:4px;height:4px;background:var(--gold2);transform:rotate(45deg);display:block}
.mj-count-label span{font-size:11px;color:var(--muted)}

.mj-invite{padding:34px 32px 38px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--bg-alt2)}
.mj-invite p{margin:0;font-size:14px;line-height:2.4;color:var(--ink-soft)}
.mj-families{font-family:'Noto Nastaliq Urdu',serif;font-size:14px;line-height:2.6;color:var(--muted2)}

.mj-program{padding:32px 32px 34px;display:flex;flex-direction:column;gap:20px;background:var(--bg-card)}
.mj-timeline{display:flex;flex-direction:column;gap:0}
.mj-tl-row{display:flex;gap:16px}
.mj-tl-dot-col{display:flex;flex-direction:column;align-items:center}
.mj-tl-dot{width:9px;height:9px;border-radius:50%;background:var(--gold3);box-shadow:0 0 10px rgba(255,150,60,.6)}
.mj-tl-line{width:1px;flex:1;background:#cbbc94}
.mj-tl-body{padding-bottom:20px}
.mj-tl-time{font-size:13px;color:var(--gold);font-weight:700}
.mj-tl-sub{font-size:12px;color:var(--muted);margin-top:3px}

.mj-gallery{padding:30px 28px 34px;display:flex;flex-direction:column;gap:18px;background:var(--bg-alt3)}
.mj-g-main{width:100%;height:220px;border:1px solid rgba(163,118,46,.4);border-radius:20px;padding:5px;background:var(--panel);overflow:hidden}
.mj-g-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mj-g-item{height:130px;border:1px solid rgba(163,118,46,.4);border-radius:18px;padding:5px;background:var(--panel);transition:transform .4s ease;overflow:hidden}
.mj-g-item:hover,.mj-g-main:hover{transform:translateY(-4px)}
.mj-img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
.mj-img-ph{width:100%;height:100%;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#a9987a;font-size:12px;background:repeating-linear-gradient(45deg,rgba(163,118,46,.06) 0 10px,transparent 10px 20px)}

.mj-venue{padding:32px 28px 36px;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;background:linear-gradient(180deg,var(--bg-card),#e6dec9)}
.mj-venue-name{font-size:17px;font-weight:700;color:#6d5427}
.mj-venue-addr{font-size:12.5px;color:var(--muted);line-height:2}
.mj-map{width:100%;border:1px solid rgba(163,118,46,.4);border-radius:18px;padding:5px;background:rgba(255,252,244,.6)}
.mj-map iframe{display:block;width:100%;height:240px;border:none;border-radius:14px;filter:sepia(.22) saturate(.85)}
.mj-map-link{display:inline-flex;align-items:center;gap:8px;background:rgba(176,138,62,.12);border:1px solid var(--gold2);color:#6d5427;text-decoration:none;font-weight:700;font-size:14px;padding:13px 30px;border-radius:999px}
.mj-map-link:hover{background:rgba(176,138,62,.24)}

.mj-guestbook{padding:32px 28px 34px;display:flex;flex-direction:column;gap:14px;background:var(--bg-alt1)}
.mj-gb-hint{font-size:13px;color:var(--muted);text-align:center}
.mj-gb-form{display:flex;flex-direction:column;gap:10px}
.mj-gb-form input,.mj-gb-form textarea{font-family:inherit;font-size:13px;color:var(--ink);background:rgba(255,252,244,.8);border:1px solid rgba(163,118,46,.4);border-radius:12px;padding:11px 14px;outline:none;resize:none}
.mj-btn{cursor:pointer;border:1px solid var(--gold2);background:rgba(176,138,62,.12);color:#6d5427;font-family:inherit;font-weight:700;font-size:13px;padding:11px 32px;border-radius:999px}
.mj-btn:hover{background:rgba(176,138,62,.24)}
.mj-btn.ghost{background:transparent;border-color:rgba(163,118,46,.5);color:var(--muted)}
.mj-btn.ghost:hover{border-color:var(--gold2);color:#6d5427}
.mj-gb-note{border:1px solid rgba(163,118,46,.3);background:rgba(255,252,244,.6);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.mj-gb-note b{font-size:12px;font-weight:700;color:var(--gold)}
.mj-gb-note span{font-size:13px;color:var(--ink-soft);line-height:2}

.mj-rsvp{padding:32px 28px 30px;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;background:radial-gradient(80% 100% at 50% 100%, rgba(255,140,50,.14), transparent 70%), var(--bg-card)}
.mj-rsvp-q{font-size:14px;color:var(--ink-soft)}
.mj-rsvp-btns{display:flex;gap:12px}
.mj-rsvp-msg{border:1px solid var(--gold2);background:rgba(176,138,62,.12);border-radius:14px;padding:14px 24px;font-size:13.5px;color:#6d5427;line-height:2}
.mj-closing{font-family:'Noto Nastaliq Urdu',serif;font-size:15px;line-height:2.6;color:var(--gold);padding-top:8px}
.mj-guest-banner{font-size:12.5px;color:var(--gold2);background:rgba(176,138,62,.1);border:1px dashed rgba(163,118,46,.4);border-radius:12px;padding:8px 16px}

.mj-bottom-glow{position:absolute;left:0;right:0;bottom:0;height:160px;z-index:2;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%, rgba(255,120,35,.12), transparent 70%);animation:flicker 3.4s ease-in-out infinite}
.mj-frame{position:absolute;inset:12px;border:1px solid rgba(163,118,46,.35);border-radius:24px;z-index:30;pointer-events:none}
.mj-corner{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:var(--gold2);z-index:30;pointer-events:none}
.mj-corner.tr{top:8px;right:8px}.mj-corner.tl{top:8px;left:8px}.mj-corner.br{bottom:8px;right:8px}.mj-corner.bl{bottom:8px;left:8px}

/* --- روکش پاکت آتشین --- */
.mj-cover-envelope{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;background:radial-gradient(circle at 50% 42%, #f0e9d8, #d5cbb2 80%);cursor:pointer;transition:opacity 1.1s ease .1s}
.mj-cover-envelope .title{font-family:'Noto Nastaliq Urdu',serif;font-size:22px;color:var(--gold);line-height:2.4}
.mj-env{position:relative;width:300px;height:206px;perspective:900px;animation:floaty 4s ease-in-out infinite}
.mj-env-body{position:absolute;inset:0;background:linear-gradient(#efe7d2,#e2d7bd);border:1px solid var(--gold2);border-radius:10px;box-shadow:0 30px 60px rgba(90,70,40,.4)}
.mj-env-letter{position:absolute;left:10px;right:10px;top:14px;height:70px;background:linear-gradient(#fdfaf1,#f1ead8);border-radius:6px}
.mj-env-flap{position:absolute;left:0;right:0;top:0;height:112px;background:linear-gradient(#e8dec6,#d9cdb0);border:1px solid var(--gold2);border-radius:10px 10px 4px 4px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform 1.15s cubic-bezier(.6,0,.3,1) .25s}
.mj-env-seal{position:absolute;left:50%;top:86px;width:76px;height:76px;margin-left:-38px;border-radius:50%;background:radial-gradient(circle at 36% 30%, #ff9a3d, #c2340f 58%, #7719048f);border:2px solid rgba(255,170,80,.5);display:flex;align-items:center;justify-content:center;animation:sealPulse 2.2s ease-in-out infinite;transition:transform .85s ease, opacity .85s ease}
.mj-env-seal span{font-family:'Noto Nastaliq Urdu',serif;font-size:17px;color:#ffe6bd;line-height:2}
.mj-cover-hint{font-size:12.5px;letter-spacing:3px;color:var(--muted)}

.mj-cover-envelope.opened{opacity:0;pointer-events:none}
.mj-cover-envelope.opened .mj-env-flap{transform:rotateX(-166deg)}
.mj-cover-envelope.opened .mj-env-seal{transform:scale(2.9);opacity:0}

/* --- روکش درهای طلایی --- */
.mj-cover-doors{position:absolute;inset:0;z-index:40;cursor:pointer;perspective:1200px}
.mj-seam{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;z-index:3;background:linear-gradient(rgba(255,140,40,0),rgba(255,150,50,.85),rgba(255,140,40,0));filter:blur(2px);animation:flicker 1.6s ease-in-out infinite;transition:opacity .6s ease}
.mj-door{position:absolute;top:0;bottom:0;width:50.4%;transition:transform 1.9s cubic-bezier(.72,0,.3,1) .2s}
.mj-door.l{left:0;background:linear-gradient(105deg,#e9e0ca,#f0e8d4 55%,#ded3b8);border-right:1px solid var(--gold2)}
.mj-door.r{right:0;background:linear-gradient(-105deg,#e9e0ca,#f0e8d4 55%,#ded3b8);border-left:1px solid var(--gold2)}
.mj-door-inset1{position:absolute;inset:16px;border:1px solid var(--gold2);border-radius:120px 120px 8px 8px}
.mj-door-inset2{position:absolute;inset:30px;border:1px solid rgba(138,100,32,.45);border-radius:100px 100px 6px 6px;background:repeating-linear-gradient(0deg,rgba(163,118,46,.06) 0 2px,transparent 2px 14px)}
.mj-door-handle{position:absolute;top:50%;width:15px;height:15px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e3b0,#8a6a35);box-shadow:0 0 12px rgba(255,170,80,.5)}
.mj-door.l .mj-door-handle{right:22px}
.mj-door.r .mj-door-handle{left:22px}
.mj-doors-cap-title{position:absolute;left:0;right:0;top:70px;z-index:4;text-align:center;transition:opacity .8s ease}
.mj-doors-cap-title div{font-family:'Noto Nastaliq Urdu',serif;font-size:22px;color:var(--gold);line-height:2.4}
.mj-doors-cap-hint{position:absolute;left:0;right:0;bottom:56px;z-index:4;display:flex;justify-content:center;transition:opacity .8s ease}
.mj-doors-cap-hint span{background:rgba(253,250,241,.85);border:1px solid rgba(163,118,46,.45);border-radius:999px;padding:10px 24px;font-size:12.5px;letter-spacing:3px;color:var(--muted2)}

.mj-cover-doors.opened .mj-door.l{transform:translateX(-104%)}
.mj-cover-doors.opened .mj-door.r{transform:translateX(104%)}
.mj-cover-doors.opened .mj-seam,.mj-cover-doors.opened .mj-doors-cap-title,.mj-cover-doors.opened .mj-doors-cap-hint{opacity:0;pointer-events:none}
.mj-cover-doors.opened{pointer-events:none}

.mj-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
.mj-music-btn{position:absolute;top:16px;left:16px;z-index:60;cursor:pointer;background:rgba(253,250,241,.75);border:1px solid rgba(163,118,46,.5);color:#6d5427;font-family:inherit;font-size:12px;padding:9px 16px;border-radius:999px;backdrop-filter:blur(6px)}
.mj-music-btn:hover{border-color:var(--gold2)}

.mj-switch-link{position:relative;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--gold-line);padding-bottom:2px}
.mj-switch-link:hover{color:var(--gold);border-color:var(--gold2)}