/* Radiant AI — agent network landing */

:root{
  --bg:#000;
  --ink:#fff;
  --blue:#4d9dff;
  --blue-soft:rgba(77,157,255,.55);
  --line:rgba(255,255,255,.12);
  --mute:rgba(255,255,255,.34);
  --disc:58px;              /* agent node diameter */
  --ease:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior:none;
}

::selection{ background:rgba(77,157,255,.3); color:#fff; }

/* Faint centred wash so pure black never reads flat */
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(77,157,255,.045), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(255,255,255,.022), transparent 70%);
}

.shell{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:0 clamp(14px,4vw,40px);
}

/* ---------- top navigation ---------- */

.topnav{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  gap:clamp(10px,2vw,24px);
  width:100%; max-width:1340px;
  margin:0 auto;
  padding:clamp(16px,2.4vw,26px) 0 0;
}

.navlink{
  position:relative;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
  background:transparent;
  text-decoration:none;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:2px;
  white-space:nowrap;
  transition:color .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), background .4s var(--ease);
}
.navlink:not(:disabled):hover,.navlink:focus-visible{
  color:#fff;
  border-color:rgba(140,195,255,.7);
  background:rgba(77,157,255,.07);
  box-shadow:0 0 22px rgba(77,157,255,.22);
  outline:none;
}
.navlink:disabled{ cursor:not-allowed; }

@media (max-width:560px){
  .topnav{ justify-content:center; padding-top:14px; }
  .navlink{ font-size:9.5px; padding:8px 13px; letter-spacing:.16em; text-indent:.16em; }
}

/* ---------- graph stage ---------- */

.stage{
  position:relative;
  flex:1 1 auto;
  min-height:600px;
  width:100%;
  max-width:1340px;
  margin:0 auto;
}

.edges{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible; pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(77,157,255,.28));
}

.edge{
  stroke:var(--line);
  stroke-width:1;
  fill:none;
  transition:stroke .5s var(--ease), stroke-width .5s var(--ease);
}
.edge.is-lit{ stroke:rgba(140,195,255,.85); stroke-width:1.2; }

.pulse{ fill:var(--blue); opacity:0; transition:opacity .6s ease; }
.is-ready .pulse{ opacity:.9; }

/* ---------- nodes ---------- */

.node{
  position:absolute; left:0; top:0;
  transform:translate3d(-50%,-50%,0);
  will-change:transform;
}
.node .core{
  display:flex; flex-direction:column; align-items:center;
  transition:transform .55s var(--ease), opacity .45s var(--ease);
}

/* root */

.node--root{ z-index:3; }
.node--root .core{ position:relative; }

.halo{
  position:absolute; left:50%; top:42%;
  width:min(660px,88vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(77,157,255,.13), rgba(77,157,255,.04) 38%, transparent 64%);
  animation:breathe 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{ opacity:.62; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.09); }
}

.mark-wrap{
  position:relative;
  width:clamp(196px,23vw,338px);
  display:block;
}

.mark{
  position:relative;
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 22px rgba(77,157,255,.26)) drop-shadow(0 0 2px rgba(255,255,255,.4));
  user-select:none; -webkit-user-drag:none;
}

.wordmark{
  position:relative;
  margin-top:clamp(12px,1.6vw,20px);
  font-size:clamp(10px,1vw,12px);
  letter-spacing:.62em; text-indent:.62em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
}

/* agents */

.node--agent{
  z-index:2;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}

.disc{
  position:relative;
  display:grid; place-items:center;
  width:var(--disc); height:var(--disc);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), rgba(255,255,255,0) 70%);
  color:rgba(255,255,255,.66);
  transition:border-color .5s var(--ease), color .5s var(--ease),
             box-shadow .5s var(--ease), background .5s var(--ease);
}

