/* ============================================================
   دعوة عقد قران — أحمد وآلاء
   ------------------------------------------------------------
   نظام لوني بسلّم نغمي (لا لونٌ مسطّح): وردةٌ غبارية فوق ورقٍ
   شمبانيا، وحبرٌ نبيذي بدل الأسود. كل زوج نصّ/خلفية مُقاس على
   ‏WCAG AA فما فوق — والأرقام في التعليقات.
   الحركة: رسمُ الإطار بالخيط ثم دخولٌ متدرّج، ‏1.9s وتنتهي.
   ============================================================ */

:root{
  /* — ورق شمبانيا — */
  --sand-50:#FEFAF8;
  --sand-100:#FBF2EC;
  --sand-200:#F6E5DC;
  --sand-300:#EFD5CA;

  /* — سلّم الوردة — */
  --rose-50:#FDF2F5;
  --rose-100:#FAE2E9;
  --rose-200:#F2C8D5;
  --rose-300:#E5A3B7;
  --rose-400:#D67D97;
  --rose-500:#C25A78;   /* الأساسي — للعناصر الكبيرة والحدود */
  --rose-600:#A54460;   /* الأزرار — أبيض عليه 6.4:1 ✓ */
  --rose-700:#85334C;   /* الأسماء — على الورق 7.9:1 ✓ */
  --rose-900:#4A1D2C;

  /* — حبر — */
  --ink:#3E1727;        /* على sand-50 ‏13.8:1 ✓ */
  --ink-soft:#755060;   /* على sand-50 ‏6.1:1 ✓ */
  --ink-faint:#9C8189;

  /* — شمبانيا معدنية: للخيط الزخرفي وحده — */
  --gilt:#C9A489;
  --gilt-soft:#E4CDBB;

  /* — أسطح — */
  --card:#FFFDFC;
  --card-2:#FFF7F4;
  --hair:rgba(194,90,120,.18);
  --hair-strong:rgba(194,90,120,.30);
  --shadow-1:rgba(74,29,44,.07);
  --shadow-2:rgba(74,29,44,.13);

  /* — إيقاع 4px — */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:44px;

  --maxw:404px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  min-height:100dvh;
  background:var(--sand-100);
  color:var(--ink);
  font-family:"Amiri","Times New Roman",serif;
  font-size:16px;
  line-height:1.9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--s5) var(--s4) var(--s6);
  position:relative;
  overflow-x:hidden;
}

/* ══════════ الأجواء ══════════ */

