.lava-lamp-container {
  width: 80px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  position: relative;
  margin: 0 auto;

  .nav-lamp & {
    top: -20px;

    @include media-down(lg) {
      top: auto;
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 10%;
    width: 150%;
    height: 80%;
    background: conic-gradient(
      from 0deg,
      rgba(255, 100, 0, 0.8) 0deg,
      transparent 5deg,
      transparent 10deg,
      rgba(255, 150, 0, 0.6) 15deg,
      transparent 20deg,
      transparent 25deg,
      rgba(255, 200, 0, 0.7) 30deg,
      transparent 35deg,
      transparent 40deg,
      rgba(255, 100, 0, 0.8) 45deg,
      transparent 50deg,
      transparent 55deg,
      rgba(255, 150, 0, 0.6) 60deg,
      transparent 65deg,
      transparent 70deg,
      rgba(255, 200, 0, 0.7) 75deg,
      transparent 80deg,
      transparent 85deg,
      rgba(255, 100, 0, 0.8) 90deg,
      transparent 95deg,
      transparent 100deg,
      rgba(255, 150, 0, 0.6) 105deg,
      transparent 110deg,
      transparent 115deg,
      rgba(255, 200, 0, 0.7) 120deg,
      transparent 125deg,
      transparent 130deg,
      rgba(255, 100, 0, 0.8) 135deg,
      transparent 140deg,
      transparent 145deg,
      rgba(255, 150, 0, 0.6) 150deg,
      transparent 155deg,
      transparent 160deg,
      rgba(255, 200, 0, 0.7) 165deg,
      transparent 170deg,
      transparent 175deg,
      rgba(255, 100, 0, 0.8) 180deg,
      transparent 185deg,
      transparent 190deg,
      rgba(255, 150, 0, 0.6) 195deg,
      transparent 200deg,
      transparent 205deg,
      rgba(255, 200, 0, 0.7) 210deg,
      transparent 215deg,
      transparent 220deg,
      rgba(255, 100, 0, 0.8) 225deg,
      transparent 230deg,
      transparent 235deg,
      rgba(255, 150, 0, 0.6) 240deg,
      transparent 245deg,
      transparent 250deg,
      rgba(255, 200, 0, 0.7) 255deg,
      transparent 260deg,
      transparent 265deg,
      rgba(255, 100, 0, 0.8) 270deg,
      transparent 275deg,
      transparent 280deg,
      rgba(255, 150, 0, 0.6) 285deg,
      transparent 290deg,
      transparent 295deg,
      rgba(255, 200, 0, 0.7) 300deg,
      transparent 305deg,
      transparent 310deg,
      rgba(255, 100, 0, 0.8) 315deg,
      transparent 320deg,
      transparent 325deg,
      rgba(255, 150, 0, 0.6) 330deg,
      transparent 335deg,
      transparent 340deg,
      rgba(255, 200, 0, 0.7) 345deg,
      transparent 350deg,
      transparent 355deg,
      rgba(255, 100, 0, 0.8) 360deg
    );
    border-radius: 50%;
    opacity: 0;
    filter: blur(12px);
    pointer-events: none;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
    z-index: -1;
  }

  &:hover::before {
    opacity: 1;
    animation: rotate-beams 7s linear infinite;
  }
}

@keyframes rotate-beams {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.lamp-cap {
  width: 60%;
  height: 10%;
  background: linear-gradient(180deg, #c0c0c0 0%, #888 50%, #666 100%);
  border-radius: 60px 60px 0 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 10;
}
.lava-lamp {
  position: relative;
  width: 100%;
  height: 110%;
  background: var(--lamp-bg, linear-gradient(180deg, #2a1a4a 0%, #1a0a3a 100%));
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.3),
    inset -10px 0 40px rgba(255, 255, 255, 0.1),
    inset 10px 0 40px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.lava-lamp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 60%
  );
  pointer-events: none;
}

.blobs-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: url(#goo);
  pointer-events: none;
  z-index: 2;
}

.blob {
  position: absolute;
  border-radius: 50%;
  background: #f74b1e;
  animation: float var(--duration) ease-in-out infinite;
  opacity: 0.95;
  mix-blend-mode: normal;
  z-index: 3;
}

.lamp-base {
  width: 100%;
  height: 20%;
  background: linear-gradient(180deg, #888 0%, #555 40%, #333 100%);
  border-radius: 0 0 40px 40px / 0 0 60px 60px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 5px 10px rgba(255, 255, 255, 0.2),
    inset 0 -5px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #924706;
}

@keyframes float {
  0%,
  100% {
    transform: translate(var(--start-x), var(--start-y)) scale(1);
  }
  25% {
    transform: translate(var(--mid1-x), var(--mid1-y)) scale(var(--scale1, 1.1));
  }
  50% {
    transform: translate(var(--mid2-x), var(--mid2-y)) scale(var(--scale2, 0.9));
  }
  75% {
    transform: translate(var(--mid3-x), var(--mid3-y))
      scale(var(--scale3, 1.05));
  }
}

.lamp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%) rotate(85deg);
  font-size: 30px;
  font-weight: bold;
  color: rgba(224, 27, 36, 0.7);
  transition: color 0.5s ease;
  pointer-events: none;
  z-index: 4;
  letter-spacing: 2px;
}

.lamp-text-shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%) rotate(85deg);
  font-size: 30px;
  font-weight: bold;
  color: rgba(224, 27, 36, 0);
  transition: color 0.5s ease;
  pointer-events: none;
  z-index: 4;
  letter-spacing: 2px;

  @include media-down(lg) {
    color: rgba(224, 27, 36, 0.2);
  }
}

.lava-lamp:hover .lamp-text-shadow {
  color: rgba(224, 27, 36, 0.7);
}

.lava-lamp:hover {
  cursor: pointer;

  > .lamp-text {
    z-index: 4;
  }
}
