/* 内部发光悬停效果模板 */
.box-shadow1 {
    transition: all 0.3s ease;
}

.box-shadow1:hover {
    background-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn1 {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);

    /* 毛玻璃 */
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn1:hover {
    background-color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}
.btn1:active {
    transform: scale(0.97) translateY(1px);
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.08s linear;
}
.bnt1:hover {
    backdrop-filter: blur(14px);
}
/* 无毛玻璃效果 */
.btn2 {
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.btn2:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}
/* 超链接简单美化 */
.friendship a {
    color: black;
    font-weight: 500;
    transition: all 0.3s ease;
}
.explore-more li a:hover, .join-us a:hover, .friendship a:hover {
    color: #3b82f6;
}
.explore-more li a:active, .join-us a:active, .friendship a:active {
    color: #3b64f6;
}



.img-effect {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: block;
    max-width: 100%;

    /* 过渡时间缩短到 0.25s，提升速度感 */
    transition: 
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
    
    will-change: transform;
    transform-origin: center;
}
/* ========== 桌面端（支持 hover） ========== */
.img-effect {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: block;
    max-width: 100%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    will-change: transform;
}
/* 桌面端 Hover：上浮 + 放大 */
@media (hover: hover) {
    .img-effect:hover {
        transform: translateY(-12px) scale(1.04);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
    }
}
/* 通用 Active（桌面 & 移动都保留） */
.img-effect:active {
    transform: translateY(-4px) scale(0.96);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition-duration: 0.08s;
}
/* ========== 移动端（触摸设备，不支持 hover） ========== */
@media (hover: none) {
    .img-effect {
        /* 移动端去掉鼠标样式，速度加快 */
        cursor: default;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    /* 彻底移除 hover 效果（不定义任何 transform） */
    .img-effect:hover {
        /* 什么也不写，或者直接 reset */
        transform: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    /* 移动端点击反馈：只缩小，不上浮，反应极快 */
    .img-effect:active {
        transform: scale(0.95);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
        transition-duration: 0.05s;
    }
}




.div-btn {
    /* 基础样式 */
    display: inline-block;
    margin: 20px auto;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    border: none;
    outline: none;
    user-select: none;

    /* 背景：从杏黄到珊瑚橙的渐变（无蓝无黑） */
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #ffffff;  /* 白色文字，清晰醒目 */

    /* 柔和阴影 */
    box-shadow: 0 6px 20px rgba(253, 160, 133, 0.35);

    /* 过渡动画 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

/* 悬停效果（桌面端） */
@media (hover: hover) {
    .div-btn:hover {
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0 12px 32px rgba(253, 160, 133, 0.5);
    }
}

/* 点击反馈（所有设备） */
.div-btn:active {
    transform: scale(0.95);
    box-shadow: 0 3px 10px rgba(253, 160, 133, 0.2);
    transition-duration: 0.08s;
}

/* 移动端触摸优化（避免悬停粘滞） */
@media (hover: none) {
    .div-btn:hover {
        transform: none;   /* 移动端不触发上浮 */
        box-shadow: 0 6px 20px rgba(253, 160, 133, 0.35);
    }
    .div-btn:active {
        transform: scale(0.95);
        transition-duration: 0.06s;
    }
}