/* ===========================================================================
   Social OS · Stealth landing page · site.css
   One screen: opener (world map → data points → logo → wordmark) → cover with
   claim and "Coming soon". Tokens and hero geometry taken from website v4.0.11.
   =========================================================================== */

@font-face{font-family:"Noto Sans";src:url(../fonts/noto-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Mono";src:url(../fonts/noto-sans-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --night:#080A11;--y:#FFDE59;
  --i1:#fff;--i2:rgba(255,255,255,.72);--i3:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --sans:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Noto Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:56px;--lift:150px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--night)}
html.op{overflow:hidden}
body{background:var(--night);color:var(--i1);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:var(--y);text-decoration:none}
a:hover{color:#fff}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--y);color:#000}

/* Fog plus a very faint grid, fixed behind everything */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 55% at 72% 22%,rgba(88,54,160,.22),transparent 70%),
  radial-gradient(50% 60% at 15% 100%,rgba(60,40,120,.12),transparent 70%)}
.bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:60px 60px}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}

/* ---------- Hero / Cover ---------- */
.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;overflow:hidden}
/* Map sits large and centred behind the logo while the opener forms the logo, then rises by
   --lift while the arcs draw. The CSS position is the end state; site.js starts it --lift lower. */
.hero .mw{position:absolute;left:50%;top:50%;width:1400px;height:700px;margin:calc(-310px - var(--lift)) 0 0 -700px;will-change:transform}
.hero .map{position:absolute;inset:0;background:url(../worldmap-hero.webp) center/contain no-repeat;opacity:.36;
  -webkit-mask:radial-gradient(60% 70% at 50% 45%,#000 40%,transparent 80%);mask:radial-gradient(60% 70% at 50% 45%,#000 40%,transparent 80%)}
.hero .arcs{position:absolute;inset:0}
.hero .arcs svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero .dots{position:absolute;inset:0;pointer-events:none}
.hero .dot{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFF1C7;box-shadow:0 0 9px 2.5px rgba(255,201,77,.55),0 0 22px 7px rgba(255,201,77,.18);opacity:0;will-change:transform,opacity}
.hero .halo{position:absolute;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:radial-gradient(rgba(255,222,89,.2),transparent 65%);opacity:0;pointer-events:none}

.c1-c{position:absolute;left:0;right:0;top:calc(50% - 150px);display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px}
.mk{width:128px;height:128px;overflow:visible}
.mk path,.mk rect{transform-box:view-box}
.wm{white-space:nowrap;font-size:50px;font-weight:500;letter-spacing:.2em;margin-top:52px;padding-left:.2em;line-height:1}
.wm sup{font-size:.45em;letter-spacing:0;vertical-align:1.1em}
.c1-c .cl{font-size:27px;font-weight:300;color:var(--y);margin-top:26px;line-height:1.3}
.c1-c .cl br{display:none}
.c1-c .soon{display:flex;align-items:center;gap:18px;color:var(--i3);margin-top:44px}
.c1-c .soon i{width:40px;height:1px;background:var(--line2)}

.skip{position:absolute;right:var(--pad);bottom:96px;color:var(--i3);display:none;gap:14px;align-items:center;z-index:5}
.skip i{display:inline-block;width:120px;height:1px;background:var(--line2);position:relative;overflow:hidden}
.skip i b{position:absolute;inset:0;background:var(--y);transform-origin:left;transform:scaleX(0)}

/* Opener running: UI stays invisible until the choreography fades it in */
html.op .ui{opacity:0}
html.op .skip{display:flex}
html.op .mk path,html.op .mk rect{opacity:0}
html.op .wm{opacity:0}

/* ---------- Footer (sits on the bottom edge of the cover) ---------- */
.foot{position:absolute;left:0;right:0;bottom:0;z-index:2;height:72px;padding:0 var(--pad);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--i3)}
.foot nav{display:flex;gap:28px}
.foot nav a{color:var(--i2)}
.foot nav a:hover{color:var(--y)}

@media (max-width:1279px){
  :root{--pad:40px}
}

/* ---------- Mobile (390 reference) ---------- */
@media (max-width:767px){
  :root{--pad:22px;--lift:70px}
  .hero .mw{top:calc(19% - var(--lift));width:650px;height:325px;margin:0 0 0 -325px}
  .hero .map{-webkit-mask:radial-gradient(55% 65% at 50% 45%,#000 35%,transparent 80%);mask:radial-gradient(55% 65% at 50% 45%,#000 35%,transparent 80%)}
  .hero .halo{width:300px;height:300px;margin:-150px 0 0 -150px}
  .c1-c{top:calc(50% - 130px)}
  .mk{width:92px;height:92px}
  .wm{font-size:30px;margin-top:36px}
  .c1-c .cl{font-size:18px;margin-top:18px;line-height:1.45}
  .c1-c .cl br{display:inline}
  .c1-c .soon{margin-top:30px;font-size:10px;gap:14px}
  .c1-c .soon i{width:28px}
  .skip{bottom:120px}.skip i{width:64px}
  .mono{font-size:10px}
  .foot{height:auto;padding:18px var(--pad) 22px;flex-direction:column;align-items:flex-start;gap:12px}
  .foot nav{gap:20px}
}