/* Initial state (hidden or minimal glow) */
.glow-box {
    padding: 1rem;
    border: 2px solid transparent; /* Use a transparent border initially */
    border-radius: 10px;
    transition: all 1s ease-out; /* Smooth transition for the fade out */
    /* opacity: 0; /*Start with opacity 0 */
    box-shadow: 0 0 0px #0ff; /* Minimal shadow initially */
}
/* Keyframes for the pulsing glow animation */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; /* Start glow */
        border-color: #0ff;
    }
    50% {
        box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; /* Brighter glow */
        border-color: #0ff;
    }
    100% {
        box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; /* Return to start glow */
        border-color: #0ff;
    }
}
/* Class to be added by JavaScript to start the animation and then fade out */
.is-active {
    opacity: 1; /* Fade in */
    animation: pulse-glow 3s infinite forwards; /* Apply the pulsing animation infinitely */
}
/* .tooltip-container {
  border-radius: 10px;
} */

/* .glow-element {
  background-color: #2224;
  box-shadow: 0 0 10px #0ff;
  animation: pulseAndFade 9s 1 forwards;
} */

/* @keyframes pulseAndFade {
  0%   { background-color: #2222; box-shadow: 0 0 10px #0ff; }
  8%  { background-color: #2222; box-shadow: 0 0 15px 6px #0ff; }
  16%  { background-color: #2222; box-shadow: 0 0 10px #0ff; }

  24%  { background-color: #2222; box-shadow: 0 0 15px 6px #0ff; }
  32%  { background-color: #2222; box-shadow: 0 0 10px #0ff; }

  40%  { background-color: #2222; box-shadow: 0 0 15px 6px #0ff; }
  50%  { background-color: #2222; box-shadow: 0 0 10px #0ff; }

  58%  { background-color: #2222; box-shadow: 0 0 15px 6px #0ff; }
  66%  { background-color: #22222224; box-shadow: 0 0 10px #0ff; }

  74%  { background-color: #2222; box-shadow: 0 0 15px 6px #0ff; }
  82%  { background-color: #2222; box-shadow: 0 0 10px 4px #0ff; }

  /*86%  { background-color: #2224; box-shadow: 0 0 15px 6px #0ff; }
  90%  { background-color: #2224; box-shadow: 0 0 15px 3px #0ff; }

  100% { background-color: transparent; box-shadow: 0 0 0px transparent; }
} */
/* @keyframes pulseAndFade {
  0%   { background-color: #2224; box-shadow: 0 0 10px #0ff; }
  15%  { background-color: #2224; box-shadow: 0 0 15px 6px #0ff; }
  30%  { background-color: #2224; box-shadow: 0 0 10px #0ff; }
  45%  { background-color: #2224; box-shadow: 0 0 15px 6px #0ff; }
  60%  { background-color: #2224; box-shadow: 0 0 10px #0ff; }
  75%  { background-color: #2224; box-shadow: 0 0 15px 6px #0ff; }
  85%  { background-color: #2224; box-shadow: 0 0 8px 2px #0ff; }
  100% { background-color: transparent; box-shadow: 0 0 0 transparent; }
} */

.spin-start {
  transition: transform 2500ms cubic-bezier(.25,.8,.25,1);
  transform: rotate(360deg);
}
.glow-element {
  background-color: #2224;
  box-shadow: 0 0 10px #0ff;
  animation: pulseFade 2s 6 forwards;
}

/* @keyframes pulseFade {
  0%   { background-color: #2224; box-shadow: 0 0 5px #0ff; }
  25%   { background-color: #2224; box-shadow: 0 0 10px #0ff; }
  50%  { background-color: #2224; box-shadow: 0 0 15px 8px #0ff; }
  75%   { background-color: #2224; box-shadow: 0 0 8px 2px #0ff; }
  100% { background-color: transparent; box-shadow: 0 0 0 transparent; }
} */

@keyframes pulseFade {
  0%   { background-color: #2224; box-shadow: 0 0 10px #0ff; }
  50%  { background-color: #2224; box-shadow: 0 0 15px 6px #0ff; }
75%  { background-color: #2224; box-shadow: 0 0 8px 2px #0ff; }
  100% { background-color: transparent; box-shadow: 0 0 0 transparent; }
}