/* ============================================================
   قالب «هديل» (hadeel) — حمامة بيضاء تعبر رواق الورد وتحطّ على النافورة
   دخولية وواجهة في مشهد واحد: لمسة فيحلّق الهديل، وعند حطّته تنبثق الأسماء
   وتبقى الحطّة حيّةً تتنفّس (ذهاب-إياب لآخر لحظة — لا يُعاد المشهد أبداً)
   هوية: رخام عاجي + ورد وردي + ذهب دافئ + سماء حالمة
   ============================================================ */
:root{
  --ivory:#f8f3ea; --ivory-2:#efe6d6; --ivory-hi:#fdfaf3;
  --marble:#e9dfcb;
  --rose:#dfa8b6; --rose-2:#eec3cd; --rose-deep:#b76e83;
  --gold:#c2a05e; --gold-2:#d8bc82; --gold-hi:#f0e2bc; --gold-deep:#96763c;
  --sky:#a7c4de; --leaf:#7f9a7d;
  --ink:#4b3a33; --soft:#8d786c;
  --line:rgba(194,160,94,.4); --line-soft:rgba(183,110,131,.18);
  --shadow:0 30px 80px -34px rgba(75,58,51,.45);
  --ruqaa:"Aref Ruqaa",serif; --amiri:"Amiri",serif; --kufi:"Reem Kufi",sans-serif; --body:"Tajawal",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
::selection{background:var(--rose);color:#fff}
video{display:block}
a{color:inherit;text-decoration:none}

/* ==================== المشهد ==================== */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;isolation:isolate;cursor:pointer;
  background:#dfe7ee url("/templates/hadeel/assets/poster.jpg") center/cover no-repeat}
.stage.is-arrived{cursor:default}
.stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.stage__loop{z-index:-2;opacity:0;transition:opacity .35s ease}
.stage.is-arrived .stage__loop{opacity:1}
/* غلالة خفيفة تهبط مع الحطّة لتقرأ الأسماء فوق السماء بوضوح حالم —
   أزرق شفقيّ من الأعلى ودفء وردي خشبي من الأسفل يعانق ورود الحديقة */
.stage__scrim{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 1.6s ease;
  background:linear-gradient(180deg, rgba(24,34,64,.5) 0%, rgba(24,34,64,.18) 32%, transparent 52%, rgba(64,38,44,.4) 100%)}
.stage.is-landing .stage__scrim{opacity:1}
.stage__taps{position:absolute;inset:0;pointer-events:none;z-index:4}
.tapring{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2px solid rgba(253,250,243,.95);box-shadow:0 0 18px rgba(240,226,188,.7);
  animation:tapring .7s ease-out forwards}
@keyframes tapring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}

/* ---- قبل التحليق ---- */
.callout{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:max(5vh,30px) 24px max(8.5vh,54px);
  transition:opacity .7s ease, transform .9s ease}
.stage.is-flying .callout{opacity:0;transform:translateY(-14px)}
/* لا تباعد أحرف على العربية أبداً — يقطّع اتصال الحروف */
.callout__kicker{display:flex;align-items:center;gap:14px;font-family:var(--amiri);font-weight:700;
  font-size:1.02rem;color:#fdfaf3;
  text-shadow:0 2px 14px rgba(75,58,51,.8);opacity:0;animation:fadeUp 1.2s .3s forwards}
.callout__kicker span{width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.callout__foot{text-align:center;opacity:0;animation:fadeUp 1.2s .7s forwards;
  padding:18px 30px 6px;border-radius:30px;
  background:radial-gradient(75% 120% at 50% 55%, rgba(43,34,28,.38), transparent 78%)}
.callout__halo{position:relative;width:64px;height:64px;margin:0 auto 12px}
.callout__halo i{position:absolute;inset:0;border-radius:50%;border:1.6px solid rgba(253,250,243,.9);
  box-shadow:0 0 16px rgba(240,226,188,.5);animation:halo 2.6s ease-out infinite}
.callout__halo i:nth-child(2){animation-delay:.85s}
.callout__halo i:nth-child(3){animation-delay:1.7s}
@keyframes halo{0%{opacity:.9;transform:scale(.34)}70%{opacity:.25}100%{opacity:0;transform:scale(1.15)}}
.callout__hint{font-family:var(--amiri);font-weight:700;font-size:clamp(1.32rem,5.4vw,1.72rem);color:#fdfaf3;
  text-shadow:0 2px 14px rgba(75,58,51,.9)}
.callout__sub{font-family:var(--amiri);font-style:italic;font-size:clamp(.92rem,3.2vw,1.08rem);color:var(--gold-hi);
  margin-top:6px;text-shadow:0 2px 10px rgba(75,58,51,.85)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---- عند الحطّة: الأسماء فوق السماء ---- */
.stage__inner{position:absolute;left:0;right:0;top:0;z-index:2;text-align:center;pointer-events:none;
  padding:max(8.5vh,52px) 24px 0}
.stage__kicker{font-family:var(--amiri);font-weight:700;font-size:1.15rem;
  color:var(--gold-hi);margin-bottom:16px;text-shadow:0 2px 12px rgba(24,34,64,.85)}
.stage__kicker::before{content:"\273D\2002"}
.stage__kicker::after{content:"\2002\273D"}
/* الأسماء: شمبانيا فاتحة بتوهّج حالم — لون صلب، فقصّ التدرّج يأكل امتدادات الحروف العربية */
.couple{font-family:var(--ruqaa);font-weight:700;line-height:1.08;color:#fdf3d8;
  font-size:clamp(2.5rem,11.5vw,4.6rem);display:flex;flex-direction:column;align-items:center;
  text-shadow:0 2px 4px rgba(24,34,64,.4),0 3px 22px rgba(24,34,64,.7),0 0 44px rgba(240,226,188,.55)}
.couple__amp{font-family:var(--amiri);font-style:italic;color:var(--gold-hi);font-size:.4em;margin:2px 0;
  text-shadow:0 2px 14px rgba(29,45,71,.75)}
.rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 0;max-width:280px;
  color:var(--gold-hi);font-size:15px;text-shadow:0 1px 8px rgba(29,45,71,.7)}
.rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(240,226,188,.9),transparent);
  transform:scaleX(0);transition:transform 1.4s .2s cubic-bezier(.22,.7,.3,1)}
