.theme-toggle {
  --fire-core: #ffe09a;
  --fire-glow: #ff792e;
}
html[data-theme="dark"] .theme-toggle {
  --fire-core: #ceffb7;
  --fire-glow: #5be3a2;
}
.switch-orb {
  z-index: 1;
}
.orb-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: inherit;
}
.orb-fire {
  position: absolute;
  z-index: 4;
  left: 4px;
  top: 2px;
  width: 20px;
  height: 24px;
  color: var(--fire-glow);
  transform-origin: 50% 90%;
  filter: drop-shadow(0 0 3px var(--fire-glow));
  animation: fire-flicker 850ms ease-in-out infinite alternate;
  animation-play-state: var(--motion-state, paused);
  pointer-events: none;
}
.switch-orb::before,
.switch-orb::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.switch-orb::before {
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 60%,
    var(--fire-glow),
    transparent 72%
  );
  opacity: 0.6;
  animation: fire-aura 1.7s ease-in-out infinite alternate;
  animation-play-state: var(--motion-state, paused);
}
.switch-orb::after {
  z-index: 4;
  left: 13px;
  bottom: 15px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: var(--fire-core);
  box-shadow:
    -6px 3px 0 var(--fire-glow),
    6px 6px 0 var(--fire-core);
  opacity: 0.7;
  animation: fire-sparks 1.4s linear infinite;
  animation-play-state: var(--motion-state, paused);
}
@keyframes fire-flicker {
  0%,
  100% {
    transform: scale(0.94, 1) rotate(-3deg);
  }
  25% {
    transform: scale(1.06, 1.12) rotate(2deg);
  }
  50% {
    transform: scale(0.93, 1.06) rotate(-1deg);
  }
  75% {
    transform: scale(1.02, 1.18) rotate(3deg);
  }
}
@keyframes fire-aura {
  from {
    opacity: 0.35;
    transform: scale(0.85);
  }
  to {
    opacity: 0.8;
    transform: scale(1.15);
  }
}
@keyframes fire-sparks {
  from {
    transform: translate(0, 3px) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.85;
  }
  to {
    transform: translate(3px, -15px) scale(0.4);
    opacity: 0;
  }
}
html[data-motion="off"] .switch-orb::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .orb-fire,
  .switch-orb::before,
  .switch-orb::after {
    animation: none;
  }
  .switch-orb::after {
    display: none;
  }
}