/* =============================================================
   Aurora AI — 背景极光 与 虹彩液态金属光球
   动效原则：自然、克制、流畅。周期长（>12s）、幅度小、无闪烁。
   ============================================================= */

/* ---------------- 1. 极光背景 ---------------- */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-base-2) 100%);
}

.aurora-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .60;
  will-change: transform;
  transform: translateZ(0);
}

.blob-a {
  width: 320px; height: 320px;
  top: -80px; left: -70px;
  background: radial-gradient(circle at 35% 35%, var(--aurora-lavender), rgba(201,182,255,0) 70%);
  animation: drift-a 22s var(--ease-standard) infinite alternate;
}
.blob-b {
  width: 280px; height: 280px;
  top: 120px; right: -90px;
  background: radial-gradient(circle at 40% 40%, var(--aurora-blue), rgba(168,216,255,0) 70%);
  animation: drift-b 26s var(--ease-standard) infinite alternate;
}
.blob-c {
  width: 300px; height: 300px;
  bottom: 40px; left: -60px;
  background: radial-gradient(circle at 50% 50%, var(--aurora-pink), rgba(255,209,232,0) 70%);
  animation: drift-c 24s var(--ease-standard) infinite alternate;
}
.blob-d {
  width: 220px; height: 220px;
  bottom: -60px; right: -40px;
  background: radial-gradient(circle at 50% 50%, var(--aurora-mint), rgba(180,239,228,0) 70%);
  opacity: .42;
  animation: drift-a 30s var(--ease-standard) infinite alternate-reverse;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, 30px, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-46px, 36px, 0) scale(1); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(36px, -28px, 0) scale(1.1); }
}

/* 极光之上的柔和颗粒，消除渐变条纹 */
.aurora-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124,92,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}

/* ---------------- 2. 虹彩液态金属光球 ---------------- */
.orb {
  --orb-size: 180px;
  position: relative;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  flex: 0 0 auto;
  isolation: isolate;
  background:
    /* 高光 */
    radial-gradient(circle at 32% 26%, #FFFFFF 0%, rgba(255,255,255,0) 42%),
    /* 底部反光 */
    radial-gradient(circle at 70% 82%, rgba(255,185,220,.95) 0%, rgba(255,185,220,0) 52%),
    /* 虹彩本体 */
    conic-gradient(from 210deg,
      #B49BFF 0deg, #8FCFFF 68deg, #9BE8D9 132deg,
      #FFB9DC 200deg, #C9A8FF 268deg, #B49BFF 360deg);
  box-shadow:
    inset -12px -16px 34px rgba(112, 80, 220, .42),
    inset 10px 12px 26px rgba(255, 255, 255, .82),
    0 20px 48px rgba(124, 92, 255, .34),
    0 6px 16px rgba(168, 216, 255, .42);
  filter: saturate(1.32) contrast(1.04) blur(.2px);
  animation: orb-spin 24s linear infinite, orb-breathe 6.5s var(--ease-standard) infinite;
}

/* 液态流动层 */
.orb::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: conic-gradient(from 40deg,
    rgba(255,255,255,.0) 0deg, rgba(255,255,255,.55) 60deg,
    rgba(255,255,255,0) 120deg, rgba(255,255,255,.35) 200deg,
    rgba(255,255,255,0) 280deg, rgba(255,255,255,.45) 340deg);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: orb-swirl 14s linear infinite;
}

/* 镜面点光 */
.orb::after {
  content: "";
  position: absolute;
  top: 14%; left: 20%;
  width: 34%; height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.96), rgba(255,255,255,0) 70%);
  filter: blur(2px);
  transform: rotate(-18deg);
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}
@keyframes orb-swirl {
  to { transform: rotate(-360deg); }
}
@keyframes orb-breathe {
  0%, 100% { box-shadow:
      inset -10px -14px 30px rgba(120,90,220,.38),
      inset 10px 12px 26px rgba(255,255,255,.80),
      0 20px 48px rgba(124,92,255,.32),
      0 6px 16px rgba(168,216,255,.40); }
  50% { box-shadow:
      inset -10px -14px 30px rgba(120,90,220,.44),
      inset 10px 12px 26px rgba(255,255,255,.86),
      0 26px 62px rgba(124,92,255,.42),
      0 8px 22px rgba(168,216,255,.52); }
}

/* 光球光晕（外层扩散环） */
.orb-halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,255,.22) 0%, rgba(168,216,255,.10) 45%, rgba(168,216,255,0) 70%);
  animation: halo-pulse 6.5s var(--ease-standard) infinite;
  pointer-events: none;
}
@keyframes halo-pulse {
  0%, 100% { transform: scale(.96); opacity: .75; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* 尺寸档位 */
.orb--sm { --orb-size: 84px; }
.orb--md { --orb-size: 120px; }
.orb--lg { --orb-size: 168px; }
.orb--xl { --orb-size: 208px; }

/* ---------------- 3. 语音聆听态：光球脉冲 ---------------- */
.orb--listening {
  animation: orb-spin 24s linear infinite, orb-listen 1.8s var(--ease-standard) infinite;
}
@keyframes orb-listen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* ---------------- 4. 音频波形 ---------------- */
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
}
.waveform i {
  display: block;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand-grad);
  opacity: .85;
  animation: wave 1.1s var(--ease-standard) infinite;
}
.waveform i:nth-child(1) { height: 30%; animation-delay: -.9s; }
.waveform i:nth-child(2) { height: 62%; animation-delay: -.7s; }
.waveform i:nth-child(3) { height: 92%; animation-delay: -.5s; }
.waveform i:nth-child(4) { height: 54%; animation-delay: -.3s; }
.waveform i:nth-child(5) { height: 78%; animation-delay: -.1s; }
.waveform i:nth-child(6) { height: 42%; animation-delay: -.8s; }
.waveform i:nth-child(7) { height: 86%; animation-delay: -.6s; }
.waveform i:nth-child(8) { height: 58%; animation-delay: -.4s; }
.waveform i:nth-child(9) { height: 34%; animation-delay: -.2s; }
@keyframes wave {
  0%, 100% { transform: scaleY(.55); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
.waveform--idle i { animation-play-state: paused; transform: scaleY(.24); opacity: .35; }

/* ---------------- 5. 入场动画 ---------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise-in var(--t-slow) var(--ease-out) both; }
.rise-1 { animation-delay: 40ms; }
.rise-2 { animation-delay: 90ms; }
.rise-3 { animation-delay: 140ms; }
.rise-4 { animation-delay: 190ms; }
.rise-5 { animation-delay: 240ms; }