/* 自定义样式 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .transition-smooth {
    transition: all 0.3s ease;
  }
  .scale-hover {
    transition: transform 0.3s ease;
  }
  .scale-hover:hover {
    transform: scale(1.03);
  }
  .card-shadow {
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1), 0 8px 10px -6px rgba(37, 99, 235, 0.1);
  }
  .btn-hover-effect {
    position: relative;
    overflow: hidden;
  }
  .btn-hover-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%);
    transform-origin: 50% 50%;
  }
  .btn-hover-effect:hover::after {
    animation: ripple 1.5s ease-out;
  }
  @keyframes ripple {
    0% {
      transform: scale(0, 0);
      opacity: 0.5;
    }
    20% {
      transform: scale(25, 25);
      opacity: 0.5;
    }
    100% {
      opacity: 0;
      transform: scale(40, 40);
    }
  }
  .bg-gradient-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  }
  .bg-gradient-secondary {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  }
  .bg-gradient-accent {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .animate-fade-in {
    animation: fadeIn 0.8s ease-in-out;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out;
  }
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .animate-slide-in-right {
    animation: slideInRight 0.8s ease-out;
  }
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}