/* 公共样式 - 避免在HTML文件中重复定义 */

/* Logo动画效果 */
.logo-container {
    position: relative;
    overflow: hidden;
}

.logo-image {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.logo-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.3), 
        rgba(255,255,255,0.8), 
        rgba(255,255,255,0.3), 
        transparent
    );
    transition: left 1.2s ease-in-out !important;
    z-index: 2;
    pointer-events: none;
    transform: skewX(-20deg);
}

.logo-text {
    color: #2563eb;
}

.logo-container:hover .logo-image::before {
    left: 120%;
}

/* 导航栏滚动效果 */
.navbar-transparent {
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.navbar-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* 当前页面导航项高亮 */
.nav-current {
    color: #2563eb !important;
    font-weight: 600;
    position: relative;
}

.navbar-transparent .nav-current {
    color: #2563eb !important;
}

.navbar-scrolled .nav-current {
    color: #2563eb !important;
}

.nav-current::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.navbar-logo-text {
    color: #2563eb;
    text-shadow: none;
}

.navbar-scrolled .navbar-logo-text {
    color: #2563eb;
    text-shadow: none;
}

.nav-link {
    color: #374151;
    text-shadow: none;
    background: rgba(55, 65, 81, 0.05);
    border: 1px solid rgba(55, 65, 81, 0.1);
}

  .nav-link:hover {
      background: rgba(55, 65, 81, 0.1);
      color: #1f2937;
      transform: translateY(-1px);
  }

.navbar-scrolled .nav-link {
    color: #374151;
    text-shadow: none;
    background: rgba(55, 65, 81, 0.05);
    border: 1px solid rgba(55, 65, 81, 0.1);
}

  .navbar-scrolled .nav-link:hover {
      background: rgba(55, 65, 81, 0.1);
      color: #1f2937;
  }

/* 特殊按钮效果 */
.special-button {
    animation: gradient-shift 8s ease-in-out infinite, ripple-effect 4s ease-in-out infinite !important;
    transition: transform 0.2s ease !important;
    filter: brightness(1.1) contrast(1.2) saturate(1.3) !important;
    color: #000000 !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.6) !important;
}

.special-button:hover {
    transform: scale(1.08) !important;
    filter: brightness(1.2) contrast(1.3) saturate(1.4) !important;
    color: #000000 !important;
    text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,0.8) !important;
}

.special-button i {
    color: #000000 !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(255,255,255,0.6) !important;
}

.special-button:hover i {
    color: #000000 !important;
    text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,0.8) !important;
}

.special-button::before,
.special-button::after {
    animation: ripple-wave 6s ease-in-out infinite !important;
    opacity: 0.8 !important;
}

.special-button::after {
    animation-delay: 3s !important;
}

/* 轮播图过渡效果 */
.carousel-slide {
    transition: opacity 0.001s !important;
}

/* 社交图标动画恢复 */
.social-icon-vertical {
    animation-duration: 2s !important;
    transition-duration: 0.3s !important;
}

.social-icon-vertical::before {
    animation-duration: 2s !important;
    transition-duration: 0.3s !important;
}

.social-icon-vertical::after {
    transition-duration: 0.3s !important;
}

/* 按钮过渡效果恢复 */
button, .category-item, .tool-card, .nav-link {
    transition-duration: 0.3s !important;
}

/* 全局动画禁用（除特定元素外） */
  *:not(.special-button):not(.social-icon-vertical):not(.social-icon-vertical::before):not(.social-icon-vertical::after):not(button):not(.category-item):not(.tool-card):not(.nav-link) { 
      animation-duration: 0.001s !important; 
      transition-duration: 0.001s !important; 
  }

.aspect-square { position: relative; width: 100%; }
@supports (aspect-ratio: 1/1) {
  .aspect-square { aspect-ratio: 1/1; }
  .aspect-square > img { width: 100%; height: 100%; object-fit: cover; }
}
@supports not (aspect-ratio: 1/1) {
  .aspect-square::before { content: ""; display: block; padding-top: 100%; }
  .aspect-square > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}