/* =========================================================
   BLOCK 7B – UMRAH JOURNEY  (cinematic 12-stage portal)
   Colours, images, animation and timing are set per stage in
   Appearance > Customize > Insha Safar – Home Page > Journey Stage 01–12
========================================================= */
@property --jra{syntax:'<angle>';inherits:false;initial-value:0deg}

.isf-jr-sec .isf-center{margin-bottom:40px}
.jr{--gl:#C9A44C;--ctl:#fff;--pr:0;--mx:0;--my:0;--sp2:0;position:relative;isolation:isolate;overflow:hidden;border-radius:32px;border:1px solid var(--bd);color:#fff;min-height:clamp(700px,92vh,880px);display:flex;flex-direction:column;background:#0B0B0B;box-shadow:0 40px 120px rgba(0,0,0,.55)}

/* ---- living background ---- */
.jr-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;background:#0B0B0B}
.jr-bgl{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 62% 74% at 74% 48%,color-mix(in srgb,var(--gl) 34%,transparent),transparent 70%),linear-gradient(135deg,var(--b1,#0B0B0B),var(--b2,#1C1509))}
.jr-bgl.on{opacity:1;z-index:1}
.jr-bgl.in{opacity:1;z-index:2}
.jr-bgl.t-fade,.jr-bgl.t-sweep{animation:jrbf 1.4s ease both}
.jr-bgl.t-zoom{animation:jrbz 1.9s cubic-bezier(.2,.7,.2,1) both}
.jr-bgl.t-iris{animation:jrbi 1.6s cubic-bezier(.65,0,.35,1) both}
@keyframes jrbf{from{opacity:0}to{opacity:1}}
@keyframes jrbz{from{opacity:0;transform:scale(1.28)}to{opacity:1;transform:none}}
@keyframes jrbi{from{clip-path:circle(0% at 74% 50%)}to{clip-path:circle(150% at 74% 50%)}}
.jr-pat{position:absolute;inset:-10%;z-index:3;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23C9A44C' stroke-width='.3'%3E%3Cpath d='M12 1l3.2 3.2h4.6v4.6L23 12l-3.2 3.2v4.6h-4.6L12 23l-3.2-3.2H4.2v-4.6L1 12l3.2-3.2V4.2h4.6z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");background-size:96px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 76% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 76% 50%,#000,transparent 75%);transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-10px),0);animation:jrpat 60s linear infinite}
@keyframes jrpat{to{background-position:96px 96px}}
.jr-sweep{position:absolute;top:-20%;bottom:-20%;left:-50%;width:34%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-18deg)}
.jr-sweep.go{animation:jrsw 1.5s cubic-bezier(.4,0,.2,1)}
@keyframes jrsw{0%{left:-50%;opacity:1}100%{left:130%;opacity:1}}
.jr-vig{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45))}

/* stage progress bar */
.jr-prog{position:absolute;top:0;left:0;right:0;height:3px;z-index:9;background:color-mix(in srgb,var(--ctl) 12%,transparent)}
.jr-prog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--sp2,0));background:var(--gl);box-shadow:0 0 12px var(--gl)}