.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(112% 72% at 16% -10%, #FFE6D9 0%, transparent 56%),
    radial-gradient(100% 66% at 88% 2%,   #F9D2DF 0%, transparent 54%),
    radial-gradient(124% 82% at 50% 110%, #F7DCE3 0%, transparent 58%),
    linear-gradient(166deg, var(--sand-50) 0%, var(--sand-200) 100%);
  animation:breathe 19s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }

/* حُبيبات ورقية — بدونها يبدو التصميم شاشةً لا ورقاً */
.sky::after{
  content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.orb{position:absolute;border-radius:50%;filter:blur(78px);opacity:.46}
.orb-a{width:340px;height:340px;background:#FFC7AE;top:-100px;inset-inline-start:-110px}
.orb-b{width:310px;height:310px;background:#F2A8C2;bottom:-108px;inset-inline-end:-90px}

/* ══════════ تساقط الورد ══════════
   طبقتان لكل بتلة: الخارجية تهبط وتنجرف، والداخلية ترفرف حول
   محورها. فصلُهما هو ما يجعل السقوط يبدو هواءً لا خطاً مستقيماً.
   ‏.p-far خلف البطاقة، و.p-near أمامها فيولد عمقٌ حقيقي.        */

.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.petals.p-far{z-index:0}
.petals.p-near{z-index:3}

.petal{
  position:absolute;top:-14vh;
  will-change:transform;
  animation:drift linear infinite;
}
.petal i{
  display:block;
  animation:flutter ease-in-out infinite alternate;
  transform-origin:50% 40%;
}
.petal svg{display:block;width:100%;height:auto}

@keyframes drift{
  0%   {transform:translate3d(0,0,0);            opacity:0}
  6%   {opacity:var(--o,.7)}
  100% {transform:translate3d(var(--dx,30px),128vh,0); opacity:0}
}
@keyframes flutter{
  from{transform:rotate(var(--r0,-18deg)) rotateY(0deg)   scaleX(1)}
  to  {transform:rotate(var(--r1,26deg))  rotateY(180deg) scaleX(.72)}
}

/* ══════════ البطاقة ══════════ */

.card{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);
  background:linear-gradient(172deg, var(--card) 0%, var(--card-2) 100%);
  border-radius:10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 3px var(--shadow-1),
    0 12px 28px var(--shadow-1),
    0 28px 64px var(--shadow-2);
  padding:var(--s7) var(--s5) var(--s6);
  text-align:center;
}

/* الإطار والأركان تُرسم بالخيط عند الدخول */
.frame{position:absolute;inset:0;width:100%;height:100%;color:var(--gilt);pointer-events:none}
.frame rect{stroke-dasharray:2200;stroke-dashoffset:2200;animation:draw 1.9s var(--ease-out) .1s forwards}
.frame rect:nth-child(2){animation-delay:.28s;opacity:.6}

.corner{position:absolute;width:42px;height:42px;color:var(--rose-400);opacity:0;pointer-events:none;
        animation:fadeIn .8s var(--ease) forwards}
.corner path,.corner circle{stroke-dasharray:120;stroke-dashoffset:120;animation:draw 1.2s var(--ease-out) forwards}
.tl{top:7px;inset-inline-start:7px;animation-delay:.85s}
.tr{top:7px;inset-inline-end:7px;transform:scaleX(-1);animation-delay:.95s}
.bl{bottom:7px;inset-inline-start:7px;transform:scaleY(-1);animation-delay:1.05s}
.br{bottom:7px;inset-inline-end:7px;transform:scale(-1,-1);animation-delay:1.15s}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:.72}}

.inner{position:relative;z-index:2}

/* ══════════ الختم (المونوغرام) ══════════ */

.seal{
  width:66px;height:66px;margin:0 auto var(--s4);
  display:grid;place-items:center;position:relative;
}
.seal svg{position:absolute;inset:0;width:100%;height:100%;color:var(--gilt)}
.seal circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1.5s var(--ease-out) .35s forwards}
.seal-letters{
  position:relative;z-index:1;
  font-family:"Aref Ruqaa",serif;font-size:23px;line-height:1;
  color:var(--rose-700);letter-spacing:.04em;
  display:flex;align-items:center;gap:7px;
}
.seal-dot{width:4px;height:4px;background:var(--gilt);transform:rotate(45deg)}

/* ══════════ نصوص ══════════ */

.bismillah{
  font-family:"Aref Ruqaa",serif;
  font-size:15px;color:var(--rose-700);
  letter-spacing:.015em;margin-bottom:var(--s5);
}

.verse{margin-bottom:var(--s1)}
.verse p{
  font-size:15px;line-height:2.2;color:var(--ink);
  text-wrap:balance;
}
.verse cite{
  display:block;margin-top:var(--s2);font-style:normal;
  font-family:"IBM Plex Sans Arabic",sans-serif;
  font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
}

.rule{margin:var(--s5) auto;width:196px;color:var(--rose-400)}
.rule svg{display:block;width:100%;height:auto}
.rule line,.rule path,.rule circle{stroke-dasharray:230;stroke-dashoffset:230;animation:draw 1.4s var(--ease-out) .6s forwards}

/* اسم الضيف */
.guest{
  margin:0 auto var(--s5);padding:var(--s4) var(--s3);
  border-radius:6px;
  border:1px solid var(--hair);
  background:linear-gradient(180deg, var(--rose-50), rgba(255,255,255,.4));
  box-shadow:0 1px 2px var(--shadow-1);
}
.guest-label{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  font-size:10.5px;font-weight:500;letter-spacing:.2em;
  color:var(--rose-600);margin-bottom:var(--s1);
}
.guest-name{
  font-family:"Aref Ruqaa",serif;
  font-size:clamp(21px,6.3vw,26px);line-height:1.8;
  color:var(--rose-700);text-wrap:balance;
}

.intro{font-size:14.5px;color:var(--ink-soft);margin-bottom:2px}
.occasion{
  font-family:"Aref Ruqaa",serif;
  font-size:18px;color:var(--ink);margin-bottom:var(--s5);
}

/* ══════════ الاسمان — اللحظة المميّزة ══════════ */

.couple{margin-bottom:var(--s6)}
/* الاسم يُكتب بالورد: كشفٌ متدرّج من اليمين لليسار.
   ولا يُقسَّم إلى حروف أبداً — تقسيم العربية يكسر اتّصال الخطّ. */
.ink{display:inline-block;position:relative;max-width:100%}

.name{
  font-family:"Aref Ruqaa",serif;font-weight:700;
  font-size:clamp(28px,8.8vw,37px);line-height:1.55;
  color:var(--rose-700);
  text-wrap:balance;
}
/* الإخفاء يضعه JS لا CSS — فلو تعطّل JS ظهر الاسم كاملاً. */
.ink.writing .name{
  clip-path:inset(-12% 0 -12% 100%);
  animation:write var(--dur,2.4s) var(--ease-out) var(--start,0s) forwards;
}
@keyframes write{ to{clip-path:inset(-12% 0 -12% 0)} }

/* الوردة التي تسير على طرف الكتابة */
.pen{
  position:absolute;top:50%;left:100%;
  width:19px;height:22px;margin-inline-start:-10px;
  opacity:0;pointer-events:none;
  transform:translateY(-52%);
}
.ink.writing .pen{animation:penrun var(--dur,2.4s) var(--ease-out) var(--start,0s) forwards}
.pen svg{display:block;width:100%;height:auto;filter:drop-shadow(0 1px 3px rgba(165,68,96,.3))}
@keyframes penrun{
  0%  {left:100%;opacity:0;transform:translateY(-52%) rotate(-14deg) scale(.7)}
  9%  {opacity:1;transform:translateY(-52%) rotate(-6deg) scale(1)}
  88% {opacity:1}
  100%{left:0%;opacity:0;transform:translateY(-52%) rotate(10deg) scale(.72)}
}

/* ورداتٌ صغيرة تتفتّح في أثر الكتابة */
.bloom{
  position:absolute;bottom:-2px;
  width:11px;height:13px;
  opacity:0;transform:scale(.2) rotate(-30deg);pointer-events:none;
}
.ink.writing .bloom{animation:bloom .9s var(--ease-out) var(--at,0s) forwards}
.bloom svg{display:block;width:100%;height:auto}
@keyframes bloom{
  0%  {opacity:0;transform:scale(.2) rotate(-30deg)}
  55% {opacity:.95;transform:scale(1.14) rotate(6deg)}
  100%{opacity:.8;transform:scale(1) rotate(0)}
}

.amp{margin:var(--s2) auto;width:88px;color:var(--rose-400)}
.amp svg{display:block;width:100%;height:auto}
.amp path,.amp line{stroke-dasharray:140;stroke-dashoffset:140;animation:draw 1.3s var(--ease-out) 1.05s forwards}

/* ══════════ التفاصيل ══════════ */

.details{
  display:grid;gap:var(--s4);
  margin-bottom:var(--s5);padding:var(--s5) var(--s4);
  border:1px solid var(--hair);border-radius:8px;
  background:rgba(255,255,255,.72);
  box-shadow:0 1px 2px var(--shadow-1);
}
.detail{display:flex;flex-direction:column;gap:2px}
.detail-key{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  font-size:10px;font-weight:500;letter-spacing:.22em;color:var(--rose-600);
}
.detail-val{font-size:17px;color:var(--ink);line-height:1.65}
.detail-sub{font-size:13.5px;color:var(--ink-soft);line-height:1.7}

/* ══════════ العدّاد ══════════ */

.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);
  margin-bottom:var(--s5);
}
.unit{
  padding:var(--s3) 2px var(--s2);border-radius:8px;
  border:1px solid var(--hair);
  background:#fff;
  box-shadow:0 1px 3px var(--shadow-1);
}
.unit b{
  display:block;height:28px;overflow:hidden;
  font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;
  font-variant-numeric:tabular-nums;
  font-size:22px;color:var(--rose-700);line-height:28px;
}
/* الرقم يتدحرج عند تغيّره — تفصيلٌ يُشعر أن الصفحة حيّة */
.unit b.roll{animation:roll .42s var(--ease)}
@keyframes roll{
  0%  {transform:translateY(-100%);opacity:0}
  55% {opacity:1}
  100%{transform:translateY(0);opacity:1}
}
.unit span{
  display:block;margin-top:2px;
  font-family:"IBM Plex Sans Arabic",sans-serif;
  font-size:10px;letter-spacing:.06em;color:var(--ink-soft);
}
.arrived{
  font-family:"Aref Ruqaa",serif;font-size:19px;
  color:var(--rose-700);margin-bottom:var(--s5);
}

