/* style.css */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #393939; /* 深灰色背景 */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* 防止动画元素溢出时出现滚动条 */
    font-family: Arial, sans-serif; /* 通用字体 */
}

.main-container {
    position: relative; /* 作为内部绝对定位元素的参照物 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 可以给一个最大宽度，例如 width: 100%; max-width: 1000px; */
}

.logo-reveal-wrapper {
    /* 用于包裹主LOGO，如果main-container已做居中，这里可能不需要额外样式 */
}

#animatedLogo {
    width: 800px; /* 主LOGO宽度固定为700px */
    max-width: 90vw; /* 在小屏幕上允许LOGO按视口宽度缩小 */
    height: auto; /* 高度自动以保持宽高比 */
    display: block; /* 避免img标签底部可能产生的额外空白 */

    /* 初始裁剪状态：从下向上展开 */
    clip-path: inset(99.8% 0 0 0);
    opacity: 0; /* 初始透明 */

    /* LOGO边缘的蓝色效果 */
    filter: drop-shadow(0 0 5px #007bff)
            drop-shadow(0 0 10px #0056b3);

    /* 主LOGO的动画 */
    animation-name: revealFromBottomLine;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 0.2s; /* 主LOGO动画开始前的延迟 */
}

/* 主LOGO的从下到上展开动画定义 */
@keyframes revealFromBottomLine {
    0% {
        clip-path: inset(99.8% 0 0 0);
        opacity: 0;
    }
    20% {
        clip-path: inset(99.8% 0 0 0);
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* 粒子图片效果的容器 */
.particle-effects-container {
    position: absolute; /* 相对于 .main-container 定位 */
    top: 0;
    left: 0;
    width: 100%; /* 占据 .main-container 的全部空间 */
    height: 100%;
    pointer-events: none; /* 粒子通常不需要响应鼠标事件 */
}

/* 单个粒子图片的基础样式 */
.particle-image {
    position: absolute;
    width: 75px;  /* 粒子图片的基础宽度 */
    height: auto;
    opacity: 0; /* 初始完全透明，由动画控制显现 */

    /* 将元素的变换基点定位在父容器的中心 */
    left: 50%;
    top: 50%;

    /* 初始通过transform将图片实际移到屏幕下方很远的位置，并使其水平居中，同时缩小 */
    transform: translateX(-50%) translateY(200vh) scale(0.3);

    /* CSS自定义属性默认值 */
    /* 阶段1: 到达"中线附近"的目标点 (相对于容器中心点的偏移) */
    --target-midline-offset-x: 0px;
    --target-midline-offset-y: 0px;

    /* 阶段2: 从"中线附近"点开始的进一步随机移动 */
    --phase2-random-move-x: 0px;
    --phase2-random-move-y: 0px;
    --phase2-scale-factor: 1.2;

    /* 阶段3: 消失时的最终状态 (相对于阶段2结束点) */
    --phase3-final-move-x: 0px;
    --phase3-final-move-y: 0px;
    --phase3-final-scale-factor: 1.5;
}

/* 粒子图片新的动画定义：上移到随机中线点 -> 随机方向移动并变大 -> 消失 */
@keyframes moveToRandomMidlineThenMoveAndFade {
    0% { /* 初始状态 */
        opacity: 0;
        transform: translateX(-50%) translateY(200vh) scale(0.3);
    }
    10% { /* 在向上移动过程中开始变得可见 */
        opacity: 0.7;
    }
    40% { /* 阶段1结束：到达随机的"中线附近"目标点，恢复正常大小 */
        opacity: 1;
        transform: translateX(calc(-50% + var(--target-midline-offset-x)))
                   translateY(calc(-50% + var(--target-midline-offset-y)))
                   scale(1);
    }
    75% { /* 阶段2：从该点开始，向新的随机方向移动并放大 */
        opacity: 1;
        transform: translateX(calc(-50% + var(--target-midline-offset-x) + var(--phase2-random-move-x)))
                   translateY(calc(-50% + var(--target-midline-offset-y) + var(--phase2-random-move-y)))
                   scale(var(--phase2-scale-factor));
    }
    100% { /* 阶段3：继续移动（或在附近）并消失，可能进一步放大 */
        opacity: 0;
        transform: translateX(calc(-50% + var(--target-midline-offset-x) + var(--phase2-random-move-x) + var(--phase3-final-move-x)))
                   translateY(calc(-50% + var(--target-midline-offset-y) + var(--phase2-random-move-y) + var(--phase3-final-move-y)))
                   scale(var(--phase3-final-scale-factor));
    }
}

/* 用于触发新的粒子动画的类 */
.particle-image.animate-omni-movement {
    animation-name: moveToRandomMidlineThenMoveAndFade;
    animation-duration: 7s; /* 动画总时长，可以根据效果调整 */
    animation-timing-function: ease-in-out; /* 动画速度曲线 */
    animation-fill-mode: forwards; /* 动画结束后保持最后一帧的状态 */
} 