/* All landing styles in one file, in the original cascade order. */ /* --- fonts --- */ @font-face{font-family:"Funnel Display";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/funnel-display-500.woff2") format("woff2")} /* --- landing.css --- */ :root{color-scheme:dark;--frame:#000;--fg:#f4f4f8;--muted:#c5cad5;--font:"Geist","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;font-family:var(--font);background:var(--frame);color:var(--fg);font-synthesis:none;-webkit-font-smoothing:antialiased} *{box-sizing:border-box}html,body{margin:0;min-height:100%}body{padding:10px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #8ddbff;outline-offset:5px}[hidden]{display:none!important}svg{display:block;width:20px;height:20px;flex:none} .hero{position:relative;isolation:isolate;display:grid;grid-template-rows:88px 1fr auto;min-height:max(660px,calc(100svh - 20px));overflow:hidden;border-radius:30px;background:linear-gradient(#030711,#101e36)} #city-background{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}#city-background .city-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px);transform:scale(1.1);opacity:1;transition:opacity .9s ease}#city-background canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}#city-background[data-ready="true"] canvas{opacity:1}#city-background video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}#city-background[data-ready="true"] video{opacity:1} /* Phone video: a light dark veil for copy contrast. Tune --video-veil (0 = off). The desktop video decodes ~30% brighter and bluer than the live city draws (Chrome, Safari and Firefox alike): a black veil at .28 brings it back to the live city's brightness and contrast. */ #city-background[data-video=desktop]{--video-veil:.28;--video-veil-color:#000}#city-background:has(video)::after{content:"";position:absolute;inset:0;background:var(--video-veil-color,#020510);opacity:var(--video-veil,.3);pointer-events:none}#city-background[data-ready="true"] .city-poster{opacity:0} .readability{position:absolute;inset:0;opacity:.5;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 43% at 50% 48%,#02051083 0%,#02051057 34%,#02051026 70%,transparent 100%),linear-gradient(180deg,#0002,transparent 25%,transparent 75%,#0004)} .top{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:12px 28px} .brand{position:absolute;top:0;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:182px;height:48px;background:var(--frame);border-radius:0 0 18px 18px;text-decoration:none} .brand:before,.brand:after{content:"";position:absolute;top:0;width:18px;height:18px;pointer-events:none}.brand:before{right:100%;background:radial-gradient(circle at 0 100%,transparent 18px,var(--frame) 18.5px)}.brand:after{left:100%;background:radial-gradient(circle at 100% 100%,transparent 18px,var(--frame) 18.5px)}.brand img{width:auto;height:19px;display:block} .hero-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px 96px;min-width:0} h1{font-family:"Funnel Display",var(--font);font-size:clamp(39.2px,5.67vw,86.8px);font-weight:500;line-height:1.02;letter-spacing:-.05em;margin:0 0 28px;text-wrap:balance;text-shadow:0 4px 32px #02040f66} .subline{max-width:420px;margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.65;letter-spacing:-.01em;text-wrap:balance;color:#d0d5e0;text-shadow:0 2px 14px #0008} .signup{position:relative;width:min(390px,100%);margin-top:44px;min-height:132px}.signup-label{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:#c4cad8} .optin{display:flex;align-items:center;gap:8px;min-height:58px;padding:5px 5px 5px 18px;border:1px solid #e1e7f566;border-radius:9px;background:#070c1894;transition:border-color .2s,background .2s;box-shadow:0 8px 32px #03071326}.optin:focus-within{border-color:#e1e7f5;background:#080f21d9;outline:2px solid #8ddbff66;outline-offset:4px}.optin.invalid{border-color:#ffaaa1} .optin input[type="email"]{flex:1;min-width:0;max-width:100%;height:44px;padding:8px 0;background:none;border:0;border-radius:0;color:#f4f4f8;font-size:16px;outline:none}.optin input::placeholder{color:#a5afc4}.optin button{display:grid;place-items:center;width:46px;height:46px;flex:none;padding:0;border:1px solid #d0dae070;border-radius:5px;background:#eef3fc0d;color:#f4f4f8;transition:background .2s,color .2s}.optin button:hover{background:#f4f4f8;color:#090e1b}.optin button:disabled{opacity:.5;cursor:progress}.form-message{margin:12px 0 0;font-size:13px;line-height:1.5;color:#ffd0c9;min-height:20px}.form-message:empty{visibility:hidden}.thanks{min-height:92px;padding-top:12px;outline:none}.thanks>p{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;line-height:1.5;margin:0 0 18px}.thanks svg{color:#9be4d8}.follow{display:flex;align-items:center;justify-content:center;gap:18px;font-size:13px;color:var(--muted)}.follow a{text-underline-offset:5px;padding:10px 0} .footer{position:relative;display:flex;align-items:center;justify-content:center;gap:32px;min-height:64px;margin:0 min(30px,3vw);padding:8px 24px;border-radius:20px 20px 0 0;color:#242630;background:#dcdee4;font-size:12px;line-height:1.5}.legal{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}.legal a{display:flex;align-items:center;min-height:44px;text-decoration:none}.legal a:hover{text-decoration:underline;text-underline-offset:4px}.social{display:flex;align-items:center;gap:2px}.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;color:#353842}.social a:hover{background:#a5acc133;color:#000}.social svg{width:18px;height:18px}.footer a:focus-visible{outline-color:#2152a2} .scene-status{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - 40px);margin:0;padding:6px 10px;border:1px solid #9fbadb26;background:#050912c9;border-radius:7px;color:#c5cfdf;font-size:12px;line-height:1.5;text-align:center}.status-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#9ad9ee}#retry-background{min-height:36px;border:1px solid #9fbadb40;border-radius:4px;background:#172439;color:#e8f3ff;padding:4px 10px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .scene-status.scene-loader{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:260px;padding:13px 16px;border-color:#b9d1f52b;background:#050912b3;text-align:left;transition:opacity .45s ease}.loading-label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.025em}#scene-percent{font:10px var(--mono);font-variant-numeric:tabular-nums;color:#9cdce8}#scene-progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:3px;border:0;border-radius:3px;overflow:hidden;background:#c4d7ef21;color:#a5ecf2}#scene-progress::-webkit-progress-bar{background:#c4d7ef21}#scene-progress::-webkit-progress-value{background:#a5ecf2;transition:width .2s ease}#scene-progress::-moz-progress-bar{background:#a5ecf2}#scene-progress:not([value]){background:linear-gradient(90deg,#c4d7ef21 0%,#c4d7ef21 30%,#a5ecf2 50%,#c4d7ef21 70%,#c4d7ef21 100%);background-size:200% 100%;animation:loading-sweep 1.4s linear infinite}#scene-progress:not([value])::-webkit-progress-bar{background:transparent}.scene-loader[data-state="complete"]{opacity:0;pointer-events:none}.scene-loader[data-state="error"] .loading-label{font-size:12px;line-height:1.5}.scene-loader #retry-background{align-self:flex-start;min-height:38px;padding:6px 14px}@keyframes loading-sweep{from{background-position:200% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){#scene-progress:not([value]){animation:none}} .hero[data-city-interactive="true"]{cursor:grab;touch-action:pan-y pinch-zoom}.hero[data-dragging="true"],.hero[data-dragging="true"] *{cursor:grabbing!important;user-select:none}.hero .top,.hero .footer{cursor:auto}.city-tools{position:absolute;right:28px;bottom:84px;display:none;align-items:center;gap:4px;padding:4px;border:1px solid #d2deef26;border-radius:9px;background:#070b1466;cursor:auto}.hero[data-city-interactive="true"] .city-tools{display:flex}.city-tools p{font-size:11px;color:#c5cad5;margin:0 12px}.city-tools button{display:grid;place-items:center;min-width:44px;height:44px;padding:0;border:0;border-radius:6px;background:transparent;color:#e7ecf5;font-size:23px;line-height:1}.city-tools button:hover{background:#d2deef1c}@media(max-width:700px){.city-tools{right:18px;bottom:108px}.city-tools p{max-width:110px;font-size:10px;line-height:1.5;margin:0 8px}.city-tools button{min-width:40px}} @media(min-width:1800px){.hero-copy{padding-bottom:120px}.signup{margin-top:48px}} @media(max-width:700px){body{padding:7px}.hero{min-height:max(700px,calc(100svh - 14px));border-radius:23px;grid-template-rows:110px 1fr auto}.top{padding:52px 14px 0}.brand{width:150px;height:42px}.brand img{height:18px}.hero-copy{padding:46px 24px 68px}h1{font-size:clamp(36.4px,7.35vw,50.4px);max-width:9em;letter-spacing:-.045em;margin-bottom:25px}.subline{max-width:320px;font-size:15px}.signup{margin-top:34px}.readability{background:radial-gradient(ellipse 95% 44% at 50% 49%,#02051094,transparent),linear-gradient(180deg,#0002,transparent 60%,#0005)}.footer{min-height:94px;flex-direction:column;gap:0;padding:5px 10px;border-radius:17px 17px 0 0}.legal{gap:0 20px;font-size:12px}.social a{height:38px}.scene-status{bottom:111px}} @media(max-width:360px){.hero-copy{padding-left:18px;padding-right:18px}h1{font-size:33.6px}.legal{gap:0 12px}.signup-label{font-size:10px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}} .signup{width:auto;min-height:58px;margin-top:36px}.join-waitlist{display:flex;align-items:center;justify-content:center;gap:34px;min-height:56px;padding:15px 23px;border:1px solid #eef1f6;border-radius:8px;background:#eef1f6;color:#0c1422;font-size:16px;font-weight:500;box-shadow:0 8px 28px #03071324;transition:background .2s,transform .2s}.join-waitlist:hover{background:#fff;transform:translateY(-2px)}.waitlist-open{overflow:hidden}.waitlist-dialog{color:#edf1f8;background:#101722;border:1px solid #455066;border-radius:20px;width:min(540px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:34px;box-shadow:0 32px 120px #0008;overflow:auto}.waitlist-dialog::backdrop{background:#0309148c;backdrop-filter:blur(6px)}.dialog-close{position:absolute;top:15px;right:15px;display:grid;place-items:center;width:36px;height:36px;background:#ffffff08;border:1px solid #ffffff18;border-radius:50%;color:#bdc9dd}.dialog-close:hover{background:#ffffff18;color:#fff}.waitlist-eyebrow{font:12px var(--mono);letter-spacing:.13em;color:#a4b7d5;margin:0 0 22px}.waitlist-heading h2{font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:0 0 10px}.waitlist-heading>p:last-child{font-size:15px;line-height:1.55;color:#b9c4d6;margin:0 0 24px}.field-heading,.optional-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.field-heading h3,.optional-heading h3{margin:0;font-size:15px;font-weight:500}.required-tag{font:12px var(--mono);color:#b6d9ee;padding:4px 7px;border:1px solid #546779;border-radius:4px}.wallet-section{padding-bottom:20px;border-bottom:1px solid #2c3748}.connect-wallet{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:13px 16px;color:#cfe8f6;border:1px solid #607c91;background:#1c3040;border-radius:8px;font-size:16px}.connect-wallet:hover{background:#254255}.connect-wallet:disabled{opacity:.6;cursor:progress}.wallet-note,.wallet-message{font-size:12px;line-height:1.5;margin:10px 0 0;color:#96aac3}.wallet-message{color:#b7e9ed}.wallet-message:empty{display:none}.connected-wallet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid #4f767b;border-radius:8px;background:#1a3036}.connected-wallet small{display:block;font-size:12px;color:#a4cbd3;margin-bottom:5px}.connected-wallet strong{font:14px var(--mono);color:#dcf5f4}.connected-wallet button{border:0;background:none;color:#bae6ec;padding:8px;font-size:14px}.wallet-picker{padding:14px;margin-top:12px;background:#0b121d;border:1px solid #2c3c51;border-radius:8px}.wallet-picker p{font-size:13px;line-height:1.5;margin:0 0 10px;color:#b9c4d6}.wallet-picker p:last-child{margin:0}.wallet-picker button{width:100%;text-align:left;padding:12px;margin-top:6px;border:1px solid #3a4b63;border-radius:6px;background:#18273b;color:#f1f4fa;font-size:15px}.wallet-picker button:hover{background:#263d59}.optional-heading{margin:22px 0 15px}.optional-heading>span{font-size:12px;color:#91a2bb}.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-fields label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#c7d0df}.contact-fields .wide{grid-column:1/-1}.contact-fields input{width:100%;min-width:0;font-size:16px;color:#edf1f8;border:1px solid #354357;background:#0a111d;border-radius:7px;min-height:44px;padding:10px 13px;outline:none}.contact-fields input::placeholder{color:#7889a2}.contact-fields input:focus{border-color:#9bc6e6;box-shadow:0 0 0 3px #70bce71c}.contact-fields input[aria-invalid=true]{border-color:#ffaaa1}.waitlist-message{font-size:14px;line-height:1.5;color:#ffbcb6;margin:14px 0 0}.waitlist-message:empty{display:none}.waitlist-submit{display:flex;justify-content:space-between;align-items:center;margin-top:24px;width:100%;min-height:52px;padding:13px 17px;font-size:16px;border:0;border-radius:8px;color:#0c1422;background:#edf2fa;font-weight:500}.waitlist-submit:hover:enabled{background:#fff}.waitlist-submit:disabled{opacity:.35;cursor:default}.waitlist-note{font-size:12px;line-height:1.6;color:#8c9eb8;margin:12px 0 0}.waitlist-success{text-align:center;padding:16px 0;outline:none}.success-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#263f46;color:#bcf2e7;font-size:25px;margin-bottom:8px}.waitlist-success h3{font-size:27px;font-weight:500;letter-spacing:-.035em;margin:12px 0}.waitlist-success p{font-size:16px;line-height:1.5;color:#b9c4d6}.waitlist-success button{margin-top:15px;font-size:15px;padding:12px 18px;background:#edf2fa;color:#0c1422;border:0;border-radius:7px}@media(max-width:700px){.signup{margin-top:30px}.waitlist-dialog{padding:27px 22px;max-height:calc(100dvh - 24px)}.waitlist-heading h2{font-size:29px}.waitlist-eyebrow{margin-bottom:20px}.waitlist-heading>p:last-child{max-width:95%;font-size:14px}.dialog-close{top:12px;right:12px}.contact-fields{gap:13px}.waitlist-submit{margin-top:20px}} /* A clear, two-way appearance switch, separate from the scene's camera controls. */ .look-switch{display:flex;gap:5px;padding:5px;border:1px solid #87bbffb3;border-radius:16px;background:#08152df2;box-shadow:0 0 0 4px #487ee918,0 8px 32px #0005,0 0 28px #3466df26;position:relative;z-index:2} .look-option{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px 16px;border:1px solid transparent;border-radius:11px;background:transparent;color:#c8d7ef;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s,border-color .2s} .look-option:hover:enabled{background:#273f644d;color:#fff}.look-option[aria-pressed=true]{color:#071328;background:linear-gradient(120deg,#b7ebff,#86baff);border-color:#c8f1ff;box-shadow:0 0 18px #65b4ff36}.look-option[aria-pressed=true]:hover:enabled{color:#071328;background:linear-gradient(120deg,#d3f3ff,#a8cdff)} .look-switch[data-look=dusty] .look-option[aria-pressed=true]{color:#edf3ff;background:linear-gradient(120deg,#405475,#293d5e);border-color:#96accd;box-shadow:inset 0 1px 0 #c1d4f526}.look-option:disabled{cursor:wait;opacity:.65}.look-option:focus-visible{outline:3px solid #fff;outline-offset:3px} .look-dot{display:block;width:10px;height:10px;border-radius:50%;flex:none}.electric-dot{background:#3475ff;box-shadow:0 0 9px #3475ff99}.dusty-dot{background:#8da5c6;box-shadow:inset 0 0 0 1px #c7d5e866} @media(max-width:1080px){.hero{grid-template-rows:134px 1fr auto}.top{justify-content:center;align-items:flex-end;padding:62px 14px 10px}} @media(max-width:700px){.look-switch{width:min(100%,360px);gap:4px;padding:4px;border-radius:14px}.look-option{flex:1;min-width:0;min-height:46px;padding:10px 8px;font-size:12px;gap:7px}.hero-copy{padding-top:30px}} @media(prefers-reduced-motion:reduce){.look-option{transition:none}} .hero[data-reveal="true"] .city-tools #city-help,.hero[data-reveal="true"] .city-tools [data-city-action]{display:none}#skip-reveal{width:auto;padding:0 16px;font-size:12px;letter-spacing:.04em}#skip-reveal[hidden]{display:none} .hero[data-reveal="true"] .city-tools{display:flex} .headline-switch{display:flex;gap:4px;padding:4px;margin:0 0 28px;border:1px solid #a3c6f13d;border-radius:999px;background:#071120cf;cursor:auto}.headline-switch button{border:0;border-radius:999px;padding:9px 14px;min-height:38px;background:transparent;color:#aabbd0;font:500 13px/1.2 var(--font);cursor:pointer}.headline-switch button[aria-pressed=true]{background:#c6e9ff;color:#092035}.headline-switch button:focus-visible{outline:2px solid white;outline-offset:3px}.headline-tagline{font-family:"Funnel Display",var(--font);font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.35;max-width:30em;text-wrap:balance;color:#eef5ff;text-shadow:0 2px 20px #020711;margin:0 0 16px}.headline-tagline[hidden]{display:none}.hero[data-headline=subline] h1{margin-bottom:20px}.hero[data-headline=statement] h1{font-size:clamp(36px,4.7vw,72px);max-width:12em;line-height:1.06;margin-bottom:24px}.hero-copy{padding-top:40px;padding-bottom:70px}@media(max-width:700px){.headline-switch{margin-bottom:24px;gap:2px;padding:3px}.headline-switch button{padding:9px 11px;font-size:12px;min-height:38px}.headline-tagline{max-width:17em;font-size:21px}.hero[data-headline=statement] h1{font-size:clamp(34px,8vw,49px);max-width:11em}.hero-copy{padding-top:28px;padding-bottom:65px}} /* --- launch.css --- */ /* Fixed Electric Blue release: the city is the primary visual. */ .launch{padding:0;background:#030711} .launch .hero{border-radius:0;min-height:100svh;grid-template-rows:88px 1fr auto} .launch .top{padding:24px 5vw;justify-content:flex-start;align-items:center} .launch .brand{position:static;transform:none;width:auto;height:auto;background:none;border-radius:0} .launch .brand:before,.launch .brand:after{display:none}.launch .brand img{height:23px} .launch .hero-copy{padding:70px 24px 100px;transition:opacity .7s ease,transform .7s ease} .launch h1{font-size:clamp(44px,6.2vw,88px);max-width:12em;margin-bottom:24px} .launch .subline{font-size:clamp(16px,1.3vw,20px);max-width:28em;line-height:1.55;color:#e4ebfa} .launch .signup{margin-top:32px;min-height:0;width:auto}.launch .join-waitlist{min-height:56px} .launch .footer{background:none;color:#bac9e0;border-radius:0;margin:0;padding:16px 24px;gap:28px;font-size:14px;transition:opacity .7s ease} .launch .social a{color:#bac9e0}.launch .legal{font-size:14px}.launch .legal a{min-height:44px} .launch #city-background .city-poster{filter:none;transform:none;object-position:center;opacity:.85} .launch #city-background[data-ready=true] .city-poster{opacity:0} .launch .readability{opacity:1;background:linear-gradient(180deg,#02071344,transparent 22%,#02071340 58%,#020713e6),radial-gradient(ellipse at 50% 50%,#02071370,transparent 65%)} .launch[data-loading=true] .hero-copy,.launch[data-loading=true] .footer{visibility:hidden;opacity:0;pointer-events:none} .launch .scene-loader{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(320px,calc(100% - 48px));padding:24px;border:1px solid #bed9ff30;background:#030c22bf;backdrop-filter:blur(10px);border-radius:12px} .launch .loading-kicker{font:12px var(--mono);letter-spacing:.16em;color:#d3e9ff;margin-bottom:12px}.launch .loading-label{font-size:14px}.launch #scene-percent{font-size:14px} @media(max-width:700px){ .launch .hero{min-height:100svh;grid-template-rows:72px 1fr auto}.launch .top{padding:24px}.launch .brand img{height:20px} .launch .hero-copy{align-items:flex-start;justify-content:flex-end;text-align:left;padding:clamp(120px,26svh,260px) 24px 36px} .launch h1{font-size:clamp(42px,10.5vw,64px);max-width:8em;line-height:1.02;letter-spacing:-.045em;text-wrap:balance;margin-bottom:18px} .launch .subline{font-size:16px;max-width:24em;text-wrap:pretty}.launch .signup{margin-top:26px}.launch .join-waitlist{min-width:180px} .launch .footer{align-items:flex-start;gap:0;padding:8px 24px max(16px,env(safe-area-inset-bottom));min-height:0}.launch .legal{gap:0 16px}.launch .social{margin-left:-12px} .launch .readability{background:linear-gradient(180deg,#03071133,transparent 20%,#03071133 35%,#030711bf 68%,#030711f2 100%)} .launch .waitlist-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)} } @media(prefers-reduced-motion:reduce){.launch .hero-copy,.launch .footer,.launch #city-background canvas,.launch #city-background .city-poster{transition:none}} /* Light blur: 20% of the 30px loading-blur range. */ .launch #city-background .city-poster{filter:blur(6px);transform:scale(1.035)} #matrix-loader{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)} #matrix-loader span{position:absolute;left:calc(var(--i) * 4.35%);top:-460px;font:14px/1.5 ui-monospace,monospace;color:#72caff;opacity:.32;text-shadow:0 0 7px #2686ff;animation:matrix-rain var(--duration) linear var(--delay) infinite;will-change:transform} @keyframes matrix-rain{from{transform:translateY(-20vh)}to{transform:translateY(calc(100vh + 500px))}} .launch .scene-loader{z-index:2}.launch .top{z-index:2} @media(max-width:700px){#matrix-loader span:nth-child(even){display:none}} @media(prefers-reduced-motion:reduce){#matrix-loader span{animation:none;top:12%;opacity:.13}} /* --- orbital.css --- */ .orbital .scene-loader{display:none} /* Loading state in the intro raster's own language: the same grid (pitch 20 per 1080px of the short side, anchored bottom-left like the shader), so the city's marks grow out of these dots. Only transform/opacity animate, which keeps it moving while the main thread parses the city. */ #orbital-loader{--cell:calc(100vmin * 20 / 1080);position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;transition:opacity .7s ease} #orbital-loader[hidden]{display:none}#orbital-loader.leaving{opacity:0} .signal-field{position:absolute;inset:0;background:#020040} .signal-field::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45vmax;background:linear-gradient(90deg,transparent,#0800ff 50%,transparent);animation:signal-sweep 3.2s cubic-bezier(.45,0,.55,1) infinite;will-change:transform} .signal-field::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent calc(var(--cell) * .12),#010116 calc(var(--cell) * .12 + 1px)) 0 100%/var(--cell) var(--cell)} .load-line{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#0800ff;transform:scaleX(0);transform-origin:left;transition:transform .5s ease} @keyframes signal-sweep{from{transform:translateX(-45vmax) skewX(-18deg)}to{transform:translateX(100vw) skewX(-18deg)}} @media(prefers-reduced-motion:reduce){#orbital-loader,.load-line{transition:none}.signal-field::before{animation:none;opacity:0}} .orbital .headline-mask{overflow:hidden;padding:4px 0} .orbital .hero-copy h1{transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .6s;transform:translateY(0)} .orbital[data-loading=true] .hero-copy h1{transform:translateY(120%);opacity:0} .orbital .hero-copy :is(.headline-tagline,.subline),.orbital .hero-copy .signup{transition:opacity .7s .25s,transform .7s .25s} .orbital .hero-copy .signup{transition-delay:.4s} .orbital[data-loading=true] .hero-copy :is(.headline-tagline,.subline),.orbital[data-loading=true] .hero-copy .signup{opacity:0;transform:translateY(12px)} .orbital #city-background canvas{transition:opacity .65s ease} @media(prefers-reduced-motion:reduce){.orbital .hero-copy h1,.orbital .hero-copy :is(.headline-tagline,.subline),.orbital .hero-copy .signup{transition:none}} /* Each entrance follows the camera clock, including pauses and the final settle. Previous subline/button delays (.25/.4s) are included in their offsets. */ .orbital[data-copy-headline=true] .hero-copy{visibility:visible;opacity:1;pointer-events:auto;transition:none} .orbital .hero-copy h1,.orbital .hero-copy :is(.headline-tagline,.subline),.orbital .hero-copy .signup{transition-delay:0s} .orbital:not([data-copy-headline=true]) .hero-copy h1{visibility:hidden;opacity:0;transform:translateY(120%)} .orbital:not([data-copy-sub=true]) .hero-copy :is(.headline-tagline,.subline),.orbital:not([data-copy-button=true]) .hero-copy .signup{visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none} .orbital[data-copy-headline=true] .hero-copy h1{visibility:visible;opacity:1;transform:translateY(0)} .orbital[data-copy-sub=true] .hero-copy :is(.headline-tagline,.subline),.orbital[data-copy-button=true] .hero-copy .signup{visibility:visible;opacity:1;transform:translateY(0)} /* --- signal.css --- */ /* The supplied plate is already blurred. Keep it moving through the handover. */ .signal #city-background .city-poster{filter:none;opacity:1;transform:scale(1.045);animation:signal-drift 40s linear infinite alternate;will-change:transform,opacity;transition:opacity .75s ease} .signal #city-background[data-ready=true] .city-poster{opacity:0} .signal[data-weave=loading] .readability{opacity:0} .signal .readability{transition:opacity .75s ease} @keyframes signal-drift{from{transform:scale(1.045) translate3d(.5%,.2%,0)}to{transform:scale(1.12) translate3d(-1%,-.6%,0)}} @media(prefers-reduced-motion:reduce){.signal #city-background .city-poster{animation:none;transform:none;transition:none}} /* Reference-inspired typography: masked words, short digital glyph resolves. */ .signal .type-word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em} .signal .type-word{display:inline-block} .signal .type-glyph{position:relative;display:inline-block} .signal .type-glyph::after{content:attr(data-noise);position:absolute;inset:0;opacity:0;color:#b7daff;font-family:var(--mono);pointer-events:none} .signal[data-copy-headline=true] #headline,.signal[data-copy-sub=true] :is(.headline-tagline,.subline){transition:none;transform:none} .signal[data-copy-headline=true] #headline .type-word,.signal[data-copy-sub=true] :is(.headline-tagline,.subline) .type-word{animation:signal-word .72s cubic-bezier(.16,1,.3,1) var(--word-delay) both} .signal[data-copy-headline=true] #headline .type-glyph>span,.signal[data-copy-sub=true] :is(.headline-tagline,.subline) .type-glyph>span{animation:signal-resolve .42s steps(1,end) var(--glyph-delay) both} .signal[data-copy-headline=true] #headline .type-glyph::after,.signal[data-copy-sub=true] :is(.headline-tagline,.subline) .type-glyph::after{animation:signal-noise .42s steps(1,end) var(--glyph-delay) both} @keyframes signal-word{from{transform:translateY(110%)}to{transform:translateY(0)}} @keyframes signal-resolve{0%,23%{opacity:0}24%,47%{opacity:.65;clip-path:inset(30% 0 22%)}48%,66%{opacity:0}67%,82%{opacity:1;clip-path:inset(0 0 18%)}83%,100%{opacity:1;clip-path:inset(0)}} @keyframes signal-noise{0%,23%{opacity:.85;transform:translateX(-.02em)}24%,47%{opacity:0}48%,66%{opacity:.65;transform:translateX(.025em);clip-path:inset(25% 0 0)}67%,100%{opacity:0}} /* Pixel resolve: decorative surface only; the real button stays clickable. */ .signal .join-waitlist{position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:none;--button-fill:#eef1f6} .signal .join-waitlist:hover{background:transparent;--button-fill:#fff} .signal .pixel-surface{position:absolute;inset:-1px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(4,1fr);border-radius:8px;overflow:hidden;pointer-events:none;z-index:-1} .signal .pixel-tile{background:var(--button-fill)} .signal[data-copy-button=true] .signup{transition:none;transform:none} .signal[data-copy-button=true] .pixel-tile{animation:signal-pixel .22s cubic-bezier(.2,.8,.2,1) var(--pixel-delay) both} .signal[data-copy-button=true] .button-label{display:inline-block;animation:signal-button-label .24s .3s cubic-bezier(.2,.8,.2,1) both} @keyframes signal-pixel{0%{opacity:0;transform:scale(.1)}55%{opacity:.7;transform:scale(1)}100%{opacity:1;transform:scale(1)}} @keyframes signal-button-label{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* Keep long masked words inside the mobile text column. */ .signal .headline-mask{max-width:100%} @media(max-width:700px){ .signal .hero-copy{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))} .signal .subline{font-size:clamp(14px,4.1vw,16px);max-width:100%;line-height:1.6} .signal .top{padding-top:max(24px,env(safe-area-inset-top))} .signal .social a,.signal .dialog-close{min-width:44px;min-height:44px} .signal .footer{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))} } @media(max-width:360px){.signal .contact-fields{grid-template-columns:1fr}.signal .optional-heading{flex-wrap:wrap}.signal .waitlist-dialog{padding:26px 18px}.signal .legal{gap:0 12px}} @media(max-height:550px) and (orientation:landscape){.signal .hero-copy{padding-top:28px;padding-bottom:28px}.signal .hero{grid-template-rows:64px 1fr auto}} @media(prefers-reduced-motion:reduce){.signal .type-word,.signal .type-glyph>span,.signal .type-glyph::after,.signal .pixel-tile,.signal .button-label{animation:none!important}.signal .type-glyph::after{display:none}} /* Seal fractional-pixel seams after the final tile has resolved. */ .signal[data-copy-button=true] .pixel-surface{animation:signal-pixel-seal .001s .72s forwards} @keyframes signal-pixel-seal{to{background:var(--button-fill)}} .signal .pixel-tile{margin:-.2px} @media(max-width:700px){.signal .subline{font-size:16px}} @media(max-width:700px) and (max-height:700px){.signal .hero-copy{padding-top:clamp(48px,12svh,84px);padding-bottom:24px}} @media(prefers-reduced-motion:reduce){.signal .pixel-surface{animation:none!important;background:var(--button-fill)}} /* --- inline overrides (were