/* Optimized Lamp Effect Styles */
.lamp-container {
  position: relative;
  z-index: 0;
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: rgb(5, 8, 15); /* Much darker background */
  /* Performance optimizations */
  will-change: auto;
  contain: layout style paint;
}

.lamp-gradient-wrapper {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  flex: 1;
  transform: scaleY(1.25) translateY(10rem) translateZ(0);
  align-items: center;
  justify-content: center;
  /* Performance optimizations */
  will-change: transform;
  backface-visibility: hidden;
}

.lamp-conic-gradient-left {
  position: absolute;
  right: 50%;
  height: 14rem;
  width: 24rem;
  background: conic-gradient(from 70deg at center top, rgba(6, 194, 110, 0.6), transparent, transparent);
  opacity: 0.5;
  animation: lamp-expand 0.6s ease-in-out 0.2s forwards;
  /* Performance optimizations */
  will-change: width, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.lamp-conic-gradient-right {
  position: absolute;
  left: 50%;
  height: 14rem;
  width: 24rem;
  background: conic-gradient(from 290deg at center top, transparent, transparent, rgba(6, 194, 110, 0.6));
  opacity: 0.5;
  animation: lamp-expand 0.6s ease-in-out 0.2s forwards;
  /* Performance optimizations */
  will-change: width, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.lamp-mask-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  height: 10rem;
  width: 100%;
  background-color: rgb(5, 8, 15);
  -webkit-mask-image: linear-gradient(to top, white, transparent);
  mask-image: linear-gradient(to top, white, transparent);
}

.lamp-mask-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  height: 100%;
  width: 10rem;
  background-color: rgb(5, 8, 15);
  -webkit-mask-image: linear-gradient(to right, white, transparent);
  mask-image: linear-gradient(to right, white, transparent);
}

.lamp-mask-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
  height: 100%;
  width: 10rem;
  background-color: rgb(5, 8, 15);
  -webkit-mask-image: linear-gradient(to left, white, transparent);
  mask-image: linear-gradient(to left, white, transparent);
}

.lamp-blur-top {
  position: absolute;
  top: 50%;
  height: 12rem;
  width: 100%;
  transform: translateY(6rem) scaleX(1.5);
  background-color: rgb(5, 8, 15);
  filter: blur(2rem);
}

/* Removed backdrop for performance */

