/*
# aurora.css
# Written by: 广州羲驭科技有限公司
# Description: Aurora gradient background effects for Vista Geometric Glass.
# Copyright: © 2024-2025 广州羲驭科技有限公司. All rights reserved. | 粤ICP备2025458335号
*/

/* ===== Aurora 极光渐变背景系统 ===== */

/* Aurora 容器 */
.aurora-container {
  position: fixed;
  inset: -10%;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

/* Aurora 层基础样式 */
.aurora-layer {
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Aurora 层 1 - 主色调 */
.aurora-layer-1 {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 217, 199, 0.25) 0%,
    rgba(59, 139, 199, 0.2) 30%,
    transparent 70%
  );
  animation-duration: 25s;
  animation-name: aurora-move-1;
}

/* Aurora 层 2 - 辅助色 */
.aurora-layer-2 {
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(63, 174, 42, 0.18) 0%,
    rgba(59, 139, 199, 0.15) 40%,
    transparent 70%
  );
  animation-duration: 35s;
  animation-name: aurora-move-2;
  animation-direction: reverse;
}

/* Aurora 层 3 - 强调色 */
.aurora-layer-3 {
  background: radial-gradient(
    ellipse at 70% 60%,
    rgba(255, 107, 0, 0.12) 0%,
    rgba(0, 217, 199, 0.1) 50%,
    transparent 70%
  );
  animation-duration: 45s;
  animation-name: aurora-move-3;
}

/* Aurora 层 4 - 细节层 */
.aurora-layer-4 {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(59, 139, 199, 0.12) 0%,
    rgba(0, 217, 199, 0.08) 60%,
    transparent 80%
  );
  animation-duration: 55s;
  animation-name: aurora-move-4;
  opacity: 0.4;
}

/* Aurora 动画关键帧 */
@keyframes aurora-move-1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(8%, 5%) rotate(5deg) scale(1.1);
  }
  50% {
    transform: translate(-5%, 8%) rotate(-3deg) scale(0.95);
  }
  75% {
    transform: translate(5%, -5%) rotate(3deg) scale(1.05);
  }
}

@keyframes aurora-move-2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-8%, -5%) rotate(-5deg);
  }
  66% {
    transform: translate(5%, 8%) rotate(5deg);
  }
}

@keyframes aurora-move-3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10%, 5%) scale(1.15);
  }
}

@keyframes aurora-move-4 {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-5%, 10%);
  }
  50% {
    transform: translate(10%, -5%);
  }
  75% {
    transform: translate(-10%, -10%);
  }
}

/* ===== 简化版 Aurora (性能优化) ===== */
.aurora-simple {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 217, 199, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(59, 139, 199, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(63, 174, 42, 0.08) 0%, transparent 60%);
  filter: blur(40px);
  animation: aurora-simple 30s ease-in-out infinite;
}

@keyframes aurora-simple {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1.1) rotate(2deg);
  }
  66% {
    transform: scale(0.95) rotate(-2deg);
  }
}

/* ===== Hero Aurora 专用样式 ===== */
.hero-aurora {
  position: absolute;
  inset: -30%;
  z-index: -1;
}

.hero-aurora .aurora-layer {
  opacity: 0.5;
}

/* ===== 卡片 Aurora 背景 ===== */
.aurora-card-bg {
  position: relative;
  overflow: hidden;
}

.aurora-card-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 217, 199, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(59, 139, 199, 0.12) 0%, transparent 50%);
  filter: blur(30px);
  animation: aurora-card-pulse 10s ease-in-out infinite;
  z-index: -1;
}

@keyframes aurora-card-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1) rotate(10deg);
    opacity: 1;
  }
}

/* ===== 动态 Aurora 颜色变体 ===== */
.aurora-teal {
  --aurora-primary: rgba(0, 217, 199, 0.2);
  --aurora-secondary: rgba(0, 180, 180, 0.15);
}

.aurora-blue {
  --aurora-primary: rgba(59, 139, 199, 0.2);
  --aurora-secondary: rgba(59, 120, 180, 0.15);
}

.aurora-purple {
  --aurora-primary: rgba(147, 51, 234, 0.15);
  --aurora-secondary: rgba(59, 130, 246, 0.12);
}

/* ===== 响应式 Aurora ===== */
@media (max-width: 768px) {
  .aurora-layer {
    filter: blur(40px);
  }

  .aurora-layer-1 {
    animation-duration: 20s;
  }

  .aurora-layer-2 {
    animation-duration: 28s;
  }

  .aurora-layer-3 {
    animation-duration: 35s;
  }
}

/* ===== 减少动画偏好设置 ===== */
@media (prefers-reduced-motion: reduce) {
  .aurora-layer,
  .aurora-simple,
  .aurora-card-bg::before {
    animation: none;
    transform: none !important;
  }
}

/* ===== 高对比度模式 ===== */
@media (prefers-contrast: high) {
  .aurora-layer {
    opacity: 0.4;
    filter: blur(30px);
  }
}