.rule.is-in span{transform:scaleX(1)}
.rule em{font-style:normal}
.stage__date{font-family:var(--kufi);font-weight:600;font-size:clamp(.98rem,3.4vw,1.18rem);color:#fdfaf3;margin-top:14px;
  text-shadow:0 2px 12px rgba(29,45,71,.85)}
.stage__sub{font-family:var(--amiri);font-style:italic;font-weight:700;font-size:clamp(1rem,3.4vw,1.3rem);color:var(--gold-hi);
  margin-top:8px;text-shadow:0 2px 12px rgba(29,45,71,.85)}
.scroll-cue{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:max(4.5vh,26px);z-index:2;text-align:center;
  font-family:var(--amiri);font-weight:700;font-size:1.08rem;color:#fdf6e3;white-space:nowrap;
  padding:8px 26px;border-radius:24px;pointer-events:none;
  background:radial-gradient(72% 130% at 50% 45%, rgba(43,34,28,.5), transparent 80%);
  text-shadow:0 2px 10px rgba(43,34,28,.95),0 0 24px rgba(43,34,28,.7)}
.scroll-cue em{font-style:normal;font-size:.68em;color:var(--gold-2);margin:0 10px;opacity:.95}
.scroll-cue em:first-child{display:inline-block;transform:scaleX(-1)}
.scroll-cue b{display:block;margin-top:3px;font-weight:400;font-size:1.3rem;color:var(--gold-hi);
  animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:1}}
/* ظهور عناصر الحطّة: انبثاق حالم — ضبابية تصفو مع صعود ناعم */
.sreveal{opacity:0;transform:translateY(18px);filter:blur(7px);
  transition:opacity 1.15s ease, transform 1.15s ease, filter 1.15s ease}
.sreveal.is-in{opacity:1;transform:none;filter:blur(0)}

/* ==================== طيور بيضاء حيّة ====================
   شريط ٣٢ فريماً لحمامة حقيقية بخلفية شفافة — رفرفة steps + انزلاق عبر المشهد */
