/* =========================================================
   دعوة زفاف — ذهبي كلاسيكي
   ========================================================= */

:root{
  --ivory:#fdfaf3;
  --cream:#f6efe0;
  --cream-2:#efe4cd;
  --gold:#c9a227;
  --gold-lt:#e6cf86;
  --gold-dk:#8a6d1f;
  --ink:#3a2f1b;
  --ink-soft:#6d604a;
  --rose:#b76e79;
  --seal:#8c2f39;

  --shadow:0 24px 60px -30px rgba(80,60,20,.55);
  --serif:"Amiri","Times New Roman",serif;
  --display:"Aref Ruqaa","Amiri",serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.9;
  background:
    radial-gradient(1200px 700px at 50% -15%, #fffdf7, transparent 65%),
    linear-gradient(170deg,var(--cream),var(--cream-2));
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-color:var(--cream);
}

/* ورق بحبيبات خفيفة */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.noscript{
  margin:0;padding:14px;text-align:center;
  background:var(--gold);color:#fff;font-size:15px;
}

:focus-visible{outline:2px solid var(--gold-dk);outline-offset:3px;border-radius:4px}

/* ===== البتلات ===== */
#petals{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s ease;
}
#petals.on{opacity:1}

/* =========================================================
   1) الظرف
   ========================================================= */
.envelope-stage{
  position:fixed;inset:0;z-index:30;
  display:grid;place-items:center;
  padding:24px;
  background:
    radial-gradient(700px 500px at 50% 40%, #fffaf0, transparent 70%),
    linear-gradient(170deg,var(--cream),var(--cream-2));
  transition:opacity .9s ease, visibility .9s;
}
/* من غير جافاسكربت الدعوة بتظهر على طول */
html:not(.js) .envelope-stage{display:none}

.envelope-stage.gone{opacity:0;visibility:hidden}

.stage-inner{text-align:center}

.stage-hint,.stage-cta{
  color:var(--gold-dk);
  letter-spacing:.16em;
  font-size:13px;
  margin:0;
}
.stage-hint{margin-bottom:34px;animation:fadeUp .9s .2s both}
.stage-cta{margin-top:38px;animation:fadeUp .9s 1.1s both, pulse 2.6s 2s infinite}

/* الظرف نفسه */
.envelope{
  position:relative;
  width:min(340px,82vw);
  aspect-ratio:3/2;
  margin-inline:auto;
  border:0;padding:0;background:none;
  cursor:pointer;
  perspective:1100px;
  animation:fadeUp 1s .5s both;
}

.env-back,.env-body,.env-flap,.env-letter{position:absolute;inset:0}

.env-back{
  border-radius:8px;
  background:linear-gradient(160deg,#f3e6c6,#e4d0a1);
  box-shadow:var(--shadow);
}

/* الجسم الأمامي بمثلثات جانبية */
.env-body{
  z-index:3;
  border-radius:8px;
  background:linear-gradient(160deg,#f7ecd3,#ecdcb4);
  clip-path:polygon(0 100%,0 8%,50% 62%,100% 8%,100% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.env-body::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top right,transparent 49.6%,rgba(180,150,80,.28) 49.8%,transparent 50.2%),
    linear-gradient(to top left ,transparent 49.6%,rgba(180,150,80,.28) 49.8%,transparent 50.2%);
}

/* اللسان اللي بيتفتح */
.env-flap{
  z-index:4;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.6,-0.25,.3,1.2);
  backface-visibility:hidden;
}
.env-flap::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(175deg,#f0e0bb,#e0ca97);
  clip-path:polygon(0 8%,50% 64%,100% 8%);
  filter:drop-shadow(0 3px 5px rgba(120,95,40,.22));
}

/* الجواب اللي بيطلع */
.env-letter{
  z-index:2;
  inset:8% 8% auto 8%;
  height:86%;
  border-radius:5px;
  background:linear-gradient(180deg,#fffdf6,#f8f1e0);
  border:1px solid rgba(190,160,90,.4);
  box-shadow:0 8px 18px -10px rgba(90,70,25,.5);
  transform:translateY(0);
  transition:transform .95s .35s cubic-bezier(.2,.8,.3,1);
  display:grid;place-items:center;
}
.env-letter::after{
  content:"💍";
  font-size:30px;
  opacity:.55;
}

.env-seal{
  position:absolute;z-index:6;
  top:52%;left:50%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 8px rgba(90,25,35,.4));
  transition:opacity .35s ease, transform .5s ease;
  display:grid;place-items:center;
}

.envelope:hover .env-flap{transform:rotateX(-12deg)}
.envelope:hover .env-seal{transform:translate(-50%,-50%) scale(1.05)}

/* حالة الفتح */
.envelope.open{cursor:default}
.envelope.open .env-flap{transform:rotateX(-172deg);z-index:1}
.envelope.open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-25deg)}
.envelope.open .env-letter{transform:translateY(-64%)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* =========================================================
   2) الكارت
   ========================================================= */
