/* =========================
   CURSOR GLOW
========================= */
body::after {
  content: "";
  position: fixed;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 180px;
  height: 180px;
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(120, 255, 120, 0.15),
    rgba(120, 255, 120, 0.05),
    transparent 70%
  );

  transform: translate(-50%, -50%);
  z-index: 5;
}


/* =========================
   BASE
========================= */
body {
  margin: 0;
  overflow: hidden;
  font-family: monospace;
  color: white;
  background: #000;
}


/* =========================
   BACKGROUND
========================= */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: radial-gradient(circle at center, #1a1a2e, #000);
  animation: pulse 20s infinite alternate;

  z-index: 0;
}


/* =========================
   FOG
========================= */
.fog {
  position: fixed;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.03), transparent 70%);
  opacity: 0.2;
  animation: fogMove 60s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;

  z-index: 2;
}

@keyframes fogMove {
  from { transform: translate(0, 0); }
  to { transform: translate(-200px, -100px); }
}


/* =========================
   OBJECTS
========================= */
.object {
  position: absolute;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s ease;

  z-index: 10;
}

.object:hover {
  transform: scale(1.3);
}

/* Positions */
#orb { top: 40%; left: 30%; }
#leaf { top: 60%; left: 70%; }
#eye { top: 20%; left: 50%; }

/* Floating animation */
.inner {
  font-size: 2rem;
  cursor: pointer;
  animation: float 6s infinite ease-in-out;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}


/* =========================
   WHISPERS
========================= */
.whisper {
  position: absolute;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.2);
  transition: 1s;

  z-index: 10;
}

.whisper:hover {
  color: rgba(255,255,255,0.8);
}


/* =========================
   POEM
========================= */
.poem {
  position: absolute;
  bottom: 20px;
  left: 20px;
  opacity: 0;
  transition: opacity 1s;
  max-width: 300px;
  font-size: 0.9rem;
  color: #aaa;

  z-index: 10;
}


/* =========================
   THOUGHT INPUT
========================= */
#thought {
  position: absolute;
  bottom: 20px;
  right: 20px;

  background: rgba(0,0,0,0.3);
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px;

  resize: none;
  outline: none;

  z-index: 10;
}


/* =========================
   WORLD THOUGHTS
========================= */
.world-thought {
  position: absolute;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  max-width: 200px;
  pointer-events: none;

  transition: opacity 6s ease;
  opacity: 1;

  animation: drift 10s ease-in-out infinite;

  z-index: 10;
}

@keyframes drift {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}


/* =========================
   SECRET
========================= */
#secret {
  position: absolute;
  top: 10%;
  left: 80%;
  width: 100px;
  height: 100px;
  cursor: pointer;

  z-index: 10;
}


/* =========================
   BACKGROUND ANIMATION
========================= */
@keyframes pulse {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(20deg); }
}

#dungeon-gate { 
  top: 70%; 
  left: 25%; 
}