/* Neon Orbit Toggle Styles - Matches React Component */

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

#theme-toggle-btn {
  position: relative;
  width: 80px;
  height: 40px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #120e00;
  border: 1.5px solid #ff9f1c;
  box-shadow: 0 0 20px rgba(255, 159, 28, 0.5);
}

#theme-toggle-btn:active {
  transform: scale(0.96);
}

.dark #theme-toggle-btn {
  background: #08081a;
  border-color: #2563eb;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

/* Star particles container */
.star-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0;
}

.dark .star-particles {
  opacity: 1;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #4a9eff;
  box-shadow: 0 0 4px #4a9eff;
  animation: twinkle 1.5s ease-in-out infinite;
}

/* Knob with spin animation */
.toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 40%, #ffd460, #ff9f1c);
  box-shadow: 0 0 18px rgba(255, 159, 28, 0.9), 0 0 35px rgba(255, 159, 28, 0.3);
  transition: left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.5s ease;
  z-index: 10;
}

.dark .toggle-knob {
  left: 44px;
  background: radial-gradient(circle at 40% 40%, #60a5fa, #2563eb);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.9), 0 0 35px rgba(37, 99, 235, 0.3);
}

.toggle-knob.spinning {
  transform: rotate(360deg);
}

/* Icon Styles */
.toggle-knob .sun-icon {
  display: block;
  stroke: #3d1e00;
  stroke-width: 2.5;
}

.toggle-knob .moon-icon {
  display: none;
  stroke: #dbeafe;
  stroke-width: 2;
}

.dark .toggle-knob .sun-icon {
  display: none;
}

.dark .toggle-knob .moon-icon {
  display: block;
}