/* ============================================================
 * 背景动效层 · 渐变流光 · 紫色主题
 * 性能策略：仅使用 transform/opacity（GPU 加速），30fps
 * 移动端（无精确指针）禁用交互
 * ============================================================ */

/* 自定义属性动画（Houdini @property，IE/旧内核降级） */
@property --haloX { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --haloY { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

/* ===== 容器层 ===== */
.effects {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  --base-bg: #fafaff;
}

/* ===== Layer 1：基础径向渐变（紫色光斑） ===== */
.layer-base {
  position: absolute; inset: -10%;
  background:
    radial-gradient(50% 35% at 20% 25%, rgba(168,85,247,.18) 0%, transparent 60%),
    radial-gradient(40% 30% at 80% 70%, rgba(236,72,153,.14) 0%, transparent 60%),
    radial-gradient(35% 30% at 50% 100%, rgba(99,102,241,.12) 0%, transparent 60%),
    linear-gradient(180deg, #faf9ff 0%, #f3f1ff 100%);
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  50%  { transform: translate3d(-3%,  2%,   0) scale(1.05); }
  100% { transform: translate3d(2%,   -3%,  0) scale(1.02); }
}

/* ===== Layer 2：极光锥（conic-gradient 旋转） ===== */
.layer-aurora {
  position: absolute;
  width: 120vmax; height: 120vmax;
  top: -30vmax; left: -10vmax;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(168, 85, 247, .08) 30deg,
    rgba(236, 72, 153, .06) 90deg,
    transparent 180deg,
    rgba(99, 102, 241, .07) 270deg,
    transparent 360deg
  );
  filter: blur(40px);
  animation: spin 60s linear infinite, hueShift 18s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .85;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes hueShift {
  0%, 100% { filter: blur(40px) hue-rotate(0deg); }
  50%      { filter: blur(50px) hue-rotate(30deg); }
}

/* ===== Layer 3：流动光带（多层错位） ===== */
.layer-ribbon {
  position: absolute; inset: 0;
  filter: blur(60px);
  opacity: .55;
}
.layer-ribbon::before,
.layer-ribbon::after {
  content: '';
  position: absolute;
  width: 80%; height: 80%;
  border-radius: 50%;
  filter: blur(30px);
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.4, 0, .6, 1);
}
.layer-ribbon::before {
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(168,85,247,.25) 0%, transparent 70%);
  animation-name: ribbon-a;
}
.layer-ribbon::after {
  bottom: -10%; right: -10%;
  background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 70%);
  animation-name: ribbon-b;
  animation-delay: -9s;
}
@keyframes ribbon-a {
  0%, 100% { transform: translate(0,0)    scale(1); }
  33%      { transform: translate(40vw, 20vh) scale(1.3); }
  66%      { transform: translate(20vw, 50vh) scale(.9); }
}
@keyframes ribbon-b {
  0%, 100% { transform: translate(0,0)    scale(1); }
  33%      { transform: translate(-30vw, -25vh) scale(1.2); }
  66%      { transform: translate(-50vw, 10vh)  scale(1.1); }
}

/* ===== Layer 4：鼠标光晕（追随式） ===== */
.layer-halo {
  position: absolute;
  top: 0; left: 0;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(168, 85, 247, .18) 0%,
    rgba(99, 102, 241, .10) 30%,
    transparent 70%);
  transform: translate3d(var(--haloX, 50%), var(--haloY, 30%), 0);
  opacity: 0;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
  filter: blur(20px);
  will-change: transform, opacity;
  mix-blend-mode: multiply;
}
.layer-halo.visible { opacity: 1; }

/* ===== Layer 5：网格点阵（点缀） ===== */
.layer-dots {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(99,102,241,.15) 1px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  opacity: .4;
  animation: dotsShift 30s linear infinite;
}
@keyframes dotsShift {
  to { background-position: 32px 32px; }
}

/* ===== 噪点纹理（高级感点睛） ===== */
.layer-noise {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}

/* ===== 移动端适配：禁用高开销动画 ===== */
@media (hover: none) {
  .layer-aurora,
  .layer-ribbon,
  .layer-dots {
    animation: none !important;
    opacity: .3;
  }
  .layer-halo { display: none; }
}

/* ===== 性能：可见性暂停 ===== */
.effects.paused .layer-base,
.effects.paused .layer-aurora,
.effects.paused .layer-ribbon::before,
.effects.paused .layer-ribbon::after,
.effects.paused .layer-dots {
  animation-play-state: paused !important;
}

/* ===== 暗色模式联动（保留兼容） ===== */
@media (prefers-color-scheme: dark) {
  .effects { --base-bg: #1a1530; }
  .layer-base {
    background:
      radial-gradient(50% 35% at 20% 25%, rgba(168,85,247,.20) 0%, transparent 60%),
      radial-gradient(40% 30% at 80% 70%, rgba(236,72,153,.15) 0%, transparent 60%),
      radial-gradient(35% 30% at 50% 100%, rgba(99,102,241,.15) 0%, transparent 60%),
      linear-gradient(180deg, #1a1530 0%, #0f0b22 100%);
  }
}

/* ===== 内容层需在动效之上 ===== */
body > * { position: relative; z-index: 1; }