/* ===== Shamisi story home: layered scroll scene ===== */
:root{--hh:73px}
@media(max-width:1020px){:root{--hh:60px}}
.story{position:relative;height:calc(100svh - var(--hh));min-height:520px}
.js .story{height:360vh}
.pin{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));min-height:520px;overflow:hidden;background:#0a1b43;color:#fff}
.layer{position:absolute;inset:0;will-change:transform}
.layer svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}

/* sky: night, then sunrise, then a bright morning */
.sky-night{background:linear-gradient(#050c24,#0d2150 62%,#17326f)}
.sky-dawn{background:linear-gradient(#10295c 0%,#5b4c86 34%,#e0954f 68%,#f6c76a 100%)}
.sky-day{background:linear-gradient(#7fa9e6 0%,#c4d9f1 46%,#fff0c9 82%,#ffe29a 100%)}
.stars{pointer-events:none}
.stars span{position:absolute;width:var(--sz);height:var(--sz);border-radius:50%;background:#fff;animation:tw 3.4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
.moon{position:absolute;left:11%;top:12%;width:62px;height:62px;border-radius:50%;box-shadow:inset -17px 5px 0 0 #f6efd2;filter:drop-shadow(0 0 14px rgba(246,239,210,.6))}
.sunwrap{position:absolute;left:66%;top:98%;width:0;height:0}
.sundisc{position:absolute;width:min(17vw,150px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,#fffdf0 0,#ffe9a8 58%,#f8c866 100%);box-shadow:0 0 60px 22px rgba(255,214,120,.6)}
.sunglow{position:absolute;width:min(90vw,820px);aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(255,220,130,.75) 0,rgba(255,200,110,.25) 36%,transparent 66%)}
.sunrays{position:absolute;width:min(110vw,980px);aspect-ratio:1;left:50%;top:50%;border-radius:50%;
 background:repeating-conic-gradient(rgba(255,226,150,.5) 0 4deg,transparent 4deg 14deg);
 -webkit-mask-image:radial-gradient(circle,#000 6%,transparent 64%);mask-image:radial-gradient(circle,#000 6%,transparent 64%);animation:spin2 90s linear infinite}
@keyframes spin2{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.clouds{pointer-events:none}
.cloud{position:absolute;display:block;height:34px;border-radius:40px;background:#fff;animation:drift2 60s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:54px;height:54px;left:22px;top:-26px}.cloud::after{width:40px;height:40px;right:20px;top:-16px}
.c1{width:150px;top:16%;left:-10%}.c2{width:110px;top:30%;left:-30%;animation-duration:85s;animation-delay:-30s;opacity:.85}.c3{width:180px;top:9%;left:-50%;animation-duration:110s;animation-delay:-70s;opacity:.8}
@keyframes drift2{to{transform:translateX(150vw)}}
.birds{position:absolute;inset:0;pointer-events:none}
.bird{position:absolute;width:30px;animation:fly 30s linear infinite}
.b1{top:24%;left:-6%}.b2{top:30%;left:-9%;width:22px;animation-delay:-4s;animation-duration:36s}.b3{top:20%;left:-12%;width:18px;animation-delay:-9s;animation-duration:42s}
@keyframes fly{0%{transform:translate(0,0) scaleY(1)}25%{transform:translate(30vw,-14px) scaleY(.5)}50%{transform:translate(60vw,6px) scaleY(1)}75%{transform:translate(90vw,-10px) scaleY(.5)}100%{transform:translate(120vw,0) scaleY(1)}}

/* hills and skyline: each layer moves at its own speed (parallax) */
.l-city{}
.l-city .lights{}
.l-hills1{}
.l-hills2{}
.tint{position:absolute;inset:0;background:linear-gradient(#050c24,#0a1b43);pointer-events:none}
.fg{}
.fg .l-fg-art{position:absolute;inset:0}
.fg::after{content:"";position:absolute;left:-40px;right:-40px;top:calc(100% - 3px);height:60svh;background:#0a1b43}

/* the storyteller inside the scene */
.story .charwrap{position:absolute;right:11vw;bottom:5svh;height:min(64svh,560px)}
/* pages that fly out of the book as you scroll */
.pg{position:absolute;left:47%;top:50%;width:calc(var(--w) * 1px);height:calc(var(--w) * 1.3px);border:1px solid #e6c97a;border-radius:2px;pointer-events:none;
 background:repeating-linear-gradient(#fff9e8 0 3px,#e8dfc8 3px 4px);filter:drop-shadow(0 0 6px rgba(255,226,150,.8))}

/* story captions */
.caps{position:absolute;inset:0;pointer-events:none}
.cap{position:absolute;left:7vw;top:41%;max-width:min(560px,47vw);opacity:0;transform:translateY(calc(-50% + 40px));transition:opacity .7s,transform .8s cubic-bezier(.2,.7,.2,1);text-shadow:0 2px 18px rgba(5,12,36,.55)}
.cap.active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.cap h1{font-size:clamp(3rem,8vw,6.2rem);margin:6px 0 8px;line-height:1}
.cap h2{font-size:clamp(2rem,5vw,3.8rem);margin:6px 0 10px;line-height:1.1}
.cap h1,.cap h2{color:inherit}
.cap p{font-size:clamp(1rem,1.7vw,1.3rem);margin:0 0 6px}
.cap .eyebrow{color:var(--gold-l)}
.pin.light .cap{color:#10295c;text-shadow:0 2px 14px rgba(255,255,255,.55)}
.pin.light .cap .eyebrow{color:#9a6f1f}.pin.light .cap .btn.ghost{color:#10295c}.pin.light .cap .btn.ghost:hover{background:rgba(16,41,92,.1)}
.cap .btn{background:var(--gold);border-color:var(--gold);color:#fff;text-shadow:none}
.cap .btn.ghost{background:transparent;color:#fff;border-color:currentColor}.cap .btn.ghost:hover{background:rgba(255,255,255,.15)}
.pin.light .cap .btn:not(.ghost){background:#10295c;border-color:#10295c}
.hint{position:absolute;left:50%;bottom:2.4svh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
 font-size:.72rem;letter-spacing:3px;text-transform:uppercase;color:#fff;pointer-events:none;z-index:5;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hint i{width:22px;height:36px;border:2px solid #fff;border-radius:14px;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}

/* the 3D shelf */
.shelf{position:relative;z-index:3;margin-top:-14svh;background:linear-gradient(#0a1b43,#10295c 55%,#0a1b43);color:#fff;padding:clamp(40px,7vw,80px) 5% 70px}
.shelf .curve{position:absolute;left:0;top:-119px;width:100%;height:120px;display:block}
.shelf .inner{max-width:1100px;margin:auto}
.shelf .title h2,.shelf .title p{color:#fff}.shelf .title p{margin:8px 0 0;opacity:.85}.shelf .eyebrow{color:var(--gold-l)}
.ringwrap{position:relative;height:clamp(320px,44vw,460px);perspective:1500px;cursor:grab;touch-action:pan-y;outline:none;user-select:none;-webkit-user-select:none;margin-top:10px}
.ringwrap.drag{cursor:grabbing}
.ringwrap::before{content:"";position:absolute;left:50%;top:48%;width:min(80vw,640px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(230,201,122,.32),transparent 62%);pointer-events:none}
.ring{--rw:clamp(120px,16vw,176px);position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(var(--R) * -1)) rotateY(var(--rot,0deg))}
.rb{position:absolute;display:block;width:var(--rw);height:calc(var(--rw) * 1.45);left:calc(var(--rw) / -2);top:calc(var(--rw) * -.725);transform-style:preserve-3d;
 transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--R));--wpx:var(--rw);--hpx:calc(var(--rw) * 1.45);--d:calc(var(--rw) * .2);-webkit-user-drag:none}
.rb .book3d{animation-duration:7s;animation-delay:calc(var(--i) * -1.1s)}
.rb img{-webkit-user-drag:none;pointer-events:none}
.ringfloor{position:absolute;left:50%;bottom:2%;width:min(70vw,560px);height:34px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);pointer-events:none}
.ring-cap{text-align:center;min-height:96px;margin-top:6px}
.ring-cap .rt{color:#fff;margin:0 0 4px;font-size:1.5rem;transition:opacity .2s}.ring-cap .ra{opacity:.8}.ring-cap .rp{color:var(--gold-l);font-weight:bold;margin-top:4px}
.ring-ctl{display:flex;justify-content:center;align-items:center;gap:18px}
.ring-ctl button{width:48px;height:48px;border-radius:50%;padding:0;font-size:1.3rem;background:transparent;border:2px solid var(--gold);color:var(--gold-l)}
.ring-ctl button:hover{background:var(--gold);color:#fff}
.ring-ctl .btn{background:var(--gold);border-color:var(--gold)}

@media(max-width:900px){
 .cap{left:6vw;right:6vw;top:11%;max-width:none;text-align:center;transform:translateY(40px)}
 .cap.active{transform:none}.cap .btns{justify-content:center}
 .cap h1{font-size:clamp(2.6rem,13vw,4rem)}.cap h2{font-size:clamp(1.7rem,8vw,2.6rem)}
 .story .charwrap{right:50%;transform:translateX(50%);height:min(46svh,420px)}
 .story .charwrap.jump{animation:none}
 .story .bubble{right:-34%;left:auto;top:-13%;max-width:min(210px,54vw)}
 .moon{left:auto;right:9%;top:5%}
 .shelf{margin-top:-10svh}.shelf .curve{height:80px;top:-79px}
}
@media(max-width:700px){.ring{--rf:.6;--rw:clamp(104px,28vw,150px)}.ringwrap{height:clamp(300px,82vw,380px)}}
@media(prefers-reduced-motion:reduce){.js .story{height:calc(100svh - var(--hh))}.hint{display:none}}

/* starting look (night) before the script takes over; the script then moves the layers directly */
.sky-dawn{opacity:.1}.sky-day{opacity:0}.sunglow{opacity:.4}.sunrays{opacity:.1}.clouds,.birds{opacity:0}.pg{opacity:0}
.tint{opacity:.55}
.l-city,.l-hills1,.l-hills2,.fg,.clouds{will-change:transform}.sky-dawn,.sky-day,.tint{will-change:opacity}
.layer{will-change:auto}
.pin.paused *{animation-play-state:paused!important}
/* lite mode: switched on automatically for slow or data-saving devices */
.lite .sunrays,.lite .bird,.lite .cloud,.lite .stars span,.lite .char .glow,.lite .char .body,.lite .char .head{animation:none!important}
.lite .sunrays{display:none}.lite .moon,.lite .pg{filter:none}.lite .sundisc{box-shadow:0 0 30px 10px rgba(255,214,120,.5)}

.sky-dusk{background:linear-gradient(#0f1f52 0%,#4a3470 34%,#d4607a 66%,#f7a45e 100%);opacity:0;will-change:opacity}
.moon{left:0;top:0}.sunwrap{left:0;top:0}
.pin{transition:opacity .7s}.js .pin:not(.ready){opacity:0}
@media(max-width:900px){.moon{left:0;right:auto;top:0}}