/* Landing page while the full site waits for launch: the closing of the story video
   (the brand's khipu, the name with its glow, "coming soon") under the hero line of the
   site. Fonts are served from here; no script, no third party. */
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2-variations");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:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations");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}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations");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}

:root{
  --bg:#000; --text:#EDEDF0; --muted:#A1A1AA; --sub:#8E8E98; --violet:#8B7CFF; --line:#2E2E35;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}

.stage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(44px,9vh,96px);text-align:center;
  padding:clamp(80px,13vh,128px) max(20px,env(safe-area-inset-right,0px)) clamp(104px,16vh,150px) max(20px,env(safe-area-inset-left,0px));
}
/* The violet halo of the closing, breathing slowly. */
.stage::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(139,124,255,.33),transparent 70%);
  opacity:.5;animation:breathe 9s ease-in-out infinite;
}

.lead{max-width:min(980px,100%)}
.eyebrow{margin:0 0 18px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
h1{margin:0;font-weight:500;font-size:clamp(30px,5.2vw,62px);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
h1 span{color:var(--sub)}
.lead{animation:rise 1s .1s cubic-bezier(.2,.7,.2,1) both}

.brand{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.6vh,26px)}
.mark{width:clamp(88px,14vw,190px);height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(139,124,255,.35))}
.mark line{stroke:var(--text);stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s cubic-bezier(.2,.7,.2,1) forwards}
.mark .bar{animation-delay:.7s}
.mark .c1,.mark .c2,.mark .c3{animation-delay:1.05s}
.mark rect{fill:var(--text);transform-box:fill-box;transform-origin:center;opacity:0;animation:knot .45s 1.25s cubic-bezier(.2,.9,.3,1.3) forwards}
.mark rect.accent{fill:var(--violet);filter:drop-shadow(0 0 3px var(--violet))}

.word{
  margin:0;font-weight:600;font-size:clamp(76px,17vw,224px);line-height:1;letter-spacing:-.055em;
  color:transparent;
  background-image:linear-gradient(105deg,transparent 42%,#fff 50%,transparent 58%),linear-gradient(180deg,#F4F4F7 0%,#DCDCE2 55%,#8F8F99 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:120% 0,0 0;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(139,124,255,.55));
  animation:appear .9s .35s cubic-bezier(.2,.7,.2,1) both,sheen 2.2s 1.4s ease-in-out both;
  padding-inline:.06em;
}

.soon{
  position:absolute;left:0;right:0;bottom:max(36px,calc(env(safe-area-inset-bottom,0px) + 24px));margin:0;
  font-family:var(--mono);font-size:clamp(12px,1.3vw,16px);text-transform:uppercase;color:var(--muted);
  letter-spacing:.55em;padding-left:.55em;
  animation:soon 1.4s 2.2s cubic-bezier(.2,.7,.2,1) both;
}

.lang{
  position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);
  padding:6px 11px;border:1px solid var(--line);border-radius:999px;min-height:32px;display:inline-flex;align-items:center;
}
.lang:hover{color:var(--text);border-color:var(--sub)}

@keyframes breathe{0%,100%{opacity:.42}50%{opacity:.62}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes appear{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes sheen{from{background-position:120% 0,0 0}to{background-position:-20% 0,0 0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes knot{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes soon{from{opacity:0;letter-spacing:.75em;padding-left:.75em}to{opacity:1;letter-spacing:.55em;padding-left:.55em}}

@media (prefers-reduced-motion:reduce){
  *,*::before{animation:none!important}
  .mark line{stroke-dashoffset:0}
  .mark rect{opacity:1}
}