@import "tailwindcss";

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

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .transition-custom {
    transition: all 0.3s ease;
  }
  .icon-hover-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .icon-hover-scale:hover {
    transform: scale(1.15) rotate(5deg);
  }
  .icon-hover-glow {
    transition: all 0.3s ease;
    position: relative;
  }
  .icon-hover-glow:hover {
    filter: drop-shadow(0 0 8px currentColor);
  }
  .card-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .card-hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  .card-hover-lift:active {
    transform: translateY(-2px) scale(0.98);
  }
  .skill-tag-hover {
    transition: all 0.2s ease;
  }
  .skill-tag-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  .will-change-transform {
    will-change: transform;
  }
  .backface-hidden {
    backface-visibility: hidden;
  }
  .gpu-accelerated {
    transform: translateZ(0);
  }
  
  /* 头像优化 */
  .avatar-container img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
}

@layer components {
  :root {
    --primary: #3b82f6;
    --secondary: #10b981;
  }
}

@layer base {
  html {
    @apply transition-colors duration-300;
  }
  
  body {
    @apply transition-colors duration-300;
  }
  
  /* 深色模式变量 */
  :root {
    --primary: #3b82f6;
    --secondary: #10b981;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
  }
  
  .dark {
    --primary: #60a5fa;
    --secondary: #34d399;
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --border-color: #374151;
  }
  
  /* 平滑过渡效果 - 只对颜色变化应用过渡，减少延迟 */
  * {
    @apply transition-colors duration-75;
  }
  
  /* 主题切换特殊过渡 - 进一步减少延迟 */
  html {
    transition: background-color 0.15s ease-out, color 0.05s ease-out;
  }
  
  body {
    transition: background-color 0.15s ease-out, color 0.05s ease-out;
  }
  
  /* 为需要动画的元素单独设置 */
  .card-hover-lift,
  .skill-tag-hover,
  #theme-toggle,
  .avatar-container,
  button,
  a {
    @apply transition-all duration-300 ease-out;
  }
  
  /* 主题切换图标特殊动画 */
  #theme-toggle svg {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }
  
  /* 图标切换时的光晕效果 */
  #theme-toggle svg[style*="opacity: 1"] {
    filter: drop-shadow(0 0 8px currentColor);
  }
  
  .bg-primary\/20 {
    background-color: rgb(59 130 246 / 0.2);
  }
  
  .text-primary {
    color: var(--primary);
  }
  
  .bg-primary {
    background-color: var(--primary);
  }
  
  .text-secondary {
    color: var(--secondary);
  }
  
  .bg-secondary {
    background-color: var(--secondary);
  }
  
  .bg-dark {
    background-color: var(--bg-primary);
  }
  
  /* 触摸体验优化 */
  @media (hover: none) and (pointer: coarse) {
    .card-hover-lift:hover {
      transform: none;
    }
    
    .card-hover-lift:active {
      transform: scale(0.98);
    }
    
    .skill-tag-hover:hover {
      transform: none;
    }
    
    .skill-tag-hover:active {
      transform: scale(0.95);
    }
  }
}