/* LaserFlow 激光流动效果样式 - 固定在首页位置 */

.laser-flow-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    animation: laserFadeIn 1.5s ease-out forwards;
    animation-delay: 0.5s;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    /* 默认隐藏，通过 JS 控制显示 */
    display: none;
    /* 确保不受任何父元素影响 */
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 当在首页时显示 */
.laser-flow-container.visible {
    display: block;
}

/* Safari 特殊处理 */
@supports (-webkit-appearance: none) {
    .laser-flow-container canvas {
        width: 1920px !important;
        height: 1080px !important;
        max-width: none !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@keyframes laserFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .laser-flow-container {
        opacity: 0.7;
    }
}

@media (max-width: 768px) {
    .laser-flow-container {
        opacity: 0.6;
        /* 移动端保持充满容器 */
    }
}

@media (max-width: 480px) {
    .laser-flow-container {
        opacity: 0.5;
        /* 小屏幕进一步降低透明度 */
    }
}

/* 紫色光晕效果 - 整页高度版本 */
.laser-flow-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center center,
        rgba(114, 97, 245, 0.18) 0%,
        rgba(114, 97, 245, 0.12) 30%,
        rgba(114, 97, 245, 0.06) 50%,
        transparent 70%
    );
    pointer-events: none;
    animation: laserGlow 3s ease-in-out infinite;
}

@keyframes laserGlow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}