/* ============================================================
   EVOLVE ORB — CINEMATIC GREEN GLASS + BLUE→WHITE TRANSITION
   ============================================================ */

/* ORB CONTAINER */
#evolve-orb {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  overflow: hidden;

  /* --- Green Glass Core Background (unchanged) --- */
  background: radial-gradient(circle at center,
    rgba(0, 255, 128, 0.35) 0%,
    rgba(0, 128, 64, 0.25) 40%,
    rgba(0, 64, 32, 0.15) 70%,
    transparent 100%
  );
  backdrop-filter: blur(6px);

  /* Soft glow */
  box-shadow:
    0 0 18px rgba(0, 255, 128, 0.45),
    inset 0 0 12px rgba(0, 255, 128, 0.25);

  transition:
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

/* Hover behaviour */
#evolve-orb:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 26px rgba(0, 255, 128, 0.65),
    inset 0 0 18px rgba(0, 255, 128, 0.35);
}

/* ============================================================
   CINEMATIC FOREGROUND LAYER (blue → white transition)
   ============================================================ */

#evolve-orb::before {
  content: "";
  position: absolute;
  inset: 0;

  /* Starting blue glow */
  background: radial-gradient(circle at center,
    rgba(0, 128, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.0) 70%
  );

  mix-blend-mode: screen;
  transition: background 2.5s ease-in-out;
  pointer-events: none;
}

/* When EVOLVE activates the orb */
#evolve-orb.active::before {
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.0) 70%
  );
}

/* ============================================================
   LOGO (white SVG) + GLOW
   ============================================================ */

#evolve-orb svg,
#evolve-orb img {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;

  /* White glow + green aura */
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 14px rgba(0, 255, 128, 0.6));

  transition: filter 1.5s ease-in-out;
}

/* Stronger glow when active */
#evolve-orb.active svg,
#evolve-orb.active img {
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 1))
    drop-shadow(0 0 28px rgba(0, 255, 128, 0.8));
}

/* ============================================================
   OPTIONAL: Orb Pulse Animation (cinematic breathing)
   ============================================================ */

@keyframes evolveOrbPulse {
  0% {
    box-shadow:
      0 0 18px rgba(0, 255, 128, 0.45),
      inset 0 0 12px rgba(0, 255, 128, 0.25);
  }
  50% {
    box-shadow:
      0 0 28px rgba(0, 255, 128, 0.75),
      inset 0 0 18px rgba(0, 255, 128, 0.35);
  }
  100% {
    box-shadow:
      0 0 18px rgba(0, 255, 128, 0.45),
      inset 0 0 12px rgba(0, 255, 128, 0.25);
  }
}

#evolve-orb.pulse {
  animation: evolveOrbPulse 4s ease-in-out infinite;
}