.card{
  position:relative;z-index:2;
  width:min(680px,100%);
  margin:clamp(16px,4vw,52px) auto;
  padding-inline:clamp(10px,3vw,20px);
  opacity:0;
  transition:opacity 1s ease;
}
.card.shown{opacity:1}
html:not(.js) .card{opacity:1}

.frame{
  position:relative;
  padding:clamp(30px,6vw,60px) clamp(20px,5vw,52px);
  background:linear-gradient(180deg,var(--ivory),#fffdf8);
  border:1px solid rgba(201,162,39,.45);
  border-radius:6px;
  box-shadow:var(--shadow);
}
/* إطار ذهبي داخلي رفيع */
.frame::before{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(201,162,39,.32);
  border-radius:3px;pointer-events:none;
}

.corner{
  position:absolute;width:clamp(52px,9vw,74px);height:auto;
  color:var(--gold);opacity:.7;pointer-events:none;
}
/* الرسمة الأصلية للركن العلوي الأيسر، والباقي انعكاسات ليها */
.c-tl{top:5px;left:5px}
.c-tr{top:5px;right:5px;transform:scaleX(-1)}
.c-bl{bottom:5px;left:5px;transform:scaleY(-1)}
.c-br{bottom:5px;right:5px;transform:scale(-1,-1)}

/* ===== الافتتاحية ===== */
.intro{text-align:center}

.basmala{
  font-family:var(--display);
  font-size:clamp(17px,3.4vw,21px);
  color:var(--gold-dk);
  margin:0 0 26px;
}

.verse{
  margin:0 0 6px;padding:0;
  font-size:clamp(15px,2.6vw,17px);
  color:var(--ink-soft);
}
.verse p{margin:0 0 8px;line-height:2.1}
.verse cite{font-style:normal;font-size:12.5px;color:var(--gold-dk);letter-spacing:.05em}

.divider{
  display:block;width:min(300px,88%);height:auto;
  margin:26px auto;color:var(--gold);
}

.pre{
  margin:0 0 8px;
  font-size:clamp(14px,2.5vw,16px);
  color:var(--ink-soft);
  letter-spacing:.02em;
}

.names{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:clamp(10px,3vw,26px);
  margin:14px 0 10px;
}
.name{
  font-family:var(--display);
  font-size:clamp(32px,8vw,54px);
  line-height:1.3;
  background:linear-gradient(100deg,var(--gold-dk),var(--gold),var(--gold-lt),var(--gold),var(--gold-dk));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{from{background-position:220% 0}to{background-position:-220% 0}}

.amp{
  font-family:var(--display);
  font-size:clamp(24px,5vw,34px);
  color:var(--rose);
  opacity:.85;
}

.families{
  margin:0;
  font-size:clamp(13px,2.2vw,14.5px);
  color:var(--ink-soft);
}
.families .sep{margin-inline:10px;color:var(--gold)}

/* ===== العناوين ===== */
.sect-title{
  font-family:var(--display);
  font-size:clamp(19px,3.6vw,24px);
  color:var(--gold-dk);
  text-align:center;
  margin:0 0 6px;
}
.sect-sub{
  text-align:center;margin:0 0 22px;
  font-size:14px;color:var(--ink-soft);
}

/* ===== العد التنازلي ===== */
.countdown{margin:34px 0 10px}
.cd-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,2vw,12px);
  margin-top:18px;
}
.cd-unit{
  padding:clamp(10px,2.5vw,16px) 4px;
  text-align:center;
  border:1px solid rgba(201,162,39,.35);
  border-radius:5px;
  background:linear-gradient(180deg,#fffdf7,var(--cream));
}
.cd-unit b{
  display:block;
  font-family:var(--display);
  font-size:clamp(21px,5.5vw,30px);
  line-height:1.4;
  color:var(--gold-dk);
  font-variant-numeric:tabular-nums;
}
.cd-unit span{font-size:clamp(11px,2.2vw,12.5px);color:var(--ink-soft)}
.cd-done{
  text-align:center;margin:18px 0 0;
  font-family:var(--display);
  font-size:clamp(18px,4vw,24px);
  color:var(--rose);
}

/* ===== التفاصيل ===== */
.details{margin:38px 0 10px}
.detail{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 4px;
  border-bottom:1px dashed rgba(201,162,39,.32);
}
.detail:last-child{border-bottom:0}
.d-ico{
  flex:none;width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--gold-dk);
  background:linear-gradient(160deg,#fdf4dd,#f1e2bb);
  border:1px solid rgba(201,162,39,.4);
}
.d-ico svg{width:21px;height:21px;display:block}
.detail h3{
  margin:0 0 2px;
  font-family:var(--display);
  font-size:16px;color:var(--gold-dk);font-weight:400;
}
.detail p{margin:0;font-size:15px}
.detail .muted{color:var(--ink-soft);font-size:13.5px}

/* ===== الأزرار ===== */
.btn{
  display:inline-block;
  padding:12px 26px;
  border:0;border-radius:3px;
  font-family:var(--serif);font-size:15px;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-sm{padding:8px 18px;font-size:13.5px;margin-top:10px}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-dk),var(--gold),var(--gold-dk));
  color:#fffdf5;
  letter-spacing:.04em;
  box-shadow:0 10px 22px -14px rgba(138,109,31,.9);
}
.btn-gold:hover{box-shadow:0 14px 26px -14px rgba(138,109,31,1)}
.btn-gold[disabled]{opacity:.6;cursor:default;transform:none}

