/* Ø Verse Portal Style — Teal / Deep Ultraviolet Zone Map */

:root {
  --teal: #00eaff;
  --purple: #6600ff;
}

body {
  background: #000;
  margin: 0;
  overflow: hidden;
  font-family: "Courier New", monospace;
  position: relative;
}

html, body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* CRT Scanlines */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 3px,
    transparent 4px
  );
  opacity: 0.22;
  mix-blend-mode: screen;
}

/* Intro Overlay + Dissolve */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 1;
  transition: opacity 3.2s ease-in-out, filter 3.2s ease-in-out;
}

#intro-overlay.fade-out {
  opacity: 0;
  filter: blur(6px) brightness(1.45);
  pointer-events: none;
}

.intro-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 2.2rem;
  color: var(--teal);
  text-shadow: 0 0 6px var(--teal), 0 0 20px var(--teal), 0 0 50px var(--purple);
  animation: hologramFlicker 6s infinite ease-in-out alternate;
}

.intro-cursor {
  animation: blink 0.8s step-end infinite;
  color: var(--teal);
  text-shadow: 0 0 6px var(--teal), 0 0 16px var(--purple);
}

@keyframes blink { 50% { opacity: 0; } }

@keyframes hologramFlicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.97; filter: brightness(1.1) blur(0.7px); }
}

/* --- CONSTELLATION NODES --- */
.node {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00eaff;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    transition: opacity 2.5s ease, transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 0 15px #00eaff, 0 0 30px #00eaff66;
    z-index: 3; /* 👈 ensure nodes appear ABOVE vapor mist */
}

.node {
    --px: 0px;
    --py: 0px;
    transform: translate(var(--px), var(--py));
}

body.reveal-nodes .node {
  opacity: 1;
}

/* Zone Color Assignments */
.node[data-label="Datastream"] {
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal), 0 0 32px var(--purple), 0 0 70px var(--teal);
}

.node[data-label="Sector7"] {
  background: var(--purple);
  box-shadow: 0 0 12px var(--purple), 0 0 32px var(--teal), 0 0 70px var(--purple);
}

.node[data-label="Vault"] {
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple), 0 0 26px var(--purple), 0 0 60px var(--teal);
}

.node[data-label="Alt"] {
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal), 0 0 30px var(--teal), 0 0 80px var(--purple);
}

/* Hover Response */
.node:hover {
    transform: translate(var(--px), var(--py)) scale(1.9);
}

/* Hover Labels */
.node::after {
  content: attr(data-label);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 5px;
  font-size: 0.8rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}

.node:hover::after {
  opacity: 1;
}

/* Parallax Drift */
@keyframes drift {
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(8px, -6px); }
  100% { transform: translate(0px, 0px); }
}

/* Synaptic Glow Pulse */
@keyframes nodePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 14px var(--teal)); }
}

.node {
  animation: nodePulse 3.8s ease-in-out infinite;
}

/* Vapor (background ambient particles) */
#vaporCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Link Pulse Lines — drawn above vapor, below nodes */
#linkCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Nodes (highest) */
.node {
    z-index: 3;
}

/* --- FINAL LAYER ORDER (OVERRIDES EVERYTHING ABOVE) --- */
#vaporCanvas { 
    z-index: 1 !important; 
}

#linkCanvas { 
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    display: block;
    z-index: 2 !important;
}

.node { 
    z-index: 3 !important;
}