/* 
 * Elegance Unveiled - Custom Styles
 * 补充 Tailwind CSS 未覆盖的定制化需求
 */

/* 启用平滑滚动 */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 自定义选中文本颜色，匹配中性色调 */
::selection {
  background-color: #e5e7eb; /* gray-200 */
  color: #1f2937; /* gray-800 */
}

/* Webkit 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f9fafb; /* gray-50 */
}

::-webkit-scrollbar-thumb {
  background: #d1d5db; /* gray-300 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af; /* gray-400 */
}

/* 淡入动画关键帧 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 向上滑动淡入关键帧 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画工具类 */
.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
  opacity: 0; /* 初始隐藏，由动画控制显示 */
  animation: slideUp 0.8s ease-out forwards;
}

/* 动画延迟工具类 */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* 图片悬停放大容器与效果 */
.group-hover-scale {
  overflow: hidden;
  display: block;
}

.group-hover-scale img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
  will-change: transform;
}

.group-hover-scale:hover img {
  transform: scale(1.05);
}

/* 隐藏滚动条但保留功能 (用于水平滚动容器) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* 简单的加载状态骨架屏动画 */
@keyframes pulse-bg {
  0%, 100% { background-color: #f3f4f6; }
  50% { background-color: #e5e7eb; }
}
.skeleton-loader {
  animation: pulse-bg 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}