/* ══════════ أزرار ══════════ */

.actions{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.btn{
  position:relative;overflow:hidden;
  display:block;padding:13px var(--s4);
  font-family:"IBM Plex Sans Arabic",sans-serif;font-size:14px;font-weight:500;
  text-decoration:none;text-align:center;cursor:pointer;
  border-radius:999px;border:1px solid var(--rose-600);
  background:var(--rose-600);color:#fff;          /* 6.4:1 ✓ */
  box-shadow:0 2px 6px rgba(165,68,96,.22);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s var(--ease), border-color .18s var(--ease);
}
/* بريق يعبر الزرّ عند اللمس */
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-130%);
}
.btn:hover::after{transform:translateX(130%);transition:transform .62s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(165,68,96,.3)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(165,68,96,.24)}
.btn.ghost{
  background:#fff;color:var(--rose-700);border-color:var(--rose-300);
  box-shadow:0 1px 3px var(--shadow-1);
}
.btn.ghost:hover{background:var(--rose-50);border-color:var(--rose-500);box-shadow:0 8px 18px var(--shadow-1)}
.btn:focus-visible{outline:2px solid var(--rose-700);outline-offset:3px}

.closing{
  font-size:15px;color:var(--ink-soft);
  padding-top:var(--s4);border-top:1px solid var(--hair);
}

