.scroll-demo{color:#f5f8f8;background:#03131c;min-height:100svh;font-family:DM Sans,sans-serif;overflow-x:clip}.scroll-demo-track{height:370svh}.scroll-demo-stage{background:radial-gradient(circle at 73% 46%,#145367 0%,#062632 35%,#02121a 75%);height:100svh;min-height:470px;position:sticky;top:0;overflow:hidden}.scroll-demo-stage:before{content:"";pointer-events:none;z-index:2;background:linear-gradient(90deg,#02121a 2%,#0000 56%),linear-gradient(#0000 76%,#02121a9e);position:absolute;inset:0}.scroll-demo-top,.scroll-demo-bottom{z-index:5;letter-spacing:.15em;justify-content:space-between;align-items:center;gap:18px;font-size:11px;display:flex;position:absolute;left:5vw;right:5vw}.scroll-demo-top{top:30px}.scroll-demo-top a,.scroll-demo-end a{color:#d8fcff;border-bottom:1px solid #74e5ec;padding:12px 0;text-decoration:none}.scroll-demo-top span{color:#98bdc8}.scroll-demo-copy{z-index:4;text-shadow:0 2px 30px #03121a85;width:40vw;max-width:580px;position:absolute;top:50%;left:8vw;transform:translateY(-50%)}.scroll-demo-eyebrow{letter-spacing:.24em;color:#84eaf3;margin:0 0 65px;font-size:11px}.scroll-demo-number{letter-spacing:.18em;color:#a4ccd4;font-size:12px}.scroll-demo-copy h1{letter-spacing:-.075em;margin:24px 0;font-family:Manrope,sans-serif;font-size:clamp(56px,7vw,116px);font-weight:300;line-height:.94}.scroll-demo-copy>p:last-child{color:#d2e1e5;font-size:17px;line-height:1.5}.scroll-demo-image{width:min(46vw,640px);position:absolute;top:0;bottom:0;right:5vw}.scroll-demo-image img{object-fit:contain;object-position:center bottom;will-change:opacity;width:100%;height:100%;position:absolute;inset:0}.scroll-demo-bottom{bottom:24px}.scroll-demo-meter{background:#fff5;flex:1;max-width:260px;height:1px}.scroll-demo-meter i{background:#76f1f6;height:2px;display:block;box-shadow:0 0 15px #76f1f6}.scroll-demo-end{text-align:center;background:#061f2b;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:40svh;padding:55px 20px;display:flex}.scroll-demo-end p{letter-spacing:-.05em;margin:0;font-size:clamp(28px,5vw,60px);font-weight:300}.scroll-demo-end a{letter-spacing:.13em;font-size:12px}@media (width<=760px){.scroll-demo-track{height:310svh}.scroll-demo-stage{background:radial-gradient(circle at 55% 47%,#155164,#062733 48%,#02121a 90%);height:100svh;min-height:0}.scroll-demo-stage:before{background:linear-gradient(#02121a65 0%,#0000 17% 58%,#02121afa 88%)}.scroll-demo-top,.scroll-demo-bottom{font-size:9px;left:20px;right:20px}.scroll-demo-top{top:12px}.scroll-demo-top span{text-align:right;max-width:50%}.scroll-demo-copy{width:auto;max-width:none;inset:auto 20px 70px;transform:none}.scroll-demo-eyebrow{letter-spacing:.18em;margin:0 0 10px;font-size:9px}.scroll-demo-number{font-size:10px}.scroll-demo-copy h1{margin:9px 0 5px;font-size:clamp(40px,12vw,64px)}.scroll-demo-copy>p:last-child{margin:0;font-size:14px}.scroll-demo-image{width:100%;inset:55px 0 150px}.scroll-demo-image img{object-position:center center}.scroll-demo-bottom{bottom:18px}.scroll-demo-meter{max-width:90px}.scroll-demo-end{min-height:32svh}}@media (width<=760px) and (height<=650px){.scroll-demo-image{bottom:124px}.scroll-demo-copy{bottom:51px}.scroll-demo-copy h1{font-size:36px}.scroll-demo-copy>p:last-child{display:none}}@media (prefers-reduced-motion:reduce){.scroll-demo-image img{will-change:auto}}
