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

/* 自定义样式 - 从 preview.html 提取 */
@layer base {
  body {
    @apply text-slate-800 antialiased relative;
    /* Warm Paper Background */
    background: linear-gradient(180deg,
      #fafaf9 0%,       /* Stone-50 */
      #f5f5f4 20%,      /* Stone-100 */
      #fafaf9 50%,
      #ffffff 100%
    );
    min-height: 100vh;
  }

  /* 暗色模式 -保持深邃但微调色调 */
  .dark body {
    @apply text-slate-200;
    background: linear-gradient(180deg,
      #1c1917 0%,       /* Stone-900 */
      #292524 20%,      /* Stone-800 */
      #1c1917 50%,
      #0c0a09 100%      /* Stone-950 */
    );
  }

  .dark .glass {
    background: rgba(41, 37, 36, 0.7); /* Stone-800 */
    border: 1px solid rgba(87, 83, 78, 0.5);
  }

  .dark .gradient-text {
    background: linear-gradient(135deg, #fbbf24 0%, #f87171 100%); /* Amber to Red */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* 暗色模式 hover-lift */
  .dark .hover-lift:hover {
    box-shadow: 0 12px 24px rgba(251, 191, 36, 0.15); /* Amber shadow */
  }

  /* 暗色模式图片占位符 */
  .dark .image-placeholder {
    background: linear-gradient(135deg, #78350f 0%, #7f1d1d 100%); /* Orange-900 to Red-900 */
  }
}

@layer components {
  /* 毛玻璃效果 */
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* 装饰色块 */
  .blob {
    @apply absolute filter blur-[80px] -z-10 opacity-60;
  }

  /* 渐变文字 - Warm Orange to Red/Pink */
  .gradient-text {
    background: linear-gradient(135deg, #ea580c 0%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* 悬浮动画 */
  .hover-lift {
    @apply transition-all duration-300 ease-in-out;
  }
  .hover-lift:hover {
    @apply -translate-y-1;
    box-shadow: 0 12px 24px rgba(234, 88, 12, 0.15); /* Orange shadow */
  }

  /* 暗色模式卡片基础 */
  .dark-card {
    @apply bg-white/80 border-stone-200/60;
  }
  .dark .dark-card {
    @apply bg-stone-800/60 border-stone-700/50;
  }

  /* 图片占位符 */
  .image-placeholder {
    background: linear-gradient(135deg, #fdba74 0%, #fca5a5 100%); /* Orange-300 to Red-300 */
    @apply relative overflow-hidden;
  }
  .image-placeholder::before {
    content: '';
    @apply absolute -top-1/2 -left-1/2 w-[200%] h-[200%];
    background: linear-gradient(
      45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 70%
    );
    animation: shimmer 3s infinite;
  }

  /* 回到顶部按钮 */
  .back-to-top {
    @apply fixed bottom-8 right-8 opacity-0 pointer-events-none transition-opacity duration-300;
  }
  .back-to-top.show {
    @apply opacity-100 pointer-events-auto;
  }

  /* 统计卡片渐变 */
  .stat-gradient-1 {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  }
  .stat-gradient-2 {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  }
  .stat-gradient-3 {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  }

  /* 标签云动画 */
  .tag-cloud span {
    animation: float 3s ease-in-out infinite;
  }
  .tag-cloud span:nth-child(2) { animation-delay: 0.5s; }
  .tag-cloud span:nth-child(3) { animation-delay: 1s; }
  .tag-cloud span:nth-child(4) { animation-delay: 1.5s; }
  .tag-cloud span:nth-child(5) { animation-delay: 2s; }

  /* 核心：自定义跳动动画 (Spring Animation) */
  .hover-jump {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease !important;
    will-change: transform;
  }

  .hover-jump:hover {
    transform: translateY(-8px) !important;
  }

  /* 适配移动端 */
  @media (max-width: 768px) {
    .hover-jump:hover {
      transform: translateY(-4px) !important;
    }
  }

  /* --- 达芬奇手稿风全局样式 (Davinci Manuscript Style) --- */

  /* 1. Mac 浅色终端风格代码块 (Mac Light Terminal) */
  .prose pre {
    background-color: #f8fafc !important; /* Slate-50 */
    border: 1px solid #e2e8f0 !important; /* Slate-200 */
    border-radius: 0.75rem !important;
    padding-top: 2.5rem !important; /* Space for Window Controls */
    position: relative;
    overflow-x: auto !important; /* Scrollable */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02), 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  }

  /* 暗色模式代码块 */
  .dark .prose pre {
    background-color: #1c1917 !important; /* Stone-900 */
    border: 1px solid #44403c !important; /* Stone-700 */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  /* Mac 窗口控制点 (Red/Yellow/Green Dots) */
  .prose pre::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #fca5a5; /* Soft Red */
    box-shadow: 1.25rem 0 0 #fcd34d, 2.5rem 0 0 #86efac; /* Yellow & Green */
    border: none !important; /* Override blueprint border */
  }

  .dark .prose pre::before {
    background-color: #ef4444; /* Red-500 */
    box-shadow: 1.25rem 0 0 #eab308, 2.5rem 0 0 #22c55e; /* Yellow-500 & Green-500 */
  }

  /* 移除旧的右下角装饰 */
  .prose pre::after {
    content: none !important;
  }

  /* 2. 便签风格引用块 (Sticky Note Blockquote) */
  .prose blockquote {
    background-color: rgba(255, 247, 237, 0.6); /* Orange-50/60 */
    border-left: 3px dashed #fdba74 !important; /* Orange-300 Dashed */
    border-radius: 2px 8px 8px 2px;
    font-style: italic;
    font-family: 'Noto Serif SC', serif;
    color: #57534e !important; /* Stone-600 */
    padding: 1rem 1.5rem !important;
    margin: 2rem 0 !important;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.02);
    transform: rotate(-0.5deg); /* Slight rotation for hand-placed feel */
  }

  /* 暗色模式引用块 */
  .dark .prose blockquote {
    background-color: rgba(41, 37, 36, 0.6); /* Stone-800/60 */
    border-left: 3px dashed #92400e !important; /* Amber-800 Dashed */
    color: #d6d3d1 !important; /* Stone-300 */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  }
  
  /* 引用块图钉装饰 */
  .prose blockquote::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #fca5a5; /* Red-300 Pin */
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    z-index: 10;
  }

  .dark .prose blockquote::before {
    background-color: #f87171; /* Red-400 */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  }

  /* 3. 内联代码暖色调 */
  .prose :not(pre) > code {
    background-color: #f5f5f4 !important; /* Stone-100 */
    color: #ea580c !important; /* Orange-600 */
    border: 1px solid #e7e5e4; /* Stone-200 */
    border-radius: 4px;
    padding: 0.1em 0.4em !important;
    font-size: 0.875em;
  }

  /* 暗色模式内联代码 */
  .dark .prose :not(pre) > code {
    background-color: #292524 !important; /* Stone-800 */
    color: #fbbf24 !important; /* Amber-400 */
    border: 1px solid #44403c; /* Stone-700 */
  }
  
  /* 4. 图片复古滤镜 */
  .prose img {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    transition: filter 0.5s ease;
  }
  /* 默认只有一点点复古感，悬浮时恢复真彩 */
  .prose img:hover {
    filter: none;
  }

  /* 暗色模式图片边框 */
  .dark .prose img {
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* 暗色模式 prose 文字颜色 */
  .dark .prose {
    --tw-prose-body: #d6d3d1; /* Stone-300 */
    --tw-prose-headings: #fafaf9; /* Stone-50 */
    --tw-prose-links: #fbbf24; /* Amber-400 */
    --tw-prose-bold: #fafaf9;
    --tw-prose-counters: #a8a29e; /* Stone-400 */
    --tw-prose-bullets: #a8a29e;
    --tw-prose-hr: #44403c; /* Stone-700 */
    --tw-prose-quotes: #d6d3d1;
    --tw-prose-quote-borders: #78350f; /* Orange-900 */
    --tw-prose-captions: #a8a29e;
    --tw-prose-th-borders: #44403c;
    --tw-prose-td-borders: #292524; /* Stone-800 */
  }
}

/* 行数限制 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}