/* ===== دعوة حفل حناء — ستايل ===== */
:root{
  --cream:#FBF6EA;
  --cream-2:#F2E7D2;
  --paper:#FDFAF2;
  --gold:#C9A227;
  --gold-d:#8E6B16;
  --gold-l:#E9D49A;
  --henna:#7A4A2B;
  --green:#556B46;
  --ink:#4A3A24;
  --ink-2:#6B573B;
  --bg:#140D05;
  --r:18px;
  --maxw:560px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Tajawal",system-ui,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img,svg{max-width:100%}
button{font:inherit;color:inherit}

/* ================= البوابة ================= */
.gate{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 80% at 50% 10%, #3a2a10 0%, #1d1307 45%, #0f0a03 100%);
  overflow:hidden;
  touch-action:manipulation;cursor:pointer;
  padding:24px;
}
.gate::after{ /* وهج ناعم */
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(closest-side, rgba(201,162,39,.16), transparent 70%);
  animation:breathe 6s ease-in-out infinite;pointer-events:none;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}

.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.gate-inner{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:22px}

.seal{position:relative;width:min(58vw,230px);aspect-ratio:1;display:grid;place-items:center}
.seal-ring{position:absolute;inset:0;width:100%;height:100%}
.ring{transform-origin:50% 50%}
.r1{animation:spin 26s linear infinite}
.r2{animation:spin 18s linear infinite reverse}
.r3{animation:pulse 3.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

.seal-core{width:44%;filter:drop-shadow(0 0 14px rgba(233,212,154,.45))}
.henna-leaf{animation:float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.tap-ripple{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(233,212,154,.8);opacity:0;pointer-events:none;
}
.tap-ripple.go{animation:ripple .7s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}

.seal.hit{animation:hit .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes hit{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}

.gate-title{
  margin:0;font-family:"Aref Ruqaa",serif;font-size:clamp(28px,8vw,42px);
  background:linear-gradient(180deg,#F7E6B4,#C9A227 60%,#9A7518);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.5px;
}
.gate-hint{margin:0;color:#D8C79A;font-size:clamp(14px,3.8vw,17px);font-weight:300;animation:blink 2.4s ease-in-out infinite}
.gate-hint b{color:#F3E2B0;font-weight:700;margin:0 .22em}
@keyframes blink{0%,100%{opacity:.55}50%{opacity:1}}

.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, #fff6dd, #e9d49a 35%, transparent 72%);opacity:0;pointer-events:none;z-index:3}
.flash.go{animation:flash .9s ease-out forwards}
@keyframes flash{0%{opacity:0;transform:scale(.4)}25%{opacity:.95}100%{opacity:0;transform:scale(2.4)}}

.curtain{position:absolute;top:0;bottom:0;width:51%;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,#1d1307,#2c1e0b 60%,#3a2a10);
  box-shadow:0 0 60px rgba(0,0,0,.6) inset;
  transition:transform .75s cubic-bezier(.76,0,.24,1)}
.curtain-r{right:0;transform:translateX(101%)}
.curtain-l{left:0;transform:translateX(-101%)}
/* تنغلق الستارة أولاً */
.gate.closing .curtain-r,.gate.closing .curtain-l{transform:translateX(0)}
/* ثم تنفتح كاشفة الدعوة */
.gate.open .curtain-r{transform:translateX(101%)}
.gate.open .curtain-l{transform:translateX(-101%)}
.gate.closing .gate-inner{opacity:0;transform:scale(.88);transition:.5s ease}
.gate.gone{opacity:0;visibility:hidden;transition:opacity .5s ease .5s,visibility 0s .9s}

/* ================= الدعوة ================= */
.card{
  min-height:100dvh;
  padding:max(16px,env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;
  background:
    radial-gradient(80% 50% at 50% 0%, #2a1d0c 0%, #140D05 60%),
    var(--bg);
}

.paper{
  position:relative;width:100%;max-width:var(--maxw);
  background:
    radial-gradient(120% 60% at 50% 0%, #FFFDF6 0%, var(--paper) 40%, var(--cream) 100%);
  border-radius:var(--r);
  padding:46px 22px 34px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.25);
  overflow:hidden;
}
.paper::before{ /* ملمس ورقي خفيف */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(122,74,43,.045) 1px, transparent 1px);
  background-size:7px 7px;
}
.frame{
  position:absolute;inset:12px;border:1px solid rgba(201,162,39,.55);border-radius:calc(var(--r) - 6px);
  pointer-events:none;
}
.frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,39,.28);border-radius:calc(var(--r) - 10px)}

/* زوايا نباتية */
.corner{position:absolute;width:86px;height:86px;pointer-events:none;opacity:.85;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 96C4 52 30 18 72 6'/%3E%3Cpath d='M20 90c6-14 2-24-6-30M34 80c10-10 10-22 4-30M50 66c12-6 16-18 14-28M66 50c12-2 20-12 22-22'/%3E%3C/g%3E%3Cg fill='%23C9A227' opacity='.8'%3E%3Ccircle cx='16' cy='84' r='2.4'/%3E%3Ccircle cx='32' cy='70' r='2'/%3E%3Ccircle cx='52' cy='52' r='2.2'/%3E%3Ccircle cx='72' cy='34' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
}
.c-tl{top:6px;left:6px;transform:rotate(90deg)}
.c-tr{top:6px;right:6px;transform:rotate(180deg)}
.c-bl{bottom:6px;left:6px;transform:rotate(0deg)}
.c-br{bottom:6px;right:6px;transform:rotate(270deg)}

/* ظهور تدريجي */
.rv{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

.paper header{text-align:center;display:grid;justify-items:center;gap:6px;margin-bottom:14px}
.orn{width:min(62%,220px);color:var(--gold);opacity:.85}
.orn.flip{transform:rotate(180deg)}
.headline{
  margin:2px 0;font-family:"Aref Ruqaa",serif;font-weight:700;
  font-size:clamp(34px,10vw,52px);line-height:1.25;
  background:linear-gradient(180deg,#E3C169,#B8912F 55%,#8E6B16);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}

.intro{
  text-align:center;margin:14px 0;font-weight:300;
  font-size:clamp(15px,4.2vw,18px);line-height:2.05;color:var(--ink-2);
}

.names{text-align:center;display:grid;justify-items:center;gap:2px;margin:10px 0 6px}
.name{
  margin:0;font-family:"Aref Ruqaa",serif;font-weight:700;
  font-size:clamp(38px,12vw,60px);line-height:1.4;
  background:linear-gradient(180deg,#D9B65C,#A9821F 60%,#7E5F12);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.title{font-size:clamp(14px,3.8vw,16px);color:var(--henna);font-weight:400;margin-top:-6px}
.amp{position:relative;display:grid;place-items:center;width:62px;height:62px;color:rgba(201,162,39,.6);margin:4px 0}
.amp svg{position:absolute;inset:0;width:100%;height:100%}
.amp b{font-family:"Aref Ruqaa",serif;font-size:30px;color:var(--gold-d)}

.sep{display:flex;align-items:center;gap:10px;color:var(--gold);justify-content:center;margin:18px 0;opacity:.9}
.sep::before,.sep::after{content:"";height:1px;flex:1;max-width:110px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.7),transparent)}
.sep span{font-size:13px}

/* التفاصيل */
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0;padding:0}
.facts li{
  text-align:center;display:grid;justify-items:center;gap:3px;
  padding:14px 6px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(242,231,210,.5));
  border:1px solid rgba(201,162,39,.3);
}
.facts .ico{width:24px;height:24px;fill:none;stroke:var(--gold-d);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.facts .lbl{font-size:12px;color:var(--ink-2);font-weight:300}
.facts .val{font-size:clamp(14px,3.9vw,16px);font-weight:700;color:var(--henna);line-height:1.6}
.facts .sub{font-size:11.5px;color:var(--ink-2);opacity:.85}

/* العدّاد */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:20px 0 6px}
.countdown>div{
  display:grid;justify-items:center;gap:2px;padding:10px 4px;border-radius:12px;
  background:linear-gradient(180deg,#6E5416,#4A380D);
  box-shadow:0 4px 14px rgba(74,56,13,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.countdown b{font-size:clamp(18px,5.6vw,24px);color:#F6E6B6;font-variant-numeric:tabular-nums;line-height:1.2}
.countdown span{font-size:11px;color:#D9C491;font-weight:300}

/* الموقع */
.loc{margin-top:22px}
.loc h3{
  margin:0 0 10px;text-align:center;font-family:"Aref Ruqaa",serif;font-weight:400;
  font-size:clamp(20px,5.4vw,24px);color:var(--gold-d);
}
.map{
  position:relative;width:100%;aspect-ratio:16/11;border-radius:14px;overflow:hidden;
  border:1px solid rgba(201,162,39,.4);
  background:
    linear-gradient(135deg,#EFE6D2,#E3D6BB),
    var(--cream-2);
}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-load{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;align-content:center;gap:8px;
  border:0;background:transparent;cursor:pointer;color:var(--henna);font-size:15px;font-weight:500;
}
.map-load svg{width:34px;height:34px;fill:none;stroke:var(--gold-d);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:float 3s ease-in-out infinite}

.loc-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:13px 10px;border-radius:12px;border:1px solid transparent;
  font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn.gold{background:linear-gradient(180deg,#C9A227,#9A7518);color:#FFF8E4;box-shadow:0 6px 16px rgba(154,117,24,.35)}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--henna);border-color:rgba(201,162,39,.5)}
.btn.sm{padding:11px 18px;font-size:13.5px}

.closing{
  text-align:center;margin:6px 0 0;font-family:"Aref Ruqaa",serif;
  font-size:clamp(19px,5.2vw,23px);color:var(--henna);
}
.paper footer{display:grid;justify-items:center;margin-top:18px}

/* زر الموسيقى */
.music{
  position:fixed;z-index:30;
  inset-inline-start:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(201,162,39,.5);
  background:linear-gradient(180deg,rgba(45,32,12,.92),rgba(26,18,6,.92));
  backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.music:active{transform:scale(.94)}
.bars{display:flex;align-items:flex-end;gap:2.5px;height:17px}
.bars i{width:3px;background:linear-gradient(180deg,#F3E2B0,#C9A227);border-radius:2px;height:35%;
  animation:eq .9s ease-in-out infinite alternate}
.bars i:nth-child(2){animation-delay:.15s}
.bars i:nth-child(3){animation-delay:.3s}
.bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:100%}}
.music .muted-ico{display:none;width:22px;height:22px;fill:none;stroke:#D8C79A;stroke-width:1.6;stroke-linecap:round}
.music.off .bars{display:none}
.music.off .muted-ico{display:block}

/* تلميح النزول للأسفل */
.scroll-hint{
  position:fixed;z-index:25;left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:7px;pointer-events:none;
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(180deg,rgba(45,32,12,.82),rgba(26,18,6,.88));
  border:1px solid rgba(201,162,39,.4);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0;animation:hintIn .7s ease 2.2s forwards;
  transition:opacity .45s ease, transform .45s ease;
}
.scroll-hint.hide{opacity:0!important;transform:translate(-50%,16px)}
@keyframes hintIn{to{opacity:1}}
.sh-txt{font-size:12.5px;color:#E7D6A6;font-weight:300;letter-spacing:.2px;white-space:nowrap}
.sh-chev{width:17px;height:17px;flex:none;fill:none;stroke:#E9D49A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  animation:chev 1.6s ease-in-out infinite}
@keyframes chev{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(3px);opacity:1}}

/* توست */
.toast{
  position:fixed;z-index:60;left:50%;transform:translate(-50%,24px);
  bottom:calc(22px + env(safe-area-inset-bottom));
  background:rgba(26,18,6,.95);color:#F3E2B0;border:1px solid rgba(201,162,39,.45);
  padding:11px 18px;border-radius:999px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.3s ease;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:430px){ .paper{padding:52px 30px 38px} }

/* ================= حياة وحركة ================= */

/* --- أجواء: ذرات ذهبية وأوراق متساقطة --- */
.ambience{position:fixed;inset:0;z-index:18;pointer-events:none;overflow:hidden;contain:strict}
.bokeh{
  position:absolute;left:var(--x);top:100%;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(216,174,54,.9),rgba(184,145,47,.45) 55%,transparent 72%);
  box-shadow:0 0 10px rgba(201,162,39,.45);
  opacity:0;will-change:transform,opacity;
  animation:floatUp var(--t) linear var(--dl) infinite;
}
@keyframes floatUp{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  10%{opacity:.8}
  50%{transform:translate3d(var(--dx),-55vh,0) scale(1.05);opacity:.65}
  85%{opacity:.4}
  100%{transform:translate3d(calc(var(--dx) * -.5),-118vh,0) scale(.8);opacity:0}
}

.petal{
  position:absolute;left:var(--x);top:-12%;width:var(--s);height:calc(var(--s) * 1.5);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'%3E%3Cpath d='M20 2c11 11 17 22 17 31 0 13-8 22-17 25-9-3-17-12-17-25C3 24 9 13 20 2z' fill='%23C9A227' fill-opacity='.42' stroke='%23A9821F' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M20 8v44' stroke='%23A9821F' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E");
  opacity:0;will-change:transform,opacity;
  animation:fallDown var(--t) linear var(--dl) infinite;
}
@keyframes fallDown{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:.6}
  35%{transform:translate3d(var(--dx),40vh,0) rotate(150deg)}
  70%{transform:translate3d(calc(var(--dx) * -.7),78vh,0) rotate(280deg);opacity:.45}
  100%{transform:translate3d(0,122vh,0) rotate(400deg);opacity:0}
}

/* --- الورقة: وهج يتنفّس --- */
.paper{z-index:1}
.card{position:relative}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 55% at 50% -8%, rgba(233,212,154,.42), transparent 62%);
  animation:glow 7s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.45}50%{opacity:1}}

/* --- الإطار يلمع --- */
.frame{animation:frameGlow 5.5s ease-in-out infinite}
@keyframes frameGlow{0%,100%{border-color:rgba(201,162,39,.38)}50%{border-color:rgba(201,162,39,.8)}}

/* --- زوايا نباتية تتمايل --- */
.c-tl{animation:swayA 9s ease-in-out infinite}
.c-tr{animation:swayB 10s ease-in-out infinite .6s}
.c-bl{animation:swayB 11s ease-in-out infinite 1.2s}
.c-br{animation:swayA 9.5s ease-in-out infinite 1.8s}
@keyframes swayA{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes swayB{0%,100%{opacity:.75}50%{opacity:1}}

/* --- لمعان ذهبي يمرّ على العناوين والأسماء --- */
.headline{
  background:linear-gradient(100deg,#E3C169 0%,#B8912F 30%,#FBEFC8 48%,#B8912F 66%,#8E6B16 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  animation:shine 6.5s ease-in-out infinite;
}
.name{
  background:linear-gradient(100deg,#D9B65C 0%,#A9821F 30%,#F7E6B4 48%,#A9821F 66%,#7E5F12 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  animation:shine 7s ease-in-out infinite;
}
.name:last-of-type{animation-delay:1.4s}
@keyframes shine{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}

/* --- الفواصل --- */
.sep span{display:inline-block;animation:spinSlow 11s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.sep.heart span{color:#B04A4A;animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.3)}32%{transform:scale(1)}46%{transform:scale(1.22)}60%{transform:scale(1)}}
.sep::before,.sep::after{animation:lineGlow 4.5s ease-in-out infinite}
@keyframes lineGlow{0%,100%{opacity:.5}50%{opacity:1}}

/* --- بطاقات التفاصيل --- */
.facts li{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.facts li:active{transform:translateY(-3px);box-shadow:0 8px 18px rgba(154,117,24,.22)}
.facts .ico{animation:bob 3.6s ease-in-out infinite}
.facts li:nth-child(2) .ico{animation-delay:.5s}
.facts li:nth-child(3) .ico{animation-delay:1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}

/* --- العدّاد: نبضة عند تغيّر الرقم --- */
.countdown>div{position:relative;overflow:hidden}
.countdown>div::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,246,221,.22) 50%,transparent 65%);
  transform:translateX(-120%);
}
.countdown>div.pop::after{animation:sweep .7s ease-out}
@keyframes sweep{to{transform:translateX(120%)}}
.countdown b{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.countdown>div.pop b{transform:scale(1.16)}

/* --- الأزرار: بريق يمرّ --- */
.btn{position:relative;overflow:hidden}
.btn.gold::after{
  content:"";position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,250,230,.4),transparent);
  transform:translateX(-180%);animation:btnShine 4.5s ease-in-out infinite;
}
@keyframes btnShine{0%{transform:translateX(-180%)}45%,100%{transform:translateX(320%)}}

/* --- عنوان الموقع --- */
.loc h3{animation:lineGlow 5s ease-in-out infinite}

/* --- عبارة الختام تتنفّس --- */
.closing{animation:breathe2 4.5s ease-in-out infinite}
@keyframes breathe2{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.035);opacity:1}}

/* --- الظهور التدريجي مع السكرول --- */
.rv{opacity:0;transform:translateY(22px);animation:none}
.rv.in{animation:rise .85s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:var(--d,0s)}
.no-io .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.rv.in{opacity:1!important;transform:none!important}
  .ambience{display:none}
}