/* 明暗主题 · 太阳/月亮变形动效（Uiverse Type-Delta / joshwcomeau 思路）
 * 外观跟 .chrome-icon-btn / 布局切换钮走同一套壳层配色，本文件只负责动效。 */

.chrome-icon-btn.st-sunMoonThemeToggleBtn,
.themeToggle.st-sunMoonThemeToggleBtn {
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.st-sunMoonThemeToggleBtn .themeToggleInput {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.st-sunMoonThemeToggleBtn svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--chrome-icon-glyph, 18px);
  height: var(--chrome-icon-glyph, 18px);
  margin: 0;
  pointer-events: none;
  transition: transform 0.4s ease;
  transform: translate(-50%, -50%) rotate(40deg);
  color: inherit;
  fill: currentColor;
  overflow: visible;
}

.st-sunMoonThemeToggleBtn svg .sunMoon {
  transform-origin: center center;
  transition: inherit;
  transform: scale(1);
  fill: currentColor;
}

.st-sunMoonThemeToggleBtn svg .sunRay {
  transform-origin: center center;
  transform: scale(0);
  fill: currentColor;
}

.st-sunMoonThemeToggleBtn svg mask > circle {
  transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
  transform: translate(0px, 0px);
}

.st-sunMoonThemeToggleBtn svg .sunRay2 {
  animation-delay: 0.05s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay3 {
  animation-delay: 0.1s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay4 {
  animation-delay: 0.17s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay5 {
  animation-delay: 0.25s !important;
}
.st-sunMoonThemeToggleBtn svg .sunRay6 {
  animation-delay: 0.29s !important;
}

/* checked = 明亮（太阳）；未勾选 = 暗黑（月亮） */
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {
  transform: translate(-50%, -50%) rotate(90deg);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {
  transform: translate(16px, -3px);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {
  transform: scale(0.55);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
  animation: themeSunRayShow 0.4s ease 0s 1 forwards;
}

@keyframes themeSunRayShow {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-sunMoonThemeToggleBtn svg,
  .st-sunMoonThemeToggleBtn svg .sunMoon,
  .st-sunMoonThemeToggleBtn svg mask > circle {
    transition: none;
  }
  .st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
    animation: none;
    transform: scale(1);
  }
}