:root {
  --void: #020302;
  --signal: #7dff38;
  --mx: 50vw;
  --my: 50vh;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: Arial, sans-serif;
}

.home {
  position: fixed;
  inset: 0;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  cursor: none;
  background: #020302;
}

.home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle 190px at var(--mx) var(--my), rgb(125 255 56 / 8.5%), transparent 72%),
    radial-gradient(circle at center, transparent 53%, rgb(0 0 0 / 28%) 100%);
  box-shadow: inset 0 0 130px rgb(0 0 0 / 50%);
}

.brain-scene {
  --shift-x: 0px;
  --shift-y: 0px;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  position: absolute;
  inset: -1.5%;
  z-index: 0;
  transform: perspective(1100px) translate3d(var(--shift-x), var(--shift-y), 0) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(1.025);
  transition: transform 0.12s ease-out;
  transform-style: preserve-3d;
}

.brain-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.brain-base {
  filter: brightness(0.82) contrast(1.06) saturate(0.88);
  opacity: 0.92;
}

.brain-light {
  z-index: 1;
  filter: brightness(1.22) contrast(1.08) saturate(1.35);
  opacity: 0.97;
  -webkit-mask-image: radial-gradient(circle 185px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 95%) 24%, transparent 76%);
  mask-image: radial-gradient(circle 185px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 95%) 24%, transparent 76%);
}

.neural-trail {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cursor {
  position: fixed;
  z-index: 5;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(125 255 56 / 72%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 28px rgb(125 255 56 / 17%), inset 0 0 16px rgb(125 255 56 / 8%);
  transition: opacity 0.18s ease;
}

.cursor.visible {
  opacity: 1;
}

.cursor span {
  position: absolute;
  width: 3px;
  height: 3px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--signal);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--signal);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .home {
    cursor: auto;
  }

  .brain-scene {
    inset: 0;
    transform: none;
  }

  .brain-image {
    object-fit: contain;
  }

  .brain-light {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.3;
  }

  .cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .brain-scene {
    transform: none;
  }
}