@import url('./hero-live-v10.css'); /* Orbit containment (also in hero-live-v10; duplicated here so a failed @import cannot leave the canvas in normal flow or an auto-height stage). */ .journey-stage{position:relative;isolation:isolate;overflow:clip;height:100svh;min-height:600px} .live-orbit{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;z-index:0;opacity:0;pointer-events:none} html[data-live=ready] .journey-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:clip} html[data-live=ready] .live-orbit{opacity:1} .story-copy{position:relative;z-index:4} .workflow-orbit-still{display:block;width:min(100%,772px);height:auto;margin:40px auto 0} html[data-live=ready] .workflow-orbit-still{display:none} .chapter{padding:90px 8%;min-height:50svh;background:#030405} .chapter h2{font:400 clamp(34px,3.6vw,64px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:0 0 20px} .chapter p{font:400 15px/1.65 Manrope,sans-serif;color:#aeb8b3;margin:0;max-width:350px} .model-names{display:flex;gap:30px;padding:30px 8%;flex-wrap:wrap}.cube-control{display:none} .model-copy,.archive-copy{background:#f4f5f3;color:#14191b}.model-copy p,.archive-copy p{color:#535c59} .archive-label{display:block;font-size:12px;margin-top:22px} .archive-static{display:none} @media(prefers-reduced-motion:reduce){ html:not([data-live=ready]) .archive-copy{position:relative;min-height:540px;padding-right:55%} html:not([data-live=ready]) .archive-static{display:block;position:absolute;right:3%;top:20px;width:49%;height:480px} } .socials{display:flex;gap:50px;font:400 24px 'Space Grotesk',sans-serif;margin:35px 0 50px} .footer-brand{display:block;font:500 20px 'Space Grotesk',sans-serif;letter-spacing:.18em;margin-top:70px} .ending-still{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} html:not([data-live=ready]) .ending{position:relative;isolation:isolate;overflow:clip} html:not([data-live=ready]) .ending-still{display:block} /* Static/reduced-motion chapters must escape the live stage's viewport clip. */ /* Keep the stage viewport-sized even before live/WebGL. height:auto let the chapter stack inflate the stage (and absolute canvas via inset:0) to tens of thousands of px, so resize() baked that into the scroll runway and the first screen stayed a black canvas with the hero far below. */ html:not([data-live=ready]) .journey-stage{height:100svh;min-height:600px;overflow:visible} html:not([data-live=ready]) .hero-v8{height:100svh} html[data-live=ready] .journey{height:820svh} html[data-live=ready] .story-copy{position:absolute;inset:0;pointer-events:none} html[data-live=ready] .chapter{position:absolute;top:39%;left:8%;width:35%;padding:0;min-height:0;opacity:0;visibility:hidden;background:none;pointer-events:none} html[data-live=ready] .chapter.right{left:auto;right:6%;width:34%} /* Each chapter occupies a different height and breathing space around the flow. */ html[data-live=ready] .feature:nth-child(1){top:23%;left:7%;width:42%} html[data-live=ready] .feature:nth-child(2){top:61%;left:auto;right:5%;width:35%} html[data-live=ready] .feature:nth-child(3){top:57%;left:9%;width:39%} html[data-live=ready] .feature:nth-child(4){top:22%;left:auto;right:4%;width:36%} html[data-live=ready] .feature:nth-child(5){top:28%;left:7%;width:42%} html[data-live=ready] .feature{will-change:transform,opacity} html[data-live=ready] .diamond-copy{top:61%;left:7%;width:36%} html[data-live=ready] #workflow h2{font-size:clamp(28px,3vw,48px);line-height:1.16;margin-bottom:24px} html[data-live=ready] #workflow .story-word:last-child{display:block} html[data-live=ready] .power-copy{top:46%;left:auto;right:5%;width:30%} @media(max-width:680px){ html[data-live=ready] .chapter.power-copy{top:14%;left:7%;right:auto;width:86%} } html[data-live=ready] .model-copy{top:12%;left:7%;width:86%;text-align:center} html[data-live=ready] .model-copy p{max-width:none} /* The label coordinates are projected by placeNames into this viewport layer. */ html[data-live=ready] .model-names{position:absolute;inset:0;display:block;padding:0;z-index:5;color:#24312a;font:400 clamp(14px,1.35vw,20px)/1.35 'Space Grotesk',sans-serif;pointer-events:none} html[data-live=ready] .model-names span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;padding:4px 0} html[data-live=ready] .cube-control{display:block;position:absolute;left:28%;top:26%;width:44%;height:56%;visibility:hidden;pointer-events:none;touch-action:pan-y;cursor:grab;border-radius:12px} html[data-live=ready] .cube-control:active{cursor:grabbing} html[data-live=ready] .cube-control:focus-visible{outline:2px solid #536c60;outline-offset:6px} @media(max-width:680px){html[data-live=ready] .cube-control{left:12%;top:24%;width:76%;height:53%}} /* Convert beat (#format): type in a dark left gutter; pages bias right. */ .convert-copy{color:#f2f5f3} .convert-copy .convert-kicker{font:600 14px/1.25 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c5d4cc;margin:0 0 18px;max-width:none} html[data-live=ready] .convert-copy{top:30%;left:6%;width:32%;text-align:left;color:#f2f5f3;z-index:6;text-shadow:0 2px 28px #030405e6,0 0 1px #030405} html[data-live=ready] .convert-copy h2{margin:0;font-size:clamp(28px,3.2vw,52px);line-height:1.12} html[data-live=ready] .convert-copy .story-char{color:#f2f5f3} html[data-live=ready] .convert-copy .convert-kicker{color:#d0ddd6;text-shadow:0 1px 18px #030405cc} @media(max-width:680px){ html[data-live=ready] .convert-copy{top:12%;left:7%;width:78%;text-align:left} html[data-live=ready] .convert-copy h2{font-size:30px} html[data-live=ready] .convert-copy .convert-kicker{font-size:13px;letter-spacing:.12em} } /* Keep the moving stream in its own right-hand reading gutter on narrow screens. */ @media(max-width:680px){ html[data-live=ready] .chapter.feature:nth-child(n){left:7%;right:auto;width:66%} html[data-live=ready] .feature h2{font-size:clamp(27px,7.4vw,34px);line-height:1.13;letter-spacing:-.045em} .chapter p{font-size:14px;line-height:1.65} html[data-live=ready] .model-copy{width:86%} html[data-live=ready] .archive-copy{top:14%;width:86%} } @media(max-width:360px){.brand-name{font-size:11px}.account{gap:8px;font-size:11px}.signup{padding:8px}.brand{gap:4px}} /* Keep the approved still visible until the first correct WebGL frame is painted. Avoids a mid-scroll / uninitialized particle frame flashing on enter. */ html[data-live=ready]:not([data-orbit-ready]) .live-orbit{opacity:0!important;pointer-events:none} html[data-live=ready]:not([data-orbit-ready]) .hero-art{display:none!important} html[data-live=ready][data-orbit-ready] .live-orbit{opacity:1;transition:opacity .28s ease} @media(prefers-reduced-motion:reduce) and (max-width:680px){ html:not([data-live=ready]) .archive-copy{padding-right:8%;padding-bottom:0} html:not([data-live=ready]) .archive-static{position:relative;right:auto;top:auto;width:100%;height:460px;margin-top:24px} } /* Ending must beat .chapter left/width (same class list on