/* ---- slides ---- */
.jr-stage{position:relative;flex:1;min-height:clamp(520px,72vh,690px);z-index:6}
.jr-slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(28px,5vw,64px) clamp(24px,5vw,72px);color:var(--tc,#fff);visibility:hidden;opacity:0;transition:opacity .9s ease,visibility 0s .9s}
.jr-slide.is-active{visibility:visible;opacity:1;transition:opacity .9s ease,visibility 0s}

/* typography */
.jr-text{position:relative;z-index:2}
.jr-num{position:absolute;left:-.04em;top:50%;transform:translate(calc(var(--mx)*-18px),-58%);font-size:clamp(140px,20vw,300px);font-weight:800;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--gl) 42%,transparent);opacity:.55;z-index:-1;pointer-events:none;user-select:none}
.jr-label{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gl)}
.jr-h{font-size:clamp(30px,4.4vw,62px);font-weight:700;line-height:1.07;letter-spacing:-.03em;margin:14px 0 18px;color:var(--tc,#fff)}
.jr-desc{font-size:clamp(16px,1.5vw,19px);line-height:1.7;max-width:520px;color:color-mix(in srgb,var(--tc,#fff) 76%,transparent)}
.jr-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.jr-w>i{display:inline-block;font-style:normal;opacity:0;transform:translateY(115%) rotate(5deg);transform-origin:0 100%}
.jr-slide.is-active .jr-w>i{animation:jrword .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.07s + .35s)}
.jr-slide.is-active .jr-desc{animation:jrdesc 1.1s ease .95s both}
.jr-slide.is-active .jr-label{animation:jrlabel 1.1s ease .15s both}
@keyframes jrword{to{opacity:1;transform:none}}
@keyframes jrdesc{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes jrlabel{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.24em}}
.jr-slide:not(.is-active) .jr-w>i{opacity:1;transform:none}   /* keep text steady while the slide fades out */

/* ---- the glowing oval portal ---- */
.jr-art{position:relative;display:grid;place-items:center;height:100%;min-height:380px;perspective:1400px}
.jr-halo{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--gl) 38%,transparent),transparent 66%);filter:blur(12px);animation:jrbreath 6s ease-in-out infinite}
@keyframes jrbreath{50%{transform:scale(1.12);opacity:.75}}
.jr-tilt{transform-style:preserve-3d;transform:rotateY(calc(var(--mx)*7deg)) rotateX(calc(var(--my)*-6deg));transition:transform .35s ease-out}
.jr-ow{transform-style:preserve-3d}
.jr-float{position:relative;width:clamp(230px,27vw,340px);aspect-ratio:3/4;animation:jrfloat 7s ease-in-out infinite}
@keyframes jrfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.jr-oval{position:absolute;inset:0;border-radius:50%;padding:5px;background:conic-gradient(from var(--jra),var(--gl),transparent 22%,var(--gl) 48%,transparent 72%,var(--gl));animation:jrspin 8s linear infinite;box-shadow:0 0 50px color-mix(in srgb,var(--gl) 45%,transparent),0 44px 90px rgba(0,0,0,.6)}
@keyframes jrspin{to{--jra:360deg}}
.jr-img{position:absolute;inset:5px;border-radius:50%;overflow:hidden;background:#0B0B0B;box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
.jr-img::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 36%,rgba(0,0,0,.35));pointer-events:none}
.jr-pic{position:absolute;left:-4%;top:-4%;width:108%;height:108%;max-width:none;object-fit:cover;display:block;animation:jrkb 18s ease-in-out infinite alternate}
@keyframes jrkb{from{transform:scale(1)}to{transform:scale(1.14) translate(-1.5%,1%)}}
.jr-img.no-img{background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--gl) 34%,#0B0B0B),#0B0B0B 72%);display:grid;place-items:center;align-content:center;gap:10px}
.jr-s8{width:46%;height:auto;color:var(--gl);stroke-width:.6;opacity:.8;animation:jrrot 40s linear infinite}
@keyframes jrrot{to{transform:rotate(360deg)}}
.jr-img b{font-size:clamp(34px,5vw,56px);font-weight:700;color:#fff;letter-spacing:-.02em;text-shadow:0 0 24px var(--gl)}
.jr-shine{position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);animation:jrshine 7s ease-in-out infinite}
@keyframes jrshine{0%,55%{left:-60%}100%{left:140%}}
.jr-ring{position:absolute;border-radius:50%;pointer-events:none}
.jr-ring.r1{inset:-26px;border:1px solid color-mix(in srgb,var(--gl) 45%,transparent);transform:rotate(-7deg)}
.jr-ring.r2{inset:-54px;border:1px dashed color-mix(in srgb,var(--gl) 32%,transparent);animation:jrrot2 50s linear infinite}
@keyframes jrrot2{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* oval entrance (per stage: data-anim) */
.jr-slide.is-active[data-anim="glide"] .jr-ow{animation:jrglide var(--ad,1.4s) cubic-bezier(.16,.84,.24,1) .15s both}
.jr-slide.is-active[data-anim="glideL"] .jr-ow{animation:jrglideL var(--ad,1.4s) cubic-bezier(.16,.84,.24,1) .15s both}
.jr-slide.is-active[data-anim="rise"] .jr-ow{animation:jrrise var(--ad,1.4s) cubic-bezier(.16,.84,.24,1) .15s both}
.jr-slide.is-active[data-anim="zoom"] .jr-ow{animation:jrzoom var(--ad,1.4s) cubic-bezier(.16,.84,.24,1) .15s both}
.jr-slide.is-active[data-anim="flip"] .jr-ow{animation:jrflip var(--ad,1.4s) cubic-bezier(.16,.84,.24,1) .15s both}
@keyframes jrglide{from{opacity:0;transform:translate3d(170px,0,-260px) rotateY(-34deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes jrglideL{from{opacity:0;transform:translate3d(-170px,0,-260px) rotateY(34deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes jrrise{from{opacity:0;transform:translate3d(0,130px,-140px) rotateX(22deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes jrzoom{from{opacity:0;transform:scale(.5);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes jrflip{from{opacity:0;transform:perspective(900px) rotateY(88deg) scale(.9)}to{opacity:1;transform:none}}

/* ---- controls + journey timeline ---- */
.jr-bottom{position:relative;z-index:8;display:flex;align-items:center;gap:clamp(16px,3vw,36px);padding:0 clamp(22px,5vw,72px) clamp(22px,3vw,36px)}
.jr-ctrl{display:flex;align-items:center;gap:10px;flex:none}
.jr-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ctl);background:rgba(0,0,0,.22);border:1px solid color-mix(in srgb,var(--ctl) 30%,transparent);transition:background .3s,color .3s,transform .3s,border-color .3s}
.jr-btn:hover{background:var(--gl);color:#0B0B0B;border-color:var(--gl);transform:translateY(-2px)}
.jr-btn svg{width:20px;height:20px}
.jr-ic-play{fill:currentColor;display:none}
.jr.is-paused .jr-ic-play{display:block}.jr.is-paused .jr-ic-pause{display:none}
.jr-count{margin-left:8px;font-size:14px;letter-spacing:.14em;color:color-mix(in srgb,var(--ctl) 70%,transparent);white-space:nowrap}
.jr-count b{font-size:20px;color:var(--ctl);letter-spacing:.04em}
.jr-tl{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.jr-end{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ctl) 70%,transparent);flex:none}
.jr-end svg{width:20px;height:20px;color:var(--gl)}
.jr-track{position:relative;flex:1;min-width:0;height:46px}
.jr-inner{position:relative;height:100%}
.jr-line{position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:color-mix(in srgb,var(--ctl) 20%,transparent)}
.jr-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--pr,0));background:linear-gradient(90deg,transparent,var(--gl));box-shadow:0 0 16px var(--gl);transition:transform .35s linear}
.jr-orb{position:absolute;top:50%;left:calc(var(--pr,0)*100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--gl) 45%,transparent),0 0 24px 6px var(--gl);transition:left .35s linear}
.jr-nodes{position:relative;display:flex;justify-content:space-between;align-items:center;height:100%;list-style:none;margin:0;padding:0}
.jr-nodes li{margin:0;padding:0}
.jr-node{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;font-size:11px;font-weight:600;color:var(--ctl);background:rgba(0,0,0,.35);border:1px solid color-mix(in srgb,var(--ctl) 35%,transparent);transition:transform .3s,background .3s,color .3s,border-color .3s,box-shadow .3s}
.jr-node.past{background:var(--gl);border-color:var(--gl);color:#0B0B0B}
.jr-node.active{background:var(--gl);border-color:var(--gl);color:#0B0B0B;transform:scale(1.3);box-shadow:0 0 0 5px color-mix(in srgb,var(--gl) 28%,transparent);animation:jrnode 2s ease-in-out infinite}
@keyframes jrnode{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--gl) 8%,transparent)}}
.jr-node:hover{transform:scale(1.25)}
.jr-node::after{content:attr(data-t);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px);white-space:nowrap;padding:6px 10px;border-radius:8px;background:#0B0B0B;color:#fff;font-size:12px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.jr-node:hover::after,.jr-node:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.jr-nodes li:first-child .jr-node::after{left:0;transform:translate(0,6px)}.jr-nodes li:first-child .jr-node:hover::after{transform:none}
.jr-nodes li:last-child .jr-node::after{left:auto;right:0;transform:translate(0,6px)}.jr-nodes li:last-child .jr-node:hover::after{transform:none}

/* ---- responsive ---- */
@media(max-width:900px){
 .jr{min-height:0}
 .jr-stage{min-height:760px}
 .jr-slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:8px;padding:28px 22px 8px;text-align:center}
 .jr-art{order:-1;min-height:0;height:300px}
 .jr-float{width:min(190px,58vw)}
 .jr-ring.r1{inset:-18px}.jr-ring.r2{inset:-36px}
 .jr-halo{width:360px;height:360px;margin:-180px 0 0 -180px}
 .jr-num{left:50%;top:22%;transform:translate(-50%,-50%);font-size:150px}
 .jr-desc{margin-inline:auto}
 .jr-bottom{flex-direction:column;align-items:stretch;gap:14px}
 .jr-ctrl{justify-content:center}
 .jr-track{overflow-x:auto;scrollbar-width:none}
 .jr-track::-webkit-scrollbar{display:none}
 .jr-inner{min-width:620px}
 .jr-node::after{display:none}
 .jr-end span{display:none}
}
@media(max-width:560px){.jr{border-radius:24px}.jr-stage{min-height:800px}}
@media(prefers-reduced-motion:reduce){
 .jr *,.jr *::before,.jr *::after{animation:none!important}
 .jr-w>i{opacity:1!important;transform:none!important}
 .jr-bgl.in{animation:none}
}