/* ==========================================
   高级照片背景优化系统
   York Region Caring Lions Club
   深度视觉叙事 & 情感化设计
   ========================================== */

/* ==========================================
   1. HERO 区域 - 真实志愿者场景背景
   ========================================== */

.hero {
    position: relative;
    /* Background handled by hero-slideshow.js - Multiple AI-generated images */
    /* 4 high-quality backgrounds rotating automatically */
}

/* 深色遮罩配合红金配色 - 确保Hero文字清晰可读 */
/* 增强版：更强的对比度，更清晰的文字可读性 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(10, 10, 20, 0.72) 50%,
        rgba(0, 0, 0, 0.68) 100%
    );
    mix-blend-mode: normal;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 2;
}

/* Ken Burns effect moved to hero-slideshow.js */
/* Applied individually to each active slide for better performance */

/* ==========================================
   2. ABOUT US 区域 - 团队合照背景
   ========================================== */

.about-section {
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/24ae709a04ce8402b3337b3bc03bda29');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

/* About内容图片使用真实活动照片 */
.about-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--corner-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.about-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.1) 0%,
        transparent 50%,
        rgba(50, 205, 50, 0.1) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ==========================================
   3. PROGRAMS 区域 - 各项目主题照片背景
   ========================================== */

/* 青年发展项目 - 使用青年志愿者照片 */
.program-card:nth-child(1) {
    position: relative;
    overflow: hidden;
}

.program-card:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/3689e2e05ce8d5ae8e5e962874ca3599');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.program-card:nth-child(1):hover::before {
    opacity: 0.12;
}

/* 社区服务项目 - 使用社区清洁照片 */
.program-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/648641a39042dfd5f2f05fea16ebbc24');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.program-card:nth-child(2):hover::before {
    opacity: 0.12;
}

/* 急救培训项目 - 使用急救训练照片 */
.program-card:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/9c25d16afd8d7bf050812302bdf9feac');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.program-card:nth-child(3):hover::before {
    opacity: 0.12;
}

/* 志愿者机会 - 使用团队合照 */
.program-card:nth-child(4)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/52af485f98eb93a950f03d543962b7f1');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

.program-card:nth-child(4):hover::before {
    opacity: 0.12;
}

/* 确保卡片内容在照片之上 */
.program-card > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   4. EVENTS 区域 - 活动场景背景
   ========================================== */

.events-section {
    position: relative;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/19f481fd8348280643f3ab04acaf2d11');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.events-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(249, 249, 249, 0.97) 0%,
        rgba(249, 249, 249, 0.95) 50%,
        rgba(249, 249, 249, 0.97) 100%
    );
}

.events-section > * {
    position: relative;
    z-index: 1;
}

/* 每个事件卡片微妙背景 */
.event-card {
    position: relative;
    overflow: hidden;
}

.event-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 99, 71, 0.05) 100%
    );
    pointer-events: none;
}

/* ==========================================
   5. CTA 区域 - 激励性背景
   ========================================== */

.cta-section {
    position: relative;
    /* AI生成 - 华人志愿者+红色马甲(与现有照片一致)+金色Lions标志 - 2752x1536 */
    background-image: url('../images/cta-background-red-blazers.jpg');
    background-size: cover;
    background-position: center;
    /* 移除fixed提升清晰度 - fixed会降低渲染质量 */
    background-attachment: scroll;
    /* 最大化图片清晰度 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    image-rendering: crisp-edges;
    /* 增强红金配色和华人喜庆氛围 */
    filter: contrast(1.12) brightness(1.05) saturate(1.18);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 深色遮罩配合红金配色 - 确保文字清晰可读，同时展示红色马甲细节 */
    background: linear-gradient(
        135deg,
        rgba(30, 30, 50, 0.58) 0%,
        rgba(20, 20, 40, 0.62) 50%,
        rgba(30, 30, 50, 0.55) 100%
    );
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
}

/* CTA section文字增强 - 确保在更透明背景下清晰可读 */
.cta-section h2,
.cta-section .cta-title {
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6),
                 0 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: 700;
    color: #ffffff !important;
}

.cta-section p,
.cta-section .cta-subtitle {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.7);
    font-weight: 500;
    color: #ffffff !important;
}

.cta-section .btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   6. STATS 区域 - 照片网格背景
   ========================================== */

.stats-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)),
        url('https://page.gensparksite.com/v1/base64_upload/5dd5dc760a9f748c1befacaa80dbfcc2');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   7. 照片墙效果 - 页面底部
   ========================================== */

