/* ============================================================
   visual.css —— 全站视觉增强层（2026-10-24）
   目标：在不改业务逻辑、不引入外链字体/图片的前提下，把观感从「干净」拉到「高级」：
   - 极光渐变背景（缓慢漂移，prefers-reduced-motion 自动停）
   - 玻璃拟态卡片 / 渐变描边 / 悬浮抬升 / 光晕
   - 统一入场动画（IntersectionObserver，见 visual.js）
   - 统一的 focus-visible、滚动条、选区颜色
   颜色一律取自既有设计令牌（紫 #8865D6 / 浅紫 #E9E9FF / 奶白 #FBFAF9 / 墨 #1A1A2E …），
   只允许它们的 rgba 变体；不新增品牌色。
   ============================================================ */

:root {
  --v-brand: var(--brand, #8865D6);
  --v-brand-soft: var(--brand-soft, #E9E9FF);
  --v-ink: var(--ink, #1A1A2E);
  --v-line: var(--line, #ECEAE8);
  --v-white: #FFFFFF;
  --v-glass: rgba(255, 255, 255, .72);
  --v-glass-strong: rgba(255, 255, 255, .88);
  --v-brand-a08: rgba(136, 101, 214, .08);
  --v-brand-a14: rgba(136, 101, 214, .14);
  --v-brand-a22: rgba(136, 101, 214, .22);
  --v-brand-a35: rgba(136, 101, 214, .35);
  --v-ink-a06: rgba(26, 26, 46, .06);
  --v-ink-a12: rgba(26, 26, 46, .12);
  --v-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. 极光背景（只铺在页面最底层，不影响点击） ---------- */
body {
  position: relative;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, var(--v-brand-a14), transparent 62%),
    radial-gradient(34vmax 34vmax at 86% 8%, var(--v-brand-a08), transparent 60%),
    radial-gradient(46vmax 46vmax at 78% 88%, var(--v-brand-a08), transparent 64%),
    radial-gradient(30vmax 30vmax at 8% 86%, var(--v-brand-a14), transparent 60%);
  filter: blur(6px);
  animation: v-aurora 36s var(--v-ease) infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(251, 250, 249, .2) 38%, rgba(251, 250, 249, .55));
  mix-blend-mode: normal;
}
@keyframes v-aurora {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02) rotate(-.6deg); }
  50%  { transform: translate3d(1.2%, 1.6%, 0) scale(1.05) rotate(.4deg); }
  100% { transform: translate3d(-.6%, 1.2%, 0) scale(1.03) rotate(-.3deg); }
}

/* ---------- 2. 玻璃卡 / 渐变描边 / 悬浮抬升 ---------- */
.v-glass {
  background: var(--v-glass);
  -webkit-backdrop-filter: saturate(1.25) blur(14px);
  backdrop-filter: saturate(1.25) blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 44px -22px var(--v-ink-a12),
    0 8px 30px var(--v-ink-a06);
}
.v-halo {
  position: relative;
}
.v-halo::after {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--v-brand-a35), transparent 40%, transparent 60%, var(--v-brand-a22));
  filter: blur(10px);
  opacity: .55;
  transition: opacity .35s var(--v-ease);
}
.v-halo:hover::after { opacity: 1; }

.v-lift {
  transition: transform .35s var(--v-ease), box-shadow .35s var(--v-ease), border-color .35s var(--v-ease);
  will-change: transform;
}
.v-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -26px var(--v-brand-a35), 0 10px 30px var(--v-ink-a06);
  border-color: var(--v-brand-a22);
}

/* ---------- 3. 按钮光带（只加一层扫光，不改按钮尺寸） ---------- */
.v-sheen { position: relative; overflow: hidden; isolation: isolate; }
.v-sheen::before {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: -35%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg) translateX(-160%);
  pointer-events: none;
}
.v-sheen:hover::before { animation: v-sheen 1.05s var(--v-ease) forwards; }
@keyframes v-sheen {
  to { transform: skewX(-18deg) translateX(560%); }
}

/* ---------- 4. 入场动画（由 visual.js 给 [data-reveal] 加 .v-in） ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px) scale(.995);
  transition: opacity .6s var(--v-ease), transform .6s var(--v-ease);
  transition-delay: var(--v-delay, 0ms);
}
[data-reveal].v-in { opacity: 1; transform: none; }

/* ---------- 5. 统一细节：焦点环 / 选区 / 滚动条 ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--v-brand);
  outline-offset: 2px;
  border-radius: inherit;
}
::selection { background: var(--v-brand-a22); color: var(--v-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--v-brand-a22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--v-brand-a22), var(--v-brand-a35));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 6. 小元素：渐变文字 / 光点 / 呼吸光晕 ---------- */
.v-grad {
  background: linear-gradient(120deg, var(--v-ink) 8%, var(--v-brand) 52%, var(--v-ink) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: v-grad-move 9s var(--v-ease) infinite alternate;
}
@keyframes v-grad-move { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.v-pulse { position: relative; }
.v-pulse::after {
  content: "";
  position: absolute; inset: -6px; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--v-brand-a35);
  animation: v-pulse 2.8s var(--v-ease) infinite;
  pointer-events: none;
}
@keyframes v-pulse {
  0% { box-shadow: 0 0 0 0 var(--v-brand-a35); opacity: .9; }
  70% { box-shadow: 0 0 0 14px rgba(136, 101, 214, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(136, 101, 214, 0); opacity: 0; }
}

/* ---------- 7. 减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .v-grad { animation: none; }
  .v-pulse::after { animation: none; }
  .v-sheen:hover::before { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .v-lift:hover { transform: none; }
}

/* ---------- 8. 手机端降级：省掉重模糊/重阴影，保证滚动流畅 ---------- */
@media (max-width: 700px) {
  body::before { filter: none; animation-duration: 60s; }
  .v-glass { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .v-halo::after { filter: blur(7px); opacity: .4; }
}

/* ---------- 9. 鼠标跟随光斑（配合 .v-lift/.v-spot） ---------- */
.v-spot { position: relative; isolation: isolate; }
.v-spot::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--v-mx, 50%) var(--v-my, 50%), var(--v-brand-a14), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--v-ease);
  pointer-events: none;
}
.v-spot:hover::before { opacity: 1; }
.v-spot > * { position: relative; z-index: 1; }

/* ---------- 10. 装饰光斑（纯 CSS，放一个空 span/div 即可，不挡点击） ---------- */
.v-orb {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--v-brand-a22), transparent 66%);
  filter: blur(22px);
  opacity: .85;
  z-index: 0;
}
.v-orb.sm { width: 140px; height: 140px; opacity: .7; }
.v-orb.soft { background: radial-gradient(circle, var(--v-brand-a08), transparent 68%); }

/* ---------- 11. 头像 / 圆形控件的渐变光环 ---------- */
.v-ring { position: relative; }
.v-ring::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  border: 1px solid var(--v-brand-a35);
  opacity: .9;
  pointer-events: none;
}
.v-ring:hover::after { border-color: var(--v-brand); }

/* ---------- 12. 极细网格底纹（light 装饰，页面自己控制尺寸/遮罩） ---------- */
.v-grid-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--v-brand-a08) 1px, transparent 1px),
    linear-gradient(90deg, var(--v-brand-a08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #FFFFFF 0%, transparent 64%);
  mask-image: radial-gradient(120% 120% at 100% 0%, #FFFFFF 0%, transparent 64%);
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .v-ring::after { transition: none; }
}