@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/share-tech-mono-v16-latin-regular.ttf?v=20260521') format('truetype')}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:#000;overflow:hidden;cursor:none;font-family:'Share Tech Mono',monospace}

#stars{position:fixed;inset:0;z-index:0}

#nebula{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 40% at 18% 48%, rgba(55,18,100,.3) 0%,transparent 100%),
    radial-gradient(ellipse 45% 38% at 80% 25%, rgba(18,85,95,.24) 0%,transparent 100%),
    radial-gradient(ellipse 50% 45% at 50% 85%, rgba(18,38,105,.22) 0%,transparent 100%),
    radial-gradient(ellipse 38% 32% at 88% 70%, rgba(65,38,125,.18) 0%,transparent 100%);
  animation:nebula-drift 70s ease-in-out infinite alternate;
}
@keyframes nebula-drift{
  0%{transform:scale(1) translate(0,0)}
  50%{transform:scale(1.04) translate(1.5%,-1%)}
  100%{transform:scale(.97) translate(-1%,1.5%)}
}

#grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  z-index:100;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .22s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,-2%)}
  40%{transform:translate(2%,1%)}60%{transform:translate(-1%,2%)}
  80%{transform:translate(2%,-1%)}100%{transform:translate(-2%,1%)}
}

#scanlines{
  position:fixed;inset:0;z-index:99;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.12) 1px,rgba(0,0,0,.12) 2px);
}

#vignette{
  position:fixed;inset:0;z-index:98;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.97) 100%);
}

#flicker{position:fixed;inset:0;z-index:97;pointer-events:none;background:#fff;opacity:0}

#proxglow{
  position:fixed;z-index:2;width:500px;height:500px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(70,110,190,.07) 0%,rgba(70,190,170,.03) 30%,transparent 70%);
  transform:translate(-50%,-50%);will-change:left,top;
}

/* ---- SIGIL ---- */
#sigil-wrap{
  position:fixed;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;transform-style:preserve-3d;
}
.sigil{
  position:relative;
  width:min(70vmin,500px);height:min(70vmin,500px);
}
/* Each ring absolutely centered */
.ring{
  position:absolute;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-50%);
  border-style:solid;
}
.r1{width:100%;height:100%;border-width:.7px;border-color:rgba(78,48,126,.55);animation:rcw 100s linear infinite}
.r1b{width:100%;height:100%;border-radius:50%;border:.5px dashed rgba(65,38,115,.3);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:rccw 180s linear infinite}
.r2{width:82%;height:82%;border-width:.6px;border-color:rgba(28,112,112,.58);animation:rccw 65s linear infinite}
.r2b{width:82%;height:82%;border-radius:50%;border:.5px dashed rgba(22,95,95,.25);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:rcw 140s linear infinite}
.r3{width:64%;height:64%;border-width:.8px;border-color:rgba(75,108,185,.62);animation:rcw 42s linear infinite}
.r4{width:48%;height:48%;border-width:.6px;border-color:rgba(135,162,225,.48);animation:rccw 28s linear infinite}
.r5{width:34%;height:34%;border-width:.65px;border-color:rgba(90,215,195,.38);animation:rcw 18s linear infinite}

@keyframes rcw{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rccw{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* Canvas for geo overlays lives inside .sigil */
#geocan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Tick marks via tiny divs */
.tick{
  position:absolute;top:50%;left:50%;
  width:.8px;background:rgba(95,65,175,.65);
  transform-origin:top center;
}

/* Spokes */
.spoke{
  position:absolute;top:50%;left:50%;
  width:.7px;
  background:linear-gradient(to bottom,transparent 12%,rgba(90,120,195,.14) 38%,rgba(90,120,195,.32) 62%,transparent 88%);
  transform-origin:top center;pointer-events:none;
}

/* ---- CENTER CORE ---- */
#core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}
.core-ring1{
  width:56px;height:56px;border-radius:50%;
  border:.7px solid rgba(130,160,225,.3);
  display:flex;align-items:center;justify-content:center;
  animation:breathe 5s ease-in-out infinite;
  background:transparent;
}
.core-ring2{
  width:38px;height:38px;border-radius:50%;
  border:.6px solid rgba(85,125,195,.45);
  background:#000;
  display:flex;align-items:center;justify-content:center;
}
.core-ring3{
  width:24px;height:24px;border-radius:50%;
  border:.5px solid rgba(100,180,200,.4);
  background:#000;
  display:flex;align-items:center;justify-content:center;
}
.core-orb{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,215,255,1) 0%,rgba(100,150,230,.85) 55%,transparent 100%);
  animation:orb-pulse 4s ease-in-out infinite;
  box-shadow:0 0 6px 2px rgba(110,160,245,.65),0 0 18px 6px rgba(85,125,220,.25);
}
@keyframes orb-pulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.4);opacity:1}}
@keyframes breathe{
  0%,100%{box-shadow:0 0 12px 2px rgba(75,105,195,.14)}
  50%{box-shadow:0 0 28px 8px rgba(75,105,195,.28),0 0 55px 18px rgba(55,75,155,.09)}
}

/* ---- FRAGMENTS ---- */
#fragments{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden}
.frag{
  position:absolute;
  font-size:clamp(.58rem,1.05vw,.76rem);
  letter-spacing:.1em;line-height:1.7;
  color:rgba(155,185,228,0);
  text-shadow:0 0 12px rgba(135,175,228,.5),0 0 28px rgba(75,95,175,.18);
  white-space:pre;pointer-events:none;will-change:left,top;
}

/* ---- CURSOR ---- */
#cursor{
  position:fixed;z-index:9999;width:20px;height:20px;
  pointer-events:none;transform:translate(-50%,-50%);will-change:left,top;
}
#cursor svg{width:100%;height:100%;animation:cspin 4s linear infinite;filter:drop-shadow(0 0 3px rgba(125,155,228,.7))}
@keyframes cspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#cursor-dot{
  position:fixed;z-index:9998;width:4px;height:4px;border-radius:50%;
  background:rgba(110,215,200,.9);pointer-events:none;transform:translate(-50%,-50%);
  box-shadow:0 0 5px 2px rgba(95,205,190,.5);will-change:left,top;
}