/* «أمنية» — قالب عيد ميلاد هادئ: كيكة على حامل خشبي بين بالونات خوخية وأضواء ذهبية، شموعها
   تُضاء بلمسة وتُطفأ بأخرى، وبتلات ورد تتساقط ببطء، والصورة في دائرةٍ يحفّها الورد. */
:root{
  --cream:#f8f1ec;--paper:#fffaf6;--blush:#ecd3cb;--rose:#c98f86;--gold:#b08452;--gold-soft:#d2b088;
  --ink:#4c3530;--soft:#8e7269;--line:rgba(var(--gold-rgb, 176, 132, 82), 0.3);--night:#24160d;--gate-ink:#fff7ec;--gate-soft:#f2d4b0;
  --sans:Tajawal,Arial,sans-serif;--serif:Amiri,Georgia,serif;--script:"Aref Ruqaa",Amiri,serif;--latin:"Cormorant Garamond",Georgia,serif;--hand:"Pinyon Script","Cormorant Garamond",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body.locked{overflow:hidden}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
#confettiCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
#petalCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none}

/* ═══ اللهب: واحدٌ للبوابة وللكيكة ═══ */
.flame{position:absolute;aspect-ratio:10/26;transform:translate(-50%,-96%);transform-origin:50% 100%;pointer-events:none;
  border-radius:50% 50% 45% 45%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 78%,#fffaf0 0,#ffe8ad 28%,#ffbd66 56%,rgba(255,140,60,.35) 74%,transparent 82%);
  filter:drop-shadow(0 0 5px rgba(255,190,110,.95)) drop-shadow(0 0 14px rgba(255,170,90,.55));
  opacity:0;transition:opacity .5s ease var(--d,0s)}
@keyframes flicker{0%{transform:translate(-50%,-96%) rotate(-2deg) scaleY(1)}50%{transform:translate(-50%,-96%) rotate(2deg) scaleY(.9)}100%{transform:translate(-50%,-96%) rotate(-1deg) scaleY(1.04)}}

/* ═══ البوابة ═══ */
.gate{display:none}
.js .gate{display:block;position:fixed;inset:0;z-index:40;overflow:hidden;background:var(--night);transition:opacity .9s ease}
.gate-backdrop{position:absolute;inset:-6%;background:url('assets/scene-soft.webp') center/cover;filter:blur(16px) brightness(.75)}
.stage{position:absolute;left:50%;top:50%;aspect-ratio:1520/2688;width:max(100vw,calc(100vh*.5655));width:max(100vw,calc(100svh*.5655));transform:translate(-50%,-50%)}
@media (min-aspect-ratio:4/5){.stage{width:auto;height:100vh;height:100svh}}
.stage-photo{display:block;width:100%;height:100%;object-fit:cover}
.stage .flame{left:var(--x);top:var(--y);width:1.1%}
.stage-glow{position:absolute;left:51%;top:45%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,200,130,.42),rgba(255,180,100,.14) 42%,transparent 66%);opacity:0;transition:opacity 1.4s ease .3s}
.lighting .stage .flame,.opened .stage .flame{opacity:1;animation:flicker 1.7s ease-in-out infinite}
.lighting .stage-glow,.opened .stage-glow{opacity:1}
.gate-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(32,19,10,.62) 0%,rgba(32,19,10,.24) 22%,transparent 34%,transparent 70%,rgba(32,19,10,.6) 100%)}
.gate-top{position:absolute;top:max(6vh,34px);left:0;right:0;padding:0 24px;text-align:center}
.gate-kicker{font:500 13px var(--sans);color:var(--gate-soft)}
.gate-name{font:700 54px/1.45 var(--script);color:var(--gate-ink);text-shadow:0 2px 20px rgba(50,24,8,.6);margin-top:4px}
.gate-en{font:400 36px/1.1 var(--hand);color:var(--gate-soft)}
.gate-bottom{position:absolute;left:0;right:0;bottom:max(5vh,26px);padding:0 24px;text-align:center;transition:opacity .5s}
.open-button{min-height:50px;padding:13px 40px;border-radius:999px;border:1px solid rgba(255,238,215,.75);background:rgba(255,246,234,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gate-ink);font:500 16px var(--sans);box-shadow:0 10px 30px rgba(20,10,4,.35)}
.gate-hint{font:13px var(--sans);color:rgba(255,238,220,.82);margin-top:12px}
.lighting .gate-bottom{opacity:0}
.opened .gate{opacity:0;pointer-events:none}
@media (max-height:640px){.gate-name{font-size:44px}.gate-en{font-size:30px}}

