/* 主题相关的 chrome 样式。颜色令牌由 render/theme.js 写到 :root 上，
   这里只放"结构随主题变"的部分：CRT 覆盖层、切换过渡、减少动态效果。 */

/* 首帧兜底：JS 还没跑起来时用深色，免得白屏闪一下。 */
:root {
  --gw-bg-page: #060912;
  --gw-bg-field: #0B1020;
  --gw-bg-field-out: #04060C;
  --gw-text-primary: #E7EDF9;
  --gw-panel-bg: #0E1526;
  --gw-panel-bg-alt: #121A2E;
  --gw-panel-border: #24314F;
  --gw-panel-radius: 10px;
  --gw-text-accent: #22D3EE;
  --gw-scanline-period: 0px;
  --gw-scanline-half: 0px;
  --gw-fx-scanline-a: 0;
}

/* -------------------------------------------------------------- CRT 覆盖层 */

/* 两处硬停靠（0 → X，然后 X → Y）保证是硬边而不是插值渐变 —— 这决定扫描线锐
   不锐。周期由 theme.js 钉成偶数个真实设备像素，所以不会摩尔纹。 */
[data-theme="crt"] .gw-fx {
  opacity: 1;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--gw-fx-scanline-a)) 0 var(--gw-scanline-half),
    rgba(0, 0, 0, 0) var(--gw-scanline-half) var(--gw-scanline-period)
  );
  animation: gw-crt-breathe 6.3s ease-in-out infinite;
}

[data-theme="crt"] .gw-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 78% 74% at 50% 50%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.9);
}

@keyframes gw-crt-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.965; }
}

[data-theme="neon"] .gw-fx {
  opacity: 1;
  background: radial-gradient(
    ellipse 88% 86% at 50% 50%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.34) 100%
  );
}

[data-theme="crt"] .gw-title { text-shadow: 0 0 8px currentColor; }

/* ------------------------------------------------------------ 切换时的过渡 */

/* 自定义属性本身不可过渡，但改 var 会改 background-color 等属性的 used value，
   而它们本来就可过渡 —— 所以临时挂类把过渡打开，220ms 后摘掉。 */
.gw-theme-anim,
.gw-theme-anim * {
  transition:
    background-color 160ms linear,
    color 160ms linear,
    border-color 160ms linear,
    box-shadow 160ms linear,
    opacity 160ms linear !important;
}

/* ---------------------------------------------------------- 减少动态效果 */

/* 用 data 属性而不是纯 @media：用户手动选「关闭」时不该被系统设置覆盖。
   扫描线保留（它是静态图案），关掉的是呼吸、脉冲、指示环旋转。 */
:root[data-reduce-motion="on"] .gw-fx { animation: none !important; }
:root[data-reduce-motion="on"] .gw-theme-anim,
:root[data-reduce-motion="on"] .gw-theme-anim * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="off"]) .gw-fx { animation: none !important; }
}