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

@layer base {
  :root {
    --color-primary: #4f46e5;
    --color-secondary: #10b981;
    --color-accent: #f43f5e;
    --color-dark: #111827;
    --color-light: #f9fafb;
  }
  
  html {
    scroll-behavior: smooth;
    @apply font-['Inter',sans-serif];
  }
  
  body {
    @apply bg-gray-50 text-gray-900;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
  
  .section {
    @apply py-16 md:py-24;
  }
  
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer components {
  .btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
  }
  
  .btn-secondary {
    @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
  }
  
  .btn-outline {
    @apply border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 focus:ring-indigo-500;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl;
  }
  
  .nav-link {
    @apply relative px-3 py-2 text-gray-700 hover:text-indigo-600 transition-colors duration-300;
  }
  
  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 ease-in-out;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  .nav-link.active {
    @apply text-indigo-600;
  }
  
  .nav-link.active::after {
    @apply w-full;
  }
  
  .social-link {
    @apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 text-gray-700 transition-all duration-300 hover:bg-indigo-600 hover:text-white;
  }
  
  .skill-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
  }
  
  .skill-progress {
    @apply h-full bg-indigo-600 rounded-full transition-all duration-1000 ease-out;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600;
  }
  
  .bg-glass {
    @apply bg-white/70 backdrop-blur-md;
  }
  
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-slide-in {
    animation: slideIn 0.5s ease-out forwards;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 - 全面优化各种设备显示 */

/* 平板设备（768px - 1023px） */
@media (max-width: 1023px) {
  /* 导航栏适配 */
  header {
    padding: 1.25rem 1.5rem;
  }
  
  header.navbar-scrolled {
    padding: 1rem 1.5rem;
  }
  
  /* 英雄区域适配 */
  .hero-content h1 {
    font-size: 3rem;
  }
  
  /* 关于我区域适配 */
  .about-content {
    padding: 0;
  }
  
  /* 项目网格适配 */
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* 技能区域适配 */
  .skill-container {
    grid-template-columns: 1fr 1fr;
  }
}

/* 移动设备（767px 及以下） */
@media (max-width: 767px) {
  /* 基础容器适配 */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 导航栏适配 */
  header {
    padding: 1rem 1rem;
  }
  
  header.navbar-scrolled {
    padding: 0.75rem 1rem;
  }
  
  /* 桌面导航隐藏 */
  .desktop-nav {
    display: none;
  }
  
  /* 移动菜单按钮显示 */
  .mobile-menu-btn {
    display: flex;
  }
  
  /* 英雄区域适配 */
  .hero-content {
    text-align: center;
    padding-top: 8rem;
  }
  
  .hero-content h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  
  .hero-content p {
    font-size: 1.125rem;
  }
  
  .hero-content .btn-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  /* 代码编辑器适配 */
  .hero-content pre {
    font-size: 0.75rem;
  }
  
  /* 项目网格适配 */
  .project-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* 项目卡片适配 */
  .project-card img {
    height: 180px;
  }
  
  /* 技能区域适配 */
  .skill-container {
    grid-template-columns: 1fr;
  }
  
  /* 关于我区域适配 */
  .about-section {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .about-image {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
  
  /* 联系表单适配 */
  .contact-form {
    width: 100%;
  }
  
  .form-group {
    width: 100%;
  }
  
  /* 社交媒体图标适配 */
  .social-icons {
    justify-content: center;
  }
  
  /* 页脚适配 */
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
  
  /* 鼠标跟随效果在移动设备上禁用 */
  #mouse-follower {
    display: none !important;
  }
}

/* 小型移动设备（480px 及以下） */
@media (max-width: 480px) {
  /* 英雄区域适配 */
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  /* 按钮适配 */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
  
  /* 标题适配 */
  section h2 {
    font-size: 1.75rem;
  }
  
  section h3 {
    font-size: 1.5rem;
  }
  
  /* 代码编辑器适配 */
  .hero-content pre {
    font-size: 0.675rem;
  }
  
  /* 项目卡片适配 */
  .project-card img {
    height: 160px;
  }
  
  /* 技能条适配 */
  .skill-bar {
    height: 8px;
  }
  
  /* 联系表单输入框适配 */
  .form-input,
  .form-textarea {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }
  
  /* 返回顶部按钮适配 */
  #back-to-top {
    width: 40px;
    height: 40px;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* 超小型移动设备（360px 及以下） */
@media (max-width: 360px) {
  /* 英雄区域适配 */
  .hero-content {
    padding-top: 6rem;
  }
  
  .hero-content h1 {
    font-size: 1.75rem;
  }
  
  /* 代码编辑器隐藏 */
  .hero-content .animate-float {
    display: none;
  }
  
  /* 移动菜单适配 */
  .mobile-menu {
    width: 90%;
  }
  
  /* 项目卡片适配 */
  .project-card img {
    height: 140px;
  }
}

/* 平板竖屏优化 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hero-content h1 {
    font-size: 2.75rem;
  }
  
  .project-grid {
    grid-template-columns: 1fr;
  }
}

/* 高DPI设备优化 */
@media (-webkit-device-pixel-ratio: 2), (resolution: 192dpi) {
  /* 优化高分辨率屏幕上的字体渲染 */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* 优化高分辨率屏幕上的图片显示 */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* 深色模式响应式调整 */
@media (prefers-color-scheme: dark) and (max-width: 767px) {
  .mobile-menu {
    background-color: rgba(17, 24, 39, 0.95);
    border-color: rgba(55, 65, 81, 0.5);
  }
  
  header.navbar-scrolled {
    background-color: rgba(17, 24, 39, 0.95);
  }
}

/* 打印样式 */
@media print {
  /* 隐藏不相关元素 */
  header,
  footer,
  #back-to-top,
  #mouse-follower,
  .btn,
  .social-icons,
  .mobile-menu-btn {
    display: none !important;
  }
  
  /* 设置基础打印样式 */
  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* 调整页面布局 */
  .container {
    max-width: 100%;
    padding: 0;
  }
  
  section {
    page-break-inside: avoid;
    margin-bottom: 2rem;
  }
  
  /* 优化链接显示 */
  a {
    text-decoration: none;
    color: black;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    color: #666;
  }
}

/* 导航栏样式 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 1.5rem 2rem;
  background-color: transparent;
  backdrop-filter: blur(0px);
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

header.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  padding: 1rem 2rem;
}

dark header.navbar-scrolled {
  background-color: rgba(17, 24, 39, 0.95);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

/* 导航链接样式 */
nav a {
  position: relative;
  transition: all 0.3s ease;
}

nav a.active {
  color: var(--color-primary);
  font-weight: 600;
}

nav a.active::after,
nav a:hover::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 3px;
  animation: linkUnderline 0.3s ease-out;
}

@keyframes linkUnderline {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

/* 鼠标跟随效果 */
#mouse-follower {
  pointer-events: none;
  will-change: transform;
}

/* 动画类 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 元素浮动动画 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 技能条样式增强 */
.skill-bar {
  position: relative;
  background-color: #e5e7eb;
}

.dark .skill-bar {
  background-color: #374151;
}

.skill-progress {
  background: linear-gradient(90deg, var(--color-primary), #8b5cf6);
  transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 项目卡片悬停效果增强 */
.project-card {
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.project-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.dark .project-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
}

/* 按钮悬停效果增强 */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s;
}

.btn:hover::before {
  left: 100%;
}

/* 页面加载动画 */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease;
}

.dark #page-loader {
  background-color: var(--color-dark);
}

/* 标签交互动画 */
.hover-tags span {
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
}

/* 打字机效果 */
#typing-effect {
  position: relative;
  display: inline-block;
}

#typing-effect::after {
  content: '|';
  position: absolute;
  right: -10px;
  top: 0;
  animation: blink 1s infinite;
  color: var(--color-primary);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 返回顶部按钮样式增强 */
#back-to-top {
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#back-to-top.visible {
  transform: scale(1);
}

#back-to-top:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 粒子背景效果 */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}