/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 背景图片样式 */
#bg-image {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: brightness(0.7); /* 稍微调暗背景，使前景内容更清晰 */
}

/* 确保背景覆盖整个视口 */
html, body {
    height: 100%;
    overflow-x: hidden;
}

/* 增强文本可读性 */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* 导航栏滚动效果 */
header {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

header.scrolled {
    background-color: rgba(0, 0, 0, 0.9);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 图片悬停效果增强 */
.grid div img {
    transition: transform 0.5s ease, filter 0.3s ease;
}

.grid div:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* 按钮悬停动画 */
button, a {
    transition: all 0.3s ease;
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 加载动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeIn 0.8s ease-out;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .text-shadow {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    }
    
    #bg-image {
        background-attachment: scroll;
    }
}

/* 图片加载效果 */
img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

img.loading {
    opacity: 0;
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    /* 如果用户系统设置为暗黑模式，可以进一步优化样式 */
    body {
        color-scheme: dark;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .bg-opacity-60,
    .bg-opacity-70,
    .bg-opacity-80,
    .bg-opacity-90 {
        background-opacity: 0.95;
    }
    
    .text-gray-300 {
        color: white;
    }
}

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

/* 打印样式 */
@media print {
    #bg-image {
        background: none !important;
    }
    
    body {
        color: black;
        background: white;
    }
    
    header, footer {
        display: none;
    }
}

/* 焦点样式，提高可访问性 */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 移除iOS上的点击高亮 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 修复Safari上的背景图片问题 */
@supports (-webkit-backdrop-filter: blur(8px)) {
    .bg-blur {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}