/* ═══ الصفحة ═══ */
main>section,main>footer{padding-inline:24px;text-align:center}
.section-title{font:700 32px/1.6 var(--script);color:var(--ink)}
.section-title::after{content:"";display:block;width:8px;height:8px;margin:8px auto 0;border-radius:50%;background:var(--rose);box-shadow:-18px 0 0 -2px var(--gold-soft),18px 0 0 -2px var(--gold-soft)}
.line-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:18px;padding:10px 26px;border-radius:999px;border:1px solid var(--gold-soft);background:var(--paper);color:var(--ink);font:14px var(--sans)}
.text-button{border:0;border-bottom:1px solid var(--line);background:none;padding:6px 0;color:var(--soft);font:13px var(--sans)}

.intro{padding-top:54px;padding-bottom:40px;background:linear-gradient(180deg,var(--blush),var(--cream) 70%)}
.kicker{font:15px var(--sans);color:var(--soft)}
.medallion{position:relative;width:min(58vw,230px);aspect-ratio:1;margin:30px auto 0}
.photo,.mono{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 18px 40px rgba(90,58,40,.2);outline:1px solid var(--line);outline-offset:8px}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
/* بلا صورة: شموع أرقامٍ ذهبية بعمر صاحب العيد — لكل رقمٍ فتيلٌ ولهبٌ يشتعل حين تُفتح الدعوة */
.medallion{container-type:inline-size}
.mono{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,var(--paper),var(--blush) 75%)}
.mono::before{content:"";position:absolute;inset:11px;border-radius:50%;border:1px solid rgba(var(--gold-rgb, 176, 132, 82), 0.28)}
.mono::after{content:"";position:absolute;left:50%;top:30%;width:78%;aspect-ratio:2/1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,140,.42),rgba(255,206,140,0));opacity:0;transition:opacity 1.2s ease .8s;pointer-events:none}
.opened .mono::after{opacity:1}
.mono-num{position:relative;z-index:1;display:flex;gap:.04em;margin-top:.16em;font:500 98px/.74 var(--latin);font-size:46cqw;font-variant-numeric:lining-nums}
.mono-num.n3{font-size:33cqw}
.mono-num .d{position:relative;display:block}
.mono-num .g{display:block;padding-top:.05em;background:linear-gradient(180deg,#ecd2a6 0%,#c99a62 46%,#a3743f 78%,#8c6134 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 4px rgba(120,78,40,.2))}
.mono-num .d::before{content:"";position:absolute;left:50%;top:-.02em;width:2px;height:.11em;transform:translateX(-50%);border-radius:1px;background:linear-gradient(#2e2018,#5b4234)}
.mono .flame{left:50%;top:-.01em;width:.11em;z-index:2}
.mono-candle{display:none;position:relative;z-index:1;width:15%;height:46%;margin-top:14%;border-radius:4px 4px 3px 3px;
  background:repeating-linear-gradient(135deg,#f7ead6 0 8px,#d8b183 8px 13px);box-shadow:inset -3px 0 6px rgba(140,96,52,.25),0 6px 12px rgba(120,78,40,.18)}
.mono-candle::before{content:"";position:absolute;left:50%;top:-11px;width:2px;height:11px;transform:translateX(-50%);background:linear-gradient(#2e2018,#5b4234)}
.mono-candle .flame{top:-10px;width:16px}
.mono.solo .mono-num{display:none}
.mono.solo .mono-candle{display:block}
.opened .mono .flame{opacity:1;animation:flicker 1.7s ease-in-out infinite}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#heroPhoto:not([hidden])+.mono{display:none}
#heroTitle{font:700 54px/1.5 var(--script);color:var(--ink);margin-top:34px;outline:none}
.intro-en{font:400 40px/1.1 var(--hand);color:var(--gold)}
.age{margin-top:12px;font:500 15px var(--sans);color:var(--soft)}
.age span{font:500 30px/1 var(--latin);color:var(--rose);font-variant-numeric:lining-nums;vertical-align:-3px}
.greeting{max-width:440px;margin:16px auto 0;font:20px/1.9 var(--serif);color:var(--ink)}
.greeting:empty{display:none}

.letter{padding-top:26px;padding-bottom:50px;background:var(--cream)}
.paper{position:relative;max-width:520px;margin:0 auto;padding:40px 26px 34px;background:var(--paper);border-radius:6px;box-shadow:0 18px 40px rgba(90,58,40,.1)}
.paper::before{content:"";position:absolute;inset:9px;border:1px solid var(--line);border-radius:3px;pointer-events:none;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(var(--rose-rgb, 201, 143, 134), 0.25)}
.paper-orn{display:block;width:44px;height:1px;margin:0 auto 22px;background:var(--gold-soft)}
.invitation-copy{font:22px/2 var(--serif);color:var(--ink);white-space:pre-line}

.details{padding-top:48px;padding-bottom:46px;background:var(--paper)}
.event-list{max-width:460px;margin:24px auto 0;border-top:1px solid var(--line)}
.event-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);text-align:start}
.event-label{flex:none;font:13px var(--sans);color:var(--soft)}
.event-value{font:20px/1.6 var(--serif);color:var(--ink);text-align:end}
.event-value small{display:block;font:13px/1.7 var(--sans);color:var(--soft)}
.countdown-section{margin-top:30px}
.countdown-section>p{font:16px var(--serif);color:var(--soft)}
.countdown{display:flex;justify-content:center;gap:12px;direction:ltr;margin-top:12px}
.countdown>div{min-width:62px;padding:12px 4px 10px;border-radius:14px;background:var(--cream);border:1px solid var(--line)}
.countdown b{display:block;font:500 32px/1 var(--latin);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.countdown span{display:block;margin-top:6px;font:11px var(--sans);color:var(--soft)}

.program,.notes{padding-top:48px;padding-bottom:24px;background:var(--cream)}
.timeline{list-style:none;max-width:400px;margin:22px auto 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;top:10px;bottom:10px;right:7px;width:1px;background:var(--line)}
.timeline li{position:relative;display:flex;align-items:baseline;gap:12px;padding:10px 32px 10px 0;text-align:start}
.timeline li::before{content:"";position:absolute;right:2px;top:19px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--rose)}
.timeline .t-title{flex:1;font:19px/1.6 var(--serif);color:var(--ink)}
.timeline .t-time{font:14px var(--sans);color:var(--gold);white-space:nowrap}
.notes-list{list-style:none;max-width:420px;margin:20px auto 0;padding:0}
.notes-list li{padding:9px 0;font:17px/1.8 var(--serif);color:var(--ink);border-bottom:1px dashed var(--line)}
.notes-list li:last-child{border-bottom:0}

.wish{padding-top:52px;padding-bottom:46px;background:var(--cream)}
.wish-hint{margin-top:10px;font:14px var(--sans);color:var(--soft)}
.wish-cake{position:relative;width:min(80vw,360px);aspect-ratio:720/1200;margin:22px auto 0;border-radius:180px 180px 22px 22px;overflow:hidden;box-shadow:0 24px 50px rgba(70,40,20,.22)}
.wish-cake>img{display:block;width:100%;height:100%;object-fit:cover}
.candle-hit{display:none;position:absolute;left:var(--x);top:var(--y);width:9%;aspect-ratio:1/1.5;transform:translate(-50%,-80%);border:0;padding:0;background:none}
.js .candle-hit{display:block}
.candle-hit .flame{left:50%;top:80%;width:24%;--d:0s}
.candle-hit.lit .flame{opacity:1;animation:flicker 1.6s ease-in-out infinite}
.candle-hit:nth-child(odd) .flame{animation-delay:-.6s}
.smoke{position:absolute;left:50%;top:76%;width:6px;height:22px;border-left:2px solid rgba(240,230,220,.6);border-radius:50%;filter:blur(1.5px);opacity:0;pointer-events:none}
.candle-hit:not(.lit) .smoke{animation:smokeRise 1.8s ease-out forwards}
@keyframes smokeRise{10%{opacity:.7}100%{opacity:0;transform:translate(-4px,-36px) scale(1.8)}}
.blow-button:disabled{opacity:.45;cursor:default}
.wish-message{min-height:40px;margin:16px auto 6px;font:22px/1.8 var(--serif);color:var(--ink)}

.contact{padding-top:10px;padding-bottom:30px;background:var(--cream)}
.contact-label{font:13px var(--sans);color:var(--soft)}
.contact-link{display:inline-block;margin-top:6px;padding-bottom:2px;border-bottom:1px solid var(--line);font:16px var(--sans);color:var(--ink)}

.closing{padding-top:30px;padding-bottom:70px;background:var(--cream)}
.closing-en{font:400 40px/1.2 var(--hand);color:var(--gold)}
.closing-note{margin-top:6px;font:700 26px/1.7 var(--script);color:var(--ink)}
.closing-hashtag{margin-top:6px;font:15px var(--sans);color:var(--rose)}
.closing-host{margin-top:10px;font:16px var(--serif);color:var(--soft)}
.closing-hashtag:empty,.closing-host:empty{display:none}

/* ═══ الورد ═══ */
.roses{position:absolute;display:block;pointer-events:none;z-index:2}
.roses>img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(90,58,36,.14));animation:sway 7s ease-in-out infinite;transform-origin:14% 38%}
.roses-a{width:104%;left:-46%;bottom:-20%}
.roses-b{width:80%;right:-40%;top:-14%;transform:scale(-1,-1)}
.roses-b>img{animation-delay:-3.5s;animation-duration:8s}
.roses-c{position:relative;width:min(70vw,300px);margin:0 auto 10px;z-index:1}
.roses-c>img{transform-origin:50% 60%;animation-duration:9s}
.js .intro .roses{opacity:0;scale:.86}
.opened .intro .roses{animation:bloom 1.8s cubic-bezier(.2,.7,.2,1) .35s forwards}
.opened .intro .roses-b{animation-delay:.65s}
@keyframes bloom{to{opacity:1;scale:1}}
@keyframes sway{0%,100%{rotate:-1.2deg}50%{rotate:1.4deg}}

/* الظهور مع التمرير */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js [data-reveal].in-view{opacity:1;transform:none}
.opened .intro>*{animation:rise 1s ease-out both}
.opened .intro>.medallion{animation-delay:.1s}
.opened .intro>#heroTitle{animation-delay:.25s}
.opened .intro>.intro-en{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html:not(.js) #blowAll,html:not(.js) .interactive-copy{display:none}

/* باقتا الورد تتجاوزان حافّة الميدالية عمداً — لا تمرير أفقي بسببهما */
#invite{overflow-wrap:anywhere;overflow-x:hidden;overflow-x:clip}
#da3wa-rsvp,#da3wa-cal{position:relative;z-index:1}
@media (max-width:380px){.gate-name,#heroTitle{font-size:46px}.invitation-copy{font-size:20px}.countdown>div{min-width:54px}}
@media (min-width:900px){.intro{padding-top:80px}.medallion{width:260px}#heroTitle{font-size:62px}.invitation-copy{font-size:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js [data-reveal]{opacity:1;transform:none}.js .intro .roses{opacity:1;scale:1}}