.photo-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 150px;
    gap: 2px;
    overflow: hidden;
}

.photo-mosaic-item {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-mosaic-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 99, 71, 0.7);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.photo-mosaic-item:hover {
    transform: scale(1.1);
    z-index: 10;
}

.photo-mosaic-item:hover::before {
    opacity: 1;
}

/* 不同尺寸的网格项 */
.photo-mosaic-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.photo-mosaic-item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.photo-mosaic-item:nth-child(9) { grid-column: span 2; grid-row: span 2; }

/* ==========================================
   8. MISSION 卡片 - 透明背景照片
   ========================================== */

.mission-card {
    position: relative;
    overflow: hidden;
}

.mission-card:nth-child(1)::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/4e410db03ac22c2076d31b7e5a20f001');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    transform: rotate(-15deg);
    z-index: 0;
}

.mission-card:nth-child(2)::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/84a57c73ce1d9d0065094869a74c17f6');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    transform: rotate(15deg);
    z-index: 0;
}

.mission-card:nth-child(3)::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 150%;
    height: 150%;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/a997533b189a2a56881f8680930a9bd6');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    transform: rotate(-10deg);
    z-index: 0;
}

.mission-card > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   9. LEADERSHIP 区域 - 专业背景
   ========================================== */

.leadership-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)),
        url('https://page.gensparksite.com/v1/base64_upload/f4a33a30848f9ddce00ba8509ecebe1c');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   10. FOOTER - 微妙纹理背景
   ========================================== */

.footer {
    position: relative;
    background-image: 
        linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(45, 45, 45, 0.95) 100%),
        url('https://page.gensparksite.com/v1/base64_upload/09b178a8c60349db09a1a05c546d41b9');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   11. 照片遮罩效果系统
   ========================================== */

/* 高质量渐变遮罩 */
.photo-overlay-dark {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

.photo-overlay-light {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
}

.photo-overlay-gradient {
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.8) 0%,
        rgba(50, 205, 50, 0.8) 100%
    );
}

/* ==========================================
   12. 视差滚动增强
   ========================================== */

@media (min-width: 1024px) {
    .parallax-bg {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

/* ==========================================
   13. 响应式优化
   ========================================== */

@media (max-width: 968px) {
    /* 移动端禁用视差避免性能问题 */
    .hero,
    .events-section,
    .cta-section {
        background-attachment: scroll;
    }
    
    /* 移动端简化照片墙 */
    .photo-mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 120px;
    }
    
    .photo-mosaic-item:nth-child(1),
    .photo-mosaic-item:nth-child(5),
    .photo-mosaic-item:nth-child(9) {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    /* 超小屏幕进一步简化 */
    .photo-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 100px;
    }
}

/* ==========================================
   14. 照片加载动画
   ========================================== */

[style*="background-image"] {
    animation: fadeInPhoto 1.2s ease-out;
}

@keyframes fadeInPhoto {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* ==========================================
   15. 高级滤镜效果
   ========================================== */

/* 温暖滤镜 - 增加亲和力 */
.photo-warm-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 200, 100, 0.15) 0%,
        rgba(255, 150, 100, 0.1) 100%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* 活力滤镜 - 增强色彩 */
.photo-vibrant-filter {
    filter: saturate(1.2) contrast(1.1);
}

/* 柔和滤镜 - 专业感 */
.photo-soft-filter {
    filter: brightness(1.05) contrast(0.95);
}

/* ==========================================
   16. 鼠标悬停放大效果
   ========================================== */

.photo-zoom-on-hover {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-zoom-on-hover:hover {
    transform: scale(1.05);
}

/* ==========================================
   17. 文字阴影增强可读性
   ========================================== */

.text-on-photo {
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   18. 品牌色彩叠加
   ========================================== */

.brand-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.1) 0%,
        rgba(255, 215, 0, 0.05) 50%,
        rgba(50, 205, 50, 0.1) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ==========================================
   19. ABOUT PAGE - 关于我们页面优化
   ========================================== */

/* Page Header - 使用俱乐部真实团队照片 */
body .page-header {
    position: relative;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/c59d9113f667598319e41ffe78c9df29');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body .page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.90) 0%,
        rgba(255, 133, 112, 0.85) 50%,
        rgba(50, 205, 50, 0.80) 100%
    );
}

body .page-header > * {
    position: relative;
    z-index: 1;
}

/* About页面 - Mission Section 深度照片背景 */
.mission-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(249, 249, 249, 0.92), rgba(249, 249, 249, 0.92)),
        url('https://page.gensparksite.com/v1/base64_upload/24ae709a04ce8402b3337b3bc03bda29');
    background-size: cover;
    background-position: center;
}

