/* ============================================================
   clickfx.css —— 点击特效的样式层。只管「长什么样」，
   何时生成、播第几帧全在 js/clickfx.js 里。

   两类特效共用 .click-fx 这个壳：
     css 类    ——  纯 CSS 动画，不需要任何图片，开箱就能用
     sprite 类 ——  精灵表逐帧，尺寸和 background-position 由 JS 写
   ============================================================ */

/* 壳：固定定位到点击点，自己居中，绝不吃鼠标事件。
   z-index 要压过顶栏(3)和颗粒层(2)，否则点导航时特效被盖住。 */
.click-fx {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 60;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* ---------- 内置特效：涟漪 + 四芒星 ---------- */
/* 用站里现成的 --gold 和品牌菱形语言，不引入新视觉元素。
   一圈细环往外散，中心的菱形闪一下就收——克制，不抢内容。 */

.click-fx--ripple {
  width: 34px; height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  animation: cfx-ring 560ms cubic-bezier(.22, .61, .36, 1) forwards;
}

.click-fx--ripple::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px;
  background: var(--gold);
  animation: cfx-star 440ms ease-out forwards;
}

/* 第二圈：慢半拍、更淡，两圈错开才有「水面」的感觉 */
.click-fx--ripple::after {
  content: "";
  position: absolute; inset: -7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: .45;
  animation: cfx-ring2 620ms cubic-bezier(.22, .61, .36, 1) 60ms forwards;
}

@keyframes cfx-ring {
  from { transform: translate(-50%, -50%) scale(.34); opacity: .95; }
  to   { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes cfx-ring2 {
  from { transform: scale(.5); opacity: .45; }
  to   { transform: scale(1.35); opacity: 0; }
}

@keyframes cfx-star {
  0%   { transform: rotate(45deg) scale(0); opacity: 0; }
  35%  { transform: rotate(45deg) scale(1); opacity: .95; }
  100% { transform: rotate(45deg) scale(.2); opacity: 0; }
}

/* ---------- 精灵表特效 ---------- */
/* 宽高、backgroundImage、backgroundSize 全由 JS 按配置写进 style，
   这里只定死不该由 JS 管的部分。 */
.click-fx--sprite {
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* 逐帧播完后的淡出，JS 需要时才挂上 */
.click-fx--fade {
  animation: cfx-fade var(--cfx-fade, 400ms) ease-out forwards;
}

@keyframes cfx-fade {
  to { opacity: 0; }
}

/* 开了系统「减少动态效果」就整个不出现。
   JS 里也判了一次，这里是双保险——万一有人手动调 ClickFX.set()。 */
@media (prefers-reduced-motion: reduce) {
  .click-fx { display: none !important; }
}

/* ============================================================
   顶栏切换器：关 / 雨幕 / 拉普拉斯 / 维尔汀
   结构由 js/clickfx.js 注入到 .head-row，8 个页面的 HTML 都不用改。
   滑块靠 --fx-x / --fx-w 定位，transform 和 width 同时过渡 = 滑过去。
   ============================================================ */

.fx-switch {
  --fx-x: 0px;
  --fx-w: 0px;
  --fx-o: 1;                 /* 当前皮肤不在这四段里时置 0，把滑块藏掉 */
  position: relative;        /* 按钮的 offsetLeft 以它为基准 */
  margin-left: auto;         /* 顶到品牌名右侧 */
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-raise) 88%, transparent);
}

.fx-switch-pill {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: var(--fx-w);
  transform: translateX(var(--fx-x));
  opacity: var(--fx-o);
  background: var(--gold);
  border-radius: 999px;
  pointer-events: none;
}

.fx-seg {
  position: relative;
  z-index: 1;                /* 压在滑块上面，不然选中的字被金色盖住 */
  flex: none;
  padding: 5px 11px;
  border: 0;
  background: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
}

.fx-seg[aria-checked="true"] {
  color: var(--bg);          /* 金底上用底色字，对比度够 */
  font-weight: 600;
}

@media (min-width: 768px) {
  .fx-seg { font-size: 13px; padding: 5px 13px; }
}

/* 首帧定位完才加 --ready，否则滑块会从最左边滑进来 */
@media (prefers-reduced-motion: no-preference) {
  .fx-switch--ready .fx-switch-pill {
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                width .34s cubic-bezier(.22, .61, .36, 1),
                opacity .2s ease;
  }
  .fx-seg { transition: color .22s ease; }
}