/* ============================================================
   قالب «باب الفرح» (bab) — باب خشبي بأزهار بنفسجية
   دخولية: دُقّوا ثلاث دقّات → الباب يُفتح على النور → الواجهة
   هوية: خشب دافئ + حجر كريمي + بنفسج الأزهار + توهّج ذهبي
   ============================================================ */
:root{
  --cream:#f6f1e4; --cream-2:#ece4d0; --cream-hi:#fcf9f0;
  --stone:#e5dcc6;
  --wood:#7a4f2c; --wood-deep:#5a3a20;
  --lilac:#a97fc0; --lilac-2:#c3a1d6; --lilac-deep:#7d5694;
  --gold:#c9a45c; --gold-2:#dbbe82; --gold-hi:#f0e0b4; --gold-deep:#96763c;
  --leaf:#7d8f66;
  --ink:#4c3a28; --ink-soft:#8d7b64;
  --line:rgba(169,127,192,.38); --line-soft:rgba(169,127,192,.16);
  --shadow:0 30px 80px -34px rgba(76,58,40,.5);
  --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(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
::selection{background:var(--lilac);color:#fff}
video{display:block}
a{color:inherit;text-decoration:none}

/* ==================== الدخولية (الباب) ==================== */
.cover{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;
  background:#e8dfc9 url("/templates/bab/assets/door-poster.jpg") center/cover no-repeat;
  transition:opacity 1.1s ease}
.cover.is-open{opacity:0;pointer-events:none;visibility:hidden}
.cover__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .16s ease}
.cover.is-knocked .cover__vid{transform:scale(1.012)}
.cover__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(76,58,40,.08) 0%, transparent 30%, rgba(76,58,40,.4) 100%)}
.cover__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(240,224,180,.95);box-shadow:0 0 18px rgba(240,224,180,.65);
  animation:tapring .7s ease-out forwards}
@keyframes tapring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}

.cover__ui{position:absolute;left:0;right:0;bottom:6.5vh;z-index:5;text-align:center;padding:0 24px;pointer-events:none;
  transition:opacity .5s ease, transform .6s ease}
.cover.is-playing .cover__ui{opacity:0;transform:translateY(18px)}
.cover__names{font-family:var(--ruqaa);font-weight:700;font-size:clamp(2rem,9vw,3.2rem);color:#fff;
  text-shadow:0 3px 18px rgba(76,58,40,.75);margin-bottom:14px;opacity:0;animation:fadeUp 1.1s .4s forwards}
.cover__hint{font-family:var(--amiri);font-weight:700;font-size:clamp(1.02rem,3.8vw,1.25rem);color:#fdf7e7;
  text-shadow:0 2px 12px rgba(76,58,40,.8);opacity:0;animation:fadeUp 1s .7s forwards}
.knocks{display:flex;justify-content:center;gap:14px;margin-top:14px;opacity:0;animation:fadeUp 1s .9s forwards}
.knocks__dot{width:13px;height:13px;border-radius:50%;border:1.6px solid rgba(253,247,231,.85);
  background:transparent;box-shadow:0 1px 8px rgba(76,58,40,.5);transition:background .25s ease, transform .25s ease}
.knocks__dot.is-hit{background:var(--gold-hi);border-color:var(--gold-hi);transform:scale(1.25);
  box-shadow:0 0 14px rgba(240,224,180,.9)}

@keyframes fadeUp{to{opacity:1;transform:none}}

/* ==================== المحتوى ==================== */
.invite{opacity:0;transition:opacity 1.2s ease}
.invite.visible{opacity:1}

/* بتلات بنفسجية + وميض ذهبي */
.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:.8}100%{opacity:0;transform:translateY(104vh) translateX(40px) rotate(340deg)}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-hi),rgba(240,224,180,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)}}

/* ---- الواجهة (الحمام يطير من باب الحديقة — فيديو) ---- */
.stage{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;
  background:#3d3226 url("/templates/bab/assets/hero-poster.jpg") center/cover no-repeat}
.stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1s ease}
.stage__vid.is-ready{opacity:1}
.stage__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(40,30,20,.22) 0%, transparent 30%, transparent 66%, rgba(40,30,20,.42) 100%)}
.stage__inner{position:relative;z-index:1;padding:9vh 24px;margin-top:-4vh}
.stage__kicker{font-family:var(--kufi);font-size:.88rem;color:var(--gold-hi);margin-bottom:14px;
  text-shadow:0 1px 10px rgba(40,30,20,.85)}
.stage__orn{display:block;color:var(--lilac-2);font-size:22px;margin-bottom:12px;
  text-shadow:0 1px 10px rgba(40,30,20,.7)}
