:root{
  --fg:#e6e9ff; --fg-dim:#b7c0ff; --accent:#6ec6ff; --accent-2:#a56bff; --shadow:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,Helvetica,sans-serif;background:#000;color:var(--fg);overflow:hidden}

/* Background BELOW canvas */
.bg-layer{position:fixed; inset:0; z-index:0; background:center/cover no-repeat url('bg.jpg');
  filter:brightness(.9) saturate(1.1);
  transform-origin:center;
  animation:bg-zoom 36s ease-in-out infinite alternate;}
@keyframes bg-zoom{from{transform:scale(1)}to{transform:scale(1.05)}}

/* Canvas ABOVE background, BELOW UI */
#space{position:fixed; inset:0; z-index:1; background:transparent}

/* Subtle edge glow */
.vignette{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:1;
  background: radial-gradient(1200px 600px at 50% 100%, rgba(120,160,255,.12), transparent 60%),
              radial-gradient(1100px 500px at 0% 0%, rgba(170,110,255,.10), transparent 60%),
              radial-gradient(1100px 500px at 100% 0%, rgba(110,210,255,.10), transparent 60%);
}

/* Logo-orbit top-left (parallax) */
.logo-orbit{position:absolute; top:20px; left:20px; width:120px; height:120px; animation:pop-in .9s ease-out both; z-index:3; will-change:transform}
@keyframes pop-in{from{opacity:0; transform:scale(.85)}to{opacity:1; transform:scale(1)}}
.logo-core{position:absolute; inset:0; width:100%; height:100%; border-radius:24px; box-shadow:0 16px 36px rgba(0,0,0,.45);
  animation:pulse 5.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1); filter:drop-shadow(0 0 12px var(--accent))}50%{transform:scale(1.04); filter:drop-shadow(0 0 20px var(--accent-2))}}
.ring{position:absolute; inset:-10px; border-radius:50%; border:2px solid transparent; pointer-events:none}
.ring-1{border-top-color:rgba(110,198,255,.75); transform:rotate(15deg); animation:ring-spin 18s linear infinite}
.ring-2{border-bottom-color:rgba(165,107,255,.65); transform:rotate(-20deg) scale(.92); animation:ring-spin-rev 26s linear infinite}
@keyframes ring-spin{to{transform:rotate(375deg)}} @keyframes ring-spin-rev{to{transform:rotate(-380deg) scale(.92)}}

.tagline{position:absolute; bottom:30px; width:100%; text-align:center; font-size:1.05rem; letter-spacing:.2px; color:var(--fg-dim); text-shadow:0 2px 8px rgba(0,0,0,.65); animation:fade-up 1.2s ease-out both .2s; z-index:3}
@keyframes fade-up{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}