.doves{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.dove{position:absolute;left:0;top:0;width:130px;aspect-ratio:420/318;overflow:hidden;opacity:0;
  animation:glide var(--gd,10s) linear forwards;will-change:transform,opacity}
/* left:0 صراحةً — الصفحة RTL فتُزيح الكتلةَ العريضة يساراً خارج النافذة بدونها */
.dove i{position:absolute;left:0;top:0;width:3200%;height:100%;
  background:url("/templates/hadeel/assets/dove-sprite.png") 0 0/100% 100% no-repeat;
  animation:doveflap .8s steps(32) infinite}
@keyframes doveflap{to{transform:translateX(-100%)}}
@keyframes glide{
  0%{transform:translate(var(--x0,-18vw),var(--y0,20vh)) scale(var(--s,1)) scaleX(var(--sx,1));opacity:0}
  7%{opacity:var(--o,.9)}
  90%{opacity:var(--o,.9)}
  100%{transform:translate(var(--x1,118vw),var(--y1,18vh)) scale(var(--s,1)) scaleX(var(--sx,1));opacity:0}
}

/* ==================== بتلات ووميض ==================== */
.fx{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.petal{position:absolute;top:-28px;will-change:transform;opacity:0;animation:fall linear infinite}
@keyframes fall{0%{opacity:0;transform:translateY(-10px) translateX(0) rotate(0)}12%{opacity:.9}90%{opacity:.75}100%{opacity:0;transform:translateY(104vh) translateX(-44px) rotate(330deg)}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-hi),rgba(240,226,188,0) 70%);opacity:0;animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}

/* ==================== بطاقة المحتوى ==================== */
.card{position:relative;max-width:640px;margin:0 auto;overflow:hidden;
  padding:clamp(34px,8vw,70px) clamp(18px,5vw,46px);
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(223,168,182,.16), transparent 60%),
    radial-gradient(90% 40% at 50% 100%, rgba(194,160,94,.1), transparent 70%),
    linear-gradient(180deg,var(--ivory-hi),var(--ivory))}
.sec{position:relative;text-align:center;padding:26px 6px}
.sec__title{font-family:var(--ruqaa);font-weight:700;color:var(--gold-deep);font-size:clamp(1.5rem,5.2vw,2.05rem);margin-bottom:20px}
.sec__title::after{content:"";display:block;width:64px;height:2px;margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-2) 30%,var(--rose) 70%,transparent)}
/* الآية داخل قوس الرواق الرخامي */
.verse{border:1px solid var(--line);border-radius:160px 160px 18px 18px;
  padding:40px 24px 28px;margin-top:6px;
  background:radial-gradient(120% 90% at 50% 0%, #fffdf6, rgba(253,250,243,0) 75%);
  box-shadow:0 0 0 5px var(--ivory-hi) inset, 0 16px 30px -26px rgba(75,58,51,.4)}
.bismillah{font-family:var(--amiri);font-weight:700;font-size:clamp(1.15rem,4vw,1.45rem);color:var(--gold-deep);margin-bottom:8px}
.flourish{display:block;color:var(--rose);font-size:19px;margin:8px 0}
.verse__text{font-family:var(--amiri);font-weight:700;font-size:clamp(1.2rem,4.4vw,1.6rem);color:var(--rose-deep);line-height:2}
.divider{display:flex;align-items:center;gap:14px;color:var(--rose);font-size:15px;margin:8px 0}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.invitation__text{font-family:var(--amiri);font-size:clamp(1.05rem,3.7vw,1.3rem);line-height:2.2;color:var(--ink)}

/* ---- العائلتان ---- */
.families{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.family__label{display:block;font-family:var(--kufi);font-size:.75rem;color:var(--rose-deep);margin-bottom:8px}
.family__names{font-family:var(--amiri);font-weight:700;font-size:clamp(.98rem,3.4vw,1.15rem);color:var(--ink);line-height:1.9}
.families__heart{color:var(--rose);font-size:18px;opacity:.85}

/* ---- عدّاد: أعمدة رواق صغيرة بقوس رخامي ---- */
.countdown{display:flex;justify-content:center;gap:clamp(8px,2.4vw,16px)}
.cd__u{min-width:clamp(62px,17vw,84px);padding:16px 6px 13px;border-radius:32px 32px 12px 12px;
  background:linear-gradient(180deg,var(--ivory-hi),var(--ivory-2));border:1px solid var(--line);
  box-shadow:0 10px 24px -14px rgba(75,58,51,.4)}
.cd__n{display:block;font-family:var(--ruqaa);font-weight:700;font-size:clamp(1.4rem,5.6vw,1.9rem);color:var(--gold-deep)}
.cd__l{display:block;font-family:var(--kufi);font-size:.72rem;color:var(--rose-deep);margin-top:4px}
.count__arrived{font-family:var(--amiri);font-weight:700;font-size:1.15rem;color:var(--rose-deep)}

/* ---- برنامج الحفل: وردة تنزلق على الخط ---- */
.program .sec__title{display:flex;align-items:center;justify-content:center;gap:12px}
.program .sec__title::before{content:"\2767";font-size:.55em;color:var(--rose);opacity:.85;transform:scaleX(-1)}
.program .sec__title::after{content:"\2767";display:inline;width:auto;height:auto;margin:0;background:none;font-size:.55em;color:var(--rose);opacity:.85}
.sched{position:relative;max-width:430px;margin:4px auto 0}
.sched__line{position:absolute;left:50%;top:16px;bottom:16px;width:1px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--line) 10%,var(--line) 90%,transparent)}
.sched__row{position:relative;display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:4px;padding:18px 0}
.sched__time{font-family:var(--amiri);font-weight:700;font-size:clamp(1.1rem,4.2vw,1.4rem);color:var(--ink);text-align:center}
.sched__dot{width:7px;height:7px;margin:0 auto;background:var(--rose-deep);transform:rotate(45deg);opacity:.7}
.sched__event{font-family:var(--body);font-weight:500;font-size:clamp(.94rem,3.4vw,1.05rem);color:var(--ink);text-align:center;line-height:1.55}
.sched__bloom{position:absolute;left:50%;top:16px;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:2;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(75,58,51,.3));transition:top .5s cubic-bezier(.25,.6,.3,1)}
.sched__bloom svg{width:100%;height:100%;display:block}

