/* شهود — الرئيسية كفيلم (Opus 5.5).
   كل .scene طولها --len شاشة، ومسرحها .stage ثابت؛ cinema.js يضبط --p من 0 إلى 1.
   أي عنصر .k يحسب تقدّمه المحلي --t بين --a و--b. بلا JS أو مع تقليل الحركة: --p = 1 والمشاهد ثابتة. */

.film{position:relative;--film-bg:var(--pearl)}
.scene{position:relative;--p:1}
.stage{position:relative;min-height:100svh;display:grid;place-items:center;padding:calc(var(--head-h) + 24px) var(--gutter) 96px;overflow:hidden;text-align:center}
.k{--t:clamp(0,calc((var(--p) - var(--ka,0)) / (var(--kb,1) - var(--ka,0))),1)}

/* الوضع السينمائي (يضيفه JS عند السماح بالحركة) */
html.cine .scene{height:calc(var(--len,2) * 100svh)}
html.cine{scroll-behavior:auto}
/* المشاهد تتراكب: يبدأ المشهد التالي لحظة انتهاء السابق، فلا فراغ بينهما (قطع سينمائي متداخل) */
html.cine .scene + .scene{margin-top:-100svh}
html.cine .scene:nth-child(1){z-index:1}html.cine .scene:nth-child(2){z-index:2}html.cine .scene:nth-child(3){z-index:3}html.cine .scene:nth-child(4){z-index:4}html.cine .scene:nth-child(5){z-index:5}html.cine .scene:nth-child(6){z-index:6}html.cine .scene:nth-child(7){z-index:7}html.cine .scene:nth-child(8){z-index:8}html.cine .scene:nth-child(9){z-index:9}
html.cine .stage{position:sticky;top:0;height:100svh;min-height:0;--out:clamp(0,calc((var(--p) - .9) * 10),1);--in:clamp(0,calc(var(--p) * 12),1);opacity:calc(var(--in) * (1 - var(--out)));pointer-events:none}
html.cine .stage > *{pointer-events:auto}
html.cine .s-end .stage{--out:0}
html.cine .s-open .stage{--in:1}
html.cine .k.up{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 38px));transition:none}
html.cine .k.up.glow{background:linear-gradient(90deg,var(--teal),var(--teal) 50%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}

/* الطباعة السينمائية */
.mega{font-size:clamp(44px,9.4vw,112px);font-weight:700;line-height:1.08;letter-spacing:0;color:var(--ink);text-wrap:balance}
.giant{font-size:clamp(40px,8.2vw,96px);font-weight:700;line-height:1.12;text-wrap:balance}
.giant span{display:inline-block}
.big{font-size:clamp(28px,4.6vw,52px);font-weight:700;line-height:1.2;text-wrap:balance}
.kicker{font-size:15px;font-weight:600;color:var(--teal);margin-bottom:10px}
.lede{font-size:clamp(19px,2.2vw,24px);color:var(--muted);margin:14px auto 0}
.sub{font-size:clamp(17px,2vw,22px);color:var(--muted);margin:18px auto 0;max-width:34ch;line-height:1.7}
.center-copy{position:relative;z-index:2;max-width:980px}
.center-copy.low{align-self:end;margin-bottom:4vh}
.sample-tag{display:inline-flex;font-size:13px;font-weight:600;color:var(--muted);background:var(--sunken);border-radius:999px;padding:4px 12px}

/* كلمات الافتتاح: حركة زمنية عند التحميل */
html.cine .w{animation:wIn .9s var(--d,0s) var(--e-settle) both}
@keyframes wIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}