/* Timeline - 每个节点使用对应年份照片 */
.timeline-item {
    position: relative;
    overflow: hidden;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.timeline-item:nth-child(1)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/3689e2e05ce8d5ae8e5e962874ca3599');
}

.timeline-item:nth-child(2)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/9c25d16afd8d7bf050812302bdf9feac');
}

.timeline-item:nth-child(3)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/52af485f98eb93a950f03d543962b7f1');
}

.timeline-item:nth-child(4)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/8efbf875a0da7cc7fdf3fe95f1561db1');
}

.timeline-item:hover::before {
    opacity: 0.15;
}

.timeline-item > * {
    position: relative;
    z-index: 1;
}

/* Leadership Team - 专业团队背景 */
.leadership-grid {
    position: relative;
}

.leader-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.leader-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.05) 0%,
        rgba(50, 205, 50, 0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.leader-card:hover::before {
    opacity: 1;
}

.leader-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255, 99, 71, 0.2);
}

/* ==========================================
   20. PROGRAMS PAGE - 项目页面优化
   ========================================== */

/* Program Detail Cards - 每个项目独立背景 */
.program-detail-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}

.program-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    opacity: 0.08;
    background-size: cover;
    background-position: center;
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 0;
}

/* Youth Development */
.program-detail-card:nth-child(1)::before,
.program-detail-card#youth::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/3689e2e05ce8d5ae8e5e962874ca3599');
}

/* Community Service */
.program-detail-card:nth-child(2)::before,
.program-detail-card#community::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/648641a39042dfd5f2f05fea16ebbc24');
}

/* First-Aid Training */
.program-detail-card:nth-child(3)::before,
.program-detail-card#firstaid::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/9c25d16afd8d7bf050812302bdf9feac');
}

/* Volunteer Opportunities */
.program-detail-card:nth-child(4)::before,
.program-detail-card#volunteer::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/52af485f98eb93a950f03d543962b7f1');
}

.program-detail-card:hover::before {
    opacity: 0.15;
    transform: scale(1.05);
}

.program-detail-card > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   21. EVENTS PAGE - 活动页面优化
   ========================================== */

/* Event Cards - 悬停显示活动照片 */
.event-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

/* 使用不同活动照片 */
.event-card:nth-child(1)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/19f481fd8348280643f3ab04acaf2d11');
}

.event-card:nth-child(2)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/8efbf875a0da7cc7fdf3fe95f1561db1');
}

.event-card:nth-child(3)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/4e410db03ac22c2076d31b7e5a20f001');
}

.event-card:nth-child(4)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/84a57c73ce1d9d0065094869a74c17f6');
}

.event-card:nth-child(5)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/a997533b189a2a56881f8680930a9bd6');
}

.event-card:nth-child(6)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/f4a33a30848f9ddce00ba8509ecebe1c');
}

.event-card:hover::before {
    opacity: 0.12;
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(255, 99, 71, 0.15);
}

.event-card > * {
    position: relative;
    z-index: 1;
}

/* Events Registration Section */
.events-cta {
    position: relative;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/52af485f98eb93a950f03d543962b7f1');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.events-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(50, 205, 50, 0.90) 0%,
        rgba(255, 215, 0, 0.85) 100%
    );
}

.events-cta > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   22. DONATE PAGE - 捐款页面优化
   ========================================== */

/* Donation Page Header - 情感化激励背景 */
.donate-header {
    position: relative;
    background-image: url('https://page.gensparksite.com/v1/base64_upload/a997533b189a2a56881f8680930a9bd6');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.donate-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 99, 71, 0.88) 0%,
        rgba(255, 215, 0, 0.82) 100%
    );
}

/* Donation Tiers - 每个层级微妙背景 */
.donation-option {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.donation-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.donation-option:nth-child(1)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/3689e2e05ce8d5ae8e5e962874ca3599');
}

.donation-option:nth-child(2)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/4e410db03ac22c2076d31b7e5a20f001');
}

.donation-option:nth-child(3)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/84a57c73ce1d9d0065094869a74c17f6');
}

.donation-option:nth-child(4)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/8efbf875a0da7cc7fdf3fe95f1561db1');
}

.donation-option:hover::before,
.donation-option.selected::before {
    opacity: 0.08;
}

