@layer utilities {
  .text-glow {
    text-shadow: 
      0 0 10px rgba(108, 99, 255, 1),
      0 0 20px rgba(108, 99, 255, 0.8),
      0 0 30px rgba(108, 99, 255, 0.6);
  }
  .text-glow-green {
    text-shadow: 
      0 0 10px rgba(0, 255, 157, 1),
      0 0 20px rgba(0, 255, 157, 0.8),
      0 0 30px rgba(0, 255, 157, 0.6);
  }
  .bg-blur {
    backdrop-filter: blur(8px);
  }
  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-3px);
    background: rgba(108, 99, 255, 0.25);
    box-shadow: 0 4px 25px rgba(108, 99, 255, 0.5);
  }
  .page-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  .page-indicator.active {
    width: 24px;
    border-radius: 4px;
    background: #6C63FF;
    box-shadow: 0 0 8px rgba(108, 99, 255, 0.8);
  }
  .avatar-glow {
    box-shadow: 
      0 0 10px rgba(108, 99, 255, 0.8),
      0 0 20px rgba(108, 99, 255, 0.5);
    transition: all 0.5s ease;
  }
  .avatar-glow:hover {
    animation: avatarRotate 0.6s ease-out forwards;
    box-shadow: 
      0 0 15px rgba(108, 99, 255, 0.9),
      0 0 30px rgba(108, 99, 255, 0.7),
      0 0 45px rgba(108, 99, 255, 0.5);
    border-color: #00D9FF;
    transform: scale(1.05);
  }
  @keyframes avatarRotate {
    0% { transform: rotate(0deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1.05); }
  }
}

    
            html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100vh;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      font-family: 'Orbitron', sans-serif;
      cursor: none; /* 隐藏默认光标 */
    }
    
    /* 移动端样式 - 允许滚动 */
    @media (max-width: 768px) {
      html, body {
        overflow: auto;
        height: auto;
        min-height: 100vh;
      }
      
      body {
        cursor: auto;
      }
      
      /* 为卡片容器添加触摸优化 */
      #card-container {
        -webkit-overflow-scrolling: touch;
        user-select: none;
      }
      
      .card-pages {
        touch-action: pan-y pinch-zoom;
      }
      
      /* 确保卡片在移动端可点击 */
      .card-hover {
        touch-action: manipulation;
      }
    }
    
    /* 自定义鼠标光标 */
    .custom-cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(108, 99, 255, 0.3);
      border: 2px solid rgba(108, 99, 255, 0.6);
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease;
      mix-blend-mode: difference;
    }
    
    .cursor-dot {
      position: fixed;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.05s ease;
    }
    
    /* 鼠标点击效果 */
    .cursor-click {
      position: fixed;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid rgba(108, 99, 255, 0.8);
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple 0.6s ease-out;
    }
    
    @keyframes ripple {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
    }
    
    /* 动画 */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes pulse-glow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    @keyframes slide-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeIn {
      0% { opacity: 0.7; transform: translateY(5px); }
      100% { opacity: 1; transform: translateY(-5px); }
    }
    
    @keyframes popIn {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    /* 组件样式 */
    .quote {
      animation: fadeIn 4s ease-in-out infinite alternate;
      box-shadow: 0 0 15px rgba(108, 99, 255, 0.1);
    }
    
    .social-icon {
      transition: all 0.3s ease;
    }
    
    .social-icon:hover {
      color: #6C63FF;
      transform: translateY(-3px);
      text-shadow: 0 0 10px rgba(108, 99, 255, 1),
                   0 0 15px rgba(108, 99, 255, 0.8);
    }
    
    .decor-dot {
      background: rgba(108, 99, 255, 1);
      animation: pulse 3s infinite alternate;
      box-shadow: 0 0 6px rgba(108, 99, 255, 0.8);
    }
    
    @keyframes pulse {
      0% { opacity: 0.6; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.3); }
    }
    
    .decor-line {
      background: rgba(108, 99, 255, 0.6);
      animation: fade 4s infinite alternate;
    }
    
    @keyframes fade {
      0% { opacity: 0.4; }
      100% { opacity: 0.9; }
    }
    
    .card-pages {
      transition: transform 0.5s ease;
    }
    
    .card-page {
      min-width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    
    /* 技能栈卡片样式 */
    .skill-card {
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      background: linear-gradient(145deg, rgba(40, 40, 60, 0.8), rgba(20, 20, 35, 0.9));
      position: relative;
      overflow: hidden;
    }
    
    .skill-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.2), transparent);
      transition: left 0.7s ease;
    }
    
    .skill-card:hover::before {
      left: 100%;
    }
    
    .skill-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 10px 30px rgba(108, 99, 255, 0.3),
                  0 0 40px rgba(108, 99, 255, 0.1);
    }
    
    .skill-level-bar {
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }
    
    .skill-level-fill {
      height: 100%;
      background: linear-gradient(90deg, #6C63FF, #00D9FF);
      border-radius: 2px;
      position: relative;
      transition: width 1.5s ease-out;
    }
    
    .skill-level-fill::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      animation: shine 2s infinite;
    }
    
    @keyframes shine {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    
    /* 弹窗动画 */
    #wechat-modal .bg-gray\/80,
    #qq-modal .bg-gray\/80 {
      animation: popIn 0.3s ease;
    }
    
    /* 移动端优化 */
    @media (max-width: 768px) {
      .social-icon, .card-hover, .nav-item {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .card-page {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .container {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      
      /* 移动端恢复默认光标 */
      .custom-cursor, .cursor-dot {
        display: none;
      }
      
      /* 移动端布局调整 */
      .lg\:col-span-1\.5 {
        margin-top: 1rem !important;
      }
      
      .lg\:col-span-0\.5 {
        display: none;
      }
      
      .lg\:col-span-1,
      .lg\:col-span-1\.5 {
        width: 100%;
      }
      
      .pl-6 {
        padding-left: 1rem;
      }
      
      .mt-32 {
        margin-top: 1rem !important;
      }
      
      .mt-14 {
        margin-top: 1rem !important;
      }
      
      .mt-8 {
        margin-top: 1rem !important;
      }
      
      .grid-cols-1 {
        gap: 1rem;
      }
    }
    
    /* 无障碍焦点样式 */
    :focus-visible {
      outline: 2px solid #6C63FF;
      outline-offset: 2px;
    }
    
    /* 语言切换按钮 */
    .theme-toggle {
      transition: all 0.3s ease;
    }
    
    .theme-toggle:hover {
      transform: rotate(30deg);
    }
    
    /* 年份文字 */
    .year-text {
      color: #6C63FF;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-shadow: 0 0 5px rgba(108, 99, 255, 0.7);
      margin-left: 8px;
    }