/* 0. الافتتاح */
.s-open .stage{grid-template-rows:auto auto;align-content:center;gap:28px;background:radial-gradient(60% 50% at 50% 38%,rgba(107,179,163,.18),transparent 70%)}
.open-icon{position:relative;width:clamp(150px,22vw,260px)!important;height:clamp(150px,22vw,260px)!important;aspect-ratio:1;border-radius:22.4%;overflow:hidden;margin-inline:auto;box-shadow:0 30px 70px rgba(9,64,64,.18)}
.open-icon img{position:absolute;inset:0;width:100%;height:100%}
html.cine .open-art{transform:translateY(calc(var(--t) * -6vh)) scale(calc(1 - var(--t) * .3));opacity:calc(1 - var(--t) * .9)}
html.cine .open-copy{opacity:calc(1 - var(--t));transform:translateY(calc(var(--t) * -4vh))}
.open-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.play-film svg{width:18px;height:18px}
.scroll-cue{position:absolute;bottom:28px;inset-inline:0;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:2px;height:34px;border-radius:2px;background:linear-gradient(var(--teal),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1)}}
html:not(.cine) .scroll-cue{display:none}
/* كشف الأيقونة (نفس تقنية التطبيق) */
@property --r{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --sw{syntax:'<angle>';inherits:false;initial-value:0deg}
.lx-base,.lx-core,.lx-arc{display:none}
html.cine .lx-base{display:block;filter:blur(22px);transform:scale(1.25);animation:oBase .4s ease-out both}
html.cine .lx-core{display:block;-webkit-mask:radial-gradient(circle at 50% 38%,#000 calc(var(--r) - 6%),transparent var(--r));mask:radial-gradient(circle at 50% 38%,#000 calc(var(--r) - 6%),transparent var(--r));animation:oCore .55s .1s var(--e-settle) both}
html.cine .lx-arc{display:block;-webkit-mask:conic-gradient(from 60deg at 50% 45%,#000 calc(var(--sw) - 18deg),transparent var(--sw));mask:conic-gradient(from 60deg at 50% 45%,#000 calc(var(--sw) - 18deg),transparent var(--sw));animation:oArc .7s .4s cubic-bezier(.4,.1,.45,1) both}
html.cine .lx-full{opacity:0;animation:oFull .2s 1.1s forwards}
.lx-glint{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);opacity:0;mix-blend-mode:soft-light;pointer-events:none}
html.cine .lx-glint{animation:oGlint .7s 1s ease-in-out forwards}
@keyframes oBase{from{opacity:0}to{opacity:.95}}
@keyframes oCore{0%{--r:0%;filter:blur(10px)}100%{--r:37%;filter:blur(0)}}
@keyframes oArc{from{--sw:0deg}to{--sw:272deg}}
@keyframes oFull{to{opacity:1}}
@keyframes oGlint{0%{opacity:0;transform:translateX(-70%)}30%{opacity:1}100%{opacity:0;transform:translateX(70%)}}

/* 1. النية */
.self-orb{position:relative;display:grid;place-items:center;pointer-events:none;margin-bottom:5vh}
.self-orb > *{grid-area:1/1;border-radius:50%}
.self-orb b{width:clamp(90px,14vw,150px);aspect-ratio:1;background:radial-gradient(circle at 38% 32%,#fff,var(--pearl-l) 45%,#efe7d4);border:3px solid var(--teal);box-shadow:0 30px 80px rgba(15,99,94,.22)}
.self-orb i{width:clamp(90px,14vw,150px);aspect-ratio:1;border:1.5px solid rgba(15,99,94,.18)}
html.cine .self-orb{transform:scale(calc(.4 + var(--t) * .6));opacity:var(--t)}
.s-self .stage{align-content:center;grid-template-rows:auto auto}
html.cine .self-orb i{animation:ripple 3.6s ease-out infinite}
.self-orb i:nth-child(2){animation-delay:1.2s!important}.self-orb i:nth-child(3){animation-delay:2.4s!important}
@keyframes ripple{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
html:not(.cine) .self-orb{position:relative;margin-bottom:24px}

/* 2. السلوك */
.arc-stage{position:absolute;left:50%;top:13%;width:min(92vw,760px,95vh);aspect-ratio:600/320;transform:translateX(-50%)}
.arc-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-line path{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.me-dot{position:absolute;left:50%;top:0;transform:translate(-50%,-30%);width:clamp(80px,11vw,120px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--pearl-l);border:3px solid var(--teal);font-weight:700;color:var(--teal);font-size:clamp(15px,1.6vw,19px);box-shadow:0 18px 50px rgba(15,99,94,.2)}
.wd{position:absolute;left:var(--x);top:var(--y);width:clamp(54px,7.4vw,78px);aspect-ratio:1;border-radius:50%;background:var(--teal);color:var(--pearl-l);display:grid;place-items:center;font-size:clamp(11px,1.2vw,14px);font-weight:600;transform:translate(-50%,-50%);box-shadow:0 12px 30px rgba(9,64,64,.25)}
.wd:nth-of-type(2){background:var(--gold);color:var(--ink)}.wd:nth-of-type(4){background:var(--navy)}.wd:nth-of-type(5){background:var(--mint);color:var(--ink)}
html.cine .wd{opacity:var(--t);transform:translate(calc(-50% + (1 - var(--t)) * var(--fx)),calc(-50% + (1 - var(--t)) * var(--fy))) scale(calc(.4 + var(--t) * .6))}

/* 3. المسافة */
.gap-hero{position:relative;width:min(80vw,640px);height:90px;margin-inline:auto}
.gh-line{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--mint));left:calc(50% - var(--t) * 40%);right:calc(50% - var(--t) * 40%)}
.gh-dot{position:absolute;top:50%;width:clamp(58px,8vw,84px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;transform:translate(-50%,-50%)}
.gh-dot.me{background:var(--pearl-l);border:3px solid var(--teal);color:var(--teal);right:auto;left:calc(50% + var(--t) * 40%)}
.gh-dot.them{background:var(--teal);color:var(--pearl-l);left:calc(50% - var(--t) * 40%)}
.gap-rows{position:relative;z-index:2;width:min(92vw,620px);margin-top:28px;display:grid;gap:12px;text-align:start;background:rgba(254,252,247,.9);border:1px solid var(--hair);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
html.cine .gap-rows{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 30px))}
.s-gap .stage{align-content:center;gap:8px}
.s-gap .stage{grid-template-rows:auto auto auto}
.gr{display:grid;grid-template-columns:minmax(0,9.5em) 1fr;align-items:center;gap:14px;font-size:15px;font-weight:600}
html.cine .gr{opacity:var(--t)}
.gt{position:relative;height:22px;--k:1}
html.cine .gr .gt{--k:var(--t)}
.gt::before{content:"";position:absolute;inset:10px 0;background:var(--sunken);border-radius:2px}
.gt i{position:absolute;top:50%}
.gt .ln{height:4px;margin-top:-2px;background:rgba(15,99,94,.35);border-radius:2px;inset-inline-start:calc(min(var(--me),var(--them)) * 1%);width:calc((max(var(--me),var(--them)) - min(var(--me),var(--them))) * 1% * var(--k))}
.gt .mi,.gt .th{width:18px;height:18px;border-radius:50%;margin-top:-9px;margin-inline-start:-9px}
.gt .th{background:var(--teal);inset-inline-start:calc((var(--me) + (var(--them) - var(--me)) * var(--k)) * 1%)}
.gt .mi{background:var(--pearl-l);border:3px solid var(--teal);inset-inline-start:calc(var(--me) * 1%);z-index:1}
.gr-legend{display:flex;gap:18px;font-size:13px;color:var(--muted);justify-content:flex-start;margin-top:4px}
.gr-legend span{display:flex;align-items:center;gap:6px}
.gr-legend i{position:static;width:12px;height:12px;border-radius:50%;margin:0}
.gr-legend .mi{background:var(--pearl-l);border:2.5px solid var(--teal)}.gr-legend .th{background:var(--teal)}

/* 4. كيف يعمل */
.s-how .stage{align-content:center;gap:28px;grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr);justify-items:stretch}
.strip-wrap{min-width:0}
.strip-wrap{overflow:visible;width:100%}
.strip{list-style:none;display:flex;gap:20px;width:max-content;padding-inline:max(var(--gutter),calc(50vw - 300px))}
html.cine .strip{transform:translateX(calc(var(--p) * var(--shift,0px)))}
.frame{width:min(78vw,600px);flex:none;text-align:start;background:var(--pearl-l);border:1px solid var(--hair);border-radius:28px;padding:28px;box-shadow:0 20px 60px rgba(9,64,64,.08);display:grid;gap:10px;align-content:start}
.frame h3{font-size:clamp(22px,2.6vw,30px);font-weight:700}
.frame p{color:var(--muted);font-size:17px}
.fno{font-size:15px;font-weight:700;color:var(--teal);letter-spacing:.1em}
.fvis{height:150px;border-radius:20px;background:linear-gradient(160deg,rgba(107,179,163,.18),rgba(254,252,247,.6));position:relative;overflow:hidden;margin-bottom:6px}
.v-test i{position:absolute;inset-inline-start:24px;height:12px;border-radius:6px;background:rgba(15,99,94,.18)}
.v-test i:nth-child(1){top:24px;width:60%;background:var(--teal)}.v-test i:nth-child(2){top:48px;width:44%}.v-test i:nth-child(3){top:72px;width:52%}.v-test i:nth-child(4){top:96px;width:36%}.v-test i:nth-child(5){top:120px;width:48%}
.v-invite b{position:absolute;left:50%;top:22px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--pearl-l);border:3px solid var(--teal)}
.v-invite i{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--teal);top:96px}
.v-invite i:nth-of-type(1){left:calc(50% + 110px)}.v-invite i:nth-of-type(2){left:calc(50% + 50px);top:112px;background:var(--gold)}.v-invite i:nth-of-type(3){left:calc(50% - 13px);top:118px}.v-invite i:nth-of-type(4){left:calc(50% - 76px);top:112px;background:var(--navy)}.v-invite i:nth-of-type(5){left:calc(50% - 136px);background:var(--mint)}
.v-answer i{position:absolute;inset-inline-start:24px;height:34px;border-radius:17px 17px 17px 4px;background:var(--pearl-l);border:1px solid var(--hair)}
.v-answer i:nth-child(1){top:20px;width:55%}.v-answer i:nth-child(2){top:62px;width:40%;inset-inline-start:auto;inset-inline-end:24px;background:#dcf2e9;border-radius:17px 17px 4px 17px}.v-answer i:nth-child(3){top:104px;width:62%}
.v-picture{display:grid;place-items:center}
.v-picture .gt,.fvis.v-picture{--me:40;--them:72}
.v-picture{padding-inline:30px}
.v-picture i{position:absolute;top:50%}
.v-picture::before{content:"";position:absolute;inset:auto 30px;top:50%;height:4px;margin-top:-2px;background:var(--sunken)}
.v-picture .ln{height:6px;margin-top:-3px;background:rgba(15,99,94,.35);border-radius:3px;inset-inline-start:calc(30px + 40% * .8);width:calc(32% * .8)}
.v-picture .mi,.v-picture .th{width:30px;height:30px;margin-top:-15px;border-radius:50%}
.v-picture .mi{background:var(--pearl-l);border:4px solid var(--teal);inset-inline-start:calc(30px + 40% * .8 - 15px)}
.v-picture .th{background:var(--teal);inset-inline-start:calc(30px + 72% * .8 - 15px)}
.strip-progress{height:3px;width:min(60vw,360px);margin-inline:auto;background:var(--sunken);border-radius:2px;overflow:hidden}
.strip-progress i{display:block;height:100%;background:var(--teal);transform-origin:right;transform:scaleX(var(--p))}
html:not(.cine) .strip{flex-direction:column;width:auto;align-items:center;padding:0}
html:not(.cine) .strip-progress{display:none}

/* 5. السرية */
.merge{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.merge > *{grid-area:1/1}
.card-a{width:clamp(110px,14vw,150px);aspect-ratio:1.35;border-radius:18px;background:var(--pearl-l);border:1px solid var(--hair);box-shadow:0 16px 40px rgba(9,64,64,.1);padding:14px;display:grid;align-content:start;gap:8px;transform:translate(var(--fx),var(--fy)) rotate(var(--rot));margin-top:-24vh}
.card-a i{height:9px;border-radius:5px;background:rgba(15,99,94,.18)}.card-a i:nth-child(1){width:70%;background:rgba(15,99,94,.4)}.card-a i:nth-child(2){width:90%}.card-a i:nth-child(3){width:55%}
html.cine .card-a{transform:translate(calc(var(--fx) * (1 - var(--t))),calc(var(--fy) * (1 - var(--t)))) rotate(calc(var(--rot) * (1 - var(--t)))) scale(calc(1 - var(--t) * .8));opacity:calc(1 - var(--t) * .95)}
.agg{width:clamp(110px,14vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--mint),var(--teal) 60%,var(--teal-d));box-shadow:0 0 0 14px rgba(107,179,163,.18),0 30px 80px rgba(15,99,94,.35);margin-top:-24vh}
html.cine .agg{opacity:var(--t);transform:scale(calc(.3 + var(--t) * .7))}
html:not(.cine) .card-a{display:none}

/* 6. الجوهريات */
.s-ess .stage{align-content:center;gap:28px;grid-template-rows:auto auto auto}
.ess{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(100%,1060px);margin-inline:auto}
.ess-i{background:var(--pearl-l);border:1px solid var(--hair);border-radius:26px;padding:24px;text-align:start;display:grid;gap:10px;box-shadow:var(--shadow)}
.ess-i p{font-size:15px;color:var(--teal);font-weight:600}
.ess-i strong{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.15}
@media (max-width:760px){.ess{grid-template-columns:1fr;gap:12px}.ess-i{padding:16px 18px}.ess-i strong{font-size:28px}}

/* 7. التطبيق */
.s-app .stage{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,6vw,90px);text-align:start;max-width:1180px;margin-inline:auto;width:100%}
.caps{list-style:none;margin-top:22px;display:grid;gap:10px;counter-reset:c}
.cap{font-size:clamp(17px,1.8vw,21px);color:var(--muted);padding-inline-start:18px;border-inline-start:3px solid var(--hair);transition:color .3s,border-color .3s}
.cap.on{color:var(--ink);border-color:var(--teal);font-weight:600}
.phone-shot{position:relative;width:clamp(220px,26vw,340px);aspect-ratio:420/908}
.phone-shot img{position:absolute;inset:0;width:100%;height:100%;border-radius:15%/7%;opacity:0;transform:scale(.97);transition:opacity .5s var(--e-settle),transform .6s var(--e-settle);filter:drop-shadow(0 30px 50px rgba(9,40,40,.25))}
.phone-shot img.on{opacity:1;transform:none}
html:not(.cine) .phone-shot img:first-child{opacity:1}
@media (max-width:760px){.s-app .stage{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;gap:16px}.caps{display:block}.cap{display:none;border:0;padding:0}.cap.on{display:block}.phone-shot{width:min(52vw,250px)}.s-app .big{font-size:28px}}
html:not(.cine) .cap{color:var(--ink)}

/* 8. الختام */
.s-end .stage{align-content:center;gap:24px;grid-template-rows:auto auto auto}
.end-art{position:relative;width:clamp(140px,18vw,200px);aspect-ratio:1;margin-inline:auto}
.end-art img{position:absolute;inset:14%;width:72%;height:72%;border-radius:22.4%;box-shadow:0 20px 50px rgba(9,64,64,.18)}
.end-art svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg) scaleY(-1)}
.end-ring{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t))}
.end-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:flex-start}