.donation-option > * {
    position: relative;
    z-index: 1;
}

/* Impact Section - 捐款影响力展示 */
.impact-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)),
        url('https://page.gensparksite.com/v1/base64_upload/f4a33a30848f9ddce00ba8509ecebe1c');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   23. JOIN US PAGE - 加入我们页面优化
   ========================================== */

/* Volunteer Benefits Section */
.benefits-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(249, 249, 249, 0.94), rgba(249, 249, 249, 0.94)),
        url('https://page.gensparksite.com/v1/base64_upload/24ae709a04ce8402b3337b3bc03bda29');
    background-size: cover;
    background-position: center;
}

.benefit-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.benefit-card:nth-child(1)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/5dd5dc760a9f748c1befacaa80dbfcc2');
}

.benefit-card:nth-child(2)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/9c25d16afd8d7bf050812302bdf9feac');
}

.benefit-card:nth-child(3)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/52af485f98eb93a950f03d543962b7f1');
}

.benefit-card:hover::before {
    opacity: 0.10;
}

.benefit-card:hover {
    transform: translateY(-8px);
}

.benefit-card > * {
    position: relative;
    z-index: 1;
}

/* Application Form Background */
.application-form-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
        url('https://page.gensparksite.com/v1/base64_upload/f4a33a30848f9ddce00ba8509ecebe1c');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   24. CONTACT PAGE - 联系页面优化
   ========================================== */

/* Contact Cards - 欢迎社区氛围 */
.contact-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.contact-card:nth-child(1)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/09b178a8c60349db09a1a05c546d41b9');
}

.contact-card:nth-child(2)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/648641a39042dfd5f2f05fea16ebbc24');
}

.contact-card:nth-child(3)::before {
    background-image: url('https://page.gensparksite.com/v1/base64_upload/19f481fd8348280643f3ab04acaf2d11');
}

.contact-card:hover::before {
    opacity: 0.08;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(50, 205, 50, 0.2);
}

.contact-card > * {
    position: relative;
    z-index: 1;
}

/* Contact Form Section */
.contact-form-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(249, 249, 249, 0.95), rgba(249, 249, 249, 0.95)),
        url('https://page.gensparksite.com/v1/base64_upload/8efbf875a0da7cc7fdf3fe95f1561db1');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   25. GALLERY PAGE - 画廊页面优化
   ========================================== */

/* Gallery Grid Enhancement */
.gallery-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 99, 71, 0.8) 0%,
        rgba(50, 205, 50, 0.8) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Gallery Page Background */
.gallery-section {
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)),
        url('https://page.gensparksite.com/v1/base64_upload/f4a33a30848f9ddce00ba8509ecebe1c');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   26. 通用页面元素优化
   ========================================== */

/* Form Input Focus Effects */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    box-shadow: 
        0 0 0 3px rgba(255, 99, 71, 0.1),
        0 8px 20px rgba(255, 99, 71, 0.15);
}

/* Button Photo Context */
.btn-primary,
.btn-secondary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
}

.btn-primary:hover::after,
.btn-secondary:hover::after {
    left: 100%;
}

/* Card Backgrounds with Photos */
.card-with-photo {
    position: relative;
    background-size: cover;
    background-position: center;
}

.card-with-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.90) 100%
    );
    z-index: 0;
}

.card-with-photo > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   27. 移动端特定优化
   ========================================== */

@media (max-width: 968px) {
    /* 移动端降低照片透明度以确保可读性 */
    .program-detail-card::before,
    .event-card::before,
    .donation-option::before {
        opacity: 0.05 !important;
    }
    
    .program-detail-card:hover::before,
    .event-card:hover::before,
    .donation-option:hover::before {
        opacity: 0.08 !important;
    }
    
    /* 移动端简化背景附着 */
    body .page-header,
    .donate-header,
    .events-cta {
        background-attachment: scroll;
    }
}

/* ==========================================
   28. 高对比度模式支持
   ========================================== */

@media (prefers-contrast: high) {
    .hero::before,
    body .page-header::before {
        background: rgba(255, 99, 71, 0.95) !important;
    }
    
    .program-card::before,
    .event-card::before {
        display: none;
    }
}

/* ==========================================
   29. 打印样式优化
   ========================================== */

@media print {
    .hero,
    body .page-header,
    .events-section,
    .cta-section,
    .events-cta,
    .donate-header {
        background-image: none !important;
    }
    
    .hero::before,
    .hero::after,
    body .page-header::before {
        display: none;
    }
}