.btn-ghost{
  background:transparent;color:var(--gold-dk);
  border:1px solid rgba(201,162,39,.6);
}
.btn-ghost:hover{background:rgba(201,162,39,.1)}

/* ===== نموذج التأكيد ===== */
.rsvp{margin:34px 0 10px}
.rsvp-form{max-width:440px;margin-inline:auto}

.field{margin-bottom:16px;border:0;padding:0;min-width:0}
.field label,.field legend{
  display:block;margin-bottom:7px;padding:0;
  font-size:13.5px;color:var(--gold-dk);letter-spacing:.03em;
}
.field .opt{color:var(--ink-soft);font-size:12.5px}

input[type="text"],input[type="number"],textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:3px;
  background:#fffdf8;
  color:var(--ink);
  font-family:var(--serif);font-size:15px;
}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:#b3a68c}
input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}

.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{
  flex:1 1 160px;
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:3px;
  background:#fffdf8;
  font-size:14.5px;cursor:pointer;
}
.choice input{accent-color:var(--gold-dk);flex:none;margin:0}
.choice:has(input:checked){
  background:rgba(201,162,39,.13);
  border-color:var(--gold);
}

.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}

.msg{
  min-height:24px;margin:12px 0 0;
  text-align:center;font-size:14.5px;
}
.msg.ok{color:#3f7d4e}
.msg.err{color:#a6402c}
.msg.info{color:var(--gold-dk)}

/* ===== الخاتمة ===== */
.outro{text-align:center}
.closing{
  font-family:var(--display);
  font-size:clamp(19px,4.2vw,26px);
  color:var(--gold-dk);
  margin:0 0 20px;
}
.share{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.share .btn-sm{margin-top:0}

/* ===== زرار الموسيقى ===== */
.music-btn{
  position:fixed;z-index:20;
  inset-block-end:18px;inset-inline-end:18px;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.5);
  background:rgba(255,253,247,.92);
  color:var(--gold-dk);
  font-size:19px;cursor:pointer;
  box-shadow:0 8px 20px -12px rgba(90,70,25,.8);
  backdrop-filter:blur(4px);
}
.music-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--gold-dk),var(--gold));
  color:#fffdf5;border-color:transparent;
}

/* ===== ظهور تدريجي ===== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.shown{opacity:1;transform:none}
@media print{
  .js .reveal{opacity:1;transform:none}
  .envelope-stage,.music-btn,#petals,.actions,.share{display:none}
  body{background:#fff}
  .frame{box-shadow:none}
}

/* ===== تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{opacity:1;transform:none}
}

/* ===== شاشات صغيرة ===== */
@media (max-width:420px){
  .cd-grid{gap:5px}
  .detail{gap:12px}
  .d-ico{width:38px;height:38px}
  .d-ico svg{width:18px;height:18px}
}