@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS变量定义 */
:root {
  /* 主色调 - 金色系 */
  --gold-primary: #D4AF37;
  --gold-dark: #A67C00;
  --gold-light: #F2D23D;
  --gold-shadow: rgba(212, 175, 55, 0.5);
  --gold-transparent: rgba(212, 175, 55, 0.1);
  
  /* 背景色 */
  --bg-dark: #0A0A14;
  --bg-deeper: #050508;
  --bg-card: rgba(10, 10, 20, 0.8);
  
  /* 文字颜色 */
  --text-light: #E0E0E0;
  --text-silver: #A0A0A0;
  --text-dark: #606060;
  
  /* 状态颜色 */
  --success-color: #10B981;
  --error-color: #EF4444;
  --warning-color: #F59E0B;
  --info-color: #3B82F6;
  
  /* 间距变量 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* 边框圆角 */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  
  /* 动画持续时间 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  /* 字体大小 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;
}

@layer base {
  /* 重置样式 */
  body {
    @apply bg-mystical-deeper text-mystical-light font-sans overflow-x-hidden min-h-screen;
    background-image: radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
                     radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
    scroll-behavior: smooth;
  }
  
  /* 确保所有元素继承box-sizing */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 优化链接样式 */
  a {
    @apply text-mystical-gold hover:text-mystical-gold-light transition-colors duration-300;
  }
  
  /* 优化按钮基础样式 */
  button {
    @apply focus:outline-none focus:ring-2 focus:ring-mystical-gold/50;
  }
  
  /* 移除默认输入框样式 */
  input, select, textarea {
    @apply bg-transparent border-none;
  
  /* 标题样式 */
  h1, h2, h3, h4, h5, h6 {
    @apply text-mystical-gold font-mystical tracking-wide;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl mb-6;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl mb-5;
  }
  
  /* 增强表单元素样式 */
  input, select, textarea {
    @apply transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-mystical-gold/50;
  }
  
  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-mystical-deeper;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-mystical-gold/30 rounded-full hover:bg-mystical-gold/50 transition-colors;
  }
  
  /* 基础动画 */
  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
  }
  
  @keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
  }
  
  @keyframes glow {
    0% { box-shadow: 0 0 5px var(--gold-shadow); }
    100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.5); }
  }
  
  @keyframes rotate-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes energyFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  
  @keyframes energyBorder {
    0%, 100% { border-color: var(--gold-dark); }
    50% { border-color: var(--gold-primary); }
  }
  
  @keyframes mysticalPulse {
    0% { box-shadow: 0 0 10px var(--gold-shadow); }
    50% { box-shadow: 0 0 25px var(--gold-primary), 0 0 40px var(--gold-shadow); }
    100% { box-shadow: 0 0 10px var(--gold-shadow); }
  }
}

@layer components {
  /* 自定义组件 */
  .mystical-card {
    @apply bg-gradient-to-br from-mystical-dark to-mystical-deeper border border-mystical-darkGold rounded-lg p-6 shadow-lg relative overflow-hidden backdrop-blur-sm group;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .mystical-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.2);
  }
  
  .mystical-input {
    @apply w-full px-4 py-3 bg-mystical-dark border border-mystical-darkGold rounded-md text-mystical-light placeholder-mystical-silver/50 focus:outline-none focus:ring-2 focus:ring-mystical-gold/50 transition-all duration-300;
    background-image: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
    background-size: 200% 100%;
  }
  
  .mystical-input:focus {
    background-position: 100% 0;
    border-color: var(--gold-primary);
  }
  
  .mystical-button {
    @apply px-6 py-3 bg-mystical-gold text-mystical-deeper font-medium rounded-md hover:bg-mystical-darkGold transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg active:translate-y-0 relative overflow-hidden;
    background-image: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-light) 50%, var(--gold-primary) 100%);
    background-size: 200% 100%;
  }
  
  .mystical-button:hover {
    background-position: 100% 0;
    animation: mysticalPulse 2s infinite;
  }
  
  .mystical-button:disabled {
    @apply opacity-50 cursor-not-allowed hover:-translate-y-0;
    animation: none;
  }
  
  .mystical-select {
    @apply w-full px-4 py-3 bg-mystical-dark border border-mystical-darkGold rounded-md text-mystical-light focus:outline-none focus:ring-2 focus:ring-mystical-gold/50 transition-all duration-300 appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0Q0QUYzNyIgZmlsbC1vcGFjaXR5PSIwLjgiPjxwYXRoIGQ9Ik0xLjUgMGw1IDUgNS01eiIvPjwvZz48L3N2Zz4=')] bg-right bg-no-repeat bg-[length:12px_12px] pr-10;
    background-image: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%),
                     url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI0Q0QUYzNyIgZmlsbC1vcGFjaXR5PSIwLjgiPjxwYXRoIGQ9Ik0xLjUgMGw1IDUgNS01eiIvPjwvZz48L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: 95% center, 0 0;
    background-size: 12px 12px, 200% 100%;
  }
  
  .mystical-select:focus {
    background-position: 95% center, 100% 0;
    border-color: var(--gold-primary);
  }
  
  .mystical-label {
    @apply block text-mystical-gold mb-2 text-sm font-medium transition-all duration-300 transform origin-left;
  }
  
  .form-group {
    @apply mb-6 relative;
  }
  
  .form-group.active .mystical-label {
    @apply text-mystical-gold-light transform -translate-y-6 scale-80;
  }
  
  .form-group.active .mystical-input,
  .form-group.active .mystical-select {
    @apply border-mystical-gold ring-1 ring-mystical-gold/30;
    animation: energyBorder 2s infinite;
  }
  
  .form-group.filled .mystical-input,
  .form-group.filled .mystical-select {
    @apply border-mystical-silver/70;
  }
  
  .field-error {
    @apply text-red-500 text-sm mt-1 flex items-center gap-1 animate-shake;
  }
  
  .energy-particle {
    @apply absolute rounded-full bg-mystical-gold/30 blur-md animate-float;
  }
  
  .energy-line {
    @apply absolute bg-gradient-to-r from-transparent via-mystical-gold/50 to-transparent h-[1px] blur-[1px];
    animation: energyFlow 3s infinite linear;
    background-size: 200% 100%;
  }
  
  .connection-line {
    @apply absolute bg-mystical-gold/30 h-[2px] blur-sm;
    background-image: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    animation: energyFlow 2s infinite linear;
  }
  
  .bagua-decoration {
    @apply absolute w-32 h-32 rounded-full border border-mystical-gold/30 animate-rotate-slow opacity-50;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
  }
  
  .progress-step {
    @apply w-10 h-10 rounded-full border-2 border-mystical-darkGold flex items-center justify-center text-mystical-light font-medium transition-all duration-300 relative z-10;
  }
  
  .progress-step::after {
    content: '';
    @apply absolute inset-0 rounded-full bg-mystical-gold/20 scale-0 transition-transform duration-300;
  }
  
  .progress-step:hover::after {
    @apply scale-110;
  }
  
  .progress-step.active {
    @apply bg-mystical-gold text-mystical-deeper border-mystical-gold shadow-lg;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
  
  .progress-step.completed {
    @apply bg-green-700 border-green-700 text-white;
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
  }
  
  /* 新增组件 */
  .mystical-divider {
    @apply h-[1px] w-full bg-gradient-to-r from-transparent via-mystical-gold/50 to-transparent my-8;
  }
  
  .mystical-tooltip {
    @apply absolute invisible opacity-0 bg-mystical-dark border border-mystical-darkGold rounded-md p-2 text-xs text-mystical-light transition-all duration-300 z-50 whitespace-nowrap;
  }
  
  .has-tooltip:hover .mystical-tooltip {
    @apply visible opacity-100 transform translate-y-[-8px];
  }
  
  .mystical-alert {
    @apply p-4 rounded-md border mb-4;
  }
  
  .mystical-alert-info {
    @apply border-blue-500 bg-blue-900/20 text-blue-300;
  }
  
  .mystical-alert-success {
    @apply border-green-500 bg-green-900/20 text-green-300;
  }
  
  .mystical-alert-warning {
    @apply border-yellow-500 bg-yellow-900/20 text-yellow-300;
  }
  
  .mystical-alert-error {
    @apply border-red-500 bg-red-900/20 text-red-300;
  }
}

