body {
  background-image: linear-gradient(to bottom, black, black, black, #0d1a26);
  height: 100vh;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.brain-container {
  position: relative;
  width: 600px;
}

#brain {
  width: 250%;
  display: block;
  position: relative;
  z-index: 1;
  left: 75px;
  pointer-events: none;
}

.part {
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 2;
  mix-blend-mode: darken;
  pointer-events: auto;
}

.part:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

.hippocampus {
  top: 58%;
  left: 155%;
  transform: translate(-50%, -50%);
}

.amygdala {
  top: 60%;
  left: 143%;
  transform: translate(-50%, -50%);
}

.frontal {
  top: 40%;
  left: 100%;
  transform: translate(-50%, -50%);
}

--------------------------------------------------------------
/* https://www.sliderrevolution.com/resources/css-animated-background/ */
html {
  font: 5vmin/1.3 serif;
  overflow: hidden;
  background: radial-gradient(circle at center, #123, #000);
  height: 100vh;
}

body,
head {
  display: block;
  font-size: 52px;
  color: transparent;
}

head::before,
head::after,
body::before,
body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  will-change: transform;
}

/* 🔵 FAR LAYER (slow, small, faint) */
head::before {
  text-shadow:
    1em -1em 4px hsl(200, 100%, 60%),
    -1.5em 0.5em 4px hsl(260, 100%, 60%),
    0.5em 1.2em 4px hsl(180, 100%, 60%),
    -0.8em -1.3em 4px hsl(300, 100%, 60%),
    1.7em 0.8em 4px hsl(220, 100%, 60%),
    -1.2em 1.6em 4px hsl(280, 100%, 60%);
  animation: moveFar 80s linear infinite;
}

/* 🟣 MID LAYER */
head::after {
  text-shadow:
    -1em 1em 6px hsl(320, 100%, 55%),
    1.5em -0.5em 6px hsl(40, 100%, 55%),
    -0.9em -1.2em 6px hsl(140, 100%, 55%),
    0.3em 1.7em 6px hsl(90, 100%, 55%),
    1.8em 0.4em 6px hsl(20, 100%, 55%),
    -1.6em 0.9em 6px hsl(60, 100%, 55%);
  animation: moveMid 55s linear infinite;
}

/* 🔴 NEAR LAYER (fast, bigger, brighter) */
body::before {
  text-shadow:
    1.2em -0.8em 10px hsl(120, 100%, 50%),
    -0.7em 1.5em 10px hsl(240, 100%, 50%),
    0.5em 0.9em 10px hsl(60, 100%, 50%),
    -1.3em -1.1em 10px hsl(300, 100%, 50%),
    0.8em -1.4em 10px hsl(180, 100%, 50%),
    1.6em 0.6em 10px hsl(0, 100%, 50%),
    -1.5em 1.2em 10px hsl(45, 100%, 50%);
  animation: moveNear 30s linear infinite;
}

/* 🟡 EXTRA LAYER (adds density) */
body::after {
  text-shadow:
    -1em 0.6em 8px hsl(20, 100%, 50%),
    1.4em -0.5em 8px hsl(200, 100%, 50%),
    -0.9em -1.2em 8px hsl(340, 100%, 50%),
    0.3em 1.7em 8px hsl(90, 100%, 50%),
    1.9em -0.3em 8px hsl(160, 100%, 50%),
    -1.7em 0.8em 8px hsl(280, 100%, 50%);
  animation: moveMid 45s linear infinite reverse;
}

/* 🌌 Parallax animations */
@keyframes moveFar {
  from {
    transform: rotate(0deg) scale(10) translateX(-10px);
  }
  to {
    transform: rotate(360deg) scale(14) translateX(10px);
  }
}

@keyframes moveMid {
  from {
    transform: rotate(0deg) scale(14) translateX(-15px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(15px);
  }
}

@keyframes moveNear {
  from {
    transform: rotate(0deg) scale(18) translateX(-25px);
  }
  to {
    transform: rotate(360deg) scale(24) translateX(25px);
  }
}