.story-scroll-runway{position:relative;height:880svh;padding:0;margin:0;background:#05060c;isolation:isolate;overflow:visible}
.story-scroll-sticky{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;background:#05060c;isolation:isolate}
.story-romance,.story-royal{position:absolute;inset:0;overflow:hidden;background:#0a080f}.story-romance{z-index:1}.story-royal{z-index:2;opacity:0}
.story-panorama{transform-origin:0 0;position:absolute;left:0;top:0;max-width:none;object-fit:fill;display:block;pointer-events:none;-webkit-user-drag:none}
.story-royal-stage{position:absolute;inset:0;transform-origin:50% 42%}.story-prince,.story-sultan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none;display:block}.story-sultan{opacity:0}
.story-scroll-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#05060c70,transparent 28%,transparent 45%,#030308d9);pointer-events:none}
.story-royal .story-scroll-shade{background:linear-gradient(180deg,#03020855,transparent 30%,transparent 43%,#030208d9)}
.story-royal-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 37%,#ffcb7a80,transparent 57%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.story-scroll-header{position:absolute;z-index:5;left:6%;right:6%;top:115px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.story-scroll-header img{width:110px;height:auto;max-height:38px;object-fit:contain}.story-scroll-header>span{font-size:9px;letter-spacing:2.2px;color:#e3dbe8;text-shadow:0 2px 18px #0008}
.story-scroll-copy{position:absolute;z-index:3;left:50%;bottom:31%;width:min(88%,1120px);height:230px;transform:translateX(-50%);pointer-events:none;text-align:center}
.story-scroll-line{position:absolute;left:0;right:0;bottom:0;margin:0;color:#fff6fb;font-family:Manrope,Arial,sans-serif;font-size:clamp(38px,5.4vw,74px);font-weight:800;line-height:1.08;letter-spacing:-2.7px;white-space:pre-line;text-wrap:balance;text-shadow:0 2px 8px #000b,0 4px 32px #000e;transform-origin:50% 65%;opacity:0}
.story-royal-copy .story-scroll-line{color:#fff1d9}
.story-scroll-foot{position:absolute;z-index:5;left:6%;right:6%;bottom:35px;display:grid;grid-template-columns:1fr minmax(80px,240px) 1fr;gap:28px;align-items:center;pointer-events:none}.story-scroll-foot>span{font-size:8px;letter-spacing:1.7px;color:#cbc1d4}.story-scroll-foot>span:last-child{text-align:right}.story-scroll-progress{height:1px;background:#ffffff30;overflow:hidden}.story-scroll-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7427d7,#ef1f48);transform-origin:0 50%;transform:scaleX(0)}
.story-scroll-runway.is-active .story-panorama,.story-scroll-runway.is-active .story-royal-stage,.story-scroll-runway.is-active .story-sultan,.story-scroll-runway.is-active .story-scroll-line{will-change:transform,opacity}
.story-scroll-runway.is-static{height:auto}.is-static .story-scroll-sticky{position:relative;height:auto;overflow:hidden}.is-static .story-scroll-header{position:relative;inset:auto;padding:28px 6%;background:#05060c}.is-static .story-romance,.is-static .story-royal{position:relative;inset:auto;opacity:1!important;visibility:visible!important}.is-static .story-panorama{position:relative;inset:auto;width:100%!important;height:auto!important;transform:none!important}.is-static .story-scroll-copy{position:relative;inset:auto;width:100%;height:auto;padding:40px 6% 50px;transform:none;background:#05060c}.is-static .story-scroll-line{position:relative;inset:auto;opacity:1!important;transform:none!important;font-size:clamp(27px,4vw,58px);margin:0 0 28px}.is-static .story-scroll-line:last-child{margin-bottom:0}.is-static .story-romance>.story-scroll-shade,.is-static .story-royal>.story-scroll-shade,.is-static .story-royal-glow,.is-static .story-scroll-foot{display:none}.is-static .story-royal-stage{position:relative;height:auto;display:grid;grid-template-columns:1fr 1fr;transform:none!important}.is-static .story-prince,.is-static .story-sultan{position:relative;inset:auto;display:block;width:100%;height:auto;opacity:1!important}
@media(max-width:700px){
 .story-scroll-runway{height:920svh}.story-scroll-header{top:98px;left:6%;right:6%;gap:15px}.story-scroll-header img{width:87px;max-height:30px}.story-scroll-header>span{font-size:6px;line-height:1.6;letter-spacing:1.3px;max-width:180px;text-align:right}
 .story-scroll-copy{bottom:calc(31% + env(safe-area-inset-bottom,0px));width:88%;height:230px}.story-scroll-line{font-size:clamp(32px,8.8vw,47px);font-weight:800;line-height:1.12;letter-spacing:-1.4px}
 .story-scroll-foot{left:6%;right:6%;bottom:calc(28px + env(safe-area-inset-bottom,0px));grid-template-columns:1fr 50px;gap:20px}.story-scroll-foot>span{font-size:6px;letter-spacing:1.4px}.story-scroll-foot>span:last-child{display:none}
 .story-scroll-shade{background:linear-gradient(180deg,#03020844,transparent 25%,transparent 40%,#030208df)}.story-royal .story-scroll-shade{background:linear-gradient(180deg,#03020833,transparent 40%,#030208bf)}
 .is-static .story-scroll-header{padding:25px 6%}.is-static .story-scroll-copy{padding:30px 6% 40px}.is-static .story-scroll-line{font-size:30px;line-height:1.2}.is-static .story-royal-stage{height:auto;grid-template-columns:1fr}
}
@media(max-width:350px){.story-scroll-line{font-size:30px;letter-spacing:-1.2px}.story-scroll-header>span{font-size:5px}.story-scroll-copy{bottom:31%}}
@media(max-height:500px) and (orientation:landscape){.story-scroll-header{top:95px}.story-scroll-header img{width:80px}.story-scroll-copy{bottom:22%;height:130px}.story-scroll-line{font-size:clamp(25px,4vw,38px);line-height:1.05;letter-spacing:-1px}.story-scroll-foot{bottom:18px}}
