.story-journey{position:relative;margin:20px 0 100px;scroll-margin-top:110px}
.story-journey::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:linear-gradient(transparent,#7d9fff70,transparent)}
.story-chapter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;min-height:560px;padding:60px 40px;border-bottom:1px solid #829ee522}
.chapter-number{font:600 11px/1.5 Inter,sans-serif;letter-spacing:.16em;color:#8cafff}.chapter-copy h2{font:800 clamp(28px,3.6vw,48px)/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.04em;margin:22px 0;color:#f1f4ff}.chapter-copy p{font-size:16px;line-height:1.9;color:#a8b3cf;max-width:480px}
[dir="rtl"] .chapter-copy h2{font-family:'Noto Kufi Arabic',sans-serif;line-height:1.7;letter-spacing:0}
.chapter-art{position:relative;height:350px;display:grid;place-items:center;isolation:isolate}
.chapter-art::before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#547cfa25,transparent 70%);z-index:-1}
.story-window{position:absolute;width:190px;height:225px;border:1px solid #9ab5ff55;border-radius:18px;background:linear-gradient(145deg,#1d2e50,#0d142a);box-shadow:0 22px 50px #0003;transform:translateX(-75px) rotate(-14deg)}
.story-window:nth-child(2){transform:translateY(-20px);z-index:2}.story-window:nth-child(3){transform:translateX(75px) rotate(14deg)}
.story-window i{display:block;padding:10px 16px;border-bottom:1px solid #9ab5ff33;font-style:normal;color:#859aca;letter-spacing:4px}.story-window span{display:block;padding:18px;color:#8d9bbd;font-size:12px}.story-window b{display:block;text-align:center;font-size:68px;color:#a3beff;font-weight:400}
.story-comparison{width:min(300px,90%);padding:28px;border:1px solid #8bacff70;border-radius:24px;background:linear-gradient(135deg,#17264a,#10172e);box-shadow:0 25px 70px #0003}.story-comparison>img{width:48px;height:48px;margin-bottom:20px}.story-comparison>div{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid #a9c0ff22}.story-comparison i{width:24px;height:24px;border-radius:8px;background:#729aff44}.story-comparison span{height:8px;width:60%;border-radius:10px;background:#9cb8ff80}.story-comparison b{color:#a7c3ff}.story-comparison>div:nth-child(3) span{width:45%}.story-comparison>div:nth-child(4) span{width:52%}
.choice-mark{width:130px;height:130px;display:grid;place-items:center;border:1px solid #a3baff66;border-radius:34px;background:#17264a;box-shadow:0 0 70px #7a98ff22}.choice-mark img{width:90px;height:90px}.choice-orbit{position:absolute;width:230px;height:230px;border:1px solid #8cacff44;border-radius:50%}.choice-orbit:nth-child(2){width:320px;height:320px;border-style:dashed;opacity:.6}.choice-tick{position:absolute;inset-inline-end:18%;bottom:55px;background:#779cf5;color:#0c1735;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:24px;box-shadow:0 8px 25px #0002}
/* Content is visible without JavaScript; only animate chapters upon entry. */
.story-chapter.is-revealed .chapter-copy{animation:chapter-enter .75s both}.story-chapter.is-revealed .chapter-art{animation:chapter-enter .95s both}.story-chapter.is-revealed .story-comparison>div{animation:chapter-enter .7s both}.story-chapter.is-revealed .story-comparison>div:nth-child(3){animation-delay:.15s}.story-chapter.is-revealed .story-comparison>div:nth-child(4){animation-delay:.3s}
.story-chapter.is-revealed .choice-orbit{animation:orbit-open 1.4s both}.about-hero{animation:chapter-enter .8s both}
@keyframes chapter-enter{from{opacity:.25;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit-open{from{opacity:0;transform:scale(.6) rotate(-30deg)}to{opacity:.7;transform:scale(1) rotate(0)}}
html[data-theme="light"] .chapter-copy h2{color:#121d3a}html[data-theme="light"] .chapter-copy p{color:#586985}html[data-theme="light"] .chapter-number{color:#3765c4}
@media(max-width:760px){.story-chapter{grid-template-columns:1fr;gap:8px;min-height:0;padding:48px 18px}.chapter-copy p{max-width:none}.chapter-art{height:310px}.story-journey{margin-bottom:50px}.choice-orbit:nth-child(2){width:280px;height:280px}.story-window{width:145px;height:190px}.story-window:first-child{transform:translateX(-55px) rotate(-12deg)}.story-window:nth-child(3){transform:translateX(55px) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.about-page *, .about-page *::before,.about-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.story-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 40px;color:#a8b3cf;font-size:14px}
.story-controls button{min-height:44px;padding:8px 16px;border:1px solid #809ff355;border-radius:30px;color:inherit;background:transparent;font:inherit;cursor:pointer}
.story-controls button:focus-visible{outline:3px solid #84a9ff;outline-offset:3px}
.story-controls button[hidden]{display:none}
.story-interactive .story-chapter{--pointer-x:0deg;--pointer-y:0deg;--story-rise:0px;--story-scale:1;--story-spread:75px;--story-angle:14deg;--story-orbit:0deg;--story-progress:0;--story-row-one:1;--story-row-two:1;--story-row-three:1}
.story-interactive .chapter-art{transform:perspective(850px) rotateX(var(--pointer-x)) rotateY(var(--pointer-y));transition:transform .2s ease-out}
.story-interactive .chapter-art::before{inset:-5%;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#648fff35,transparent 65%)}
.story-interactive .story-window:first-child{transform:translateX(calc(-1 * var(--story-spread))) rotate(calc(-1 * var(--story-angle)))}
.story-interactive .story-window:nth-child(2){transform:translateY(calc(-20px - var(--story-progress) * 25px))}
.story-interactive .story-window:nth-child(3){transform:translateX(var(--story-spread)) rotate(var(--story-angle))}
.story-interactive .story-comparison{transform:translateY(var(--story-rise)) scale(var(--story-scale))}
.story-interactive .story-comparison>div:nth-child(2){transform:translateX(calc((1 - var(--story-row-one)) * 40px));opacity:calc(.2 + var(--story-row-one) * .8)}
.story-interactive .story-comparison>div:nth-child(3){transform:translateX(calc((1 - var(--story-row-two)) * 40px));opacity:calc(.2 + var(--story-row-two) * .8)}
.story-interactive .story-comparison>div:nth-child(4){transform:translateX(calc((1 - var(--story-row-three)) * 40px));opacity:calc(.2 + var(--story-row-three) * .8)}
.story-interactive .choice-mark{transform:scale(var(--story-scale))}
.story-interactive .choice-orbit{transform:scale(var(--story-scale)) rotate(var(--story-orbit))}
.story-interactive .choice-tick{transform:translateY(var(--story-rise)) scale(var(--story-scale))}
html[data-theme="light"] .story-controls{color:#526689}
@media(max-width:760px){.story-controls{padding-inline:18px}.story-interactive .story-window:first-child{transform:translateX(calc(-.65 * var(--story-spread))) rotate(calc(-1 * var(--story-angle)))}.story-interactive .story-window:nth-child(3){transform:translateX(calc(.65 * var(--story-spread))) rotate(var(--story-angle))}}
@media(prefers-reduced-motion:reduce){.story-interactive .chapter-art,.story-interactive .story-comparison,.story-interactive .story-comparison>div,.story-interactive .choice-mark,.story-interactive .choice-orbit,.story-interactive .choice-tick{transform:none!important;opacity:1!important}}

/* Scroll choreography: a stack opens, a comparison settles, a choice resolves. */
.story-chapter{position:relative;min-width:0}
.chapter-art{min-width:0}
.story-interactive .chapter-art{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.story-interactive .chapter-copy{transform:translateY(var(--story-copy-rise,0px));transition:transform .18s ease-out}
.story-interactive .story-chapter::after{content:'';position:absolute;inset-inline-start:0;inset-block:60px;width:2px;background:linear-gradient(#7ea6ff,#c1b5ff);transform:scaleY(var(--story-progress));transform-origin:top;box-shadow:0 0 14px #7ea6ff55;pointer-events:none}
.story-window{overflow:hidden}
.story-interactive .story-window{transition:transform .18s ease-out;backface-visibility:hidden}
.story-interactive .story-window::after,.story-interactive .story-comparison::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#c0d4ff18 48%,transparent 65%);transform:translateX(var(--story-sheen,-100%))}
.story-interactive .story-window:nth-child(2){transform:translateY(calc(-20px - var(--story-progress) * 25px)) translateZ(34px)}
.story-comparison{position:relative;overflow:hidden}
.story-interactive .story-comparison{transform:translateY(var(--story-rise)) rotateX(var(--story-depth,0deg)) scale(var(--story-scale));transition:transform .2s ease-out}
.story-interactive .story-comparison>div{transition:transform .18s ease-out,opacity .18s ease-out}
.story-interactive .story-comparison>div b{transform:scale(var(--story-finish,1));transform-origin:center;transition:transform .2s ease-out}
.story-interactive .choice-mark{transform:scale(var(--story-scale)) translateZ(35px);border-color:rgba(163,186,255,calc(.4 + var(--story-finish,0) * .5));box-shadow:0 0 70px rgba(122,152,255,calc(.08 + var(--story-finish,0) * .2));transition:transform .2s ease-out,box-shadow .2s ease-out}
.story-interactive .choice-orbit:nth-child(2){transform:scale(var(--story-scale)) rotate(calc(-1 * var(--story-orbit)))}
.story-interactive .choice-tick{transform:translateY(var(--story-rise)) scale(var(--story-tick-scale,1)) translateZ(50px);opacity:calc(.15 + var(--story-finish,1) * .85);transition:transform .25s ease-out,opacity .2s ease-out}
@media(min-width:900px) and (min-height:650px){.story-chapter{min-height:680px}.story-interactive .chapter-art{position:sticky;top:calc(50vh - 140px);align-self:start;margin-top:40px}}
@media(max-width:760px){.story-interactive .chapter-art{transform:none}.story-interactive .story-window:nth-child(2){transform:translateY(calc(-15px - var(--story-progress) * 15px))}}
@media(prefers-reduced-motion:reduce){.story-interactive .chapter-copy{transform:none}.story-interactive .story-chapter::after,.story-interactive .story-window::after,.story-interactive .story-comparison::after{display:none}.story-interactive .story-comparison>div b{transform:none}}