/* DiskBlob "on its way" page (diskblob.com until the full site launches). Same type, colours and brand mark as ../site.css. */
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url("fonts/InterDisplay-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
:root{
  --pad:clamp(16px,5vw,88px);
  --display:"Inter Display",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --soft:"Avenir Next",Avenir,ui-rounded,system-ui,-apple-system,sans-serif;
  --bg:#000; --text:#F4F4F7; --muted:rgba(244,244,247,.6); --glass-line:rgba(255,255,255,.13);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* header: brand left, pill right */
.top{position:fixed;inset:0 0 auto 0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad)}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 15px var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand,.note a{color:inherit;text-decoration:none}.note a{border-bottom:1px solid var(--glass-line)}.note a:hover{color:var(--text)}
.brand .dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e98cff,#4f8dff 60%,#3fb0ff)}
.pill-soon{padding:8px 15px;border-radius:999px;border:1px solid var(--glass-line);color:var(--muted);font:500 12.5px var(--soft);white-space:nowrap;background:rgba(0,0,0,.4);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}

/* the one screen */
.soon{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:96px var(--pad) 64px;text-align:center;overflow:hidden}
.in{position:relative;width:100%;max-width:1240px}
.glow{position:absolute;left:50%;top:50%;width:min(1100px,150vw);aspect-ratio:1.6;transform:translate(-50%,-55%);
  background:radial-gradient(closest-side,rgba(130,140,255,.30),rgba(181,140,255,.12) 55%,transparent 80%);
  filter:blur(20px);animation:breathe 9s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.55;transform:translate(-50%,-55%) scale(1)}50%{opacity:.9;transform:translate(-50%,-55%) scale(1.06)}}

h1{margin:0 0 18px;font:800 clamp(44px,9vw,132px)/1.04 var(--display);letter-spacing:-.025em}
/* The headline stays invisible while gather.js gets ready, so it never flashes as plain bold text before the particles take
   over. If the particles never start (no canvas, a script error), it fades in after 2.5 s; with reduced motion it shows at once. */
#fxtitle{opacity:0;animation:fallback .5s 2.5s forwards}
@keyframes fallback{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#fxtitle{opacity:1}}
#fxtext{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fxslot{display:none;margin:0 auto 10px}
.fx-on #fxslot{display:block}
.fx-on #fxtitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.tag{margin:0 auto;max-width:28ch;font:500 clamp(19px,2.4vw,28px)/1.3 var(--display);letter-spacing:-.01em;color:rgba(244,244,247,.86)}
.note{margin:18px auto 0;font:400 clamp(15px,1.5vw,17px)/1.5 var(--soft);color:var(--muted)}
.tag,.note{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.tag{animation-delay:.95s}
.note{animation-delay:1.2s}
@keyframes rise{from{opacity:.01;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}