/* ===== شاشات البداية ===== */
.intro{position:fixed;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;color:var(--in-ink);background-color:var(--page);background-image:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.22),transparent 62%),var(--pat);font-family:var(--f-ui);transition:opacity .9s ease,visibility .9s;-webkit-tap-highlight-color:transparent}
.intro.leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro.gone{display:none}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.in-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px 16px;width:100%;max-width:440px}
.in-couple{display:flex;flex-direction:column;align-items:center;font-family:var(--fname),var(--f-name);font-weight:700;font-size:clamp(34px,10vw,46px);line-height:1.2;color:var(--in-ink)}
.in-couple i{font-style:normal;font-family:var(--f-ui);font-weight:300;font-size:16px;color:var(--accent);margin:2px 0}
.in-to{display:flex;flex-direction:column;align-items:center;line-height:1.35}
.in-to span{font-size:12px;opacity:.7}
.in-to b{font-size:18px;font-weight:500}
.in-hint{margin:0;padding:7px 16px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);font-size:13px;color:var(--in-ink);background:color-mix(in srgb,var(--paper) 30%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.65}50%{opacity:1}}
.intro.going .in-hint{opacity:0;animation:none;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.intro *,.intro{transition-duration:.01s!important;animation:none!important}}

/* ختم الشمع */
.seal{position:absolute;left:50%;top:57%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:6;background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--seal) 55%,#fff 45%),var(--seal) 52%,color-mix(in srgb,var(--seal) 70%,#000 30%));box-shadow:0 8px 16px -6px rgba(0,0,0,.55),inset 0 0 0 5px color-mix(in srgb,var(--seal) 82%,#000 18%),inset 0 0 0 6px color-mix(in srgb,var(--seal) 60%,#fff 40%);color:rgba(255,248,232,.95);font-family:var(--f-name);font-weight:700;font-size:21px;transition:transform .45s cubic-bezier(.4,.1,.2,1),opacity .45s ease}
.seal span{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:100%;direction:rtl}
.seal i{font-style:normal}
.seal em{width:1px;height:18px;background:currentColor;opacity:.5}
@media (hover:hover){.seal:hover{transform:scale(1.05)}}
.going .seal{transform:scale(.4) rotate(-25deg);opacity:0}

