/* Base lamp styles */
.lampImg {
  width: 80%;
  max-width: 200px; /* Prevent lamps from getting too large */
}

/* Lamp positioning - Desktop (default) */
.lampRightTop {
  position: absolute;
  top: 15%;
  right: -300px; /* Adjusted from -360px */
  z-index: 999;
  animation: swayLeft 3s ease-in-out infinite;
}

.lampLeftTop {
  position: absolute;
  top: 15%;
  left: -200px; /* Adjusted from -270px */
  z-index: 999;
  animation: swayRight 3s ease-in-out infinite;
}

.lampRight {
  position: absolute;
  top: -15%;
  right: -120px; /* Adjusted from -140px */
  z-index: 999;
  animation: swayRight 3s ease-in-out infinite;
}

.lampLeft {
  position: absolute;
  top: -15%;
  left: -120px; /* Adjusted from -140px */
  z-index: 999;
  animation: swayLeft 3s ease-in-out infinite;
}

/* Animation keyframes */
@keyframes swayRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes swayLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

/* Large screens (1400px and up) */
@media (min-width: 1400px) {
  .lampRightTop {
    right: -120px;
  }
  
  .lampLeftTop {
    left: -100px;
  }
  
  .lampRight {
    right: -150px;
  }
  
  .lampLeft {
    left: -150px;
  }
  
  .lampImg {
    width: 90%;
    max-width: 250px;
  }
}

/* Medium-large screens (1200px to 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .lampImg {
    width: 70%;
    max-width: 180px;
  }
  
  .lampRightTop {
    right: -76px;
  }
  
  .lampLeftTop {
    left: -10px;
  }
  
  .lampRight {
    right: -100px;
  }
  
  .lampLeft {
    left: -100px;
  }
}

/* Medium screens (768px to 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .lampImg {
    width: 50%;
    max-width: 250px;
  }
  
  .lampRightTop {
    top: 10%;
    right: -180px;
  }
  
  .lampLeftTop {
    top: 10%;
    left: -60px;
  }
  
  .lampRight {
    top: 3%;
    right: -100px;
  }
  
  .lampLeft {
    top: 4%;
    left: -110px;
  }
}

/* Small screens (576px to 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .lampImg {
    width: 40%;
    max-width: 170px;
  }
  
  .lampRightTop {
    top: 17%;
    right: -100px;
  }
  
  .lampLeftTop {
    top: 8%;
    left: -25px;
  }
  
  .lampRight {
    top: 1%;
    right: -60px;
  }
  
  .lampLeft {
    top: 1%;
    left: -65px;
  }
  
  /* Reduce animation intensity on smaller screens */
  @keyframes swayRight {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px);
    }
  }
  
  @keyframes swayLeft {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
  }
}

/* Extra small screens (up to 575px) */
@media (max-width: 575px) {
  .lampImg {
    width: 80%;
    max-width: 182px;
  }
  
  .lampRightTop {
    top: 20%;
    right: -95px;
  }
  
  .lampLeftTop {
    top: 5%;
    left: -12px;
  }
  
  .lampRight {
    top: 2%;
    right: -68px;
  }
  
  .lampLeft {
    top: 3%;
    left: -74px;
  }
  
  /* Minimal animation on very small screens */
  @keyframes swayRight {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(3px);
    }
  }
  
  @keyframes swayLeft {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-3px);
    }
  }
}

/* Ultra-wide screens (1600px and up) */
@media (min-width: 1600px) {
  .lampRightTop {
    right: -100px;
  }
  
  .lampLeftTop {
    left: -150px;
  }
  
  .lampRight {
    right: -180px;
  }
  
  .lampLeft {
    left: -180px;
  }
  
  .lampImg {
    width: 100%;
    max-width: 300px;
  }
}

/* Performance optimization */
.lampRightTop,
.lampLeftTop,
.lampRight,
.lampLeft {
  will-change: transform; /* Optimize for animations */
  backface-visibility: hidden; /* Prevent flickering */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .lampRightTop,
  .lampLeftTop,
  .lampRight,
  .lampLeft {
    animation: none;
  }
}