/* ══════════ تنبيه ══════════ */

.hint{
  position:relative;z-index:1;
  margin-top:var(--s4);max-width:var(--maxw);
  font-family:"IBM Plex Sans Arabic",sans-serif;font-size:12.5px;line-height:1.8;
  color:#7C3A2C;background:#FFEEE7;
  border:1px solid #EEB79F;border-radius:8px;
  padding:var(--s3) var(--s4);text-align:center;
}
.hint code{background:rgba(124,58,44,.1);padding:1px 5px;border-radius:3px;direction:ltr;display:inline-block}

/* ══════════ الدخول المتدرّج ══════════ */

.reveal{animation:rise .8s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes rise{
  from{opacity:0;transform:translateY(11px)}
  to{opacity:1;transform:none}
}

/* ══════════ احترام تقليل الحركة ══════════ */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.sky::before,.unit b.roll{animation:none}
  /* الاسم يظهر كاملاً بلا كتابة، والوردة السائرة تُحذف */
  .ink.writing .name{clip-path:none;animation:none}
  .pen{display:none}
  .bloom{animation:none;opacity:.8;transform:none}
  .petals{display:none}
  .frame rect,.corner path,.corner circle,.rule line,.rule path,.rule circle,
  .amp path,.amp line,.seal circle{stroke-dashoffset:0;animation:none}
  .corner{opacity:.72;animation:none}
  .btn,.btn::after{transition:none}
}

/* ══════════ شاشات أوسع ══════════ */

@media (min-width:480px){
  .card{padding:52px var(--s6) var(--s7)}
  .actions{grid-template-columns:1fr 1fr}
}

/* ══════════ الطباعة ══════════ */

@media print{
  body{background:#fff;padding:0}
  .sky,.petals,.actions,.hint{display:none !important}
  .card{box-shadow:none;border:1px solid #DDD;max-width:100%}
  .reveal{animation:none;opacity:1;transform:none}
  .frame rect,.corner path,.corner circle,.rule line,.rule path,.rule circle,
  .amp path,.amp line,.seal circle{stroke-dashoffset:0;animation:none}
  .corner{opacity:.7;animation:none}
  .ink.writing .name{clip-path:none;animation:none}
  .pen,.bloom{display:none}
}