.lamp-glow-main {
  position: absolute;
  z-index: 50;
  height: 9rem;
  width: 28rem;
  transform: translateY(-20%) translateZ(0);
  border-radius: 50%;
  background-color: rgba(6, 194, 110, 0.4);
  opacity: 0.6;
  filter: blur(2rem);
  /* Simplified animation for performance */
  animation: lamp-pulse-simple 6s ease-in-out infinite;
  /* Performance optimizations */
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.lamp-glow-secondary {
  position: absolute;
  z-index: 30;
  height: 6rem;
  width: 8rem;
  transform: translateY(-3rem) translateZ(0);
  border-radius: 50%;
  background-color: rgba(34, 197, 94, 0.4);
  filter: blur(1.5rem);
  animation: lamp-glow-expand-fast 0.6s ease-out 0.2s forwards;
  /* Performance optimizations */
  will-change: width;
  backface-visibility: hidden;
}

.lamp-beam {
  position: absolute;
  z-index: 50;
  height: 0.125rem;
  width: 15rem;
  border-radius: 100px;
  transform: translateY(-5.2rem) translateZ(0);
  background-color: rgba(34, 197, 94, 0.8);
  animation: lamp-beam-expand-fast 0.6s ease-out 0.2s forwards;
  /* Performance optimizations */
  will-change: width;
  backface-visibility: hidden;
}

.lamp-top-mask {
  position: absolute;
  inset: auto;
  z-index: 40;
  height: 8rem;
  width: 100%;
  transform: translateY(-9rem);
  background-color: rgb(5, 8, 15);
  /* Performance optimizations */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.lamp-content {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Optimized animations */
@keyframes lamp-expand {
  from {
    opacity: 0.3;
    width: 15rem;
  }
  to {
    opacity: 0.6;
    width: 25rem;
  }
}

@keyframes lamp-glow-expand-fast {
  from {
    width: 8rem;
  }
  to {
    width: 14rem;
  }
}

@keyframes lamp-beam-expand-fast {
  from {
    width: 15rem;
  }
  to {
    width: 32rem;
  }
}

/* Simplified pulse animation */
@keyframes lamp-pulse-simple {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
}

/* Performance optimizations */
.lamp-container,
.lamp-gradient-wrapper,
.lamp-conic-gradient-left,
.lamp-conic-gradient-right,
.lamp-glow-main,
.lamp-glow-secondary,
.lamp-beam {
  will-change: transform, opacity;
}

/* Additional glow layers for depth */
.lamp-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle, rgba(6, 194, 110, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Integration with existing GSAP animations */
.lamp-active .lamp-conic-gradient-left,
.lamp-active .lamp-conic-gradient-right {
  animation-play-state: running;
}

.lamp-active .lamp-glow-secondary {
  animation-play-state: running;
}

.lamp-active .lamp-beam {
  animation-play-state: running;
}

/* Ensure smooth transitions - simplified */
.lamp-container * {
  transition: opacity 0.3s ease;
}

/* Mobile-first lamp effect optimization */
@media (max-width: 768px) {
  .lamp-container {
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, rgb(5, 8, 15) 0%, rgb(8, 12, 18) 100%);
  }
  
  .lamp-gradient-wrapper {
    transform: scaleY(0.7) translateY(10rem) translateZ(0);
    opacity: 0.7;
  }
  
  .lamp-conic-gradient-left,
  .lamp-conic-gradient-right {
    height: 8rem;
    width: 15rem;
    opacity: 0.25; /* Much more subtle */
  }
  
  .lamp-conic-gradient-left {
    background: conic-gradient(from 70deg at center top, rgba(6, 194, 110, 0.2), transparent, transparent);
  }
  
  .lamp-conic-gradient-right {
    background: conic-gradient(from 290deg at center top, transparent, transparent, rgba(6, 194, 110, 0.2));
  }
  
  .lamp-glow-main {
    height: 4rem;
    width: 16rem;
    background-color: rgba(6, 194, 110, 0.15);
    opacity: 0.3;
    filter: blur(1rem);
    animation: none; /* Disable animations */
  }
  
  .lamp-glow-secondary {
    opacity: 0.2;
    height: 3rem;
    width: 8rem;
  }
  
  .lamp-beam {
    width: 10rem;
    height: 0.06rem;
    background-color: rgba(34, 197, 94, 0.3);
  }
  
  .lamp-blur-top {
    height: 6rem;
    filter: blur(0.8rem);
    opacity: 0.5;
  }
  
  .lamp-mask-bottom {
    height: 6rem;
  }
  
  .lamp-mask-left,
  .lamp-mask-right {
    width: 6rem;
  }
  
  .lamp-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Much more subtle background glow */
  .lamp-container::before {
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(6, 194, 110, 0.03) 0%, transparent 70%);
  }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
  .lamp-gradient-wrapper {
    transform: scaleY(0.5) translateY(8rem) translateZ(0);
    opacity: 0.5;
  }
  
  .lamp-conic-gradient-left,
  .lamp-conic-gradient-right {
    height: 6rem;
    width: 12rem;
    opacity: 0.2;
  }
  
  .lamp-glow-main {
    height: 3rem;
    width: 12rem;
    opacity: 0.25;
  }
  
  .lamp-beam {
    width: 8rem;
  }
  
  .lamp-container::before {
    width: 15rem;
    height: 15rem;
    opacity: 0.5;
  }
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
  .lamp-container {
    background-color: rgb(3, 5, 10); /* Even darker for dark mode */
  }
  
  .lamp-mask-bottom,
  .lamp-mask-left,
  .lamp-mask-right,
  .lamp-blur-top,
  .lamp-top-mask {
    background-color: rgb(3, 5, 10);
  }
}

/* Mobile typography and spacing improvements */
@media (max-width: 768px) {
  .lamp-content .text-center {
    padding-top: 15px;
    margin-top: 8px;
  }
  
  .lamp-content h1 {
    line-height: 1.1;
    margin-bottom: 2rem;
  }
  
  .lamp-content p {
    margin-bottom: 1rem;
  }
  
  /* Ensure text is always readable over lamp effect */
  .lamp-content {
    position: relative;
    z-index: 100;
  }
}

/* Ensure proper content layering */
.lamp-content * {
  position: relative;
  z-index: 1;
}