/* modern-mens-fashion-250507/frontend/public/css/styles.css */

/* 基础设置与字体平滑 */
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;    /* Firefox */
  background-color: #ffffff;
  color: #1a1a1a;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 通用动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 实用动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0; /* 初始隐藏 */
}

.animate-fade-in {
  animation: fadeIn 1.2s ease-out forwards;
  opacity: 0;
}

/* 动画延迟工具类 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* 导航链接悬停效果 */
.nav-item {
  position: relative;
  display: inline-block;
}
.nav-item::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
.nav-item:hover::after,
.nav-item.active::after {
  width: 100%;
}

/* 图片卡片悬停缩放效果 */
.group-hover-scale img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.group:hover .group-hover-scale img {
  transform: scale(1.05);
}

/* 移动端汉堡菜单过渡 */
.mobile-menu-enter {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu-enter-active {
  transform: translateX(0);
}
.mobile-menu-exit {
  transform: translateX(100%);
}

/* 文本阴影增强阅读性 */
.text-shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 强制全高部分 */
.h-screen-safe {
  height: 100vh;
  height: 100dvh; /* 适配移动端动态视口 */
}