body {
  margin: 0;
  background-color: #0F1C1F;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
}

/* make the entire splash a flex‐container and center its contents */

body.splash {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  height: 100vh;           /* full‐screen height */
  margin: 0;
  cursor: pointer;
}


#splash-body {
  cursor: pointer; /* entire screen is clickable */
}

#logo-animation {
  position: relative;
  z-index: 10;
  text-align: center;
}

#logo-svg {
  width: 120px;
  height: 120px;
  transition: transform 0.2s ease-out;
  background-color: transaprent;
  overflow: visible;
}

.bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  transition: transform 0.1s ease-out, filter 0.1s ease-out;
  fill: #00FFFF;   /* make bars visible before animation */
  opacity: 0.66;
}

#background-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ff00ff 0%, #0F1C1F 80%);
  opacity: 0.25;
  filter: blur(80px);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  z-index: 1;
}

#blockchain-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.node {
  fill: #00ffff;
  r: 3;
  opacity: 0.6;
}

.node.validating {
  fill: #00ff00;
  r: 5;
  opacity: 1;
}

.connection {
  stroke: #ff00ff;
  stroke-width: 1;
  opacity: 0.2;
}

.transaction {
  fill: #ffcc00;
  r: 4;
  opacity: 0.8;
  transition: transform 0.3s ease-out;
}

.consensus-node {
  fill: #ff00ff;
  r: 4;
  opacity: 0.6;
}