/* المشغّل */
.player{position:fixed;z-index:60;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(20,38,41,.86);color:var(--pearl-l);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.25);width:min(560px,calc(100vw - 32px));transition:opacity .3s,transform .3s}
.player.off{opacity:0;pointer-events:none;transform:translate(-50%,20px)}
.player[hidden]{display:none}
.pl-btn{width:40px;height:40px;border-radius:50%;background:var(--pearl-l);color:var(--teal);display:grid;place-items:center;flex:none}
.pl-btn svg{width:18px;height:18px}
.pl-btn .i-pause,.player.playing .pl-btn .i-play{display:none}
.player.playing .pl-btn .i-pause{display:block}
.pl-track{position:relative;flex:1;height:22px;min-width:0}
.pl-track::before{content:"";position:absolute;inset:9px 0;border-radius:2px;background:rgba(254,252,247,.22)}
.pl-fill{position:absolute;top:9px;height:4px;right:0;border-radius:2px;background:var(--mint);width:calc(var(--prog,0) * 100%)}
.pl-ticks{position:absolute;inset:0}
.pl-ticks button{position:absolute;top:-11px;width:24px;height:44px;margin-right:-12px;border-radius:50%;display:grid;place-items:center}
.pl-ticks button::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(254,252,247,.6)}
.pl-ticks button.done::after{background:var(--pearl-l)}
.pl-ticks button:focus-visible{outline:2px solid var(--pearl-l);outline-offset:1px}
.pl-ch{font-size:13px;font-weight:600;white-space:nowrap;min-width:5.5em;text-align:center}
@media (max-width:420px){.pl-ch{display:none}}

/* بلا حركة سينمائية: كل مشهد قسم عادي مكتمل */
html:not(.cine) .scene .stage{min-height:auto;padding-block:72px}
html:not(.cine) [data-play]{display:none}
html:not(.cine) .cap{display:block;border:0;padding:0}
html:not(.cine) .arc-stage{position:relative;left:auto;top:auto;transform:none;margin:0 auto 24px}
html:not(.cine) .gap-hero{position:relative;top:auto;left:auto;transform:none;margin:0 auto 12px}
html:not(.cine) .s-gap .center-copy{margin-top:0}
html:not(.cine) .merge{position:relative;height:200px}
html:not(.cine) .card-a,html:not(.cine) .agg{margin-top:0}
html:not(.cine) .center-copy.low{align-self:auto;margin-bottom:0}
html:not(.cine) .self-orb{transform:none}
@media (max-height:780px){
  .gap-hero{height:70px}.gap-rows{gap:6px;padding:14px 16px;margin-top:14px}.gr{font-size:13px}.s-gap .sub{margin-top:10px}
  .giant{font-size:clamp(36px,7vw,76px)}.mega{font-size:clamp(40px,8vw,92px)}
}