@layer utilities {
  /* 卡片样式（强化悬浮效果） */
  .site-card { 
    @apply bg-white rounded-2xl p-6 shadow-sm border border-transparent 
           transition-all duration-300 hover:shadow-xl hover:-translate-y-2 
           hover:bg-white hover:border-primary/30 
           flex flex-col items-center text-center w-full max-w-[130px] mx-auto 
           cursor-pointer relative overflow-hidden; 
    /* 初始状态轻微悬浮感 */
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  /* 卡片悬浮时添加底部光效 */
  .site-card::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-primary/0 to-primary/0 transition-all duration-300;
  }
  .site-card:hover::after {
    @apply bg-gradient-to-r from-primary/40 to-blue-400/40;
    height: 3px;
  }

  /* 分类标题 */
  .category-title { 
    @apply text-xl md:text-2xl font-bold text-dark-500 mb-6 pl-4 py-2 
           border-l-4 border-primary border-b border-dark-200 pb-3; 
  }

  /* 图标样式（悬浮放大旋转） */
  .site-icon { 
    @apply text-2xl md:text-3xl mb-3 transition-all duration-300;
    transform-origin: center;
  }
  .site-card:hover .site-icon {
    transform: scale(1.2) rotate(6deg);
    filter: drop-shadow(0 4px 3px rgba(59, 130, 246, 0.2));
  }

  /* 文字容器 */
  .site-name-container {
    @apply w-full overflow-hidden;
    position: relative;
    height: 1.5em;
  }

  /* 网站名称（悬浮动画） */
  .site-name { 
    @apply font-semibold truncate transition-all duration-300;
    white-space: nowrap;
    font-size: clamp(0.8rem, 4vw, 1rem);
    transform: translateY(0);
  }
  .site-card:hover .site-name {
    transform: translateY(-2px);
    background: linear-gradient(to right, #3B82F6, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 按钮样式 */
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 transition-colors;
  }
  .btn-secondary {
    @apply border border-dark-200 text-dark-500 hover:bg-dark-100 transition-colors;
  }
}

/* 悬浮文字动画样式 */
.floating-text {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-weight: bold;
  will-change: transform, opacity;
  font-size: clamp(1rem, 3vw, 1.5rem);
  transform-origin: center center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  opacity: 0;
}

/* 动画效果 */
.float-basic { animation: float-basic 1.8s ease-out forwards; }
@keyframes float-basic {
  0% { transform: translate(-50%, -100%) scale(0.8); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-100% - 60px)) scale(1); opacity: 0; }
}

.float-sway { animation: float-sway 1.8s ease-in-out forwards; }
@keyframes float-sway {
  0% { transform: translate(-50%, -100%) scale(0.8); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  25% { transform: translate(calc(-50% + 10px), calc(-100% - 15px)) scale(1); }
  50% { transform: translate(calc(-50% - 10px), calc(-100% - 30px)) scale(1); }
  75% { transform: translate(calc(-50% + 5px), calc(-100% - 45px)) scale(1); }
  100% { transform: translate(-50%, calc(-100% - 60px)) scale(1); opacity: 0; }
}

.float-spin { animation: float-spin 1.8s ease-out forwards; }
@keyframes float-spin {
  0% { transform: translate(-50%, -100%) scale(0.8) rotate(0deg); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, calc(-100% - 60px)) rotate(360deg); opacity: 0; }
}

.float-pulse { animation: float-pulse 1.8s ease-out forwards; }
@keyframes float-pulse {
  0% { transform: translate(-50%, -100%) scale(0.8); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, calc(-100% - 30px)) scale(1.3); }
  100% { transform: translate(-50%, calc(-100% - 60px)) scale(0.7); opacity: 0; }
}

.float-gradient { animation: float-gradient 1.8s ease-out forwards; }
@keyframes float-gradient {
  0% { transform: translate(-50%, -100%) scale(0.8); opacity: 0; filter: hue-rotate(0deg); }
  20% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-100% - 60px)); opacity: 0; filter: hue-rotate(180deg); }
}

.float-wave { animation: float-wave 1.8s ease-in-out forwards; }
@keyframes float-wave {
  0% { transform: translate(-50%, -100%) scale(0.8) rotate(0deg); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1) rotate(0deg); opacity: 1; }
  25% { transform: translate(-50%, calc(-100% - 15px)) rotate(5deg); }
  50% { transform: translate(-50%, calc(-100% - 30px)) rotate(-5deg); }
  75% { transform: translate(-50%, calc(-100% - 45px)) rotate(3deg); }
  100% { transform: translate(-50%, calc(-100% - 60px)) rotate(0deg); opacity: 0; }
}

.float-flash { animation: float-flash 1.8s ease-out forwards; }
@keyframes float-flash {
  0% { transform: translate(-50%, -100%) scale(0.8); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  20%, 40%, 60%, 80% { opacity: 1; }
  30%, 50%, 70%, 90% { opacity: 0.5; }
  100% { transform: translate(-50%, calc(-100% - 60px)); opacity: 0; }
}

.float-spiral { animation: float-spiral 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes float-spiral {
  0% { transform: translate(-50%, -100%) scale(0.8) rotate(0deg); opacity: 0; }
  20% { transform: translate(-50%, -100%) scale(1) rotate(0deg); opacity: 1; }
  25% { transform: translate(calc(-50% + 10px), calc(-100% - 15px)) rotate(90deg); }
  50% { transform: translate(calc(-50% - 5px), calc(-100% - 30px)) rotate(180deg); }
  75% { transform: translate(calc(-50% + 5px), calc(-100% - 45px)) rotate(270deg); }
  100% { transform: translate(-50%, calc(-100% - 60px)) rotate(360deg); opacity: 0; }
}