/* چشمه‌ی نور — scroll story over a fixed WebGL journey */
.ch-page{position:relative;background:#06111c;color:#f3ead3}
.ch-3d{position:fixed;inset:0;z-index:0;transition:opacity .25s linear;background:radial-gradient(80% 60% at 50% 30%,#10263b,#050c15)}
.ch-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ch-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#e3c27a;font-size:14px;transition:opacity .6s}
.ch-loading span{width:54px;height:54px;border-radius:50%;border:3px solid rgba(227,194,122,.2);border-top-color:#e3c27a;animation:msh-spin 1s linear infinite}
.gl-ready .ch-loading{opacity:0;pointer-events:none}
.ch-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:30;background:rgba(255,255,255,.06)}
.ch-progress i{display:block;height:100%;transform-origin:right;transform:scaleX(0);background:linear-gradient(270deg,#7fe0a0,#e3c27a,#ffe7a8)}
.ch-story{position:relative;z-index:1}
.ch-st{min-height:92vh;display:flex;align-items:center;padding:12vh 5vw}
.ch-st.l{justify-content:flex-start}
.ch-st.r{justify-content:flex-end}
.ch-st.big,.ch-intro,.ch-outro{justify-content:center;min-height:120vh}
.ch-card{position:relative;max-width:460px;padding:28px 28px 24px;border-radius:26px;background:linear-gradient(180deg,rgba(6,20,34,.74),rgba(4,12,22,.66));border:1px solid rgba(227,194,122,.28);box-shadow:0 30px 70px -30px rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:.28;transform:translateY(34px) scale(.97);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.ch-st.on .ch-card{opacity:1;transform:none}
.ch-card.center{max-width:640px;text-align:center}
.ch-card h1{margin-top:10px;font-size:clamp(40px,7vw,78px);font-weight:900;line-height:1.3;background:linear-gradient(180deg,#fff6dc,#e7c675 60%,#b98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-card h2{margin-top:6px;font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1.4;color:#fbefcf}
.ch-card h2.xl{font-size:clamp(36px,6vw,64px);background:linear-gradient(180deg,#fff,#f3dc9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-card h2 small{font-size:.5em;color:#e3c27a;-webkit-text-fill-color:#e3c27a}
.ch-card p{margin-top:12px;line-height:2.1;font-size:15.5px;color:#d9e2e7}
.ch-t{display:block;margin-top:4px;color:#e3c27a;font-size:14.5px}
.ch-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#e3c27a;letter-spacing:.02em}
.ch-eyebrow::before{content:"";width:18px;height:1px;background:#e3c27a}
.ch-no{position:absolute;top:-18px;inset-inline-start:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-weight:900;color:#3d2a0d;background:radial-gradient(circle at 35% 30%,#fff3cf,#e6c26e 55%,#a97a24);box-shadow:0 0 0 4px rgba(227,194,122,.15),0 0 26px rgba(227,194,122,.5)}
.ch-card blockquote{margin-top:14px;padding:12px 14px;border-radius:14px;font-size:17px;line-height:2;text-align:center;color:#fff2c9;background:rgba(227,194,122,.08);border:1px solid rgba(227,194,122,.2);font-family:"Amiri","Scheherazade New",serif;direction:rtl}
.ch-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.ch-dl div{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(227,194,122,.15)}
.ch-dl dt{font-size:11.5px;color:#9fb2bd}
.ch-dl dd{font-size:13px;font-weight:700;line-height:1.7;color:#f3e3b8}
.glow-green{border-color:rgba(127,224,160,.5);box-shadow:0 0 80px -20px rgba(127,224,160,.45)}
.glow-white{border-color:rgba(230,244,255,.5);box-shadow:0 0 80px -20px rgba(230,244,255,.4)}
.glow-gold{border-color:rgba(255,215,120,.6);box-shadow:0 0 90px -20px rgba(255,215,120,.55)}
.ch-scroll-hint{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:#e3c27a}
.ch-scroll-hint i{width:22px;height:36px;border-radius:12px;border:2px solid #e3c27a;position:relative}
.ch-scroll-hint i::after{content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#e3c27a;animation:ch-wheel 1.6s ease-in-out infinite}
@keyframes ch-wheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* family tree */
.ch-tree{position:relative;z-index:2;padding:90px 0 80px;color:#f3ead3;background:linear-gradient(180deg,rgba(6,17,28,0),#07121d 120px,#0a1a28 60%,#08131d)}
.ch-tree .msh-sx-h{text-align:center;max-width:720px;margin:0 auto 22px}
.ch-tree .msh-sx-h h2{margin-top:6px;font-size:clamp(26px,3.6vw,38px);font-weight:900;background:linear-gradient(180deg,#fff4d6,#e7c675 70%,#c2923a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-tree .msh-sx-h p{margin-top:6px;color:#9fb2bd;line-height:2}
.ch-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px}
.ch-legend i{font-style:normal;font-size:12.5px;padding:4px 12px;border-radius:999px;border:1px solid rgba(227,194,122,.35)}
.ch-tree-wrap{background:radial-gradient(120% 100% at 50% 0%,rgba(231,198,117,.08),transparent 70%);border-color:rgba(227,194,122,.25)}
.ch-tree .kt-n{max-width:170px}
.ch-tree .kt-n b sup{font-size:.62em;color:inherit;opacity:.8}
.ct-prophet,.ch-legend .ct-prophet{background:linear-gradient(180deg,#fff3cf,#e8c66f 60%,#c99a3c)!important;color:#3d2a0d!important;border-color:#c99a3c!important}
.ct-imam,.ch-legend .ct-imam{background:linear-gradient(180deg,#dff8e6,#7fd39b 60%,#3f9a62)!important;color:#0f2f1b!important;border-color:#3f9a62!important}
.ct-holy,.ch-legend .ct-holy{background:linear-gradient(180deg,#ffffff,#e4eef6)!important;color:#1d3343!important;border-color:#c8d8e4!important}
.ct-ancestor,.ch-legend .ct-ancestor{background:rgba(255,255,255,.06)!important;color:#f0e2bd!important;border-color:rgba(227,194,122,.45)!important}
.ct-gap,.ch-legend .ct-gap{background:transparent!important;color:#a9b8c2!important;border:1px dashed rgba(227,194,122,.5)!important;box-shadow:none!important}
.ch-note{max-width:860px;margin:18px auto 0;font-size:13.5px;line-height:2.1;color:#9fb2bd;text-align:center}
.ch-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
@media (max-width:700px){.ch-st,.ch-st.l,.ch-st.r{justify-content:center;padding:14vh 14px}.ch-card{max-width:100%;padding:24px 18px 20px}.ch-dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ch-card{transition:none;opacity:1;transform:none}}
.ch-tree .kt-n{max-width:140px;min-width:80px;padding:7px 9px}.ch-tree .kt-n b{font-size:13px}.ch-tree .kt-n small{font-size:10px}

/* ===== v2: cinematic interface ===== */
.ch-vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(2,6,12,.55) 100%),linear-gradient(180deg,rgba(2,6,12,.35),transparent 18%,transparent 82%,rgba(2,6,12,.45))}
.ch-orn{display:block;width:120px;height:16px;margin:14px auto;color:#e3c27a}
.ch-hero{position:relative;max-width:760px;text-align:center;padding:0 10px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.ch-basmala{display:block;font-size:clamp(20px,2.6vw,28px);color:#f3dc9c;letter-spacing:.02em;opacity:0;animation:ch-rise 1.6s .2s cubic-bezier(.2,.8,.3,1) forwards}
.ch-hero h1{font-size:clamp(54px,10vw,128px);font-weight:900;line-height:1.15;background:linear-gradient(100deg,#b98a2e 0%,#fff6dc 30%,#e7c675 50%,#fff6dc 70%,#b98a2e 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px rgba(231,198,117,.35));animation:ch-rise 1.6s .5s cubic-bezier(.2,.8,.3,1) both,ch-shine 7s 2s linear infinite}
.ch-hero .ch-lead{margin-top:6px;font-size:clamp(18px,2.4vw,26px);font-weight:800;color:#e9d6a2;animation:ch-rise 1.6s .8s both}
.ch-hero p{margin-top:16px;color:#dce5ea;line-height:2.2;font-size:16px;animation:ch-rise 1.6s 1s both}
.ch-start{display:inline-flex;margin-top:26px;padding:13px 34px;border-radius:999px;font-weight:900;font-size:16px;color:#2b1d05;background:linear-gradient(180deg,#fff3cf,#e8c66f 55%,#c99a3c);box-shadow:0 0 0 6px rgba(231,198,117,.12),0 16px 40px -12px rgba(231,198,117,.8);transition:transform .3s,box-shadow .3s;animation:ch-rise 1.6s 1.2s both}
.ch-start:hover{transform:translateY(-3px);box-shadow:0 0 0 8px rgba(231,198,117,.16),0 22px 50px -12px rgba(231,198,117,.9)}
.ch-hero .ch-scroll-hint{display:flex;margin:30px auto 0;animation:ch-rise 1.6s 1.4s both}
@keyframes ch-rise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ch-shine{to{background-position:-250% 0}}
.ch-outro-t{font-size:clamp(30px,5vw,56px);font-weight:900;background:linear-gradient(180deg,#fff,#f3dc9c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* chapter breaks */
.ch-chapter{min-height:100vh;justify-content:center!important}
.ch-chap{text-align:center;text-shadow:0 4px 40px rgba(0,0,0,.7);opacity:0;transform:scale(.94);filter:blur(8px);transition:opacity 1.1s,transform 1.1s,filter 1.1s}
.ch-chapter.on .ch-chap{opacity:1;transform:none;filter:none}
.ch-chap span{font-size:14px;font-weight:800;letter-spacing:.3em;color:#e3c27a}
.ch-chap h2{margin-top:6px;font-size:clamp(56px,11vw,140px);font-weight:900;line-height:1.1;background:linear-gradient(180deg,#fffaf0 15%,#e7c675 75%,#a97a24);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 50px rgba(231,198,117,.3))}
.ch-chap p{max-width:560px;margin:0 auto;color:#e6ecef;font-size:17px;line-height:2}
.ch-chap.green h2{background-image:linear-gradient(180deg,#f2fff6 15%,#9fe8b8 75%,#3f9a62)}
.ch-chap.gold h2{background-image:linear-gradient(180deg,#fffef6 10%,#ffd97a 70%,#d39b2a)}
.ch-chap.sea h2{background-image:linear-gradient(180deg,#f6feff 15%,#9fe3f0 75%,#2f8aa6)}

/* cards */
.ch-card{border:1px solid transparent;background:linear-gradient(180deg,rgba(7,22,36,.82),rgba(4,12,22,.76)) padding-box,linear-gradient(160deg,rgba(255,226,160,.75),rgba(227,194,122,.12) 40%,rgba(227,194,122,.08) 60%,rgba(255,226,160,.6)) border-box;border-radius:28px;filter:blur(3px)}
.ch-st.on .ch-card{filter:none}
.ch-st.l .ch-card{transform:translateX(-40px) scale(.97)}
.ch-st.r .ch-card{transform:translateX(40px) scale(.97)}
.ch-st.on.l .ch-card,.ch-st.on.r .ch-card{transform:none}
.ch-card::before,.ch-card::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23e3c27a' stroke-width='1.3'%3E%3Cpath d='M2 22V2h20'/%3E%3Cpath d='M8 22V8h14'/%3E%3Cpath d='M2 2l12 12'/%3E%3Ccircle cx='14' cy='14' r='2.5' fill='%23e3c27a'/%3E%3C/g%3E%3C/svg%3E") no-repeat;opacity:.85}
.ch-card::before{top:10px;right:10px;transform:scaleX(-1)}
.ch-card::after{bottom:10px;left:10px;transform:scaleY(-1)}
.ch-card h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:clamp(32px,4.4vw,46px);background:linear-gradient(180deg,#fffaf0,#f0d590 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-card.center h2{justify-content:center}
.ch-card h2 small{font-size:13px;font-weight:700;color:#e3c27a;-webkit-text-fill-color:#e3c27a;letter-spacing:0}
.ch-seal{position:absolute;top:-24px;inset-inline-start:26px;display:grid;place-items:center;width:52px;height:52px;font-weight:900;font-size:17px;color:#3d2a0d;background:radial-gradient(circle at 35% 30%,#fff6da,#e7c675 55%,#a97a24);clip-path:polygon(50% 0,61% 13%,78% 8%,80% 25%,96% 31%,88% 46%,100% 59%,85% 67%,86% 84%,69% 84%,61% 100%,50% 89%,39% 100%,31% 84%,14% 84%,15% 67%,0 59%,12% 46%,4% 31%,20% 25%,22% 8%,39% 13%);filter:drop-shadow(0 0 14px rgba(231,198,117,.6))}
.ch-card.center .ch-seal{inset-inline-start:50%;margin-inline-start:-26px}
.ch-seal.green{background:radial-gradient(circle at 35% 30%,#f2fff6,#9fe8b8 55%,#3f9a62);color:#0d2b18}
.ch-seal.white{background:radial-gradient(circle at 35% 30%,#fff,#e4eef6 60%,#9fb8ca);color:#173041}
.ch-seal.sea{background:radial-gradient(circle at 35% 30%,#f2fdff,#9fe3f0 55%,#2f8aa6);color:#0b2a35}
.ch-card.sea{background:linear-gradient(180deg,rgba(5,26,36,.82),rgba(3,14,22,.76)) padding-box,linear-gradient(160deg,rgba(160,232,245,.7),rgba(120,200,220,.1) 45%,rgba(160,232,245,.5)) border-box}
.ch-card.sea .ch-t,.ch-card.sea .ch-eyebrow{color:#9fe3f0}
.ch-card.sea .ch-eyebrow::before{background:#9fe3f0}
.ch-card blockquote{position:relative;margin-top:16px;padding:16px 16px 12px;border-radius:16px;background:radial-gradient(120% 140% at 50% 0%,rgba(227,194,122,.14),rgba(227,194,122,.03));border:1px solid rgba(227,194,122,.22)}
.ch-card blockquote .ay{display:block;font-size:20px;line-height:2.1;color:#fff3cf}
.ch-card blockquote cite{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#c9b07a}

/* side map */
.ch-map{position:fixed;z-index:20;left:18px;top:50%;transform:translateY(-50%);max-height:72vh;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;padding:10px 6px;border-radius:18px;background:rgba(4,12,22,.45);border:1px solid rgba(227,194,122,.18);backdrop-filter:blur(6px);transition:opacity .4s,transform .4s}
.ch-map::-webkit-scrollbar{display:none}
.ch-map.hide{opacity:0;pointer-events:none;transform:translate(-20px,-50%)}
.ch-map button{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:10px;color:#cdbb8f;font-size:11.5px;text-align:right;transition:background .2s,color .2s}
.ch-map button i{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(227,194,122,.45);transition:transform .3s,box-shadow .3s,background .3s}
.ch-map button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
.ch-map:hover button span,.ch-map button.on span{max-width:110px}
.ch-map button:hover{background:rgba(227,194,122,.1);color:#fff0c4}
.ch-map button.on{color:#fff3cf}
.ch-map button.on i{transform:scale(1.6);background:#ffe2a0;box-shadow:0 0 12px #ffd77a}
.ch-map .k-muhammad i{background:#7fe0a0}
.ch-map .k-kawthar i{background:#e8f4ff}
.ch-map .k-ali i{background:#ffd97a;width:11px;height:11px}
.ch-map .k-imam i{background:#8fd8e8}
@media (max-width:1000px){.ch-map{display:none}}
@media (max-width:700px){.ch-st.l .ch-card,.ch-st.r .ch-card{transform:translateY(30px)}.ch-card h2{font-size:30px}.ch-card blockquote .ay{font-size:17px}}