/* 衬衫展示网站全局样式 */
/* 使用Tailwind CSS作为基础，仅添加必要自定义样式 */

/* 页面过渡动画 */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-in-out;
}

.page-transition.active {
    opacity: 1;
    transform: translateY(0);
}

/* 导航栏样式 */
.nav-item {
    position: relative;
    transition: color 0.3s ease;
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background-color: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-item:hover::after,
.nav-item.active::after {
    width: 100%;
}

/* 图片加载效果 */
.lazy-image {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease-in-out;
}

.lazy-image.loaded {
    opacity: 1;
    transform: scale(1);
}

/* 瀑布流动画 */
.gallery-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 响应式设计辅助类 */
@media (max-width: 768px) {
    .mobile-center {
        text-align: center;
    }
    
    .mobile-full {
        width: 100%;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 打印样式 */
@media print {
    .no-print {
        display: none !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .text-gray-600 {
        color: #000;
    }
    
    .bg-gray-50 {
        background-color: #fff;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}