/* NLC Academy, in-page animated explainer. Shared by EN and AR episode pages. */
.exp{position:absolute;inset:0;z-index:5;display:none;font-family:inherit;overflow:hidden;background:radial-gradient(ellipse at 50% -10%,#1b2052 0%,#0e1130 62%,#0a0c24 100%);}
.exp.live{display:block;}
.exp *{box-sizing:border-box;}
.exp-bgline{position:absolute;inset:0;background-image:linear-gradient(rgba(246,133,31,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,133,31,.05) 1px,transparent 1px);background-size:46px 46px;opacity:.55;pointer-events:none;}
.exp-stage{position:absolute;inset:0;}

.exp-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease;display:flex;align-items:center;justify-content:center;}
.exp-scene.active{opacity:1;visibility:visible;}
.exp-svg{width:100%;height:100%;display:block;}
.exp-svg [class^="a-"],.exp-svg [class*=" a-"]{transform-box:fill-box;}
.ea-fig-svg [class^="a-"],.ea-fig-svg [class*=" a-"]{transform-box:fill-box;}

/* centred text scenes (title / close) */
.exp-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6%;}
.exp-center .k{font-size:clamp(.6rem,1.5vw,.78rem);font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--secondary);margin-bottom:14px;}
.exp-center h2{font-size:clamp(1.5rem,4.4vw,3rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.01em;margin:0 0 14px;max-width:14ch;}
.exp-center p{font-size:clamp(.85rem,2vw,1.15rem);color:rgba(255,255,255,.72);line-height:1.6;max-width:42ch;margin:0;}
.exp-center img.exp-logo{height:clamp(34px,6vw,52px);width:auto;margin-bottom:22px;filter:brightness(0) invert(1);}
.ea-figure{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px);padding:4% 5%;}
.ea-fig-title{font-size:clamp(1rem,2.8vw,1.7rem);font-weight:800;color:#fff;text-align:center;letter-spacing:-.01em;}
.ea-fig-title b,.ea-fig-title span{color:var(--secondary);}
.ea-fig-svg{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;}
.ea-fig-svg svg{max-width:100%;max-height:100%;width:auto;height:auto;}

/* lower-third caption */
.exp-cap{position:absolute;left:0;right:0;bottom:58px;padding:26px 30px 26px;background:linear-gradient(0deg,rgba(7,9,26,.94) 12%,rgba(7,9,26,.65) 60%,rgba(7,9,26,0));z-index:8;pointer-events:none;}
.exp-cap.hide{opacity:0;}
.exp-cap .k{font-size:clamp(.56rem,1.3vw,.66rem);font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--secondary);margin-bottom:7px;}
.exp-cap .t{font-size:clamp(.8rem,1.85vw,1.12rem);font-weight:600;color:#fff;line-height:1.5;max-width:780px;}
html[dir="rtl"] .exp-cap{text-align:right;}

/* progress + controls (IP-style bottom bar) */
.exp-controls{position:absolute;left:0;right:0;bottom:0;z-index:11;display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,28px);background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));}
/* keep the player controls in the English left-to-right order even on RTL pages */
html[dir="rtl"] .exp-controls{direction:ltr;}
.exp-btn{flex:none;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:.85rem;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.25s;}
.exp-btn:hover{background:var(--secondary);}
.exp-track{flex:1;height:6px;border-radius:50px;background:rgba(255,255,255,.18);cursor:pointer;overflow:hidden;}
.exp-fill{height:100%;width:0;background:var(--secondary);border-radius:50px;}
.exp-time{flex:none;color:rgba(255,255,255,.85);font-size:.74rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;min-width:78px;text-align:right;}
/* big centred replay shown when the explainer ends */
.exp-replay-over{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;pointer-events:none;}
.exp.ended .exp-replay-over{display:flex;}
.exp-replay{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;background:var(--secondary);color:#fff;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:clamp(.85rem,1.9vw,1rem);padding:13px 30px;border-radius:50px;transition:.25s;box-shadow:0 12px 34px rgba(246,133,31,.4);}
.exp-replay:hover{background:var(--secondary-dark,#e0720a);transform:translateY(-2px);}
.exp-chip{position:absolute;top:20px;inset-inline-start:22px;z-index:12;font-size:clamp(.58rem,1.3vw,.7rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.exp-chip b{color:var(--secondary);}

/* SVG text defaults */
/* The scene SVGs are authored in fixed LTR geometry (hard-coded x coordinates +
   text-anchor). On Arabic (dir=rtl) pages the SVG would otherwise inherit rtl,
   which flips text-anchor and pushes labels off-frame. Force LTR on the graphic
   so positioning stays as authored; Arabic glyphs still shape right-to-left
   within each text run. */
.exp-svg{direction:ltr;}
.exp-svg text{font-family:inherit;fill:#fff;direction:ltr;unicode-bidi:isolate;}
/* ep-auto inline diagram figures ([data-ep-figure] -> .ea-fig-svg) are authored
   with the same fixed LTR geometry, so keep them LTR on rtl pages too. */
.ea-fig-svg svg{direction:ltr;}
.ea-fig-svg svg text{direction:ltr;unicode-bidi:isolate;}
.exp-lbl{font-size:15px;font-weight:700;fill:rgba(255,255,255,.82);}
.exp-unit{font-size:12px;font-weight:600;fill:rgba(255,255,255,.5);letter-spacing:.04em;}
.exp-big{font-size:30px;font-weight:900;fill:var(--secondary);}
.exp-mid{font-size:22px;font-weight:900;fill:#fff;}
.exp-tag{font-size:12px;font-weight:800;letter-spacing:.12em;fill:var(--secondary);text-transform:uppercase;}

/* ===== animation helpers (only run while scene is active) ===== */
.exp-scene .a-up,.exp-scene .a-in,.exp-scene .a-pop,.exp-scene .a-grow,.exp-scene .a-wide,.exp-scene .ah-head{opacity:0;}
.exp-scene.active .ah-head{animation:expIn .35s ease both;}
.exp-scene.active .a-up{animation:expUp .7s cubic-bezier(.2,.7,.2,1) both;}
.exp-scene.active .a-in{animation:expIn .8s ease both;}
.exp-scene.active .a-pop{animation:expPop .7s cubic-bezier(.2,.9,.2,1.15) both;transform-origin:center;}
.exp-scene.active .a-grow{animation:expGrow .85s cubic-bezier(.3,.7,.2,1) both;transform-origin:top center;}
.exp-scene.active .a-wide{animation:expWide .85s cubic-bezier(.3,.7,.2,1) both;transform-origin:center;}
.exp-scene.active .a-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:expDraw 1s ease forwards;}
.exp-scene.active .loop-pulse{animation:expPulse 2.4s ease-in-out infinite;transform-origin:center;}
.exp-scene.active .loop-ring{opacity:0;animation:expRing 3s ease-out infinite;transform-origin:center;}
.exp-scene.active .loop-ray{animation:expRay 2.8s ease-in-out infinite;}

@keyframes expUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes expIn{from{opacity:0;}to{opacity:1;}}
@keyframes expPop{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
@keyframes expGrow{from{opacity:0;transform:scaleY(0);}to{opacity:1;transform:scaleY(1);}}
@keyframes expWide{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}
@keyframes expDraw{to{stroke-dashoffset:0;}}
@keyframes expPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.06);opacity:.85;}}
@keyframes expRing{0%{opacity:.7;transform:scale(.3);}80%{opacity:0;}100%{opacity:0;transform:scale(1.6);}}
@keyframes expRay{0%,100%{opacity:.55;}50%{opacity:1;}}

@media (max-width:560px){
  .exp-cap{padding:16px 18px 18px;bottom:4px;}
  .exp-btn{width:36px;height:36px;font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce){
  .exp-scene.active *{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}

/* ---- Shareable carousel preview (added for all episodes) ---- */
.carousel-preview{margin-top:40px;}
.carousel-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;}
.slide-card{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--primary),#1a1e48);position:relative;box-shadow:var(--shadow-md);}
.slide-card img{width:100%;height:100%;object-fit:cover;display:block;}
.slide-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--white);}
.slide-fallback .slide-num{font-size:.7rem;letter-spacing:.3em;color:var(--secondary);font-weight:800;margin-bottom:10px;}
.slide-fallback .slide-text{font-size:.95rem;font-weight:700;line-height:1.4;}
.carousel-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(135deg,var(--primary),#1a1e48);color:var(--white);padding:24px 28px;border-radius:var(--radius-lg);}
.carousel-cta p{font-size:.92rem;color:rgba(255,255,255,.8);max-width:520px;}
.carousel-cta strong{color:var(--white);}
.carousel-cta-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.carousel-cta .pdf-link{color:rgba(255,255,255,.72);font-size:.85rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:color .15s;}
.carousel-cta .pdf-link:hover{color:var(--white);}
@media (max-width:780px){.carousel-strip{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.carousel-strip{grid-template-columns:1fr;}}