.scroll-story{position:relative;margin:20px -20px 60px;height:420svh;--story-progress:0;--object-opacity:1;--object-scale:.92;--object-y:26px;--object-rotate:-14deg;--object-blur:0px;--web-opacity:0;--web-scale:.68;--web-y:110px;--web-rotate-x:9deg;--web-rotate-y:12deg;--web-inset:44%;--web-crop:0%;--web-blur:0px;--phone-opacity:0;--phone-y:150px;--phone-scale:.72;--phone-rotate:9deg;--caption-one:1;--caption-two:0;--caption-three:0;--type-scale:1;--type-opacity:.06;--atmosphere-opacity:.05;--signal-progress:0;--signal-x:7%;--signal-glow:.25;--pointer-x:0px;--pointer-y:0px}
.story-pin{position:sticky;top:90px;height:calc(100svh - 90px);min-height:500px;overflow:hidden;background:#0d1017;color:#f6f7f3;padding:22px 35px 16px;display:flex;flex-direction:column;isolation:isolate;contain:paint}
.story-pin::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 50% 52%,#1d2a55 0,#121624 34%,#0d1017 70%)}
.story-pin::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff0d}
.story-top{display:flex;justify-content:space-between;gap:20px;align-items:center;position:relative;z-index:10}.story-top a{font:9px var(--f-mono);color:#c5cad4;min-height:32px;display:flex;align-items:center;transition:color 180ms ease}.story-top a:hover{color:#fff}.story-top .section-index{font-size:9px;color:#a5b6ff}
.story-captions{position:relative;min-height:86px;margin-top:14px;z-index:7}.story-caption{position:absolute;inset:0;display:flex;gap:20px;align-items:center;pointer-events:none;transform:translateY(calc((1 - var(--caption-one)) * 18px));filter:blur(calc((1 - var(--caption-one)) * 6px))}.story-caption>span{font:11px var(--f-mono);color:#9aafff}.story-caption h3{max-width:900px;font-size:clamp(28px,3.6vw,52px);letter-spacing:-.04em;text-wrap:balance}.caption-one{opacity:var(--caption-one)}.caption-two{opacity:var(--caption-two);transform:translateY(calc((1 - var(--caption-two)) * 18px));filter:blur(calc((1 - var(--caption-two)) * 6px))}.caption-three{opacity:var(--caption-three);transform:translateY(calc((1 - var(--caption-three)) * 18px));filter:blur(calc((1 - var(--caption-three)) * 6px))}
.story-scene{position:relative;flex:1;min-height:0;perspective:1300px;direction:ltr;isolation:isolate}.story-atmosphere{position:absolute;inset:-15%;z-index:-2;opacity:var(--atmosphere-opacity);background:radial-gradient(circle at var(--signal-x) 58%,#315bff 0,#254bff55 18%,transparent 47%);filter:blur(24px);transform:translate3d(calc(var(--pointer-x) * -.25),calc(var(--pointer-y) * -.25),0)}
.story-type{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(100px,21vw,330px);font-weight:800;letter-spacing:-.04em;color:#90a4ff;opacity:var(--type-opacity);transform:translate3d(calc(var(--pointer-x) * -.35),calc(var(--pointer-y) * -.35),0) scale(var(--type-scale));z-index:-1;white-space:nowrap}
.story-object{position:absolute;left:50%;top:50%;height:91%;max-height:455px;aspect-ratio:.8;border-radius:46% 46% 7% 7%;overflow:visible;transform:translate3d(calc(-50% + var(--pointer-x)),calc(-50% + var(--object-y) + var(--pointer-y)),70px) scale(var(--object-scale)) rotate(var(--object-rotate));opacity:var(--object-opacity);filter:blur(var(--object-blur));will-change:transform,opacity,filter;z-index:3}
.story-object::before,.story-object::after{content:"";position:absolute;inset:0;background:url("assets/smrtant-sculpture.png") center/cover no-repeat;border-radius:inherit;pointer-events:none}.story-object::before{clip-path:polygon(0 0,58% 0,42% 62%,0 86%);transform:translate3d(calc(var(--story-progress) * -70px),calc(var(--story-progress) * 18px),0) rotate(calc(var(--story-progress) * -7deg))}.story-object::after{clip-path:polygon(58% 0,100% 0,100% 100%,39% 100%,42% 62%);transform:translate3d(calc(var(--story-progress) * 72px),calc(var(--story-progress) * -22px),0) rotate(calc(var(--story-progress) * 8deg))}.story-object img{height:100%;width:100%;object-fit:cover;border-radius:inherit;opacity:calc(1 - var(--story-progress));filter:saturate(1.06) contrast(1.02)}
.story-browser{position:absolute;left:50%;top:50%;width:min(88%,900px);border-radius:10px;overflow:hidden;box-shadow:0 34px 74px #0009;clip-path:inset(var(--web-inset) calc(var(--web-inset) + var(--web-crop)) var(--web-inset) var(--web-inset) round 10px);transform:translate3d(calc(-50% + (var(--pointer-x) * .45)),calc(-50% + var(--web-y) + (var(--pointer-y) * .3)),30px) scale(var(--web-scale)) rotateX(var(--web-rotate-x)) rotateY(var(--web-rotate-y));opacity:var(--web-opacity);filter:blur(var(--web-blur));will-change:transform,opacity,clip-path,filter;background:#254bff;z-index:2;transform-origin:50% 50%}
.story-browser::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff24 49%,transparent 63%);transform:translateX(calc((var(--story-progress) * 240%) - 170%));mix-blend-mode:screen}.story-browser-glow{position:absolute;inset:-30%;background:radial-gradient(circle at 70% 40%,#8aa0ff88,transparent 40%);opacity:.55;pointer-events:none}
.story-chrome{position:relative;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#f1f2ee;color:#42453f;font:8px var(--f-mono);z-index:1}.story-chrome>span:first-child{letter-spacing:3px;color:#8d918a;font-size:7px}.story-screen{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:250px;height:min(36vh,355px)}.story-screen-copy{position:relative;padding:8% 9%;display:flex;flex-direction:column;justify-content:center;gap:20px;transform:translate3d(calc(var(--pointer-x) * -.22),calc(var(--pointer-y) * -.18),0);z-index:1}.story-screen-copy>span{font:6px var(--f-mono);letter-spacing:.5px}.story-screen-copy strong{font-size:clamp(27px,4vw,58px);line-height:1;letter-spacing:-.04em}.story-screen-copy .story-screen-link{margin-top:12px;border-bottom:1px solid #ffffff80;padding-bottom:8px;width:fit-content}.story-screen-art{position:relative;overflow:hidden}.story-screen-art img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:translate3d(calc(var(--pointer-x) * .3),calc(var(--pointer-y) * .26),0) scale(1.02)}
.story-phone{position:absolute;left:53%;top:50%;height:min(95%,475px);aspect-ratio:.5;background:#f4f4f0;color:#161817;border:7px solid #343b4b;border-radius:35px;overflow:hidden;box-shadow:0 32px 75px #000b;transform:translate3d(calc(-50% + (var(--pointer-x) * -.35)),calc(-50% + var(--phone-y) + (var(--pointer-y) * -.28)),90px) scale(var(--phone-scale)) rotate(var(--phone-rotate));opacity:var(--phone-opacity);will-change:transform,opacity;z-index:5}.story-phone::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#ffffff3d,transparent 32%);pointer-events:none}.phone-island{width:31%;height:14px;border-radius:0 0 12px 12px;background:#343b4b;margin:0 auto}.phone-nav{display:flex;justify-content:space-between;padding:12px 16px;font-size:13px;font-weight:bold;letter-spacing:-.6px}.story-phone>img{width:100%;height:50%;object-fit:cover;object-position:center 55%}.phone-copy{padding:17px;font-size:clamp(19px,2.1vw,29px);font-weight:600;line-height:1;letter-spacing:-1px}.phone-copy>span{display:block;font:5px/1.4 var(--f-mono);letter-spacing:0;margin-top:16px}
.story-signal{position:absolute;left:3%;right:3%;bottom:7%;height:34px;z-index:6;pointer-events:none}.signal-line{position:absolute;left:7%;right:7%;top:16px;height:1px;background:#ffffff20}.signal-line::after{content:"";display:block;width:100%;height:100%;background:#8fa4ff;transform:scaleX(var(--signal-progress));transform-origin:left;box-shadow:0 0 14px #6d87ff;opacity:.8}.signal-node{position:absolute;top:13px;width:7px;height:7px;border-radius:50%;background:#2c3240;box-shadow:0 0 0 1px #8998c855}.signal-node-one{left:7%}.signal-node-two{left:50%}.signal-node-three{left:93%}.signal-spark{position:absolute;left:var(--signal-x);top:4px;color:#a6b5ff;font-size:22px;line-height:1;transform:translateX(-50%) rotate(calc(var(--story-progress) * 180deg)) scale(calc(.8 + (var(--signal-glow) * .25)));text-shadow:0 0 17px #6480ff;filter:brightness(calc(1 + var(--signal-glow)))}
.scroll-story[data-chapter="1"] .signal-node-one,.scroll-story[data-chapter="2"] .signal-node-one,.scroll-story[data-chapter="2"] .signal-node-two,.scroll-story[data-chapter="3"] .signal-node-one,.scroll-story[data-chapter="3"] .signal-node-two,.scroll-story[data-chapter="3"] .signal-node-three{background:#a6b5ff;box-shadow:0 0 13px #6d87ff}
.story-orbit{position:absolute;border:1px solid #8ea1f526;width:65%;height:90%;border-radius:50%;left:50%;top:50%;transform:translate3d(calc(-50% + (var(--pointer-x) * -.6)),calc(-50% + (var(--pointer-y) * -.5)),0) rotate(-20deg);z-index:-1}.orbit-two{width:85%;height:60%;transform:translate3d(calc(-50% + (var(--pointer-x) * .55)),calc(-50% + (var(--pointer-y) * .45)),0) rotate(20deg)}
.story-chapters{display:flex;justify-content:space-between;gap:20px;margin-top:12px;z-index:10}.story-chapters button{position:relative;display:flex;align-items:center;gap:12px;padding:10px 0;min-height:44px;border:0;background:none;color:#aeb4c0;font:10px var(--f-mono);transition:color 180ms ease}.story-chapters button::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:#8aa0ff;transform:scaleX(0);transform-origin:left;transition:transform 260ms cubic-bezier(.22,1,.36,1)}.story-chapters button>span:first-child{color:#727d94;font-size:8px}.story-chapters button[aria-current=step]{color:white}.story-chapters button[aria-current=step]::after{transform:scaleX(1)}.story-chapters button[aria-current=step]>span:first-child{color:#8aa0ff}.story-progress{height:2px;background:#ffffff18;margin-top:4px;overflow:hidden;z-index:10}.story-progress span{display:block;height:100%;background:#8aa0ff;transform:scaleX(var(--story-progress));transform-origin:left;box-shadow:0 0 12px #6d87ff}.hands-on-label{margin-bottom:20px}.story-pin a:focus-visible,.story-pin button:focus-visible{outline-color:#a6b5ff}
html[dir=rtl] .story-caption h3{letter-spacing:0;line-height:1.3}html[dir=rtl] .story-progress span,html[dir=rtl] .signal-line::after{transform-origin:right}
@media(max-width:1100px){.story-pin{top:80px;height:calc(100svh - 80px)}.story-signal{bottom:5%}}
@media(max-width:767px){.scroll-story{height:360svh;margin-inline:-20px}.story-pin{top:72px;height:calc(100svh - 72px);min-height:460px;padding:16px 20px 11px}.story-top{gap:12px}.story-top .section-index{font-size:7px}.story-top a{font-size:7px}.story-captions{min-height:94px;margin-top:3px}.story-caption{gap:10px}.story-caption h3{font-size:30px;max-width:275px}.story-caption>span{font-size:8px}.story-object{max-height:355px;height:86%}.story-browser{width:96%;border-radius:6px}.story-chrome{font-size:5px;padding:9px}.story-chrome>span:first-child{font-size:5px;letter-spacing:1px}.story-screen{min-height:220px;height:31vh}.story-screen-copy{padding:12px;gap:14px}.story-screen-copy strong{font-size:26px}.story-screen-copy>span{font-size:4px}.story-screen-copy .story-screen-link{font-size:4px;margin-top:4px}.story-phone{left:51%;height:min(89%,400px);border-width:6px;border-radius:28px}.phone-nav{font-size:11px;padding:10px 13px}.phone-copy{font-size:22px;padding:14px}.phone-copy>span{font-size:4px;margin-top:12px}.story-signal{bottom:4%;left:0;right:0}.story-chapters{gap:10px;margin-top:7px}.story-chapters button{font-size:8px;gap:7px}.story-chapters button>span:first-child{font-size:6px}.story-type{font-size:29vw}.story-orbit{width:95%;height:70%}.orbit-two{width:100%;height:40%}}
/* Natural document flow remains available without animation or in short viewports. */
.scroll-story.is-static{height:auto}.is-static .story-pin{position:relative;top:0;height:auto;min-height:620px}.is-static .story-scene{min-height:335px}.is-static .story-object,.is-static .story-phone,.is-static .story-signal{display:none}.is-static .story-browser{opacity:1;clip-path:inset(0 round 10px);filter:none;transform:translate(-50%,-50%);will-change:auto}.is-static .story-captions{min-height:0;display:grid;gap:14px;padding-block:15px}.is-static .story-caption{position:static;opacity:1;transform:none;filter:none}.is-static .story-caption h3{font-size:23px}.is-static .story-chapters,.is-static .story-progress{display:none}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-pin{position:relative;top:0;height:auto;min-height:620px}.story-scene{min-height:335px}.story-object,.story-phone,.story-signal{display:none}.story-browser{opacity:1;clip-path:inset(0 round 10px);filter:none;transform:translate(-50%,-50%);will-change:auto}.story-captions{min-height:0;display:grid;gap:14px;padding-block:15px}.story-caption{position:static;opacity:1;transform:none;filter:none}.story-caption h3{font-size:23px}.story-chapters,.story-progress{display:none}}