@layer utilities {
  /* 工具类 */
  .content-auto {
    content-visibility: auto;
  }
  
  /* 文本阴影效果 */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  .text-shadow-glow {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
  }
  
  .text-shadow-strong {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.6);
  }
  
  /* 发光效果 */
  .glow {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
  }
  
  .glow-strong {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.7), 0 0 30px rgba(212, 175, 55, 0.5);
  }
  
  .glow-blue {
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5), 0 0 20px rgba(96, 165, 250, 0.3);
  }
  
  .glow-green {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
  }
  
  /* 毛玻璃效果 */
  .bg-glass {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .bg-glass-light {
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  .bg-glass-dark {
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* 动画延迟 */
  .animate-delay-100 {
    animation-delay: 100ms;
  }
  
  .animate-delay-200 {
    animation-delay: 200ms;
  }
  
  .animate-delay-300 {
    animation-delay: 300ms;
  }
  
  .animate-delay-400 {
    animation-delay: 400ms;
  }
  
  .animate-delay-500 {
    animation-delay: 500ms;
  }
  
  .animate-delay-700 {
    animation-delay: 700ms;
  }
  
  .animate-delay-1000 {
    animation-delay: 1000ms;
  }
  
  /* 过渡效果 */
  .transition-all-300 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .transition-all-500 {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  /* 交互效果 */
  .scale-hover {
    transition: transform 0.3s ease;
  }
  
  .scale-hover:hover {
    transform: scale(1.05);
  }
  
  .scale-hover-slight {
    transition: transform 0.3s ease;
  }
  
  .scale-hover-slight:hover {
    transform: scale(1.02);
  }
  
  .slide-up-hover {
    transition: transform 0.3s ease;
  }
  
  .slide-up-hover:hover {
    transform: translateY(-5px);
  }
  
  .slide-up-hover-slight {
    transition: transform 0.3s ease;
  }
  
  .slide-up-hover-slight:hover {
    transform: translateY(-2px);
  }
  
  /* 能量边框效果 */
  .energy-border {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
  }
  
  .energy-border::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-light), var(--gold-primary));
    background-size: 200% 100%;
    animation: energyBorder 3s infinite linear;
    z-index: -1;
  }
  
  .energy-border-blue {
    position: relative;
    border: 1px solid transparent;
    background-clip: padding-box;
  }
  
  .energy-border-blue::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-light), var(--gold-primary));
    background-size: 200% 100%;
    animation: energyBorder 3s infinite linear;
    z-index: -1;
  }
  
  /* 布局工具 */
  .content-fit {
    width: fit-content;
  }
  
  .height-fit {
    height: fit-content;
  }
  
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  
  .aspect-video {
    aspect-ratio: 16 / 9;
  }
  
  /* 滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-hidden {
    scrollbar-width: none;
  }
  
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-custom {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-primary) transparent;
  }
  
  .scrollbar-custom::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-custom::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: var(--gold-primary);
    border-radius: 3px;
  }
  
  /* 视差效果 */
  .parallax {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  .parallax-layer {
    transform: translateZ(var(--parallax-depth));
  }
}