/* rotating dashed collar, revealed on focus */
.disc::before{
  content:""; position:absolute; inset:-7px;
  border-radius:50%;
  border:1px dashed rgba(140,195,255,.55);
  opacity:0; transform:scale(.88);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  animation:spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon{
  width:50%; height:50%;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}

.label{
  margin-top:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap;
  transition:color .5s var(--ease);
}

/* focus behaviour — the graph dims around the active agent */
.stage.is-focused .node--agent:not(.is-active) .core{ opacity:.26; }
.stage.is-focused .node--root .core{ opacity:.72; }

.node--agent.is-active .core{ transform:scale(1.09); }
.node--agent.is-active .disc{
  border-color:rgba(140,195,255,.85);
  color:#fff;
  background:radial-gradient(circle at 50% 50%, rgba(77,157,255,.2), rgba(77,157,255,0) 72%);
  box-shadow:0 0 30px rgba(77,157,255,.34), inset 0 0 18px rgba(77,157,255,.12);
}
.node--agent.is-active .disc::before{ opacity:1; transform:scale(1); }
.node--agent.is-active .label{ color:#fff; }

/* ---------- entrance ---------- */

.node--root .core{ opacity:0; transform:translateY(10px); }
.node--agent .core{ opacity:0; transform:scale(.9); }
.is-ready .node--root .core{ opacity:1; transform:none; transition-duration:1.1s; }
.is-ready .node--agent .core{ opacity:1; transform:none; }

.edge{ stroke-dasharray:1; stroke-dashoffset:1; }
.is-ready .edge{ stroke-dashoffset:0; transition:stroke-dashoffset 1.2s var(--ease), stroke .5s var(--ease), stroke-width .5s var(--ease); }

/* ---------- footer ---------- */

.foot{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vw,26px);
  padding:22px 0 calc(24px + env(safe-area-inset-bottom));
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.16em;
}

.link{
  color:rgba(255,255,255,.44);
  text-decoration:none;
  transition:color .4s var(--ease), text-shadow .4s var(--ease);
}
.link:hover,.link:focus-visible{
  color:#fff;
  text-shadow:0 0 16px rgba(77,157,255,.7);
  outline:none;
}

.sep{ width:1px; height:11px; background:rgba(255,255,255,.16); }

/* ---------- responsive ---------- */

@media (max-width:900px){
  :root{ --disc:52px; }
  .stage{ min-height:560px; }
}

@media (max-width:560px){
  :root{ --disc:40px; }
  .stage{ min-height:min(680px,78svh); }
  .mark-wrap{ width:min(46vw,180px); }
  .label{ font-size:8px; letter-spacing:.16em; text-indent:.16em; margin-top:8px; }
  .wordmark{ font-size:9px; letter-spacing:.4em; text-indent:.4em; margin-top:10px; }
  .foot{ font-size:10px; }
  .disc::before{ inset:-5px; }
}

@media (max-width:560px) and (max-height:700px){
  .mark-wrap{ width:min(40vw,150px); }
}

@media (max-height:640px) and (min-width:901px){
  .stage{ min-height:520px; }
}

@media (prefers-reduced-motion:reduce){
  .halo,.disc::before{ animation:none; }
  *{ transition-duration:.01ms !important; }
}


/* ---------- boot sequence ---------- */

.boot{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  background:#000;
  animation:bootFade 1.25s ease forwards;
}
.boot::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,205,255,.95) 20%,rgba(150,205,255,.95) 80%,transparent);
  box-shadow:0 0 26px rgba(77,157,255,.85);
  animation:bootScan 1.5s cubic-bezier(.45,0,.15,1) forwards;
}
@keyframes bootFade{
  0%{ opacity:1; } 60%{ opacity:.35; } 100%{ opacity:0; visibility:hidden; }
}
@keyframes bootScan{
  0%{ top:-2%; opacity:0; } 10%{ opacity:1; } 86%{ opacity:1; } 100%{ top:102%; opacity:0; }
}

/* ---------- CRT texture ---------- */

.scanlines{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
.scanlines::after{
  content:""; position:absolute; left:0; right:0; top:-40vh; height:36vh;
  background:linear-gradient(180deg,transparent,rgba(120,180,255,.028),transparent);
  animation:sweep 9s linear infinite;
}
@keyframes sweep{ 0%{ top:-40vh; } 100%{ top:110vh; } }

/* ---------- mark glitch (RGB split) ---------- */

.ghost{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  -webkit-mask:url(assets/radiant-mark.png) center/contain no-repeat;
          mask:url(assets/radiant-mark.png) center/contain no-repeat;
}
.ghost--a{ background:var(--blue); }
.ghost--b{ background:#bfe0ff; }

.mark-wrap.is-glitch .mark{ animation:jitter .26s steps(3,end); }
.mark-wrap.is-glitch .ghost--a{ opacity:.55; transform:translate(-6px,2px); }
.mark-wrap.is-glitch .ghost--b{ opacity:.32; transform:translate(5px,-2px); }
@keyframes jitter{
  0%,100%{ transform:translate(0); clip-path:none; }
  25%{ transform:translate(-3px,1px); clip-path:inset(18% 0 42% 0); }
  50%{ transform:translate(3px,-1px); clip-path:inset(58% 0 12% 0); }
  75%{ transform:translate(-2px,0); clip-path:inset(32% 0 34% 0); }
}

/* ---------- pointer proximity bloom ---------- */

.disc::after{
  content:""; position:absolute; inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,157,255,.3), transparent 66%);
  opacity:var(--near,0);
  pointer-events:none;
}

/* ---------- network traffic ---------- */

.mote{ fill:rgba(190,220,255,.5); }
.sonar{ fill:none; stroke:rgba(120,185,255,.5); stroke-width:1; }
.ping{ fill:none; stroke:rgba(150,205,255,.9); stroke-width:1.2; }
.route{ fill:none; stroke:rgba(77,157,255,.45); stroke-width:1; stroke-dasharray:2 4; }
.packet{ fill:#e4f1ff; }
.edge.is-busy{ stroke:rgba(150,200,255,.55); }

@media (prefers-reduced-motion:reduce){
  .boot,.scanlines::after{ animation:none; }
  .boot{ display:none; }
}