/* GHOSTED v2 — the orbit. Dark room, one ring, people falling out of it. */
:root{
  --void:#0a0f0d;
  --bone:#efe8d8;
  --dim:#a9b0aa;      /* secondary text, 8:1 on --void */
  --gone:#ff5d3b;     /* people who left */
  --new:#d4ff3f;      /* people who joined */
  --display:"Syne","Arial Black",Impact,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --m:clamp(14px,3vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--bone);font-family:var(--mono);font-size:12px;line-height:1.3;letter-spacing:.02em;overflow:hidden;
  background-image:radial-gradient(ellipse at 50% 48%,#12201a 0,transparent 62%)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--new);outline-offset:4px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:50;background:var(--new);color:var(--void);padding:.6rem .9rem;font-weight:700}
.skip:focus{top:8px}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block}
.stage{position:fixed;inset:0;pointer-events:none}
.stage a,.stage button{pointer-events:auto}

/* grain, so the black isn't flat */
.stage::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:screen;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* corners */
.c{position:absolute;margin:var(--m)}
.tl{top:0;left:0}.tr{top:0;right:0;text-align:right}.bl{bottom:0;left:0}.br{bottom:0;right:0;text-align:right}
.mark{font:800 clamp(1.1rem,2.2vw,1.5rem)/1 var(--display);letter-spacing:-.02em;display:inline-block}
.mark i{color:var(--gone);font-style:normal}
.go{display:inline-block;padding:.6rem .1rem;border-bottom:2px solid var(--bone);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.go:hover{color:var(--void);background:var(--bone);padding-inline:.5rem}
.tiny{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;font-size:11px}

/* ---- landing ---- */
.headline{font:800 clamp(4.2rem,17vw,15rem)/.78 var(--display);letter-spacing:-.05em;margin:0;text-transform:none}
.headline span{display:block}
.headline span:nth-child(2){color:var(--gone);padding-left:.55em}
.foot{display:grid;gap:.5rem;justify-items:end}
.core{position:absolute;left:var(--cx,50%);top:var(--cy,46%);width:var(--core,150px);height:var(--core,150px);margin:calc(var(--core,150px)/-2) 0 0 calc(var(--core,150px)/-2);
  border-radius:50%;border:0;background:var(--bone);color:var(--void);font:800 1.05rem/1.05 var(--display);display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center;cursor:pointer;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s;z-index:3}
.core svg{width:22px;height:22px}
.core:hover{background:var(--gone);transform:scale(1.12)}
.core::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--bone);opacity:.5;animation:ping 2.8s ease-out infinite;pointer-events:none}
@keyframes ping{from{transform:scale(.9);opacity:.6}to{transform:scale(1.45);opacity:0}}

/* ---- dashboard ---- */
.stat{display:grid;gap:.15rem}
.big{font:800 clamp(6rem,22vw,15rem)/.75 var(--display);letter-spacing:-.06em;color:var(--gone);margin:.1em 0 .05em -.04em}
.plus{font:800 clamp(2rem,5vw,3.4rem)/1 var(--display);color:var(--new);letter-spacing:-.03em}
.tag{display:inline-block;border:2px dashed var(--bone);padding:.35rem .6rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;transform:rotate(3deg);margin-bottom:.8rem}
.live{display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--new);box-shadow:0 0 10px var(--new);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