/* ---- القاعة: صورة بإطار قوس الرواق ---- */
.venue__photo{display:none;width:100%;background:var(--marble) center/cover no-repeat;
  border-radius:170px 170px 16px 16px;border:1px solid var(--line);
  box-shadow:0 0 0 6px var(--ivory-hi) inset, 0 18px 34px -22px rgba(75,58,51,.45)}
.venue.has-photo .venue__photo{display:block;height:230px;margin-bottom:16px}
.venue__name{font-family:var(--amiri);font-weight:700;font-size:clamp(1.2rem,4.4vw,1.5rem);color:var(--gold-deep)}
.venue__addr{font-family:var(--body);color:var(--soft);margin-top:6px}
.venue__map{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--kufi);font-size:.9rem;font-weight:600;
  color:#fff;padding:11px 26px;border-radius:100px;background:linear-gradient(180deg,var(--rose),var(--rose-deep));
  box-shadow:0 10px 24px -10px rgba(183,110,131,.6);transition:transform .2s ease}
.venue__map:hover{transform:translateY(-2px)}

/* ---- تنويهات + تواصل + ختام ---- */
.notes__list{list-style:none;max-width:400px;margin:0 auto;text-align:start}
.notes__item{display:flex;gap:10px;align-items:baseline;padding:8px 0;font-family:var(--body);color:var(--ink);line-height:1.8}
.notes__mark{color:var(--rose);font-size:.8rem}
.contact__label{display:block;font-family:var(--kufi);font-size:.78rem;color:var(--rose-deep);margin-bottom:8px}
.contact__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--kufi);font-weight:600;font-size:1.02rem;color:var(--gold-deep)}
.closing__note{font-family:var(--amiri);font-weight:700;font-size:clamp(1.15rem,4.2vw,1.45rem);color:var(--gold-deep)}
.closing__families{font-family:var(--amiri);font-size:clamp(1rem,3.6vw,1.2rem);color:var(--ink);margin-top:10px}
.closing__hashtag{font-family:var(--kufi);font-size:.9rem;color:var(--rose-deep);margin-top:12px}

/* ---- ظهور تدريجي للبطاقة ---- */
.creveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s ease}
.creveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .petal,.spark,.dove{display:none}
  .scroll-cue b{animation:none}
  .tapring{animation-duration:.3s}
  .callout__halo i{animation:none;opacity:.5}
  .sreveal,.creveal{transition-duration:.3s;filter:none}
}