/* ===== Overlay container ===== */
#themeTransition.themeTransition{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  isolation: isolate; /* 让混合/滤镜更可控 */
}

/* 被 JS 加上 is-active 才显示 */
#themeTransition.themeTransition.is-active{
  opacity: 1;
}

/* ===== Moon sprite ===== */
.themeTransition__moon{
  position: absolute;
  left: 50%;
  top: -12vh;                 /* “界面上方” */
  width: min(38vmin, 420px);  /* 月亮最大尺寸 */
  aspect-ratio: 1 / 1;
  transform: translateX(-50%) scale(var(--moon-scale, .12));
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
  opacity: 0;

  background: url("./image/moon.png") center / contain no-repeat;
  filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
}

/* ===== Screen flash / dim layer (pseudo) ===== */
#themeTransition.themeTransition::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  will-change: opacity, filter;
}

/* 防止切换时页面滚动动画乱入（你 JS 有加 is-transitioning） */
html.is-transitioning{
  scroll-behavior: auto !important;
}

/* =========================================================
   D A R K  ->  L I G H T
   moon: 上方小 -> 大
   screen: 过曝 -> 恢复
   ========================================================= */
body.theme-transitioning-to-light #themeTransition.themeTransition::before{
  /* 白色过曝层 */
  background: #fff;
  animation: t_flash_to_light 1400ms ease-in-out both;
}

body.theme-transitioning-to-light #themeTransition .themeTransition__moon{
  animation: t_moon_expand_to_light 1000ms ease-in-out both;
}

/* moon：小 -> 大 + 变亮 + 最后淡出（让界面显出来） */
@keyframes t_moon_expand_to_light{
  0%{
    opacity: 0;
    transform: translate(
      calc(-50% + var(--tt-start-dx, 0px)),
      calc(0px + var(--tt-start-dy, 0px))
    ) scale(.50);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  12%{ opacity: 1; }
  55%{
    transform: translate(-50%, 49vh) scale(3.35); 
    filter: brightness(1.2) drop-shadow(0 0 22px rgba(255,255,255,.85));
  }
  78%{
    transform: translate(-50%, 49vh) scale(4.10);
    filter: brightness(1.5) drop-shadow(0 0 10px rgba(255,255,255,.35));
    opacity: .88;
  }
  82%{
    transform: translate(-50%, 49vh) scale(4.10);
    filter:
      brightness(2.8)
      contrast(.68)
      saturate(.5)
      blur(2.2px)
      drop-shadow(0 0 34px rgba(255,255,255,.95));
    opacity: 0;
  }
  100%{
    opacity: 0;
    transform: translate(-50%, 49vh) scale(4.10);
    filter:
      brightness(2.4)
      contrast(.72)
      saturate(.55)
      blur(2.4px)
      drop-shadow(0 0 36px rgba(255,255,255,.9));
  }
}


/* 整屏过曝：先升白，再回落 */
@keyframes t_flash_to_light{
  0%{ opacity: 0; filter: brightness(1); }
  20%{ opacity: 0.08; }
  42%{ opacity: .96; filter: brightness(1.33); }
  62%{ opacity: 1; filter: brightness(1.35); }
  76%{ opacity: .86; filter: brightness(1.2); }
  90%{ opacity: .48; filter: brightness(1.08); }
  100%{ opacity: 0; filter: brightness(1); }
}

/* =========================================================
   L I G H T  ->  D A R K
   screen: 先变暗（压黑）
   moon: 上方小光点开始“变亮”（更像点亮而不是放大）
   ========================================================= */
body.theme-transitioning-to-dark #themeTransition.themeTransition::before{
  background: #000;
  animation: t_dim_to_dark 2400ms ease-in-out both;
}

body.theme-transitioning-to-dark #themeTransition .themeTransition__moon{
  left: 50%;
  top: 50%;
  animation: t_moon_spark_to_dark 2400ms ease-in-out both;
}

/* Handoff: fade in persistent moon near the end of light -> dark */
body.theme-transitioning-to-dark .bg-moon{
  animation: t_bg_moon_handoff 2400ms ease-in-out both;
}

/* 先压黑，再稍微回一点（让暗色界面正常对比度回归） */
@keyframes t_dim_to_dark{
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  85%  { opacity: .60; }
  100% { opacity: 0; }
}

@keyframes t_bg_moon_handoff{
  0%   { opacity: 0; }
  74%  { opacity: 0; }
  88%  { opacity: .55; }
  100% { opacity: var(--moon-opacity, .92); }
}

/* moon：小光点出现 -> 变亮（主要靠 brightness + glow），尺寸变化很小 */
@keyframes t_moon_spark_to_dark{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.01);
    filter: brightness(.05) drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  20%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05);
  }
  40%{
    opacity: .9;
    transform: translate(-50%, -50%) scale(0.5);
    filter: brightness(1.5) drop-shadow(0 0 30px rgba(255,255,255,.85));
  }
  60%{
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 34px rgba(255,255,255,.9));
  }
  80%{
    opacity: .95;
    transform: translate(
      calc(-50% + var(--tt-l2d-end-dx, 0px)),
      calc(-50% + var(--tt-l2d-end-dy, -35vh))
    ) scale(var(--tt-l2d-end-scale, .75));
    filter: brightness(1) drop-shadow(0 0 14px rgba(255,255,255,.45));
  }
  100%{
    opacity: 0;
    transform: translate(
      calc(-50% + var(--tt-l2d-end-dx, 0px)),
      calc(-50% + var(--tt-l2d-end-dy, -35vh))
    ) scale(var(--tt-l2d-end-scale, .75));
    filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
  }
}

/* ===== Optional: reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  body.theme-transitioning-to-dark #themeTransition.themeTransition::before,
  body.theme-transitioning-to-light #themeTransition.themeTransition::before,
  body.theme-transitioning-to-dark #themeTransition .themeTransition__moon,
  body.theme-transitioning-to-light #themeTransition .themeTransition__moon{
    animation: none !important;
  }
  #themeTransition.themeTransition{ opacity: 0 !important; }
}