/* ==========================================================================
   Galaxy 组件层 · UI 元素风格参考 Uiverse Galaxy (uiverse-io/galaxy, MIT)
   所有效果均基于本站现有 CSS 变量实现，可整体开关（后台 → 插件 → Galaxy 特效）
   ========================================================================== */

body.gx-on .card {
  position: relative;
  isolation: isolate;
  transform: translateY(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s, border-color .35s;
  will-change: transform;
}
body.gx-on .card:hover {
  transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--accent) 16%, transparent),
    0 2px 6px rgba(20, 16, 32, .06);
}

/* 跟随鼠标的聚光 */
body.gx-on .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 26%, #ffffff),
    transparent 62%
  );
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity .3s ease;
}
body.gx-on .card:hover::after { opacity: .85; }

/* 顶部高光线 */
body.gx-on .card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
body.gx-on .card:hover::before { opacity: 1; }

/* 价格在悬停时轻微上浮，形成层次 */
body.gx-on .card:hover .price { transform: translateZ(18px); }
body.gx-on .price { transition: transform .35s cubic-bezier(.2, .7, .3, 1); }

/* ------------------------------ 按钮流光 ------------------------------ */
body.gx-on .btn-primary {
  position: relative;
  overflow: hidden;
}
body.gx-on .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 120%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.25, .6, .3, 1);
}
body.gx-on .btn-primary:hover::after { left: 140%; }

/* ------------------------------ 头像光环 ------------------------------ */
body.gx-on .avatar {
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 8px 26px color-mix(in srgb, var(--accent) 22%, transparent);
}
body.gx-on .avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 80%, #fff) 60deg,
    transparent 140deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gx-spin 6s linear infinite;
  pointer-events: none;
  opacity: .85;
}
@keyframes gx-spin { to { transform: rotate(360deg); } }

/* ------------------------------ 标签页滑动指示 ------------------------------ */
body.gx-on .tab { position: relative; }
body.gx-on .tab.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ------------------------------ 弹窗入场 ------------------------------ */
body.gx-on .sheet {
  animation: gx-pop .32s cubic-bezier(.2, .8, .3, 1.1);
}
@keyframes gx-pop {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* 触屏设备关闭 3D 倾斜，避免闪烁 */
@media (hover: none) {
  body.gx-on .card { transform: none !important; }
  body.gx-on .card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.gx-on .card,
  body.gx-on .card:hover,
  body.gx-on .avatar::after,
  body.gx-on .sheet { transform: none !important; animation: none !important; }
  body.gx-on .card::after { display: none; }
}