.container {
    position: relative;
    display: inline-block; /* Keeps the container's size based on content */
  }

  .logo {
    position: relative;
    z-index: 1; /* Above the flickering light */
  }

  .light {
    position: absolute;
    z-index: 0;
    width: 250px;
    height: 250px;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - 100px), calc(-50% - 68px));
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 200, 0.6) 0%,
      rgba(255, 200, 150, 0.3) 50%,
      rgba(255, 255, 255, 0) 70%
    );
    opacity: 0;
    pointer-events: none;
    animation: flickerPulse 8s ease-in-out infinite;
    animation-delay: 5s;
    transition: all 0.3s ease-in-out;
  }

  @keyframes flickerPulse {
  0% {
    opacity: 0.4; /* Completely off */
    transform: translate(calc(-50% - 100px), calc(-50% - 68px)) scale(1);
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.4;
  }
  8% {
    opacity: 0.2;
  }
  12% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.3;
  }
  36% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.7;
    transform: translate(calc(-50% - 100px), calc(-50% - 68px)) scale(1.1);
  }
  68% {
    opacity: 0.35;
  }
  84% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.4;
    transform: translate(calc(-50% - 100px), calc(-50% - 68px)) scale(1);
  }
}