/* Sonder Studios · coming-soon page. Tokens and type scale follow src/styles/site.css (Brand Identity Guidelines v1.0). */
@font-face{font-family:"Jost";src:url(/fonts/jost-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url(/fonts/jost-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --midnight:#111621;--paper:#FFFCF2;
  --ember:#6B0F1A;--signal:#E4002B;--flare:#FF7A00;--golden:#FFD23F;--haze:#7FD8FF;--dusk:#2A4BFF;
  --display:"futura-pt","Futura PT","Jost",system-ui,sans-serif;
  --text:"Jost",system-ui,sans-serif;
  --container:1180px;--gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* dark is the default surface: Midnight with Paper ink */
  --bg:var(--midnight);--ink:var(--paper);--ink-2:#B7B6B2;--ink-3:#9D9E99;
  --frame:rgba(255,252,242,.16);--focus:var(--haze);--accent:var(--flare);
  --star:rgba(255,252,242,.55);--star-2:rgba(255,252,242,.3);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:var(--paper);--ink:var(--midnight);--ink-2:#4B4F58;--ink-3:#5E626A;
    --frame:rgba(17,22,33,.2);--focus:var(--dusk);--accent:var(--signal);
    --star:rgba(17,22,33,.16);--star-2:rgba(17,22,33,.09);
  }
}

*{box-sizing:border-box}
html{background:var(--bg)}
/* the page colour lives on html, so the fixed star layer can sit between it and the content */
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  font:300 16px/24px var(--text);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
h1,p{margin:0}
a{color:inherit}
::selection{background:var(--golden);color:var(--midnight)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type scale from the site: Display 88, Subhead 20, Caption 12, Label 11 */
.display{font:900 clamp(44px,7vw,88px)/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sub{font:500 clamp(18px,1.5vw,20px)/1.4 var(--display);text-wrap:pretty}
.cap{font:500 12px/16px var(--display);letter-spacing:.01em}
.label{font:900 11px/14px var(--display);letter-spacing:.06em;text-transform:uppercase}

/* stars drift downward, so the rocket reads as climbing */
/* three layers with tile sizes that share no factor, so the stars never line up into a lattice */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background-image:
    radial-gradient(1px 1px at 41px 287px,var(--star) 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 263px 119px,var(--star-2) 50%,transparent 52%),
    radial-gradient(1px 1px at 331px 23px,var(--star) 50%,transparent 52%);
  background-size:373px 373px}
.sky::before,.sky::after{content:"";position:absolute;inset:-480px 0 0}
.sky::before{
  background-image:
    radial-gradient(1.5px 1.5px at 24px 40px,var(--star) 50%,transparent 52%),
    radial-gradient(1px 1px at 150px 92px,var(--star) 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 92px 178px,var(--star) 50%,transparent 52%),
    radial-gradient(1px 1px at 206px 214px,var(--star) 50%,transparent 52%);
  background-size:251px 251px;animation:drift 40s linear infinite}
.sky::after{
  background-image:
    radial-gradient(2px 2px at 60px 120px,var(--star-2) 50%,transparent 52%),
    radial-gradient(2.5px 2.5px at 310px 40px,var(--star-2) 50%,transparent 52%),
    radial-gradient(2px 2px at 240px 330px,var(--star-2) 50%,transparent 52%);
  background-size:487px 487px;animation:drift-slow 90s linear infinite}
@keyframes drift{to{transform:translateY(251px)}}
@keyframes drift-slow{to{transform:translateY(487px)}}

/* header: lockup left, language right */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,3vw,28px) var(--gutter) 0}
.brand{display:block;width:168px;height:64px;margin-left:-15px;color:var(--ink);flex:none}
.lang{display:flex;gap:4px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;
  border-radius:999px;text-decoration:none;font:900 11px/14px var(--display);letter-spacing:.06em;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px transparent;transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.lang a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--frame)}
.lang a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* stage: copy and rocket, sitting a little above centre (tail deeper than head) */
.stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,5vw,72px);
  width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto;
  padding:clamp(24px,5vh,56px) 0 clamp(56px,12vh,140px)}
.copy{max-width:640px}
.copy .label{color:var(--accent)}
.copy .display{margin-top:16px;max-width:12ch}
.copy .sub{margin-top:24px;max-width:38ch;color:var(--ink-2)}
.rocket{justify-self:center;width:clamp(150px,20vw,232px);height:auto;overflow:visible}

.rk-ink{fill:var(--ink)}
.rk-window{fill:var(--bg)}
.rk-nozzle{fill:var(--ink-2)}
.rk-body{animation:hover 3.2s ease-in-out infinite}
.rk-flame{transform-box:fill-box;transform-origin:50% 0;animation:flicker .14s ease-in-out infinite alternate}
.rk-trail circle{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:puff 2.4s linear infinite}
.rk-trail .p1{fill:var(--golden)}
.rk-trail .p2{fill:var(--flare);animation-delay:.6s}
.rk-trail .p3{fill:var(--signal);animation-delay:1.2s}
.rk-trail .p4{fill:var(--haze);animation-delay:1.8s}
@keyframes hover{50%{transform:translateY(-10px)}}
@keyframes flicker{from{transform:scale(.96,.86)}to{transform:scale(1.02,1.06)}}
@keyframes puff{0%{transform:translateY(0) scale(.5);opacity:.85}100%{transform:translateY(118px) scale(1.7);opacity:0}}

/* entrance: one staggered reveal */
.copy>*{animation:rise .8s var(--ease) both}
.copy>:nth-child(2){animation-delay:.08s}
.copy>:nth-child(3){animation-delay:.16s}
.rocket{animation:rise 1s var(--ease) .1s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

.foot{padding:0 var(--gutter) clamp(16px,3vw,28px);color:var(--ink-3)}

@media (max-width:859px){
  .brand{width:142px;height:54px;margin-left:-12px}
  .stage{grid-template-columns:1fr;gap:20px;align-content:center;padding-top:8px}
  .rocket{order:-1;justify-self:start;width:96px;margin-left:-14px}
  .copy .display{margin-top:12px}
  .copy .sub{margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rk-trail circle{opacity:0}
}