/* 1) الظرف */
.env{--w:min(84vw,360px);position:relative;width:var(--w);height:calc(var(--w)*.7);perspective:1300px;filter:drop-shadow(0 26px 30px rgba(0,0,0,.28))}
.env-back{position:absolute;inset:0;background:color-mix(in srgb,var(--env) 84%,#000 16%)}
.env-liner{position:absolute;inset:4px 4px 30% 4px;background-color:var(--paper2);background-image:var(--pat);clip-path:polygon(0 0,100% 0,50% 92%);opacity:0;transition:opacity .2s ease .25s}
.env-paper{position:absolute;left:8%;right:8%;top:8%;height:84%;background-color:var(--paper);background-image:var(--pat);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);display:grid;place-items:start center;padding-top:14%;opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1) .45s,opacity .2s ease .35s}
.env-paper span{font-family:var(--f-name);font-weight:700;font-size:26px;color:var(--accent)}
.env-front{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--env) 92%,#fff 8%),var(--env));clip-path:polygon(0 30%,50% 60%,100% 30%,100% 100%,0 100%);z-index:3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4%;color:var(--env-ink)}
.env-front::before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.6;pointer-events:none}
.env-front .in-to{position:relative}
.env-flap{position:absolute;left:0;right:0;top:0;height:62%;background:linear-gradient(180deg,color-mix(in srgb,var(--env) 85%,#fff 15%),color-mix(in srgb,var(--env) 96%,#000 4%));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .7s cubic-bezier(.4,.1,.2,1) .15s;z-index:4;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))}
.in-envelope.going .env-flap{transform:rotateX(180deg);z-index:1}
.in-envelope.going .env-liner{opacity:1}
.in-envelope.going .env-paper{opacity:1;transform:translateY(-62%)}

/* 2) بوابة المشربية */
.doors{position:relative;width:min(84vw,360px);aspect-ratio:.62;perspective:1400px;cursor:pointer;display:flex;direction:ltr;filter:drop-shadow(0 30px 34px rgba(0,0,0,.35))}
.glow{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 45%,#fff8e3,color-mix(in srgb,var(--accent) 55%,#fff8e3) 35%,transparent 70%);opacity:.35;transition:opacity .6s ease}
.door{position:relative;z-index:1;flex:1;background:linear-gradient(180deg,color-mix(in srgb,var(--env) 92%,#fff 8%),color-mix(in srgb,var(--env) 90%,#000 10%));border:2px solid var(--accent);transition:transform 1.3s cubic-bezier(.45,.05,.2,1) .25s}
.door.dl{transform-origin:0 50%;border-right-width:1px}
.door.dr{transform-origin:100% 50%;border-left-width:1px}
.lat{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--accent) 80%,transparent);background:repeating-linear-gradient(45deg,transparent 0 11px,color-mix(in srgb,var(--accent) 70%,transparent) 11px 12.5px),repeating-linear-gradient(-45deg,transparent 0 11px,color-mix(in srgb,var(--accent) 70%,transparent) 11px 12.5px)}
.lat::after{content:"";position:absolute;inset:18% 16%;border:1px solid color-mix(in srgb,var(--accent) 80%,transparent);background:color-mix(in srgb,var(--env) 92%,transparent)}
.knob{position:absolute;top:56%;width:12px;height:30px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 35%,transparent)}
.dl .knob{right:8px}.dr .knob{left:8px}
.plate{position:absolute;z-index:2;left:50%;top:22%;transform:translateX(-50%);min-width:62%;padding:10px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:3px;text-align:center;display:flex;flex-direction:column;line-height:1.35;transition:opacity .35s ease}
.plate span{font-size:11px;color:var(--soft)}.plate b{font-size:16px;font-weight:500}
.in-doors.going .plate{opacity:0}
.in-doors.going .glow{opacity:1}
.in-doors.going .door.dl{transform:rotateY(-108deg)}
.in-doors.going .door.dr{transform:rotateY(108deg)}

/* 3) اكشط الذهب */
.sc-title{margin:0;font-size:15px;opacity:.85}
.scratch{position:relative;width:min(80vw,320px);aspect-ratio:1.7;background:var(--paper);border:1px solid var(--accent);outline:1px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:4px;box-shadow:0 20px 30px -18px rgba(0,0,0,.45);touch-action:none}
.sc-under{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--ink)}
.sc-under b{font-family:var(--f-num);font-weight:500;font-size:46px;line-height:1}
.sc-under b.yr{font-size:22px}
.sc-under span{font-family:var(--fname),var(--f-name);font-weight:700;font-size:28px}
.foil{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .6s ease}
.in-scratch.going .foil{opacity:0}

/* 4) الشريطة الحريرية */
.gift{position:relative;width:min(76vw,310px);aspect-ratio:1;cursor:pointer;filter:drop-shadow(0 26px 28px rgba(0,0,0,.32))}
.g-box{position:absolute;inset:0;background-color:var(--env);background-image:var(--pat),linear-gradient(160deg,color-mix(in srgb,var(--env) 85%,#fff 15%),var(--env));border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);display:flex;align-items:flex-end;justify-content:center;padding-bottom:9%;transition:transform .8s cubic-bezier(.3,.1,.2,1) .7s}
.g-box .in-to{background:var(--paper);color:var(--ink);padding:6px 16px;border:1px solid var(--accent);position:relative;z-index:3}
.rib{position:absolute;z-index:2;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 75%,#000 25%),var(--accent) 30%,color-mix(in srgb,var(--accent) 50%,#fff 50%) 50%,var(--accent) 70%,color-mix(in srgb,var(--accent) 75%,#000 25%));transition:transform .75s cubic-bezier(.5,0,.2,1),opacity .5s ease .3s}
.rib.rv{left:50%;top:-2%;bottom:-2%;width:15%;transform:translateX(-50%)}
.rib.rh{top:50%;left:-2%;right:-2%;height:15%;transform:translateY(-50%);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 75%,#000 25%),var(--accent) 30%,color-mix(in srgb,var(--accent) 50%,#fff 50%) 50%,var(--accent) 70%,color-mix(in srgb,var(--accent) 75%,#000 25%))}
.bow{position:absolute;z-index:4;left:50%;top:50%;width:46%;transform:translate(-50%,-62%);fill:var(--accent);filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .6s ease}
.bow path:nth-child(1),.bow path:nth-child(2){fill:color-mix(in srgb,var(--accent) 85%,#fff 15%)}
.in-ribbon.going .bow{transform:translate(-50%,-260%) rotate(-30deg);opacity:0}
.in-ribbon.going .rib.rv{transform:translateX(-50%) translateY(140%);opacity:0}
.in-ribbon.going .rib.rh{transform:translateY(-50%) translateX(140%);opacity:0}
.in-ribbon.going .g-box{transform:scale(1.04)}

/* 5) اللفافة الملكية */
.scroll{position:relative;width:min(80vw,330px);display:flex;flex-direction:column;align-items:center;cursor:pointer;filter:drop-shadow(0 24px 26px rgba(0,0,0,.32))}
.rod{position:relative;z-index:3;width:108%;height:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 60%,#fff 40%),var(--accent) 45%,color-mix(in srgb,var(--accent) 60%,#000 40%));border-radius:11px}
.rod::before,.rod::after{content:"";position:absolute;top:-4px;width:14px;height:30px;background:inherit;border-radius:7px}
.rod::before{left:-8px}.rod::after{right:-8px}
.scroll .sheet{position:relative;width:100%;height:64px;overflow:hidden;background-color:var(--paper);background-image:var(--pat),linear-gradient(90deg,rgba(0,0,0,.07),transparent 8%,transparent 92%,rgba(0,0,0,.07));transition:height 1.2s cubic-bezier(.3,.1,.2,1) .3s;color:var(--ink)}
.sh-in{position:absolute;left:0;right:0;top:0;height:min(58vh,420px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .6s ease 1.1s}
.sh-in .in-couple{color:var(--ink)}
.sh-l{margin:0;font-family:var(--f-name);font-size:22px;color:var(--accent)}
.scroll .seal{top:50%}
.in-scroll.going .sheet{height:min(58vh,420px)}
.in-scroll.going .sh-in{opacity:1}

/* 6) الستارة */
.curtains{position:fixed;inset:0;cursor:pointer;display:grid;place-items:center}
.cur{position:absolute;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--env) 82%,#000 18%) 0 10px,var(--env) 22px,color-mix(in srgb,var(--env) 82%,#fff 18%) 30px,var(--env) 40px,color-mix(in srgb,var(--env) 82%,#000 18%) 52px);box-shadow:inset 0 -60px 80px -40px rgba(0,0,0,.35);transition:transform 1.5s cubic-bezier(.5,0,.2,1) .2s}
.cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 10px);opacity:.8}
.cl{left:0}.cr{right:0}
.tie{position:absolute;top:58%;width:30px;height:12px;background:var(--accent);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.cl .tie{right:6px}.cr .tie{left:6px}
.cur-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 28px;background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--ink);border:1px solid var(--accent);outline:1px solid var(--accent);outline-offset:4px;transition:opacity .4s ease}
.cur-center .in-couple{color:var(--ink)}
.in-curtain .in-hint{position:fixed;bottom:12%;z-index:3}
.in-curtain.going .cur-center{opacity:0}
.in-curtain.going .cl{transform:translateX(-100%) scaleX(.6);transform-origin:left}
.in-curtain.going .cr{transform:translateX(100%) scaleX(.6);transform-origin:right}

/* فيديو البداية (باب القصر) */
.intro.in-film{background:transparent;background-image:none}
.in-film .in-stage{position:absolute;inset:0;max-width:none;padding:0;display:block}
.in-film .in-hint{position:absolute;left:50%;bottom:calc(5% + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;white-space:nowrap;background:rgba(255,255,255,.82);color:#2a241c;border-color:rgba(166,129,62,.6)}
.film{position:absolute;inset:0;cursor:pointer;overflow:hidden;outline:none;background:#e9e2d6}
.film-poster,.film-v,.film-c{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.film-v{opacity:0;pointer-events:none}
.film.nogl .film-v{opacity:1}
.film.nogl.rolling .film-poster{opacity:0}
.film.zoom .film-v{transform:scale(3.4);opacity:0;transition:transform 1.2s cubic-bezier(.5,0,.3,1),opacity .6s ease .5s}
.film-poster{transition:opacity .25s}
.film-poster[data-deep]{opacity:0}
.film:has(.film-poster[data-deep]){background:var(--env)}
.film-c{opacity:0;transform-origin:var(--origin,50% 54%)}
.film.live,.film.live:has(.film-poster[data-deep]){background:transparent}
.film.live .film-c{opacity:1}
.film.live .film-poster{opacity:0}
.film-plate{position:absolute;z-index:3;left:6%;right:6%;top:var(--plate,25%);transform:translateY(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;line-height:1.25;color:#2a2219;pointer-events:none;transition:opacity .6s ease,transform .8s ease}
.film-plate::before{content:"";position:absolute;inset:-18px -10px;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,250,238,.82),rgba(255,250,238,.5) 45%,transparent 72%);filter:blur(2px)}
.film-plate span{font-size:12px;letter-spacing:.04em;color:color-mix(in srgb,var(--accent) 80%,#000 20%)}
.film-plate b{font-family:var(--fname),var(--f-name);font-size:clamp(26px,8vw,34px);font-weight:700;background:linear-gradient(175deg,#3a2c1a,color-mix(in srgb,var(--accent) 70%,#2a1f12) 60%,#3a2c1a);-webkit-background-clip:text;background-clip:text;color:transparent}
.film-plate.on-dark{color:#f7eedc}
.film-plate.on-dark::before{background:radial-gradient(ellipse at center,rgba(8,6,4,.62),rgba(8,6,4,.35) 45%,transparent 72%)}
.film-plate.on-dark span{color:color-mix(in srgb,var(--accent) 80%,#fff 20%)}
.film-plate.on-dark b{background:linear-gradient(175deg,#fff6dc,color-mix(in srgb,var(--accent) 75%,#fff 25%) 55%,#f3dfae);-webkit-background-clip:text;background-clip:text}
.film.rolling .film-plate{opacity:0;transform:translateY(-70%)}
.in-film.going .in-hint{opacity:0}
.film.zoom .film-c{transform:scale(3.4);opacity:0;transition:transform 1.6s cubic-bezier(.5,0,.3,1),opacity .55s ease 1.05s}
.in-film .dust{display:none}
.in-film .in-hint{pointer-events:none}
.film-plate b{font-size:calc(clamp(26px,8vw,34px) * var(--fscale,1))}