.timer{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:var(--core,170px);height:var(--core,170px);margin:calc(var(--core,170px)/-2) 0 0 calc(var(--core,170px)/-2);display:grid;place-content:center;text-align:center;z-index:2}
.timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:5}
.timer .tr0{stroke:#24302b}
.timer .tr1{stroke:var(--new);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.clock{font:700 clamp(1.35rem,2.6vw,2rem)/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.ringtext{position:absolute;left:var(--cx,50%);top:var(--cy,50%);transform:translate(-50%,-50%);pointer-events:none;overflow:visible}
.ringtext text{font:700 12px var(--mono);fill:var(--dim);letter-spacing:.1em}
.ringtext g{transform-box:fill-box;transform-origin:center;animation:spin 180s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.ghosts{list-style:none;margin:0;padding:0}
.ghosts li{position:absolute;left:0;top:0;will-change:transform;z-index:4}
.ghost{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem .55rem .45rem;margin:-.55rem 0 0 -.45rem;border-radius:99px;background:rgba(10,15,13,.82);font-weight:700;font-size:clamp(12px,1.6vw,15px);color:var(--bone);white-space:nowrap;transition:background .2s,color .2s}
.ghost i{width:14px;height:14px;border-radius:50%;background:var(--gone);box-shadow:0 0 18px 2px var(--gone);flex:none;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.ghost time{color:var(--dim);font-weight:400;font-size:11px}
.ghost:hover,.ghost:focus-visible{background:var(--gone);color:var(--void)}
.ghost:hover i,.ghost:focus-visible i{transform:scale(1.5);background:var(--void);box-shadow:none}
.ghost:hover time,.ghost:focus-visible time{color:var(--void)}
.ghost::after{content:"↗";margin-left:-.2rem;opacity:0;width:0;transition:opacity .2s}
.ghost:hover::after,.ghost:focus-visible::after{opacity:1;width:auto}

.hist{display:grid;gap:.4rem;justify-items:end}
.hist svg{width:clamp(120px,16vw,170px);height:auto;overflow:visible}
.hist text{font:400 9px var(--mono);fill:var(--dim)}

/* no-JS / fallback: a plain readable column */
html:not(.js) .ghosts{position:absolute;left:var(--m);top:46%;display:grid;gap:.4rem}
html:not(.js) .ghosts li{position:static}
html:not(.js) .ghost{margin:0}

/* custom cursor */
.cur{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid var(--bone);border-radius:50%;pointer-events:none;z-index:99;opacity:0;mix-blend-mode:difference;transition:width .2s,height .2s,margin .2s,background .2s,opacity .3s}
.cur.on{opacity:1}
.cur.big{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(239,232,216,.25)}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none}

@media (max-width:640px){
  body{font-size:11px}
  .foot{justify-items:start}
  .headline{margin-bottom:5.4rem}
  .bl.headline{bottom:0}
  .tr .tag{margin-bottom:.4rem}
}
@media (max-height:520px){.big{font-size:5rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:640px){.c.br.foot{right:auto;left:0;text-align:left}}

/* app additions */
a.core{text-decoration:none}
.tag[hidden]{display:none}

/* ---- static site additions ---- */
.tiny.first{margin-top:1.2rem}
.stat.end{justify-items:end}
.nojs{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);margin:0;background:var(--bone);color:var(--void);padding:.6rem .9rem;font-weight:700;z-index:60}
.bottom{position:absolute;left:var(--m);right:var(--m);bottom:var(--m);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem 1.5rem}
.status{display:grid;gap:.45rem;justify-items:start}
.rule{font-weight:700;color:var(--bone);border-left:3px solid var(--gone);padding-left:.55rem}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:.4rem;align-items:center}
.steps li{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem .55rem .55rem;border:1.5px solid #3a463f;border-radius:99px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;white-space:nowrap}
.steps li+li::before{content:none}
.steps b{display:grid;place-content:center;width:20px;height:20px;border-radius:50%;background:var(--new);color:var(--void);font-size:11px}
.cta{justify-self:end;display:inline-block;padding:.85rem 1.3rem;border-radius:99px;background:var(--bone);color:var(--void);font:800 1rem/1 var(--display);transition:background .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.cta:hover,.cta:focus-visible{background:var(--gone);transform:scale(1.06)}
@media (max-width:900px){
  .bottom{grid-template-columns:1fr auto}
  .steps{grid-column:1/-1;grid-row:1;justify-self:start}
  .status{grid-row:2}
  .cta{grid-row:2;align-self:end}
}
@media (max-width:640px){
  body[data-page="demo"] .big{font-size:5.6rem}
  .steps{gap:.3rem;width:100%}
  .steps li{flex:1 1 0;justify-content:center;padding:.5rem .35rem;font-size:10px;letter-spacing:.04em;gap:.3rem}
  .steps b{width:17px;height:17px;font-size:10px;flex:none}
}

.navrow{display:flex;gap:.9rem;align-items:center}
.tip{display:inline-block;padding:.4rem .8rem;border:1.5px solid var(--new);border-radius:99px;color:var(--new);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;margin-top:.5rem;transition:background .2s,color .2s}
.navrow .tip{margin-top:0}
.tip:hover,.tip:focus-visible{background:var(--new);color:var(--void)}