.couple{font-family:var(--ruqaa);font-weight:700;line-height:1.06;color:#fdf6e3;
  font-size:clamp(2.8rem,13vw,5.6rem);display:flex;flex-direction:column;align-items:center;gap:0;
  text-shadow:0 3px 20px rgba(40,30,20,.85),0 0 40px rgba(240,224,180,.45)}
.couple__amp{font-family:var(--amiri);font-style:italic;color:var(--gold-2);font-size:.42em;margin:4px 0;
  text-shadow:0 2px 12px rgba(40,30,20,.8)}
.stage__date{font-family:var(--kufi);font-weight:600;font-size:clamp(1rem,3.4vw,1.2rem);color:var(--gold-hi);margin-top:18px;
  text-shadow:0 2px 12px rgba(40,30,20,.9)}
.stage__sub{font-family:var(--amiri);font-style:italic;font-weight:700;font-size:clamp(1.05rem,3.2vw,1.35rem);color:#f6ecd8;margin-top:8px;
  text-shadow:0 2px 12px rgba(40,30,20,.9)}
.scroll-cue{display:inline-block;margin-top:34px;font-family:var(--amiri);font-weight:700;font-size:1.12rem;color:#fdf3da;
  padding:8px 26px;border-radius:24px;
  background:radial-gradient(72% 130% at 50% 45%, rgba(40,30,20,.5), transparent 80%);
  text-shadow:0 2px 10px rgba(40,30,20,.95),0 0 24px rgba(40,30,20,.7)}
.scroll-cue em{font-style:normal;font-size:.68em;color:var(--gold-2);margin:0 10px;opacity:.95;
  text-shadow:0 1px 8px rgba(40,30,20,.8)}
.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);
  text-shadow:0 2px 8px rgba(40,30,20,.9);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:1}}

/* ---- بطاقة المحتوى ---- */
.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(195,161,214,.14), transparent 60%),
    linear-gradient(180deg,var(--cream-hi),var(--cream))}
.sec{position:relative;text-align:center;padding:26px 6px}
.sec__title{font-family:var(--ruqaa);font-weight:700;color:var(--wood-deep);font-size:clamp(1.5rem,5.2vw,2.05rem);margin-bottom:20px}
.sec__title::after{content:"";display:block;width:52px;height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--lilac),transparent)}
.bismillah{font-family:var(--amiri);font-weight:700;font-size:clamp(1.15rem,4vw,1.45rem);color:var(--wood-deep);margin-bottom:8px}
.flourish{display:block;color:var(--lilac);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(--lilac-deep);line-height:2}
.divider{display:flex;align-items:center;gap:14px;color:var(--lilac);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(--lilac-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(--lilac);font-size:18px;opacity:.8}

/* ---- عدّاد ---- */
.countdown{display:flex;justify-content:center;gap:clamp(8px,2.4vw,16px)}
.cd__u{min-width:clamp(62px,17vw,84px);padding:14px 6px;border-radius:14px;
  background:linear-gradient(180deg,#fcf9f0,#efe7d3);border:1px solid var(--line);
  box-shadow:0 10px 24px -14px rgba(76,58,40,.4)}
.cd__n{display:block;font-family:var(--ruqaa);font-weight:700;font-size:clamp(1.4rem,5.6vw,1.9rem);color:var(--wood-deep)}
.cd__l{display:block;font-family:var(--kufi);font-size:.72rem;color:var(--lilac-deep);margin-top:4px}
.count__arrived{font-family:var(--amiri);font-weight:700;font-size:1.15rem;color:var(--lilac-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(--lilac);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(--lilac);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(--lilac-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(76,58,40,.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:#e7dcc0 center/cover no-repeat;border-radius:14px;border:1px solid var(--line)}
.venue.has-photo .venue__photo{display:block;height:200px;margin-bottom:16px}
.venue__name{font-family:var(--amiri);font-weight:700;font-size:clamp(1.2rem,4.4vw,1.5rem);color:var(--wood-deep)}
.venue__addr{font-family:var(--body);color:var(--ink-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(--lilac),var(--lilac-deep));
  box-shadow:0 10px 24px -10px rgba(125,86,148,.6)}
.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(--lilac);font-size:.8rem}
.contact__label{display:block;font-family:var(--kufi);font-size:.78rem;color:var(--lilac-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(--wood-deep)}
.closing__note{font-family:var(--amiri);font-weight:700;font-size:clamp(1.15rem,4.2vw,1.45rem);color:var(--wood-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(--lilac-deep);margin-top:12px}

/* ---- ظهور تدريجي ---- */
.sreveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.sreveal.is-in{opacity:1;transform:none}
.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{display:none}.scroll-cue b{animation:none}.tapring{animation-duration:.3s}}