/* 修复背景分离和视觉分裂问题的CSS文件 */

/* 强制隐藏所有滚动条 */
*::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
    background: transparent !important;
}

*::-webkit-scrollbar-thumb {
    display: none !important;
    background: transparent !important;
}

*::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}

*::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
}

/* Firefox滚动条隐藏 */
* {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
}

/* IE/Edge滚动条隐藏 */
* {
    -ms-overflow-style: none !important;
}

/* 强制禁用所有可能导致背景分离的效果，但允许卡片模糊 */
*:not(.projectItem):not(.left-div):not(.iconItem):not(footer) {
    /* 禁用所有backdrop-filter效果，但保留卡片的模糊效果 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 确保主要容器不会产生视觉分离 */
body {
    /* 确保背景固定且一致 */
    background-attachment: fixed !important;
    /* 禁用任何可能的transform */
    transform: none !important;
    /* 强制使用GPU合成 */
    will-change: auto !important;
}

/* 禁用可能导致分层的元素的transform */
.noise-main,
.noise-left,
.noise-right,
.noise-filter,
.left-div {
    transform: none !important;
    will-change: auto !important;
}

/* projectItem 允许Windows磁铁效果 */
.projectItem {
    will-change: auto !important;
}

/* logo 元素允许旋转动画 - 覆盖父元素限制 */
.noise-left .logo {
    transform: rotate(0deg) !important;
    transition: transform 0.6s ease-in-out !important;
    will-change: transform !important;
}

.noise-left .logo:hover {
    transform: rotate(360deg) !important;
}

/* 允许logo的触摸缩放效果 */
.noise-left .logo:active {
    transform: scale(0.70) rotate(10deg) !important;
}

/* 允许触摸反馈的缩放效果 */
.noise-left .logo.touch-active {
    transform: scale(0.70) !important;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 确保固定定位元素不会产生视觉问题 */
.noise-filter {
    /* 使用透明背景而不是模糊效果 */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 禁用视差滚动相关的所有效果 */
.parallax-element,
.parallax-container {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* 确保项目卡片不会产生视觉分离，但允许Windows磁铁效果和高斯模糊 */
.projectItem {
    /* 允许轻微的transform用于磁铁效果 */
    will-change: auto !important;
}

/* 明确允许卡片元素使用高斯模糊效果 */
.projectItem,
.left-div,
.iconItem,
footer {
    backdrop-filter: blur(var(--card_filter)) !important;
    -webkit-backdrop-filter: blur(var(--card_filter)) !important;
}

.projectItem:hover,
.projectItem.a:hover,
.projectItem.b:hover {
    /* 允许Windows磁铁效果的transform和滤镜 */
    transform: translateY(-3px) scale(1.01) !important;
    filter: brightness(1.1) contrast(1.05) !important;
}

/* 禁用所有可能导致分层问题的动画 */
@keyframes themeRipple {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* 确保滚动时的稳定性 */
html {
    /* 禁用平滑滚动以避免潜在的视觉问题 */
    scroll-behavior: auto !important;
}

/* 移动端特殊处理 */
@media (max-width: 800px) {
    /* 确保移动端不会出现背景分离 */
    body {
        background-attachment: scroll !important;
    }
}