:root {
  color-scheme: dark;
  --bg: #000;
  --ink: 255, 255, 255;
  --blue: 150, 190, 255;
  --warm: 255, 205, 160;
  --node: 7px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body { background: var(--bg); }

.connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: opacity 1.2s ease;
}

.link {
  fill: none;
  stroke: rgba(var(--ink), .05);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 1s ease;
}

.node {
  position: absolute;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 4px 1px #fff, 0 0 12px 3px rgba(var(--blue), .35);
  transition: opacity 1s ease, scale 1s cubic-bezier(.2, .7, .2, 1);
  scale: .4;
  pointer-events: none;
}

.A { top: 24px; left: 24px; }
.B { top: 24px; left: 50%; transform: translateX(-50%); }
.C { top: 24px; right: 24px; }
.D { top: 50%; left: 24px; transform: translateY(-50%); }
.F { top: 50%; right: 24px; transform: translateY(-50%); }
.G { bottom: 24px; left: 24px; }
.H { bottom: 24px; left: 50%; transform: translateX(-50%); }
.I { bottom: 24px; right: 24px; }

.syriu {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  border-radius: 50%;
  overflow: visible;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.syriu .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3.4s ease-in-out infinite;
}

.syriu .rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  overflow: visible;
  pointer-events: none;
  animation: spike 3.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { box-shadow: 0 0 8px 3px #fff, 0 0 22px 8px rgba(var(--ink), .95), 0 0 60px 20px rgba(var(--blue), .5), 0 0 120px 40px rgba(var(--blue), .18); }
  30% { box-shadow: 0 0 9px 4px #fff, 0 0 26px 10px rgba(var(--blue), 1), 0 0 70px 24px rgba(var(--blue), .55), 0 0 130px 44px rgba(var(--blue), .2); }
  65% { box-shadow: 0 0 8px 3px #fff, 0 0 24px 9px rgba(var(--warm), 1), 0 0 64px 21px rgba(var(--warm), .5), 0 0 120px 40px rgba(var(--warm), .16); }
}

@keyframes spike {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

body.ready .syriu { cursor: pointer; }
body.ready .syriu:hover { transform: scale(1.15); }
.syriu:focus-visible { outline: 1px solid rgba(var(--ink), .6); outline-offset: 6px; }

body.open .connections,
body.open .node { opacity: 0 !important; }

body.open .syriu { transform: scale(1.5); cursor: pointer; }

.ring {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink), .09);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1.6s ease;
  pointer-events: none;
}

.r1 { width: 36vmin; height: 36vmin; }
.r2 { width: 60vmin; height: 60vmin; }
.r3 { width: 86vmin; height: 86vmin; }

body.open .ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }
body.open .r2 { transition-delay: .25s; }
body.open .r3 { transition-delay: .5s; }

.orbit {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.orb {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  animation: emit 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.6s);
  box-shadow: 0 0 6px 2px #fff, 0 0 16px 5px rgba(var(--blue), .7), 0 0 38px 12px rgba(var(--blue), .28);
  cursor: pointer;
  transform: translate(0, 0) scale(0);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity 1s ease;
  transition-delay: calc(var(--i) * .18s + .6s);
}

body.open .orb { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
body:not(.open) .orb { transition-delay: 0s; pointer-events: none; }
.orb:hover { filter: brightness(1.3); }
.orb::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.orb:focus-visible { outline: 1px solid rgba(var(--ink), .6); outline-offset: 5px; }

@keyframes emit {
  0%, 100% { box-shadow: 0 0 6px 2px #fff, 0 0 16px 5px rgba(var(--blue), .7), 0 0 38px 12px rgba(var(--blue), .28); }
  50% { box-shadow: 0 0 8px 3px #fff, 0 0 22px 8px rgba(var(--blue), .85), 0 0 54px 18px rgba(var(--blue), .38); }
}

.dawn {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
  background: radial-gradient(120% 60% at 50% 118%, rgba(255, 170, 110, .38), rgba(120, 150, 255, .14) 45%, transparent 72%);
}

body.open .dawn { opacity: 1; transition-duration: 40s; }

.syriu-b {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 3s ease 1.2s;
  animation: orbitB 26s linear infinite;
  pointer-events: none;
}

.syriu-b i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #eaf2ff;
  box-shadow: 0 0 5px 1px #fff, 0 0 14px 4px rgba(var(--blue), .75), 0 0 30px 8px rgba(var(--blue), .3);
  transform: translateX(14vmin);
}

body.open .syriu-b { opacity: 1; }

@keyframes orbitB {
  to { transform: rotate(360deg); }
}

.sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.sky path {
  fill: none;
  stroke: rgba(var(--ink), .22);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .6s ease;
}

body.open .sky path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s ease-in-out calc(var(--k) * .25s + 1.4s);
}

.legal-footer {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  pointer-events: auto;
}

.legal-footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-left: 10px;
  transition: color 0.2s ease;
}

.legal-footer a:hover {
  color: #96beff;
}

@media (prefers-reduced-motion: reduce) {
  .syriu .core,
  .syriu .rays,
  .orb,
  .syriu-b { animation: none; }
}